From 235819c3488cfd0d50fac11223a1c10858bc86b7 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 12:44:17 +0530
Subject: [PATCH 01/12] refactor overflow menu

---
 .../AllCollections/CollectionSort/index.tsx   | 38 +++------------
 src/components/OverflowMenu.tsx               | 48 +++++++++++++++++++
 src/contexts/overflowMenu.tsx                 |  5 ++
 3 files changed, 60 insertions(+), 31 deletions(-)
 create mode 100644 src/components/OverflowMenu.tsx
 create mode 100644 src/contexts/overflowMenu.tsx

diff --git a/src/components/Collections/AllCollections/CollectionSort/index.tsx b/src/components/Collections/AllCollections/CollectionSort/index.tsx
index 5013cd95b..c77c0bb0e 100644
--- a/src/components/Collections/AllCollections/CollectionSort/index.tsx
+++ b/src/components/Collections/AllCollections/CollectionSort/index.tsx
@@ -1,44 +1,20 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { COLLECTION_SORT_BY } from 'constants/collection';
-import Menu from '@mui/material/Menu';
-import { IconButton, styled } from '@mui/material';
 import SortIcon from '@mui/icons-material/Sort';
 import CollectionSortOptions from './options';
+import OverflowMenu from 'components/OverflowMenu';
 
 export interface CollectionSortProps {
     setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void;
     activeSortBy: COLLECTION_SORT_BY;
 }
 
-const StyledMenu = styled(Menu)`
-    & .MuiPaper-root {
-        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
-    }
-`;
-
 export default function CollectionSort(props: CollectionSortProps) {
-    const [sortByEl, setSortByEl] = useState(null);
-    const handleClose = () => setSortByEl(null);
     return (
-        <>
-            <IconButton
-                onClick={(event) => setSortByEl(event.currentTarget)}
-                aria-controls={sortByEl ? 'collection-sort' : undefined}
-                aria-haspopup="true"
-                aria-expanded={sortByEl ? 'true' : undefined}>
-                <SortIcon />
-            </IconButton>
-            <StyledMenu
-                id="collection-sort"
-                anchorEl={sortByEl}
-                open={Boolean(sortByEl)}
-                onClose={handleClose}
-                MenuListProps={{
-                    disablePadding: true,
-                    'aria-labelledby': 'collection-sort',
-                }}>
-                <CollectionSortOptions {...props} close={handleClose} />
-            </StyledMenu>
-        </>
+        <OverflowMenu
+            ariaControls="collection-sort"
+            menuTriggerIcon={<SortIcon />}>
+            <CollectionSortOptions {...props} />
+        </OverflowMenu>
     );
 }
diff --git a/src/components/OverflowMenu.tsx b/src/components/OverflowMenu.tsx
new file mode 100644
index 000000000..a6407e309
--- /dev/null
+++ b/src/components/OverflowMenu.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import Menu from '@mui/material/Menu';
+import { IconButton, styled } from '@mui/material';
+import { OverflowMenuContext } from 'contexts/overflowMenu';
+
+export interface Iprops {
+    menuTriggerIcon: React.ReactNode;
+    children?: React.ReactNode;
+    ariaControls: string;
+}
+
+const StyledMenu = styled(Menu)`
+    & .MuiPaper-root {
+        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16),
+            0px 3px 6px rgba(0, 0, 0, 0.12);
+    }
+`;
+
+export default function OverflowMenu({
+    children,
+    ariaControls,
+    menuTriggerIcon,
+}: Iprops) {
+    const [sortByEl, setSortByEl] = useState(null);
+    const handleClose = () => setSortByEl(null);
+    return (
+        <OverflowMenuContext.Provider value={{ close: handleClose }}>
+            <IconButton
+                onClick={(event) => setSortByEl(event.currentTarget)}
+                aria-controls={sortByEl ? ariaControls : undefined}
+                aria-haspopup="true"
+                aria-expanded={sortByEl ? 'true' : undefined}>
+                {menuTriggerIcon}
+            </IconButton>
+            <StyledMenu
+                id={ariaControls}
+                anchorEl={sortByEl}
+                open={Boolean(sortByEl)}
+                onClose={handleClose}
+                MenuListProps={{
+                    disablePadding: true,
+                    'aria-labelledby': ariaControls,
+                }}>
+                {children}
+            </StyledMenu>
+        </OverflowMenuContext.Provider>
+    );
+}
diff --git a/src/contexts/overflowMenu.tsx b/src/contexts/overflowMenu.tsx
new file mode 100644
index 000000000..7bc4df9b5
--- /dev/null
+++ b/src/contexts/overflowMenu.tsx
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+export const OverflowMenuContext = createContext({
+    close: () => null,
+});

