Center align 1

web/packages/new/photos/components/Gallery/index.tsx

@@ -12,6 +12,7 @@ import type { Person } from "@/new/photos/services/ml/people";
 import type { SearchOption } from "@/new/photos/services/search/types";
 import OverflowMenu from "@ente/shared/components/OverflowMenu/menu";
 import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option";
+import AddIcon from "@mui/icons-material/Add";
 import EditIcon from "@mui/icons-material/Edit";
 import MoreHoriz from "@mui/icons-material/MoreHoriz";
 import { Typography } from "@mui/material";
@@ -73,10 +74,19 @@ export const PersonListHeader: React.FC<PeopleListHeaderProps> = ({
                         triggerButtonIcon={<MoreHoriz />}
                     >
                         <OverflowMenuOption
-                            startIcon={<EditIcon />}
+                            startIcon={<AddIcon />}
+                            centerAlign
                             onClick={() => console.log("test")}
                         >
-                            {t("download_album")}
+                            {pt("Add a name")}
+                        </OverflowMenuOption>
+
+                        <OverflowMenuOption
+                            startIcon={<EditIcon />}
+                            centerAlign
+                            onClick={() => console.log("test")}
+                        >
+                            {pt("rename")}
                         </OverflowMenuOption>
                     </OverflowMenu>
                 )}

web/packages/shared/components/OverflowMenu/option.tsx

@@ -10,6 +10,10 @@ interface Iprops {
     endIcon?: React.ReactNode;
     keepOpenAfterClick?: boolean;
     children?: any;
+    // To avoid changing old places without an audit, new code should use this
+    // option explicitly to fix/tweak the alignment of the button label and
+    // icon. Once all existing uses have migrated, can change the default.
+    centerAlign?: boolean;
 }
 export function OverflowMenuOption({
     onClick,
@@ -17,6 +21,7 @@ export function OverflowMenuOption({
     startIcon,
     endIcon,
     keepOpenAfterClick,
+    centerAlign,
     children,
 }: Iprops) {
     const menuContext = useContext(OverflowMenuContext);
@@ -44,6 +49,7 @@ export function OverflowMenuOption({
                     <Box
                         sx={{
                             padding: 0,
+                            marginBlockStart: centerAlign ? "6px" : 0,
                             marginRight: 1.5,
                         }}
                     >