From fb63b1d8328fcbb99278a5580fa5efd4946b8779 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 26 Sep 2024 13:18:38 +0530
Subject: [PATCH] Center align 1

---
 .../new/photos/components/Gallery/index.tsx        | 14 ++++++++++++--
 .../shared/components/OverflowMenu/option.tsx      |  6 ++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/web/packages/new/photos/components/Gallery/index.tsx b/web/packages/new/photos/components/Gallery/index.tsx
index c065e7b250..765f13acb8 100644
--- a/web/packages/new/photos/components/Gallery/index.tsx
+++ b/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>
                 )}
diff --git a/web/packages/shared/components/OverflowMenu/option.tsx b/web/packages/shared/components/OverflowMenu/option.tsx
index 6e7986c1b7..c951ceba30 100644
--- a/web/packages/shared/components/OverflowMenu/option.tsx
+++ b/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,
                         }}
                     >