feat(#BRU-7) - scrollbar styling for linux and windows (usebruno#1589)

rsilvr · Feb 15, 2024 · bd002ca · bd002ca
1 parent 5fece08
commit bd002ca
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git a/packages/bruno-app/src/globalStyles.js b/packages/bruno-app/src/globalStyles.js
@@ -159,6 +159,33 @@ const GlobalStyle = createGlobalStyle`
     }
   }
 
+
+  // scrollbar styling
+  // the below media query target non-macos devices
+  // (macos scrollbar styling is the ideal style reference)
+  @media not all and (pointer: coarse) {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: ${(props) => props.theme.scrollbar.color};
+    }
+    
+    *::-webkit-scrollbar {
+      width: 5px;
+    }
+    
+    *::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 5px;
+    }
+    
+    *::-webkit-scrollbar-thumb {
+      background-color: ${(props) => props.theme.scrollbar.color};
+      border-radius: 14px;
+      border: 3px solid ${(props) => props.theme.scrollbar.color};
+    }
+  }
+
+
   // codemirror
   .CodeMirror {
     .cm-variable-valid {

diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
@@ -238,6 +238,10 @@ const darkTheme = {
 
   plainGrid: {
     hoverBg: '#3D3D3D'
+  },
+
+  scrollbar: {
+    color: 'rgb(52 51 49)'
   }
 };
 

diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
@@ -242,6 +242,10 @@ const lightTheme = {
 
   plainGrid: {
     hoverBg: '#f4f4f4'
+  },
+
+  scrollbar: {
+    color: 'rgb(152 151 149)'
   }
 };