From ca9c6718862cecf35857ccbd090cfa4fe652837e Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Sat, 23 Jan 2021 02:53:00 +0330
Subject: [PATCH] more css hacks: scroll bar

---
 webUI/react/src/App.tsx                  | 17 ++++++++++++++++-
 webUI/react/src/components/MangaGrid.tsx |  2 +-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/webUI/react/src/App.tsx b/webUI/react/src/App.tsx
index 246876d..96d3084 100644
--- a/webUI/react/src/App.tsx
+++ b/webUI/react/src/App.tsx
@@ -28,6 +28,21 @@ export default function App() {
             palette: {
                 type: darkTheme ? 'dark' : 'light',
             },
+            overrides: {
+                MuiCssBaseline: {
+                    '@global': {
+                        '*::-webkit-scrollbar': {
+                            width: '10px',
+                            background: darkTheme ? '#222' : '#e1e1e1',
+
+                        },
+                        '*::-webkit-scrollbar-thumb': {
+                            background: darkTheme ? '#111' : '#aaa',
+                            borderRadius: '5px',
+                        },
+                    },
+                },
+            },
         }),
         [darkTheme],
     );
@@ -41,7 +56,7 @@ export default function App() {
                     <DarkTheme.Provider value={darkThemeContext}>
                         <NavBar />
                     </DarkTheme.Provider>
-                    <Container maxWidth={false} disableGutters style={{ padding: '5px' }}>
+                    <Container maxWidth={false} disableGutters>
                         <Switch>
                             <Route path="/sources/:sourceId/search/">
                                 <Search />
diff --git a/webUI/react/src/components/MangaGrid.tsx b/webUI/react/src/components/MangaGrid.tsx
index 4f7c20d..e50f8aa 100644
--- a/webUI/react/src/components/MangaGrid.tsx
+++ b/webUI/react/src/components/MangaGrid.tsx
@@ -44,7 +44,7 @@ export default function MangaGrid(props: IProps) {
     }
 
     return (
-        <Grid container spacing={1} xs={12} style={{ margin: 0 }}>
+        <Grid container spacing={1} xs={12} style={{ margin: 0, padding: '5px' }}>
             {mapped}
         </Grid>
     );