From 4ff6bfefebaabd43845c87829ec872a8e675fe9a Mon Sep 17 00:00:00 2001
From: Polle Pas <polleps@gmail.com>
Date: Mon, 20 Nov 2023 11:42:03 +0100
Subject: [PATCH] Better scrollbar styling

---
 .../src/components/SideBar/SideBarPanel.tsx   |  1 +
 browser/data-browser/src/styling.tsx          | 20 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/browser/data-browser/src/components/SideBar/SideBarPanel.tsx b/browser/data-browser/src/components/SideBar/SideBarPanel.tsx
index 61f20409d..d7fcf0ef6 100644
--- a/browser/data-browser/src/components/SideBar/SideBarPanel.tsx
+++ b/browser/data-browser/src/components/SideBar/SideBarPanel.tsx
@@ -35,6 +35,7 @@ export const PanelDevider = styled.h2`
   display: flex;
   align-items: center;
   gap: 1ch;
+  color: ${p => p.theme.colors.text};
 
   margin-bottom: 0;
 
diff --git a/browser/data-browser/src/styling.tsx b/browser/data-browser/src/styling.tsx
index f493e4590..15f7be10e 100644
--- a/browser/data-browser/src/styling.tsx
+++ b/browser/data-browser/src/styling.tsx
@@ -21,7 +21,6 @@ export const ThemeWrapper = ({ children }: ThemeWrapperProps): JSX.Element => {
 
   return (
     <>
-      {/* @ts-ignore TODO: Check if types are fixed or upgrade styled-components to 6.0.0 */}
       <ThemeProvider key={mainColor} theme={buildTheme(darkMode, mainColor)}>
         {children}
       </ThemeProvider>
@@ -177,6 +176,25 @@ export const GlobalStyle = createGlobalStyle`
 
   * {
     box-sizing: border-box;
+    scrollbar-color: ${p => p.theme.colors.bg2} ${p => p.theme.colors.bg};
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    padding: 3px;
+    background-color: ${p =>
+      p.theme.colors.bg}; /* color of the tracking area */
+  }
+  &::-webkit-scrollbar-thumb {
+    width: 8px;
+    margin: auto;
+    background-color: ${p =>
+      p.theme.colors.bg2}; /* color of the tracking area */
+    border-radius: ${p => p.theme.radius};
+
+    &:hover {
+      background-color: ${p => darken(0.1)(p.theme.colors.bg2)};
+    }
+  }
   }
 
   body {