From bd002ca31626481c981fa95ab62e959493adfe68 Mon Sep 17 00:00:00 2001
From: lohit <lohit@usebruno.com>
Date: Thu, 15 Feb 2024 15:00:18 +0530
Subject: [PATCH] feat(#BRU-7) - scrollbar styling for linux and windows
 (#1589)

---
 packages/bruno-app/src/globalStyles.js | 27 ++++++++++++++++++++++++++
 packages/bruno-app/src/themes/dark.js  |  4 ++++
 packages/bruno-app/src/themes/light.js |  4 ++++
 3 files changed, 35 insertions(+)

diff --git a/packages/bruno-app/src/globalStyles.js b/packages/bruno-app/src/globalStyles.js
index 2cc81767c..1add03cfb 100644
--- 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
index a363b9fe8..079d66403 100644
--- 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
index 6fcfcb712..1a911a966 100644
--- 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)'
   }
 };