ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change color of navbar in light mode (#65)

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

* refactor
This commit is contained in:
abhijeetChawla
2021-11-08 04:30:31 +05:30
committed by GitHub
parent aba6e506a2
commit 8543877b2a
2 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/navbar/navigation/DesktopSideBar.tsx
View File

@@ -9,6 +9,7 @@ import React from 'react';
import { ListItem, ListItemIcon, Tooltip } from '@mui/material'; import { ListItem, ListItemIcon, Tooltip } from '@mui/material';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { styled } from '@mui/system'; import { styled } from '@mui/system';
import { useTheme } from '@mui/material/styles';
const SideNavBarContainer = styled('div')(({ theme }) => ({ const SideNavBarContainer = styled('div')(({ theme }) => ({
height: '100vh', height: '100vh',
@@ -28,10 +29,11 @@ interface IProps {
export default function DesktopSideBar({ navBarItems }: IProps) { export default function DesktopSideBar({ navBarItems }: IProps) {
const location = useLocation(); const location = useLocation();
const theme = useTheme();
const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => { const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
if (location.pathname === path) return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="large" />; 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 ( return (

36
src/components/navbar/navigation/MobileBottomBar.tsx
View File

@@ -6,11 +6,10 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import React from 'react';
import { import { ListItem } from '@mui/material';
Box, ListItem, import { styled, Box } from '@mui/system';
} from '@mui/material';
import { styled } from '@mui/system';
import { Link as RRDLink, useLocation } from 'react-router-dom'; import { Link as RRDLink, useLocation } from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
const BottomNavContainer = styled('div')(({ theme }) => ({ const BottomNavContainer = styled('div')(({ theme }) => ({
bottom: 0, bottom: 0,
@@ -39,10 +38,11 @@ interface IProps {
export default function MobileBottomBar({ navBarItems }: IProps) { export default function MobileBottomBar({ navBarItems }: IProps) {
const location = useLocation(); const location = useLocation();
const theme = useTheme();
const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => { const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
if (location.pathname === path) return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="medium" />; 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 ( return (
@@ -55,18 +55,24 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
) => ( ) => (
<Link to={path} key={path}> <Link to={path} key={path}>
<ListItem disableRipple button sx={{ justifyContent: 'center', padding: '8px' }} key={title}> <ListItem disableRipple button sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
<Box sx={{ <Box
display: 'flex', display="flex"
flexDirection: 'column', flexDirection="column"
alignItems: 'center', alignItems="center"
// if we are on the same path then make the icon active
color: location.pathname === path
? 'primary.main'
: 'grey.A400',
}}
> >
{iconFor(path, IconComponent, SelectedIconComponent)} {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> </Box>
</ListItem> </ListItem>
</Link> </Link>