From 2049c329d77ada9a2ce4bbcdbb78f94e1f7f4cbc Mon Sep 17 00:00:00 2001
From: abhijeetChawla <84376771+abhijeetChawla@users.noreply.github.com>
Date: Sun, 17 Oct 2021 16:18:30 +0530
Subject: [PATCH] fixes Reader navbar colors when in light mode (#43)

* fixed the navbar color when in lightmode

* Used the grey options available in the Theme object
- Added the package-lock.json

* removed package-lock.json

* Changed the colors in the navabr to the closest available color in the Theme object in Material UI

* Made the sidebar close button available even the staticNavbar setting is set to true

* reverted the changes to the .gitignore
---
 src/components/navbar/ReaderNavBar.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx
index a701e2f7..d5688547 100644
--- a/src/components/navbar/ReaderNavBar.tsx
+++ b/src/components/navbar/ReaderNavBar.tsx
@@ -29,7 +29,7 @@ import Collapse from '@mui/material/Collapse';
 import Button from '@mui/material/Button';
 import NavBarContext from '../../context/NavbarContext';
 
-const useStyles = (settings: IReaderSettings) => makeStyles({
+const useStyles = (settings: IReaderSettings) => makeStyles((theme) => ({
     // main container and root div need to change classes...
     AppMainContainer: {
         display: 'none',
@@ -46,10 +46,11 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
         minWidth: '300px',
         height: '100vh',
         overflowY: 'auto',
-        backgroundColor: '#0a0b0b',
+        backgroundColor: theme.palette.background.default,
 
         '& header': {
-            backgroundColor: '#363b3d',
+            backgroundColor:
+            theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
             display: 'flex',
             alignItems: 'center',
             minHeight: '64px',
@@ -80,7 +81,7 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
             margin: '0 16px',
             height: '1px',
             border: '0',
-            backgroundColor: 'rgb(38, 41, 43)',
+            backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
         },
     },
 
@@ -128,13 +129,13 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
         height: '40px',
         width: '40px',
         borderRadius: 5,
-        backgroundColor: 'black',
+        backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
 
         '&:hover': {
-            backgroundColor: 'black',
+            backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
         },
     },
-});
+}));
 
 export const defaultReaderSettings = () => ({
     staticNav: false,
@@ -208,8 +209,6 @@ export default function ReaderNavBar(props: IProps) {
             >
                 <div className={classes.root}>
                     <header>
-                        {!settings.staticNav
-                    && (
                         <IconButton
                             edge="start"
                             color="inherit"
@@ -220,7 +219,6 @@ export default function ReaderNavBar(props: IProps) {
                         >
                             <KeyboardArrowLeftIcon />
                         </IconButton>
-                    ) }
                         <Typography variant="h1">
                             {/* {title} */}
                             {chapter.name}