From 13d5e9092696630216f46027c6e3d1d6fc7a460b Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 12:44:50 +0530
Subject: [PATCH 02/12] update to use overflowMenu context

---
 .../AllCollections/CollectionSort/optionCreator.tsx   | 11 +++++------
 .../AllCollections/CollectionSort/options.tsx         |  5 +++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
index 32b859211..b87c9525d 100644
--- a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
+++ b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
@@ -1,16 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { MenuItem, ListItemIcon, ListItemText } from '@mui/material';
 import { COLLECTION_SORT_BY } from 'constants/collection';
 import TickIcon from '@mui/icons-material/Done';
 import { CollectionSortProps } from '.';
-
-export interface SortOptionProps extends CollectionSortProps {
-    close: () => void;
-}
+import { OverflowMenuContext } from 'contexts/overflowMenu';
 
 const SortByOptionCreator =
-    ({ setCollectionSortBy, activeSortBy, close }: SortOptionProps) =>
+    ({ setCollectionSortBy, activeSortBy }: CollectionSortProps) =>
     (props: { sortBy: COLLECTION_SORT_BY; children: any }) => {
+        const { close } = useContext(OverflowMenuContext);
+
         const handleClick = () => {
             setCollectionSortBy(props.sortBy);
             close();
diff --git a/src/components/Collections/AllCollections/CollectionSort/options.tsx b/src/components/Collections/AllCollections/CollectionSort/options.tsx
index cb6e7c5d3..53faea2c8 100644
--- a/src/components/Collections/AllCollections/CollectionSort/options.tsx
+++ b/src/components/Collections/AllCollections/CollectionSort/options.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import { MenuList } from '@mui/material';
 import { COLLECTION_SORT_BY } from 'constants/collection';
 import constants from 'utils/strings/constants';
-import SortByOptionCreator, { SortOptionProps } from './optionCreator';
+import SortByOptionCreator from './optionCreator';
+import { CollectionSortProps } from '.';
 
-export default function CollectionSortOptions(props: SortOptionProps) {
+export default function CollectionSortOptions(props: CollectionSortProps) {
     const SortByOption = SortByOptionCreator(props);
 
     return (

From e9f0484c97b76685c9325d6eebc3e22b92ee4fdb Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 13:05:56 +0530
Subject: [PATCH 03/12] update typography

---
 src/themes/darkThemeOptions.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/themes/darkThemeOptions.tsx b/src/themes/darkThemeOptions.tsx
index 61463bd34..72be0ec4b 100644
--- a/src/themes/darkThemeOptions.tsx
+++ b/src/themes/darkThemeOptions.tsx
@@ -155,15 +155,15 @@ const darkThemeOptions = createTheme({
     typography: {
         body1: {
             fontSize: '16px',
-            lineHeight: '24px',
+            lineHeight: '20px',
         },
         body2: {
             fontSize: '14px',
-            lineHeight: '20px',
+            lineHeight: '17px',
         },
         button: {
             fontSize: '16px',
-            lineHeight: '19.36px',
+            lineHeight: '20px',
             fontWeight: 'bold',
         },
         title: {

From 468772217708e1e39b65c59c5641103fcd659e3d Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 13:16:19 +0530
Subject: [PATCH 04/12] fix overflow menu positioning

---
 src/components/OverflowMenu.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/OverflowMenu.tsx b/src/components/OverflowMenu.tsx
index a6407e309..c95ae5c1a 100644
--- a/src/components/OverflowMenu.tsx
+++ b/src/components/OverflowMenu.tsx
@@ -40,6 +40,14 @@ export default function OverflowMenu({
                 MenuListProps={{
                     disablePadding: true,
                     'aria-labelledby': ariaControls,
+                }}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                }}
+                transformOrigin={{
+                    vertical: 'center',
+                    horizontal: 'right',
                 }}>
                 {children}
             </StyledMenu>

From e2994b1b58b30859ce8433dc6a8bf40621922b32 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 13:52:31 +0530
Subject: [PATCH 05/12] add overflow menu components

---
 .../menu.tsx}                                 |  0
 src/components/OverflowMenu/option.tsx        | 40 +++++++++++++++++++
 2 files changed, 40 insertions(+)
 rename src/components/{OverflowMenu.tsx => OverflowMenu/menu.tsx} (100%)
 create mode 100644 src/components/OverflowMenu/option.tsx

diff --git a/src/components/OverflowMenu.tsx b/src/components/OverflowMenu/menu.tsx
similarity index 100%
rename from src/components/OverflowMenu.tsx
rename to src/components/OverflowMenu/menu.tsx
diff --git a/src/components/OverflowMenu/option.tsx b/src/components/OverflowMenu/option.tsx
new file mode 100644
index 000000000..181860393
--- /dev/null
+++ b/src/components/OverflowMenu/option.tsx
@@ -0,0 +1,40 @@
+import {
+    MenuItem,
+    ListItemIcon,
+    ListItemText,
+    ButtonProps,
+} from '@mui/material';
+import React from 'react';
+
+interface Iprops {
+    handleClick: () => void;
+    color: ButtonProps['color'];
+    startIcon: React.ReactNode;
+    label: string;
+}
+export function OverflowMenuOption({
+    handleClick,
+    color,
+    startIcon,
+    label,
+}: Iprops) {
+    return (
+        <MenuItem
+            onClick={handleClick}
+            sx={{
+                color: (theme) => theme.palette[color].main,
+                padding: '12px',
+            }}>
+            <ListItemIcon
+                sx={{
+                    color: 'inherit',
+                    padding: '0',
+                    paddingRight: '12px',
+                    fontSize: '20px',
+                }}>
+                {startIcon}
+            </ListItemIcon>
+            <ListItemText>{label}</ListItemText>
+        </MenuItem>
+    );
+}

From 3fc5b1dfaeb9dd74a8b99244291f14bb859a0bf5 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 14:34:24 +0530
Subject: [PATCH 06/12] update menu option

---
 src/components/OverflowMenu/option.tsx | 43 ++++++++++++--------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/components/OverflowMenu/option.tsx b/src/components/OverflowMenu/option.tsx
index 181860393..b94e00a5d 100644
--- a/src/components/OverflowMenu/option.tsx
+++ b/src/components/OverflowMenu/option.tsx
@@ -1,40 +1,37 @@
-import {
-    MenuItem,
-    ListItemIcon,
-    ListItemText,
-    ButtonProps,
-} from '@mui/material';
+import { MenuItem, ListItemIcon, ButtonProps, Typography } from '@mui/material';
 import React from 'react';
 
 interface Iprops {
-    handleClick: () => void;
-    color: ButtonProps['color'];
-    startIcon: React.ReactNode;
-    label: string;
+    onClick: () => void;
+    color?: ButtonProps['color'];
+    startIcon?: React.ReactNode;
+    label: any;
 }
 export function OverflowMenuOption({
-    handleClick,
-    color,
+    onClick,
+    color = 'primary',
     startIcon,
     label,
 }: Iprops) {
     return (
         <MenuItem
-            onClick={handleClick}
+            onClick={onClick}
             sx={{
                 color: (theme) => theme.palette[color].main,
                 padding: '12px',
             }}>
-            <ListItemIcon
-                sx={{
-                    color: 'inherit',
-                    padding: '0',
-                    paddingRight: '12px',
-                    fontSize: '20px',
-                }}>
-                {startIcon}
-            </ListItemIcon>
-            <ListItemText>{label}</ListItemText>
+            {startIcon && (
+                <ListItemIcon
+                    sx={{
+                        color: 'inherit',
+                        padding: '0',
+                        paddingRight: '12px',
+                        fontSize: '20px',
+                    }}>
+                    {startIcon}
+                </ListItemIcon>
+            )}
+            <Typography variant="button">{label}</Typography>
         </MenuItem>
     );
 }

From f60abbe04b7cbd53d6cc6168d6fee970d9cba19f Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 14:34:57 +0530
Subject: [PATCH 07/12] use overflow menu

---
 .../AllCollections/CollectionSort/index.tsx   |  2 +-
 .../CollectionSort/optionCreator.tsx          | 16 ++++-----
 .../AllCollections/CollectionSort/options.tsx |  5 ++-
 .../CollectionShare/sharees/row.tsx           | 34 +++++++++++++------
 src/themes/darkThemeOptions.tsx               |  1 +
 5 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/components/Collections/AllCollections/CollectionSort/index.tsx b/src/components/Collections/AllCollections/CollectionSort/index.tsx
index c77c0bb0e..da49dca56 100644
--- a/src/components/Collections/AllCollections/CollectionSort/index.tsx
+++ b/src/components/Collections/AllCollections/CollectionSort/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { COLLECTION_SORT_BY } from 'constants/collection';
 import SortIcon from '@mui/icons-material/Sort';
 import CollectionSortOptions from './options';
-import OverflowMenu from 'components/OverflowMenu';
+import OverflowMenu from 'components/OverflowMenu/menu';
 
 export interface CollectionSortProps {
     setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void;
diff --git a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
index b87c9525d..ab844a2f0 100644
--- a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
+++ b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { MenuItem, ListItemIcon, ListItemText } from '@mui/material';
 import { COLLECTION_SORT_BY } from 'constants/collection';
 import TickIcon from '@mui/icons-material/Done';
 import { CollectionSortProps } from '.';
 import { OverflowMenuContext } from 'contexts/overflowMenu';
+import { OverflowMenuOption } from 'components/OverflowMenu/option';
 
 const SortByOptionCreator =
     ({ setCollectionSortBy, activeSortBy }: CollectionSortProps) =>
@@ -14,15 +14,13 @@ const SortByOptionCreator =
             setCollectionSortBy(props.sortBy);
             close();
         };
+
         return (
-            <MenuItem onClick={handleClick} style={{ paddingLeft: '5px' }}>
-                <ListItemIcon style={{ minWidth: '25px' }}>
-                    {activeSortBy === props.sortBy && (
-                        <TickIcon sx={{ fontSize: 16 }} />
-                    )}
-                </ListItemIcon>
-                <ListItemText>{props.children}</ListItemText>
-            </MenuItem>
+            <OverflowMenuOption
+                onClick={handleClick}
+                startIcon={activeSortBy === props.sortBy && <TickIcon />}
+                label={props.children}
+            />
         );
     };
 
diff --git a/src/components/Collections/AllCollections/CollectionSort/options.tsx b/src/components/Collections/AllCollections/CollectionSort/options.tsx
index 53faea2c8..27d0a8b43 100644
--- a/src/components/Collections/AllCollections/CollectionSort/options.tsx
+++ b/src/components/Collections/AllCollections/CollectionSort/options.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { MenuList } from '@mui/material';
 import { COLLECTION_SORT_BY } from 'constants/collection';
 import constants from 'utils/strings/constants';
 import SortByOptionCreator from './optionCreator';
@@ -9,7 +8,7 @@ export default function CollectionSortOptions(props: CollectionSortProps) {
     const SortByOption = SortByOptionCreator(props);
 
     return (
-        <MenuList>
+        <>
             <SortByOption sortBy={COLLECTION_SORT_BY.NAME}>
                 {constants.SORT_BY_NAME}
             </SortByOption>
@@ -22,6 +21,6 @@ export default function CollectionSortOptions(props: CollectionSortProps) {
             <SortByOption sortBy={COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING}>
                 {constants.SORT_BY_UPDATION_TIME_DESCENDING}
             </SortByOption>
-        </MenuList>
+        </>
     );
 }
diff --git a/src/components/Collections/CollectionShare/sharees/row.tsx b/src/components/Collections/CollectionShare/sharees/row.tsx
index 4ea150a9a..a4213f8c8 100644
--- a/src/components/Collections/CollectionShare/sharees/row.tsx
+++ b/src/components/Collections/CollectionShare/sharees/row.tsx
@@ -1,22 +1,34 @@
 import React from 'react';
-import { IconButton } from '@mui/material';
 import { SpaceBetweenFlex } from 'components/Container';
 import { User } from 'types/user';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import OverflowMenu from 'components/OverflowMenu/menu';
+
+import NotInterestedIcon from '@mui/icons-material/NotInterested';
+import constants from 'utils/strings/constants';
+import { OverflowMenuOption } from 'components/OverflowMenu/option';
 
 interface IProps {
     sharee: User;
     collectionUnshare: (sharee: User) => void;
 }
-const ShareeRow = ({ sharee, collectionUnshare }: IProps) => (
-    <SpaceBetweenFlex>
-        {sharee.email}
-        <IconButton
-            sx={{ ml: 2, color: 'text.secondary' }}
-            onClick={() => collectionUnshare(sharee)}>
-            <MoreHorizIcon />
-        </IconButton>
-    </SpaceBetweenFlex>
-);
+const ShareeRow = ({ sharee, collectionUnshare }: IProps) => {
+    const handleClick = () => collectionUnshare(sharee);
+    return (
+        <SpaceBetweenFlex>
+            {sharee.email}
+            <OverflowMenu
+                ariaControls={`email-share-${sharee.email}`}
+                menuTriggerIcon={<MoreHorizIcon />}>
+                <OverflowMenuOption
+                    color="danger"
+                    onClick={handleClick}
+                    startIcon={<NotInterestedIcon />}
+                    label={constants.REMOVE}
+                />
+            </OverflowMenu>
+        </SpaceBetweenFlex>
+    );
+};
 
 export default ShareeRow;
diff --git a/src/themes/darkThemeOptions.tsx b/src/themes/darkThemeOptions.tsx
index 72be0ec4b..667ddace5 100644
--- a/src/themes/darkThemeOptions.tsx
+++ b/src/themes/darkThemeOptions.tsx
@@ -165,6 +165,7 @@ const darkThemeOptions = createTheme({
             fontSize: '16px',
             lineHeight: '20px',
             fontWeight: 'bold',
+            textTransform: 'none',
         },
         title: {
             fontSize: '32px',

From 358588b43d19f983f730ec096a5729ca4eecc556 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 14:37:04 +0530
Subject: [PATCH 08/12] move menu style to overflow menu component

---
 src/components/OverflowMenu/menu.tsx | 5 +++++
 src/themes/darkThemeOptions.tsx      | 9 ---------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/OverflowMenu/menu.tsx b/src/components/OverflowMenu/menu.tsx
index c95ae5c1a..fd21be0bb 100644
--- a/src/components/OverflowMenu/menu.tsx
+++ b/src/components/OverflowMenu/menu.tsx
@@ -11,9 +11,14 @@ export interface Iprops {
 
 const StyledMenu = styled(Menu)`
     & .MuiPaper-root {
+        margin: 16px;
         box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16),
             0px 3px 6px rgba(0, 0, 0, 0.12);
     }
+    & .MuiList-root {
+        padding: 0;
+        border: none;
+    }
 `;
 
 export default function OverflowMenu({
diff --git a/src/themes/darkThemeOptions.tsx b/src/themes/darkThemeOptions.tsx
index 667ddace5..e478c1770 100644
--- a/src/themes/darkThemeOptions.tsx
+++ b/src/themes/darkThemeOptions.tsx
@@ -77,15 +77,6 @@ const darkThemeOptions = createTheme({
                 },
             },
         },
-        MuiMenu: {
-            styleOverrides: {
-                paper: { margin: '10px' },
-                list: {
-                    padding: 0,
-                    border: 'none',
-                },
-            },
-        },
 
         MuiButton: {
             defaultProps: {

From 7c4bae7ac3d5cb6082a4536fc42a5a7f79a0f497 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 14:43:52 +0530
Subject: [PATCH 09/12] move label to children

---
 .../AllCollections/CollectionSort/optionCreator.tsx         | 6 +++---
 src/components/Collections/CollectionShare/sharees/row.tsx  | 6 +++---
 src/components/OverflowMenu/option.tsx                      | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
index ab844a2f0..9d0e1e577 100644
--- a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
+++ b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
@@ -18,9 +18,9 @@ const SortByOptionCreator =
         return (
             <OverflowMenuOption
                 onClick={handleClick}
-                startIcon={activeSortBy === props.sortBy && <TickIcon />}
-                label={props.children}
-            />
+                startIcon={activeSortBy === props.sortBy && <TickIcon />}>
+                {props.children}
+            </OverflowMenuOption>
         );
     };
 
diff --git a/src/components/Collections/CollectionShare/sharees/row.tsx b/src/components/Collections/CollectionShare/sharees/row.tsx
index a4213f8c8..6eac8ea1d 100644
--- a/src/components/Collections/CollectionShare/sharees/row.tsx
+++ b/src/components/Collections/CollectionShare/sharees/row.tsx
@@ -23,9 +23,9 @@ const ShareeRow = ({ sharee, collectionUnshare }: IProps) => {
                 <OverflowMenuOption
                     color="danger"
                     onClick={handleClick}
-                    startIcon={<NotInterestedIcon />}
-                    label={constants.REMOVE}
-                />
+                    startIcon={<NotInterestedIcon />}>
+                    {constants.REMOVE}
+                </OverflowMenuOption>
             </OverflowMenu>
         </SpaceBetweenFlex>
     );
diff --git a/src/components/OverflowMenu/option.tsx b/src/components/OverflowMenu/option.tsx
index b94e00a5d..35b117ef3 100644
--- a/src/components/OverflowMenu/option.tsx
+++ b/src/components/OverflowMenu/option.tsx
@@ -5,13 +5,13 @@ interface Iprops {
     onClick: () => void;
     color?: ButtonProps['color'];
     startIcon?: React.ReactNode;
-    label: any;
+    children?: any;
 }
 export function OverflowMenuOption({
     onClick,
     color = 'primary',
     startIcon,
-    label,
+    children,
 }: Iprops) {
     return (
         <MenuItem
@@ -31,7 +31,7 @@ export function OverflowMenuOption({
                     {startIcon}
                 </ListItemIcon>
             )}
-            <Typography variant="button">{label}</Typography>
+            <Typography variant="button">{children}</Typography>
         </MenuItem>
     );
 }

From 3f0b4be1efaffa46b82e681fb15c1514fa79a3a5 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 14:54:18 +0530
Subject: [PATCH 10/12] update collection options

---
 .../Collections/CollectionOptions.tsx         | 118 +++++++-----------
 src/components/OverflowMenu/menu.tsx          |   1 -
 src/components/icons/OptionIcon-2.tsx         |  21 ----
 3 files changed, 43 insertions(+), 97 deletions(-)
 delete mode 100644 src/components/icons/OptionIcon-2.tsx

diff --git a/src/components/Collections/CollectionOptions.tsx b/src/components/Collections/CollectionOptions.tsx
index ca7fa8536..7af25702e 100644
--- a/src/components/Collections/CollectionOptions.tsx
+++ b/src/components/Collections/CollectionOptions.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import * as CollectionAPI from 'services/collectionService';
 import {
     changeCollectionVisibility,
@@ -8,15 +8,14 @@ import constants from 'utils/strings/constants';
 import { SetCollectionNamerAttributes } from './CollectionNamer';
 import { Collection } from 'types/collection';
 import { IsArchived } from 'utils/magicMetadata';
-import { InvertedIconButton } from 'components/Container';
-import OptionIcon from 'components/icons/OptionIcon-2';
-import Paper from '@mui/material/Paper';
-import MenuList from '@mui/material/MenuList';
-import { ListItem, Menu, MenuItem } from '@mui/material';
+import { IconButton } from '@mui/material';
 import { GalleryContext } from 'pages/gallery';
 import { logError } from 'utils/sentry';
 import { VISIBILITY_STATE } from 'types/magicMetadata';
 import { AppContext } from 'pages/_app';
+import OverflowMenu from 'components/OverflowMenu/menu';
+import { OverflowMenuOption } from 'components/OverflowMenu/option';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 
 interface CollectionOptionsProps {
     setCollectionNamerAttributes: SetCollectionNamerAttributes;
@@ -44,9 +43,6 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
         useContext(AppContext);
     const { syncWithRemote } = useContext(GalleryContext);
 
-    const [optionEl, setOptionEl] = useState(null);
-    const handleClose = () => setOptionEl(null);
-
     const handleCollectionAction = (action: CollectionActions) => {
         let callback;
         switch (action) {
@@ -78,7 +74,6 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
             startLoading();
             try {
                 await callback(...args);
-                handleClose();
             } catch (e) {
                 setDialogMessage({
                     title: constants.ERROR,
@@ -155,71 +150,44 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
     };
 
     return (
-        <>
-            <InvertedIconButton
-                style={{
-                    transform: 'rotate(90deg)',
-                }}
-                onClick={(event) => setOptionEl(event.currentTarget)}
-                aria-controls={optionEl ? 'collection-options' : undefined}
-                aria-haspopup="true"
-                aria-expanded={optionEl ? 'true' : undefined}>
-                <OptionIcon />
-            </InvertedIconButton>
-            <Menu
-                id="collection-options"
-                anchorEl={optionEl}
-                open={Boolean(optionEl)}
-                onClose={handleClose}
-                MenuListProps={{
-                    disablePadding: true,
-                    'aria-labelledby': 'collection-options',
-                }}>
-                <Paper>
-                    <MenuList>
-                        <MenuItem>
-                            <ListItem onClick={showRenameCollectionModal}>
-                                {constants.RENAME}
-                            </ListItem>
-                        </MenuItem>
-                        <MenuItem>
-                            <ListItem onClick={showCollectionShareModal}>
-                                {constants.SHARE}
-                            </ListItem>
-                        </MenuItem>
-                        <MenuItem>
-                            <ListItem onClick={confirmDownloadCollection}>
-                                {constants.DOWNLOAD}
-                            </ListItem>
-                        </MenuItem>
-                        <MenuItem>
-                            {IsArchived(activeCollection) ? (
-                                <ListItem
-                                    onClick={handleCollectionAction(
-                                        CollectionActions.UNARCHIVE
-                                    )}>
-                                    {constants.UNARCHIVE}
-                                </ListItem>
-                            ) : (
-                                <ListItem
-                                    onClick={handleCollectionAction(
-                                        CollectionActions.ARCHIVE
-                                    )}>
-                                    {constants.ARCHIVE}
-                                </ListItem>
-                            )}
-                        </MenuItem>
-                        <MenuItem>
-                            <ListItem
-                                color="danger"
-                                onClick={confirmDeleteCollection}>
-                                {constants.DELETE}
-                            </ListItem>
-                        </MenuItem>
-                    </MenuList>
-                </Paper>
-            </Menu>
-        </>
+        <OverflowMenu
+            ariaControls={`collection-options-${props.activeCollection.id}`}
+            menuTriggerIcon={
+                <IconButton
+                    sx={{
+                        background: (theme) => theme.palette.background.paper,
+                    }}>
+                    <MoreVertIcon />
+                </IconButton>
+            }>
+            <OverflowMenuOption onClick={showRenameCollectionModal}>
+                {constants.RENAME}
+            </OverflowMenuOption>
+            <OverflowMenuOption onClick={showCollectionShareModal}>
+                {constants.SHARE}
+            </OverflowMenuOption>
+            <OverflowMenuOption onClick={confirmDownloadCollection}>
+                {constants.DOWNLOAD}
+            </OverflowMenuOption>
+            {IsArchived(activeCollection) ? (
+                <OverflowMenuOption
+                    onClick={handleCollectionAction(
+                        CollectionActions.UNARCHIVE
+                    )}>
+                    {constants.UNARCHIVE}
+                </OverflowMenuOption>
+            ) : (
+                <OverflowMenuOption
+                    onClick={handleCollectionAction(CollectionActions.ARCHIVE)}>
+                    {constants.ARCHIVE}
+                </OverflowMenuOption>
+            )}
+            <OverflowMenuOption
+                color="danger"
+                onClick={confirmDeleteCollection}>
+                {constants.DELETE}
+            </OverflowMenuOption>
+        </OverflowMenu>
     );
 };
 
diff --git a/src/components/OverflowMenu/menu.tsx b/src/components/OverflowMenu/menu.tsx
index fd21be0bb..1df6a591b 100644
--- a/src/components/OverflowMenu/menu.tsx
+++ b/src/components/OverflowMenu/menu.tsx
@@ -11,7 +11,6 @@ export interface Iprops {
 
 const StyledMenu = styled(Menu)`
     & .MuiPaper-root {
-        margin: 16px;
         box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16),
             0px 3px 6px rgba(0, 0, 0, 0.12);
     }
diff --git a/src/components/icons/OptionIcon-2.tsx b/src/components/icons/OptionIcon-2.tsx
deleted file mode 100644
index 44f81e177..000000000
--- a/src/components/icons/OptionIcon-2.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-export default function OptionIcon(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height={props.height}
-            viewBox={props.viewBox}
-            width={props.width}
-            fill="currentColor">
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />{' '}
-        </svg>
-    );
-}
-
-OptionIcon.defaultProps = {
-    height: 20,
-    width: 20,
-    viewBox: '0 0 24 24',
-};

From 0d5b824da30175170ef0635362054238a20745d2 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 15:16:47 +0530
Subject: [PATCH 11/12] add  triggerButtonProps

---
 src/components/OverflowMenu/menu.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/OverflowMenu/menu.tsx b/src/components/OverflowMenu/menu.tsx
index 1df6a591b..179a77bc3 100644
--- a/src/components/OverflowMenu/menu.tsx
+++ b/src/components/OverflowMenu/menu.tsx
@@ -4,7 +4,8 @@ import { IconButton, styled } from '@mui/material';
 import { OverflowMenuContext } from 'contexts/overflowMenu';
 
 export interface Iprops {
-    menuTriggerIcon: React.ReactNode;
+    triggerButtonIcon: React.ReactNode;
+    triggerButtonProps?: any;
     children?: React.ReactNode;
     ariaControls: string;
 }
@@ -23,7 +24,8 @@ const StyledMenu = styled(Menu)`
 export default function OverflowMenu({
     children,
     ariaControls,
-    menuTriggerIcon,
+    triggerButtonIcon,
+    triggerButtonProps,
 }: Iprops) {
     const [sortByEl, setSortByEl] = useState(null);
     const handleClose = () => setSortByEl(null);
@@ -33,8 +35,9 @@ export default function OverflowMenu({
                 onClick={(event) => setSortByEl(event.currentTarget)}
                 aria-controls={sortByEl ? ariaControls : undefined}
                 aria-haspopup="true"
-                aria-expanded={sortByEl ? 'true' : undefined}>
-                {menuTriggerIcon}
+                aria-expanded={sortByEl ? 'true' : undefined}
+                {...triggerButtonProps}>
+                {triggerButtonIcon}
             </IconButton>
             <StyledMenu
                 id={ariaControls}

From fc78890544523968d33008c0147db5224d5db1d5 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 21 Jun 2022 15:16:57 +0530
Subject: [PATCH 12/12] update OverflowMenu usgae

---
 .../AllCollections/CollectionSort/index.tsx       |  2 +-
 src/components/Collections/CollectionOptions.tsx  | 15 ++++++---------
 .../Collections/CollectionShare/sharees/row.tsx   |  2 +-
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/Collections/AllCollections/CollectionSort/index.tsx b/src/components/Collections/AllCollections/CollectionSort/index.tsx
index da49dca56..f731a0ddd 100644
--- a/src/components/Collections/AllCollections/CollectionSort/index.tsx
+++ b/src/components/Collections/AllCollections/CollectionSort/index.tsx
@@ -13,7 +13,7 @@ export default function CollectionSort(props: CollectionSortProps) {
     return (
         <OverflowMenu
             ariaControls="collection-sort"
-            menuTriggerIcon={<SortIcon />}>
+            triggerButtonIcon={<SortIcon />}>
             <CollectionSortOptions {...props} />
         </OverflowMenu>
     );
diff --git a/src/components/Collections/CollectionOptions.tsx b/src/components/Collections/CollectionOptions.tsx
index 7af25702e..a87c419d7 100644
--- a/src/components/Collections/CollectionOptions.tsx
+++ b/src/components/Collections/CollectionOptions.tsx
@@ -8,7 +8,6 @@ import constants from 'utils/strings/constants';
 import { SetCollectionNamerAttributes } from './CollectionNamer';
 import { Collection } from 'types/collection';
 import { IsArchived } from 'utils/magicMetadata';
-import { IconButton } from '@mui/material';
 import { GalleryContext } from 'pages/gallery';
 import { logError } from 'utils/sentry';
 import { VISIBILITY_STATE } from 'types/magicMetadata';
@@ -152,14 +151,12 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
     return (
         <OverflowMenu
             ariaControls={`collection-options-${props.activeCollection.id}`}
-            menuTriggerIcon={
-                <IconButton
-                    sx={{
-                        background: (theme) => theme.palette.background.paper,
-                    }}>
-                    <MoreVertIcon />
-                </IconButton>
-            }>
+            triggerButtonIcon={<MoreVertIcon />}
+            triggerButtonProps={{
+                sx: {
+                    background: (theme) => theme.palette.background.paper,
+                },
+            }}>
             <OverflowMenuOption onClick={showRenameCollectionModal}>
                 {constants.RENAME}
             </OverflowMenuOption>
diff --git a/src/components/Collections/CollectionShare/sharees/row.tsx b/src/components/Collections/CollectionShare/sharees/row.tsx
index 6eac8ea1d..f5d7fc611 100644
--- a/src/components/Collections/CollectionShare/sharees/row.tsx
+++ b/src/components/Collections/CollectionShare/sharees/row.tsx
@@ -19,7 +19,7 @@ const ShareeRow = ({ sharee, collectionUnshare }: IProps) => {
             {sharee.email}
             <OverflowMenu
                 ariaControls={`email-share-${sharee.email}`}
-                menuTriggerIcon={<MoreHorizIcon />}>
+                triggerButtonIcon={<MoreHorizIcon />}>
                 <OverflowMenuOption
                     color="danger"
                     onClick={handleClick}