From 2f103404707ee21206a6b97327e51bb9a1179748 Mon Sep 17 00:00:00 2001
From: Jakub Prymak <jprymak@gmail.com>
Date: Wed, 2 Mar 2022 17:49:05 +0100
Subject: [PATCH 1/3] add tertiary shadow to customShadows in theme

---
 src/theme/mainTheme.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/theme/mainTheme.ts b/src/theme/mainTheme.ts
index 125d545..f9b9767 100644
--- a/src/theme/mainTheme.ts
+++ b/src/theme/mainTheme.ts
@@ -13,6 +13,7 @@ declare module "@mui/material/styles" {
     customShadows: {
       primary: string;
       secondary: string;
+      tertiary: string;
     };
   }
 
@@ -20,6 +21,7 @@ declare module "@mui/material/styles" {
     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)",
   },
 });
 

From 98ba0f98707b46d4600153fe983af60f7b5f6a53 Mon Sep 17 00:00:00 2001
From: Jakub Prymak <jprymak@gmail.com>
Date: Wed, 2 Mar 2022 17:59:33 +0100
Subject: [PATCH 2/3] fix label color and leave no leftover white spaces when
 menu item is highlighted

---
 .../ThreeDotsMenu/ThreeDotsMenu.style.tsx        | 16 ++++++++++------
 src/components/ThreeDotsMenu/ThreeDotsMenu.tsx   |  4 ++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx b/src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx
index c57ef36..6d041c8 100644
--- a/src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx
+++ b/src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx
@@ -4,23 +4,27 @@ 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",
+    padding: "6px 8px 6px 8px",
+  },
+  "& .MuiButtonBase-root:first-of-type": {
+    paddingTop: "12px",
   },
-  "& .MuiButtonBase-root:not(:last-of-type)": {
-    marginBottom: 8,
+  "& .MuiButtonBase-root:last-of-type": {
+    paddingBottom: "12px",
   },
 }));
 
diff --git a/src/components/ThreeDotsMenu/ThreeDotsMenu.tsx b/src/components/ThreeDotsMenu/ThreeDotsMenu.tsx
index b490604..43d03ce 100644
--- 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>

From 8bcf9290b047db1b57c38c37541dea73a22d2a17 Mon Sep 17 00:00:00 2001
From: Jakub Prymak <jprymak@gmail.com>
Date: Thu, 3 Mar 2022 22:13:30 +0100
Subject: [PATCH 3/3] set same top and bottom paddings for all menu item rows
 in popup menu

---
 src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx b/src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx
index 6d041c8..95e9282 100644
--- a/src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx
+++ b/src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx
@@ -20,12 +20,6 @@ export const StyledMenu = styled(Menu)(({ theme }) => ({
   "& .MuiButtonBase-root": {
     padding: "6px 8px 6px 8px",
   },
-  "& .MuiButtonBase-root:first-of-type": {
-    paddingTop: "12px",
-  },
-  "& .MuiButtonBase-root:last-of-type": {
-    paddingBottom: "12px",
-  },
 }));
 
 export const StyledIconButton = styled(IconButton)(({ theme }) => ({