Skip to content

Commit 051d89e

Browse files
moysamoysa
committed
New Avatar layouts
1 parent 408d37c commit 051d89e

File tree

2 files changed

+82
-63
lines changed

2 files changed

+82
-63
lines changed

‎src/components/Avatar/Avatar.module.scss‎

Lines changed: 81 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -224,13 +224,14 @@
224224
display: none;
225225
}
226226

227-
// &.legend {
228-
// padding: 2px;
229-
// .missingBack {
230-
// width: 24px;
231-
// height: 24px;
232-
// }
233-
// }
227+
&.legend {
228+
padding: 1px;
229+
.missingBack {
230+
border: 0.5px solid var(--background-site);
231+
width: 26px;
232+
height: 26px;
233+
}
234+
}
234235
}
235236

236237
.xssAvatar {
@@ -255,24 +256,25 @@
255256
display: none;
256257
}
257258

258-
// &.legend {
259-
// padding: 2px;
260-
// .missingBack {
261-
// width: 22px;
262-
// height: 22px;
263-
// }
264-
// }
259+
&.legend {
260+
padding: 1px;
261+
.missingBack {
262+
border: 0.5px solid var(--background-site);
263+
width: 24px;
264+
height: 24px;
265+
}
266+
}
265267
}
266268

267269
.xsAvatar {
268270
@include avatar;
269271
width: 32px;
270272
height: 32px;
271-
padding: 2px;
273+
padding: 1px;
272274

273275
.missingBack {
274-
width: 28px;
275-
height: 28px;
276+
width: 30px;
277+
height: 30px;
276278
}
277279

278280
.iconBackground {
@@ -282,10 +284,11 @@
282284
}
283285

284286
&.legend {
287+
padding: 1px;
285288
.missingBack {
286-
border: 1px solid var(--background-site);
287-
// width: 28px;
288-
// height: 28px;
289+
border: 0.5px solid var(--background-site);
290+
width: 30px;
291+
height: 30px;
289292
}
290293
}
291294

@@ -309,11 +312,11 @@
309312
@include avatar;
310313
width: 30px;
311314
height: 30px;
312-
padding: 2px;
315+
padding: 1px;
313316

314317
.missingBack {
315-
width: 26px;
316-
height: 26px;
318+
width: 28px;
319+
height: 28px;
317320
}
318321

319322
.iconBackground {
@@ -323,10 +326,11 @@
323326
}
324327

325328
&.legend {
329+
padding: 1px;
326330
.missingBack {
327-
border: 1px solid var(--background-site);
328-
// width: 28px;
329-
// height: 28px;
331+
border: 0.5px solid var(--background-site);
332+
width: 28px;
333+
height: 28px;
330334
}
331335
}
332336

@@ -364,10 +368,11 @@
364368
}
365369

366370
&.legend {
371+
padding: 1px;
367372
.missingBack {
368-
border: 1px solid var(--background-site);
369-
// width: 32px;
370-
// height: 32px;
373+
border: 0.5px solid var(--background-site);
374+
width: 34px;
375+
height: 34px;
371376
}
372377
}
373378

@@ -405,13 +410,15 @@
405410
}
406411

407412
&.legend {
413+
padding: 1px;
408414
.missingBack {
409-
border: 1px solid var(--background-site);
410-
// width: 32px;
411-
// height: 32px;
415+
border: 0.5px solid var(--background-site);
416+
width: 36px;
417+
height: 36px;
412418
}
413419
}
414420

421+
415422
.liveBadge {
416423
height: 12px;
417424
gap: 2px;
@@ -444,13 +451,15 @@
444451
}
445452

446453
&.legend {
454+
padding: 1px;
447455
.missingBack {
448-
border: 1px solid var(--background-site);
449-
// width: 36px;
450-
// height: 36px;
456+
border: 0.5px solid var(--background-site);
457+
width: 38px;
458+
height: 38px;
451459
}
452460
}
453461

