refine menu item styles

danilo-leal · May 28, 2024 · e223ccc · e223ccc
1 parent 43effb6
commit e223ccc
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/docs/src/components/action/MuiLogoMenu.tsx b/docs/src/components/action/MuiLogoMenu.tsx
@@ -68,20 +68,27 @@ export default function MuiLogoMenu({ smallerMargin, marginLeft }: MuiLogoMenuPr
         anchorPosition={
           contextMenu !== null ? { top: contextMenu.mouseY, left: contextMenu.mouseX } : undefined
         }
+        sx={(theme) => ({
+          '& .MuiMenuItem-root': {
+            '& * path, .MuiSvgIcon-root': {
+              fill: (theme.vars || theme).palette.text.tertiary,
+              color: (theme.vars || theme).palette.text.tertiary,
+            },
+            '&:hover, &:focus': {
+              '& * path, .MuiSvgIcon-root': {
+                fill: (theme.vars || theme).palette.text.primary,
+                color: (theme.vars || theme).palette.text.primary,
+              },
+            },
+          },
+        })}
       >
         <MenuItem onClick={() => handleCopy(logo)}>
-          <SvgMuiLogomark
-            height={16}
-            width={18}
-            sx={(theme) => ({
-              mr: 1,
-              '> path': { fill: (theme.vars || theme).palette.text.tertiary },
-            })}
-          />
+          <SvgMuiLogomark height={16} width={18} sx={{ mr: 1 }} />
           Copy logo as SVG
         </MenuItem>
         <MenuItem onClick={() => handleCopy(logoWordmark)}>
-          <TextFieldsRoundedIcon sx={{ fontSize: '18px', mr: 1, color: 'text.tertiary' }} />
+          <TextFieldsRoundedIcon sx={{ fontSize: '18px', mr: 1 }} />
           Copy wordmark as SVG
         </MenuItem>
       </Menu>