feature: admin-circle-list

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

@@ -8,10 +8,13 @@ a {
   display: inline-block;
   padding: 0;
 
+  form {
+    display: inline-block;
+  }
+
   &.button {
-    padding: 8px 20px;
+    padding: 7.5px 20px;
     border-radius: 16.5px;
-    height: 33px;
 
     &.rounded {
       border-radius: 50%;
@@ -25,7 +28,7 @@ a {
     }
     &.icon::before {
       font-size: 15px;
-      margin-right: 10px;
+      margin-right: 6px;
     }
     &.color-primary {
       background-color: white;

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: "@";
+        }
       }
     }
   }

src/styles/hubl-framework/tables/tables.scss

@@ -1,7 +1,28 @@
 .table-wrapper {
-  overflow: auto;
   position: relative;
   width: 100%;
+  
+  /* Bottom scrollbar */
+  overflow: auto;
+  height: auto;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-heading) var(--color-grey);
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-grey);
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar {
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-heading);
+    border-radius: 10px;
+  }
 
   .table {
     border-collapse: collapse;

src/styles/index.scss

@@ -5,6 +5,7 @@
 
 
 :root {
+  color: #636363;
   font-size: 14px;
 }
 @import 'hubl-framework/_index';