use overflow menu

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;

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}
+            />
         );
     };
 

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>
+        </>
     );
 }

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;

src/themes/darkThemeOptions.tsx

@@ -165,6 +165,7 @@ const darkThemeOptions = createTheme({
             fontSize: '16px',
             lineHeight: '20px',
             fontWeight: 'bold',
+            textTransform: 'none',
         },
         title: {
             fontSize: '32px',