From cea86d69e8b1a2e2bbd381462cbdbba61f259d6e Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 14 Dec 2022 19:18:16 -0800
Subject: [PATCH] Increase base scrollbar size

---
 .../src/components/scroll-area/index.tsx      |  2 +-
 packages/renderer/src/styles/global.scss      | 30 +++++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/renderer/src/components/scroll-area/index.tsx b/packages/renderer/src/components/scroll-area/index.tsx
index 72552cae6..1582a74bf 100644
--- a/packages/renderer/src/components/scroll-area/index.tsx
+++ b/packages/renderer/src/components/scroll-area/index.tsx
@@ -13,7 +13,7 @@ const StyledScrollArea = styled(MantineScrollArea)`
   }
 
   & .mantine-ScrollArea-scrollbar {
-    width: 8px;
+    width: 12px;
     padding: 0;
     background: var(--scrollbar-track-bg);
   }
diff --git a/packages/renderer/src/styles/global.scss b/packages/renderer/src/styles/global.scss
index ef9b69dae..652aae2b4 100644
--- a/packages/renderer/src/styles/global.scss
+++ b/packages/renderer/src/styles/global.scss
@@ -46,8 +46,8 @@ html {
 }
 
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
 }
 
 ::-webkit-scrollbar-corner {
@@ -91,6 +91,32 @@ button {
   display: none; /* Safari and Chrome */
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.mantine-ScrollArea-thumb[data-state="visible"] {
+  animation: fadeIn 0.3s forwards;
+}
+
+.mantine-ScrollArea-scrollbar[data-state="hidden"] {
+  animation: fadeOut 0.2s forwards;
+}
+
 @font-face {
   font-family: "AnekTamil";
   src: url("../fonts/AnekTamil-Regular.ttf") format("truetype");