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
ethersphere · Oct 11, 2021 · 6c3f6c1 · 6c3f6c1
1 parent 83c6d13
commit 6c3f6c1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/src/components/SideBarStatus.tsx b/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',
         },
       },
     },

diff --git a/src/theme.tsx b/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) },