th-171: Scroll Bar styling (#182)

* th-171: + scrollBar styles

* th-171: *  scroll bar styles renamed

* th-171: * scroll bar styles added vars

---------

Co-authored-by: Stanislav Malyshevskyi <[email protected]>

Author: AlexVlaso

frontend/src/assets/css/scroll-bar.scss

@@ -0,0 +1,18 @@
+/* Works on Firefox */
+html {
+  scrollbar-color: $scroll-bar-thumb rgba(238 239 242 / 50%);
+  scrollbar-width: thin;
+}
+
+/* Works on Chrome, Edge, and Safari */
+body::-webkit-scrollbar {
+  width: 3px;
+  background: $scroll-bar;
+  border-radius: 5px;
+  opacity: 0.5;
+}
+
+body::-webkit-scrollbar-thumb {
+  background: $scroll-bar-thumb;
+  border-radius: 5px;
+}

frontend/src/assets/css/styles.scss

@@ -3,3 +3,4 @@
 @import "./scaffolding.scss";
 @import "./typography.scss";
 @import "./animations.scss";
+@import "./scroll-bar.scss";

frontend/src/assets/css/vars.scss

@@ -17,6 +17,8 @@ $green: #00ca99;
 $background-color-grey: #f6f7f9;
 $body-background: #f6f7f9;
 $header-background: #000955;
+$scroll-bar: #e6e8eb;
+$scroll-bar-thumb: #3563ad;
 $shadow-light: 0 4px 8px -2px rgb(0 85 255 / 16%);
 $shadow: 0 2px 4px -2px rgb(0 44 132 / 6%);
 $font-family: "Plus Jakarta Sans", sans-serif;