Merge pull request #73 from intive/P2022-1194_3-dots-menu-corrections

[P2022-1194] 3 dots menu corrections
intive · Mar 4, 2022 · 52c5e3d · 52c5e3d
2 parents 509197f + 8bcf929
commit 52c5e3d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx b/src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx
@@ -4,23 +4,21 @@ import IconButton from "@mui/material/IconButton";
 
 export const StyledMenu = styled(Menu)(({ theme }) => ({
   "& .MuiPaper-root": {
-    padding: "10px 0px",
-    color: theme.palette.grey["600"],
     borderRadius: 4,
-    boxShadow: "0px 1px 2px rgb(98 98 98 / 0.24)",
+    boxShadow: theme.customShadows.tertiary,
   },
   "& .MuiSvgIcon-root": {
     color: theme.palette.grey["500"],
     marginRight: 4,
   },
+  "& .MuiTypography-root": {
+    color: theme.palette.grey["600"],
+  },
   "& .MuiList-root": {
     padding: 0,
   },
   "& .MuiButtonBase-root": {
-    padding: "2px 8px",
-  },
-  "& .MuiButtonBase-root:not(:last-of-type)": {
-    marginBottom: 8,
+    padding: "6px 8px 6px 8px",
   },
 }));
 

diff --git a/src/components/ThreeDotsMenu/ThreeDotsMenu.tsx b/src/components/ThreeDotsMenu/ThreeDotsMenu.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
 import MenuItem from "@mui/material/MenuItem";
 
 import { StyledMenu, StyledIconButton } from "./ThreeDotsMenu.style";
@@ -66,7 +66,7 @@ export default function ThreeDotsMenu({ menuItems }: ThreeDotsMenuProps) {
             }}
           >
             {item.icon}
-            {item.label}
+            <Typography>{item.label}</Typography>
           </MenuItem>
         ))}
       </StyledMenu>

diff --git a/src/theme/mainTheme.ts b/src/theme/mainTheme.ts
@@ -13,13 +13,15 @@ declare module "@mui/material/styles" {
     customShadows: {
       primary: string;
       secondary: string;
+      tertiary: string;
     };
   }
 
   interface ThemeOptions {
     customShadows?: {
       primary?: string;
       secondary?: string;
+      tertiary?: string;
     };
   }
 }
@@ -83,6 +85,7 @@ theme = createTheme(theme, {
   customShadows: {
     primary: "0px 1px 3px rgba(98, 98, 98, 0.24)",
     secondary: "0px 8px 16px rgba(98, 98, 98, 0.24)",
+    tertiary: "0px 1px 2px rgba(98, 98, 98, 0.24)",
   },
 });