From 4bff8831a4c6180581741bdc3bf46b61e2b36c71 Mon Sep 17 00:00:00 2001
From: Alexey <andreewsky.alexey@gmail.com>
Date: Wed, 11 Dec 2024 20:30:12 +0300
Subject: [PATCH] Implement it to PublicKeysList

---
 .../components/publicKeys/PublicKeysList.scss |  3 +-
 .../src/components/total/TotalInfo.scss       | 29 ++-----------------
 packages/frontend/src/styles/mixins.scss      | 26 ++++++++++++++++-
 packages/frontend/src/styles/variables.scss   |  4 ++-
 4 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/src/components/publicKeys/PublicKeysList.scss b/packages/frontend/src/components/publicKeys/PublicKeysList.scss
index f05de5067..f4536111f 100644
--- 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
index 4bf790a84..1b3fa6972 100644
--- 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
index ddc6b00bf..46f981480 100644
--- a/packages/frontend/src/styles/mixins.scss
+++ b/packages/frontend/src/styles/mixins.scss
@@ -424,4 +424,28 @@
       margin-bottom: 0;
     }
   }
-}
\ No newline at end of file
+}
+
+@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
index 202857b6e..791051ad8 100644
--- 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)
\ No newline at end of file
+
+$scrollColor: $color-brand-normal;
+$scrollBackgroundColor: rgba(255, 255, 255, .05);