Fix avatars

Author: moysa

src/components/Avatar/Avatar.module.scss

@@ -154,10 +154,11 @@
   @include avatar;
   width: 18px;
   height: 18px;
+  padding: 1px;
 
   .missingBack {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
   }
 
   .iconBackground {
@@ -171,12 +172,11 @@
   }
 
   &.legend {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    width: 18px;
+    height: 18px;
     .missingBack {
-      width: 14px;
-      height: 14px;
+      width: 16px;
+      height: 16px;
     }
   }
 }
@@ -188,8 +188,8 @@
   padding: 1px;
 
   .missingBack {
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
   }
 
   .iconBackground {
@@ -203,12 +203,13 @@
   }
 
   &.legend {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    width: 22px;
+    height: 22px;
+
     .missingBack {
-      width: 18px;
-      height: 18px;
+      width: 20px;
+      height: 20px;
+      border: 0.5px solid var(--background-site);
     }
   }
 }
@@ -220,8 +221,8 @@
   padding: 1px;
 
   .missingBack {
-    width: 24px;
-    height: 24px;
+    width: 26px;
+    height: 26px;
   }
 
   .iconBackground {
@@ -235,14 +236,17 @@
   }
 
   &.legend {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    width: 28px;
+    height: 28px;
+    // padding: 0;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
 
     .missingBack {
       border: 0.5px solid var(--background-site);
-      width: 24px;
-      height: 24px;
+      width: 26px;
+      height: 26px;
     }
   }
 }
@@ -255,8 +259,8 @@
 
   .missingBack {
     border: 1px solid var(--background-site);
-    width: 22px;
-    height: 22px;
+    width: 24px;
+    height: 24px;
   }
 
   .iconBackground {
@@ -270,14 +274,16 @@
   }
 
   &.legend {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    width: 26px;
+    height: 26px;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
 
     .missingBack {
       border: 0.5px solid var(--background-site);
-      width: 22px;
-      height: 22px;
+      width: 24px;
+      height: 24px;
     }
   }
 }
@@ -421,7 +427,7 @@
   @include avatar;
   width: 38px;
   height: 38px;
-  padding: 1px;
+  padding: 2px;
 
   .missingBack {
     width: 34px;
@@ -435,9 +441,9 @@
   }
 
   &.legend {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
 
     .missingBack {
       border: 0.5px solid var(--background-site);