Default

web/apps/auth/src/pages/auth.tsx

@@ -16,7 +16,6 @@ import {
 } from "@ente/shared/components/OverflowMenu";
 import { AUTH_PAGES as PAGES } from "@ente/shared/constants/pages";
 import LogoutOutlined from "@mui/icons-material/LogoutOutlined";
-import MoreHoriz from "@mui/icons-material/MoreHoriz";
 import {
     Button,
     ButtonBase,
@@ -155,10 +154,7 @@ const AuthNavbar: React.FC = () => {
                 <EnteLogo />
             </HorizontalFlex>
             <HorizontalFlex position={"absolute"} right="24px">
-                <OverflowMenu
-                    ariaID={"auth-options"}
-                    triggerButtonIcon={<MoreHoriz />}
-                >
+                <OverflowMenu ariaID={"auth-options"}>
                     <OverflowMenuOption
                         color="critical"
                         startIcon={<LogoutOutlined />}

web/apps/photos/src/components/Export.tsx

@@ -18,7 +18,6 @@ import {
 } from "@ente/shared/components/OverflowMenu";
 import { CustomError } from "@ente/shared/error";
 import FolderIcon from "@mui/icons-material/Folder";
-import MoreHoriz from "@mui/icons-material/MoreHoriz";
 import {
     Box,
     Button,
@@ -269,11 +268,7 @@ const DirectoryPathContainer = styled(LinkButton)(
 );
 
 const ChangeDirectoryOption: React.FC<ButtonishProps> = ({ onClick }) => (
-    <OverflowMenu
-        ariaID="export-option"
-        triggerButtonIcon={<MoreHoriz />}
-        triggerButtonProps={{ sx: { ml: 1 } }}
-    >
+    <OverflowMenu ariaID="export-option" triggerButtonProps={{ sx: { ml: 1 } }}>
         <OverflowMenuOption onClick={onClick} startIcon={<FolderIcon />}>
             {t("CHANGE_FOLDER")}
         </OverflowMenuOption>

web/apps/photos/src/components/WatchFolder.tsx

@@ -23,7 +23,6 @@ import CheckIcon from "@mui/icons-material/Check";
 import DoNotDisturbOutlinedIcon from "@mui/icons-material/DoNotDisturbOutlined";
 import FolderCopyOutlinedIcon from "@mui/icons-material/FolderCopyOutlined";
 import FolderOpenIcon from "@mui/icons-material/FolderOpen";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import {
     Box,
     Button,
@@ -312,7 +311,6 @@ const EntryOptions: React.FC<EntryOptionsProps> = ({ confirmStopWatching }) => {
     return (
         <OverflowMenu
             ariaID={"watch-mapping-option"}
-            triggerButtonIcon={<MoreHorizIcon />}
             menuPaperProps={{
                 sx: {
                     backgroundColor: (theme) =>

web/apps/photos/src/pages/shared-albums.tsx

@@ -44,7 +44,6 @@ import AddPhotoAlternateOutlined from "@mui/icons-material/AddPhotoAlternateOutl
 import CloseIcon from "@mui/icons-material/Close";
 import DownloadIcon from "@mui/icons-material/Download";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
-import MoreHoriz from "@mui/icons-material/MoreHoriz";
 import type { ButtonProps, IconButtonProps } from "@mui/material";
 import { Box, Button, IconButton, Stack, styled, Tooltip } from "@mui/material";
 import Typography from "@mui/material/Typography";
@@ -715,10 +714,7 @@ const ListHeader: React.FC<ListHeaderProps> = ({
                     fileCount={publicFiles.length}
                 />
                 {downloadEnabled && (
-                    <OverflowMenu
-                        ariaID={"collection-options"}
-                        triggerButtonIcon={<MoreHoriz />}
-                    >
+                    <OverflowMenu ariaID={"collection-options"}>
                         <OverflowMenuOption
                             startIcon={<FileDownloadOutlinedIcon />}
                             onClick={downloadAllFiles}

web/packages/new/photos/components/gallery/PeopleHeader.tsx

@@ -40,7 +40,6 @@ import ClearIcon from "@mui/icons-material/Clear";
 import EditIcon from "@mui/icons-material/Edit";
 import HideImageOutlinedIcon from "@mui/icons-material/HideImageOutlined";
 import ListAltOutlinedIcon from "@mui/icons-material/ListAltOutlined";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import RestoreIcon from "@mui/icons-material/Restore";
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import {
@@ -146,10 +145,7 @@ const CGroupPersonHeader: React.FC<CGroupPersonHeaderProps> = ({ person }) => {
                 name={name}
                 fileCount={person.fileIDs.length}
             />
-            <OverflowMenu
-                ariaID={"person-options"}
-                triggerButtonIcon={<MoreHorizIcon />}
-            >
+            <OverflowMenu ariaID={"person-options"}>
                 <OverflowMenuOption
                     startIcon={<ListAltOutlinedIcon />}
                     centerAlign
@@ -210,10 +206,7 @@ const IgnoredPersonHeader: React.FC<IgnoredPersonHeaderProps> = ({
                 nameProps={{ color: "text.muted" }}
                 fileCount={person.fileIDs.length}
             />
-            <OverflowMenu
-                ariaID={"person-options"}
-                triggerButtonIcon={<MoreHorizIcon />}
-            >
+            <OverflowMenu ariaID={"person-options"}>
                 <OverflowMenuOption
                     startIcon={<VisibilityOutlinedIcon />}
                     centerAlign
@@ -271,10 +264,7 @@ const ClusterPersonHeader: React.FC<ClusterPersonHeaderProps> = ({
                     </IconButton>
                 </Tooltip>
 
-                <OverflowMenu
-                    ariaID={"person-options"}
-                    triggerButtonIcon={<MoreHorizIcon />}
-                >
+                <OverflowMenu ariaID={"person-options"}>
                     <OverflowMenuOption
                         startIcon={<AddIcon />}
                         centerAlign

web/packages/shared/components/OverflowMenu.tsx

@@ -10,6 +10,7 @@ import {
     type PaperProps,
 } from "@mui/material";
 import Menu, { type MenuProps } from "@mui/material/Menu";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import React, { createContext, useContext, useMemo, useState } from "react";
 
 const OverflowMenuContext = createContext({
@@ -24,8 +25,10 @@ interface OverflowMenuProps {
     ariaID: string;
     /**
      * The icon for the trigger button.
+     *
+     * If not provided, then by default the MoreHoriz icon from MUI is used.
      */
-    triggerButtonIcon: React.ReactNode;
+    triggerButtonIcon?: React.ReactNode;
     /**
      * Optional additional properties for the trigger icon button.
      */
@@ -77,7 +80,7 @@ export const OverflowMenu: React.FC<
                 aria-expanded={anchorEl ? "true" : undefined}
                 {...triggerButtonProps}
             >
-                {triggerButtonIcon}
+                {triggerButtonIcon ?? <MoreHorizIcon />}
             </IconButton>
             <StyledMenu
                 id={ariaID}