feature: admin-circle-list

src/styles/hubl-framework/commons/_index.scss

@@ -1,4 +1,5 @@
 @import 'colors';
+@import 'loaders';
 @import 'texts';
 @import 'borders';
 @import 'shadows';

src/styles/hubl-framework/commons/loaders.scss

@@ -0,0 +1,72 @@
+.loader {
+  margin: 0 auto;
+  position: relative;
+  width: 80px;
+  height: 20px;
+
+  &.loader-top {
+    top: 30px;
+  }
+
+  div {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: var(--color-menu-background);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+
+  &.loader-menu div {
+    width: 8px;
+    height: 8px;
+    background: var(--color-menu-text);
+  }
+
+  div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
+
+  div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+
+  div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+
+  div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+  }
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}

src/styles/hubl-framework/commons/texts.scss

@@ -19,16 +19,28 @@
     font-size: 18px;
   }
   &-normal {
-    font-weight: 400;
+    *,
+    & {
+      font-weight: 400;
+    }
   }
   &-semibold {
-    font-weight: 600;
+    *,
+    & {
+      font-weight: 600;
+    }
   }
   &-bold {
-    font-weight: 700;
+    *,
+    & {
+      font-weight: 700;
+    }
   }
   &-uppercase {
-    text-transform: uppercase;
+    *,
+    & {
+      text-transform: uppercase;
+    }
   }
   &-underline {
     text-decoration: underline;

src/styles/hubl-framework/commons/user-thumb.scss

@@ -15,7 +15,7 @@
       flex: 0 0 auto;
       height: 50px;
       width: 50px;
-      margin-right: 16px;
+      margin-right: 15px;
       border-radius: 50%;
       overflow: hidden;
 
@@ -34,6 +34,7 @@
         position: absolute;
         top: 0;
         left: 0;
+        border-radius: 50%;
       }
       >object {
         max-height: 40%;
@@ -65,8 +66,13 @@
         }
       }
 
-      .user-thumb__sub-text {
-        color: red;
+      .user-thumb-content__sub-text {
+        display: flex;
+        font-size: 12px;
+
+        &::before {
+          content: "@";
+        }
       }
     }
   }