fix: hover state style of ListItems which are clickable to be in line with other buttons (#223)

* fix: hover state style of ListItems which are clickable to be in line with other buttons

* fix: hover state of the SideBarStatus button

src/components/SideBarStatus.tsx

@@ -33,10 +33,12 @@ const useStyles = makeStyles((theme: Theme) =>
     button: {
       '&:hover': {
         backgroundColor: '#2c2c2c',
+        color: 'white',
 
         // https://github.com/mui-org/material-ui/issues/22543
         '@media (hover: none)': {
           backgroundColor: '#2c2c2c',
+          color: 'white',
         },
       },
     },

src/theme.tsx

@@ -9,6 +9,19 @@ declare module '@material-ui/core/styles/createPalette' {
 
 // Overwriting default components styles
 const componentsOverrides = (theme: Theme) => ({
+  MuiListItem: {
+    button: {
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: '#fcf2e8',
+          color: theme.palette.primary.main,
+        },
+      },
+    },
+  },
   MuiContainer: {
     root: { padding: theme.spacing(8) },
     maxWidthXs: { padding: theme.spacing(8) },