From 8543877b2aa99de12ca7a1d2bf06c4e86c86f574 Mon Sep 17 00:00:00 2001
From: abhijeetChawla <84376771+abhijeetChawla@users.noreply.github.com>
Date: Mon, 8 Nov 2021 04:30:31 +0530
Subject: [PATCH] Change color of navbar in light mode (#65)

* Changed the color of the DesktopSideBar and MobileBottomNavbar in LightMode to be more legible

* refactor
---
 .../navbar/navigation/DesktopSideBar.tsx      |  4 ++-
 .../navbar/navigation/MobileBottomBar.tsx     | 36 +++++++++++--------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/navbar/navigation/DesktopSideBar.tsx b/src/components/navbar/navigation/DesktopSideBar.tsx
index 4f4dab66..e4b396b0 100644
--- a/src/components/navbar/navigation/DesktopSideBar.tsx
+++ b/src/components/navbar/navigation/DesktopSideBar.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { ListItem, ListItemIcon, Tooltip } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 import { styled } from '@mui/system';
+import { useTheme } from '@mui/material/styles';
 
 const SideNavBarContainer = styled('div')(({ theme }) => ({
     height: '100vh',
@@ -28,10 +29,11 @@ interface IProps {
 
 export default function DesktopSideBar({ navBarItems }: IProps) {
     const location = useLocation();
+    const theme = useTheme();
 
     const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
         if (location.pathname === path) return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="large" />;
-        return <IconComponent sx={{ color: 'grey.A400' }} fontSize="large" />;
+        return <IconComponent sx={{ color: (theme.palette.mode === 'dark') ? 'grey.A400' : 'grey.600' }} fontSize="large" />;
     };
 
     return (
diff --git a/src/components/navbar/navigation/MobileBottomBar.tsx b/src/components/navbar/navigation/MobileBottomBar.tsx
index 934e98b8..212a7986 100644
--- a/src/components/navbar/navigation/MobileBottomBar.tsx
+++ b/src/components/navbar/navigation/MobileBottomBar.tsx
@@ -6,11 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import {
-    Box, ListItem,
-} from '@mui/material';
-import { styled } from '@mui/system';
+import { ListItem } from '@mui/material';
+import { styled, Box } from '@mui/system';
 import { Link as RRDLink, useLocation } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
 
 const BottomNavContainer = styled('div')(({ theme }) => ({
     bottom: 0,
@@ -39,10 +38,11 @@ interface IProps {
 
 export default function MobileBottomBar({ navBarItems }: IProps) {
     const location = useLocation();
+    const theme = useTheme();
 
     const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
         if (location.pathname === path) return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="medium" />;
-        return <IconComponent sx={{ color: 'grey.A400' }} fontSize="medium" />;
+        return <IconComponent sx={{ color: (theme.palette.mode === 'dark') ? 'grey.A400' : 'grey.600' }} fontSize="medium" />;
     };
 
     return (
@@ -55,18 +55,24 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
                 ) => (
                     <Link to={path} key={path}>
                         <ListItem disableRipple button sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
-                            <Box sx={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                alignItems: 'center',
-                                // if we are on the same path then make the icon active
-                                color: location.pathname === path
-                                    ? 'primary.main'
-                                    : 'grey.A400',
-                            }}
+                            <Box
+                                display="flex"
+                                flexDirection="column"
+                                alignItems="center"
                             >
                                 {iconFor(path, IconComponent, SelectedIconComponent)}
-                                <div style={{ fontSize: '0.65rem' }}>{title}</div>
+                                <Box sx={{
+                                    fontSize: '0.65rem',
+                                    // eslint-disable-next-line no-nested-ternary
+                                    color: location.pathname === path
+                                        ? 'primary.main'
+                                        : ((theme.palette.mode === 'dark')
+                                            ? 'grey.A400'
+                                            : 'grey.600'),
+                                }}
+                                >
+                                    {title}
+                                </Box>
                             </Box>
                         </ListItem>
                     </Link>