feat(ui): scrollbar

src/app/profile/edit/edit.component.scss

@@ -60,11 +60,6 @@
     white-space: nowrap;
     border-bottom: 1px solid $grey-5;
 
-    &::-webkit-scrollbar {
-      height: 8px;
-      margin-right: 4px;
-    }
-
     .tab {
       padding-bottom: 1rem;
       justify-content: center;

src/app/profile/personal-offer-edition/personal-offer-edition.component.scss

@@ -68,11 +68,6 @@
 
     border-bottom: 1px solid $grey-5;
 
-    &::-webkit-scrollbar {
-      height: 8px;
-      margin-right: 4px;
-    }
-
     .tab {
       padding-bottom: 1rem;
       justify-content: center;

src/app/shared/components/v3/scrollbar/scrollbar.stories.ts

+import type { Meta, StoryObj } from '@storybook/angular';
+
+const meta: Meta = {
+  title: 'UI/Scrollbar',
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Vertical: StoryObj = {
+  render: () => ({
+    template: `<div style="width:300px; height:300px; overflow-y: scroll">
+    <div style="height:800px">${loremIpsum}</div>
+    </div>`,
+  }),
+};
+
+export const Horizontal: StoryObj = {
+  render: () => ({
+    template: `<div style="width:300px; height:300px; overflow-x: scroll">
+    <div style="width:800px">${loremIpsum}</div>
+    </div>`,
+  }),
+};
+
+const loremIpsum =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id tortor vel nulla eleifend bibendum at ac turpis. Cras odio odio, congue in ante et, euismod elementum ex. Maecenas et maximus orci. Vestibulum elit arcu, vulputate quis sem in, posuere molestie orci. Nulla odio dolor, pretium quis ex et, sodales tristique nisi. Fusce bibendum arcu a suscipit laoreet. Pellentesque porttitor dui sit amet efficitur fringilla. Etiam a diam at sapien scelerisque varius. Mauris sed augue id tellus efficitur sodales. Sed eget facilisis sapien. Maecenas ultricies sem quis luctus consequat. Nunc cursus diam dui, at aliquet augue efficitur sed. Fusce mattis pulvinar elit ac egestas. Nullam eget diam non orci aliquam mattis. Proin quis lorem libero. Nunc sit amet justo maximus, sodales ligula in, tincidunt massa. Morbi gravida venenatis massa, eu facilisis nulla fringilla eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a ornare dolor. Sed a urna et nisl iaculis cursus sit amet sed risus. Mauris lobortis diam ac orci tempus porta. Praesent pretium volutpat dolor at convallis. Ut pulvinar enim et dictum dapibus. Nulla facilisi. Vivamus tempor leo ut nibh laoreet, a consectetur dui porttitor. Etiam euismod ligula mollis varius euismod. Sed et sagittis arcu. Integer venenatis enim felis, eu semper dui imperdiet vel. Proin sit amet ullamcorper urna, a ornare nunc. Duis ut mauris non orci mattis rutrum eget vitae sem. Donec pulvinar justo ut tempus semper. Nam feugiat odio fringilla massa luctus congue. Praesent tincidunt quam sed eros lacinia pretium. Nam a elit mattis, ultricies est in, convallis magna.';

src/assets/scss/_color.scss

@@ -77,7 +77,5 @@ $app-background: $grey-9;
 $modal-background-transparent: rgba($grey-1, 0);
 $modal-background: rgba($grey-1, 0.25);
 $app-background: $grey-9;
-$scrollbar-track: rgba($grey-9, 0.65);
-$scrollbar-thumb: $grey-5;
 $focus-color: $grey-1;
 $box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);

src/styles.scss

@@ -28,21 +28,21 @@ body {
   color: $grey-1;
   background-color: $grey-10;
   ::-webkit-scrollbar {
-    width: 8px;
+    width: 4px;
+    height: 4px;
   }
   /* Track */
   ::-webkit-scrollbar-track {
-    background: $scrollbar-track;
+    background: $grey-8;
   }
   /* Handle */
   ::-webkit-scrollbar-thumb {
-    background: $scrollbar-thumb;
+    background: $grey-1;
     border-radius: 8px;
   }
   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
     background: $grey-3;
-    border-radius: 8px;
   }
 }