From 2411aeae8d13bb65cda58525a1ebdb231106b056 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sat, 1 Apr 2023 20:40:01 -0700
Subject: [PATCH] Updated scrollbar styles.

---
 components/layout/AppLayout.module.css |  4 ----
 components/layout/ShareLayout.js       |  2 +-
 styles/index.css                       | 33 +++++++++++---------------
 3 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/components/layout/AppLayout.module.css b/components/layout/AppLayout.module.css
index 228d0c35..6cc9e414 100644
--- a/components/layout/AppLayout.module.css
+++ b/components/layout/AppLayout.module.css
@@ -19,7 +19,3 @@
   height: calc(100vh - 60px);
   overflow-y: auto;
 }
-
-.body::-webkit-scrollbar-track {
-  border: 0;
-}
diff --git a/components/layout/ShareLayout.js b/components/layout/ShareLayout.js
index 2e3fe3a4..9f19fda8 100644
--- a/components/layout/ShareLayout.js
+++ b/components/layout/ShareLayout.js
@@ -6,7 +6,7 @@ export default function ShareLayout({ children }) {
   return (
     <Container>
       <Header />
-      {children}
+      <main>{children}</main>
       <Footer />
     </Container>
   );
diff --git a/styles/index.css b/styles/index.css
index 3caf1263..56491f2a 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -62,34 +62,29 @@ svg {
 }
 
 ::-webkit-scrollbar {
-  width: 16px;
-  height: 16px;
-  background: transparent;
+  width: 15px;
+  background: var(--base50);
 }
 
 ::-webkit-scrollbar-track {
-  background: transparent;
-  border-right: 2px solid var(--base200);
+  border: 7px solid rgba(0, 0, 0, 0);
+  background-color: var(--base300);
+  background-clip: padding-box;
 }
 
-::-webkit-scrollbar-track:hover {
-  border-right: 2px solid var(--base300);
+body::-webkit-scrollbar-track,
+main::-webkit-scrollbar-track {
+  background-color: var(--base50);
 }
 
 ::-webkit-scrollbar-thumb {
-  position: relative;
-  border-right: 2px solid var(--base600);
+  border: 7px solid rgba(0, 0, 0, 0);
+  background-color: var(--base600);
+  background-clip: padding-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  border-right: 8px solid var(--base700);
-}
-
-::-webkit-scrollbar-thumb:horizontal {
-  position: relative;
-  border-bottom: 2px solid var(--base600);
-}
-
-::-webkit-scrollbar-thumb:horizontal:hover {
-  border-bottom: 8px solid var(--base700);
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-color: var(--base800);
+  background-clip: padding-box;
 }