462+
454463
.liveBadge {
455464
height: 12px;
456465
gap: 2px;
@@ -483,10 +492,11 @@
483492
}
484493

485494
&.legend {
495+
padding: 1px;
486496
.missingBack {
487-
border: 1px solid var(--background-site);
488-
// width: 38px;
489-
// height: 38px;
497+
border: 0.5px solid var(--background-site);
498+
width: 40px;
499+
height: 40px;
490500
}
491501
}
492502

@@ -522,10 +532,11 @@
522532
}
523533

524534
&.legend {
535+
padding: 1px;
525536
.missingBack {
526-
border: 1px solid var(--background-site);
527-
// width: 40px;
528-
// height: 40px;
537+
border: 0.5px solid var(--background-site);
538+
width: 42px;
539+
height: 42px;
529540
}
530541
}
531542

@@ -562,10 +573,11 @@
562573
}
563574

564575
&.legend {
576+
padding: 3px;
565577
.missingBack {
566-
border: 1px solid var(--background-site);
567-
// width: 48px;
568-
// height: 48px;
578+
border: 0.5px solid var(--background-site);
579+
width: 44px;
580+
height: 44px;
569581
}
570582
}
571583

@@ -601,10 +613,11 @@
601613
}
602614

603615
&.legend {
616+
padding: 3px;
604617
.missingBack {
605-
border: 1px solid var(--background-site);
606-
// width: 48px;
607-
// height: 48px;
618+
border: 0.5px solid var(--background-site);
619+
width: 46px;
620+
height: 46px;
608621
}
609622
}
610623

@@ -640,10 +653,11 @@
640653
}
641654

642655
&.legend {
656+
padding: 3px;
643657
.missingBack {
644-
border: 1px solid var(--background-site);
645-
// width: 54px;
646-
// height: 54px;
658+
border: 0.5px solid var(--background-site);
659+
width: 54px;
660+
height: 54px;
647661
}
648662
}
649663

@@ -678,10 +692,11 @@
678692
}
679693

680694
&.legend {
695+
padding: 3px;
681696
.missingBack {
682-
border: 1px solid var(--background-site);
683-
// width: 58px;
684-
// height: 58px;
697+
border: 0.5px solid var(--background-site);
698+
width: 58px;
699+
height: 58px;
685700
}
686701
}
687702

@@ -718,10 +733,11 @@
718733
}
719734

720735
&.legend {
736+
padding: 4px;
721737
.missingBack {
722738
border: 1px solid var(--background-site);
723-
// width: 66px;
724-
// height: 66px;
739+
width: 66px;
740+
height: 66px;
725741
}
726742
}
727743

@@ -758,10 +774,11 @@
758774
}
759775

760776
&.legend {
777+
padding: 4px;
761778
.missingBack {
762779
border: 1px solid var(--background-site);
763-
// width: 74px;
764-
// height: 74px;
780+
width: 72px;
781+
height: 72px;
765782
}
766783
}
767784

@@ -790,10 +807,11 @@
790807
}
791808

792809
&.legend {
810+
padding: 3px;
793811
.missingBack {
794812
border: 1px solid var(--background-site);
795-
// width: 112px;
796-
// height: 112px;
813+
width: 114px;
814+
height: 114px;
797815
}
798816
}
799817

@@ -822,11 +840,11 @@
822840
}
823841

824842
&.legend {
843+
padding: 4px;
825844
.missingBack {
826-
background: none;
827-
/* border: 1px solid var(--background-site); */
828-
// width: 112px;
829-
// height: 112px;
845+
border: 1px solid var(--background-site);
846+
width: 120px;
847+
height: 120px;
830848
}
831849
}
832850

‎src/components/Avatar/Avatar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ const Avatar: Component<{
156156
case 'ml':
157157
case 'mll':
158158
case 'lg':
159+
case 's30':
159160
size = 's';
160161
break;
161162
default:

0 commit comments

Comments
 (0)