fix: sidebar text color

Greenstand · Aug 26, 2024 · eaf1b53 · eaf1b53
1 parent 03be1e3
commit eaf1b53
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git a/src/components/layout/Menu/MenuItem/LinkItem.js b/src/components/layout/Menu/MenuItem/LinkItem.js
@@ -1,4 +1,8 @@
-import { ItemButtonStyled, ItemIconStyled, LinkItemStyled } from './MenuItemStyled';
+import {
+  ItemButtonStyled,
+  ItemIconStyled,
+  LinkItemStyled,
+} from './MenuItemStyled';
 import ListItemText from '@mui/material/ListItemText';
 import * as React from 'react';
 import Badge from '@mui/material/Badge';
@@ -7,34 +11,41 @@ const StyledBadge = styled(Badge)(({ theme }) => ({
   marginLeft: theme.spacing(1),
 }));
 
-
-const LinkItem = ({ itemPath, itemName, itemIcon, isActive, open, pendingCount }) => {
+const LinkItem = ({
+  itemPath,
+  itemName,
+  itemIcon,
+  isActive,
+  open,
+  pendingCount,
+}) => {
   return (
-
     <LinkItemStyled to={itemPath} isActive={isActive}>
       <ItemButtonStyled open={open}>
-        <ItemIconStyled open={open}>
+        <ItemIconStyled open={open} isActive={isActive}>
           {itemIcon}
         </ItemIconStyled>
         <ListItemText
           primary={itemName}
-          sx={{ opacity: open ? 1 : 0, marginLeft: open ? '1rem' : 0, fontWeight: 'bold' }}
+          sx={{
+            opacity: open ? 1 : 0,
+            marginLeft: open ? '1rem' : 0,
+            fontWeight: 'bold',
+          }}
         />
-      { pendingCount &&
-              <StyledBadge
-              badgeContent={pendingCount}
-              color="error"
-              anchorOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-            > 
-            </StyledBadge>
-      }
+        {pendingCount && (
+          <StyledBadge
+            badgeContent={pendingCount}
+            color="error"
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+          ></StyledBadge>
+        )}
       </ItemButtonStyled>
     </LinkItemStyled>
-
   );
 };
 
-export default LinkItem; 
+export default LinkItem;
diff --git a/src/components/layout/Menu/MenuItem/MenuItemStyled.js b/src/components/layout/Menu/MenuItem/MenuItemStyled.js
@@ -4,9 +4,7 @@ import { NavLink } from 'react-router-dom';
 
 const LinkItemStyled = styled(NavLink)(({ theme, isActive }) => ({
   textDecoration: 'none',
-  color: isActive
-    ? theme.palette.primary.main
-    : theme.palette.primary.lightMain,
+  color: isActive ? theme.palette.stats.white : theme.palette.primary.lightMain,
   backgroundColor: isActive ? theme.palette.action.active : null,
   width: '14.5rem',
 }));
@@ -17,10 +15,11 @@ const ItemButtonStyled = styled(ListItemButton)(({ open }) => ({
   px: 2.5,
 }));
 
-const ItemIconStyled = styled(ListItemIcon)(({ open }) => ({
+const ItemIconStyled = styled(ListItemIcon)(({ open, theme, isActive }) => ({
   minWidth: 0,
   mr: open ? 3 : 'auto',
   justifyContent: 'center',
+  color: isActive ? theme.palette.stats.white : theme.palette.primary.lightMain,
 }));
 
 export { ItemButtonStyled, ItemIconStyled, LinkItemStyled };