Implement it to PublicKeysList

pshenmic · Dec 11, 2024 · 4bff883 · 4bff883
1 parent 37bbac8
commit 4bff883
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 30 deletions.
diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.scss b/packages/frontend/src/components/publicKeys/PublicKeysList.scss
@@ -3,8 +3,9 @@
 @import '../../styles/variables.scss';
 
 .PublicKeysList {
-  container-type: inline-size;
+  @include mixins.BrandScroll();
   overflow-x: scroll;
+  container-type: inline-size;
 
   &__ScrollZone {
     width: fit-content;

diff --git a/packages/frontend/src/components/total/TotalInfo.scss b/packages/frontend/src/components/total/TotalInfo.scss
@@ -1,13 +1,8 @@
 @use '../../styles/mixins.scss';
 @import '../../styles/variables.scss';
 
-$scrollColor: $color-brand-shaded;
-$scrollBackgroundColor: rgba(0, 0, 0, .3);
-
 .TotalInfo {
-  scroll-behavior: smooth;
-  scrollbar-width: thin;
-  scrollbar-color: $scrollColor $scrollBackgroundColor;
+  @include mixins.BrandScroll();
 
   &__ContentContainer {
     margin: 0 auto;
@@ -23,28 +18,8 @@ $scrollBackgroundColor: rgba(0, 0, 0, .3);
     }
   }
 
-  &::-webkit-scrollbar {
-    height: 8px;
-    border-radius: 10px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: $scrollColor;
-    border-radius: 10px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: $scrollBackgroundColor;
-    border-radius: 10px;
-  }
-
-  @supports (scrollbar-width: thin) {
-    scrollbar-width: thin;
-    scrollbar-color: $scrollColor $scrollBackgroundColor;
-  }
-
   @media screen and (max-width: $breakpoint-lg) {
-    overflow-y: scroll;
+    overflow-y: auto;
     padding-bottom: 4px;
 
     &__ContentContainer {

diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss
@@ -424,4 +424,28 @@
       margin-bottom: 0;
     }
   }
-}
+}
+
+@mixin BrandScroll () {
+  scroll-behavior: smooth;
+  scrollbar-width: thin;
+  scrollbar-color: $scrollColor $scrollBackgroundColor;
+
+  &::-webkit-scrollbar {
+    height: 2px;
+    width: 2px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $scrollColor;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: $scrollBackgroundColor;
+  }
+
+  @supports (scrollbar-width: thin) {
+    scrollbar-width: thin;
+    scrollbar-color: $scrollColor $scrollBackgroundColor;
+  }
+}
diff --git a/packages/frontend/src/styles/variables.scss b/packages/frontend/src/styles/variables.scss
@@ -18,4 +18,6 @@ $color-brand-pressed: var(--chakra-colors-brand-pressed);
 
 $transition-time-def: .15s;
 
-$blockBackgroundBlur: blur(44px)
+
+$scrollColor: $color-brand-normal;
+$scrollBackgroundColor: rgba(255, 255, 255, .05);