From 1bc4f44128930568ad185748a7af8943774f29e5 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Fri, 15 Jan 2021 18:59:05 +0100
Subject: [PATCH] Update scroll bars styles

---
 components/GlobalStyles.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/components/GlobalStyles.tsx b/components/GlobalStyles.tsx
index 975a7c5..1b23e23 100644
--- a/components/GlobalStyles.tsx
+++ b/components/GlobalStyles.tsx
@@ -16,6 +16,20 @@ const Global = createGlobalStyle<Props>`
 		outline: none;
 		user-select: text;
 		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+		
+		@media(max-width: 768px) {
+			overflow-x: scroll;
+		}
+
+		&::-webkit-scrollbar {
+			width: 0;
+			height: 0; 
+			background: transparent; 
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: transparent;
+		}
 
 		&::selection {
 			background: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
@@ -37,11 +51,12 @@ const Global = createGlobalStyle<Props>`
 	}
 
 	body::-webkit-scrollbar {
-		width: 0.5rem;
+		width: 0.5rem !important;
 	}
 	
 	body::-webkit-scrollbar-thumb {
-		background-color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
+		background-color: ${({ dark, theme }) =>
+			dark ? theme.colors.dark.text : theme.colors.light.text} !important;
 	}
 `;