From c0a1b2daef072ecd20cd5df8df68d57bd15d2c20 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sat, 12 Oct 2024 16:50:53 +0530
Subject: [PATCH] Center

---
 .../base/components/mui/Container.tsx         | 12 ++++++++
 .../components/gallery/PeopleHeader.tsx       | 29 ++++++++++---------
 web/packages/shared/components/Container.tsx  |  4 +++
 3 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 web/packages/base/components/mui/Container.tsx

diff --git a/web/packages/base/components/mui/Container.tsx b/web/packages/base/components/mui/Container.tsx
new file mode 100644
index 0000000000..45e6e2913e
--- /dev/null
+++ b/web/packages/base/components/mui/Container.tsx
@@ -0,0 +1,12 @@
+import { styled } from "@mui/material";
+
+/**
+ * A flex child that fills the entire flex direction, and shows its children
+ * after centering them both vertically and horizontally.
+ */
+export const CenteredBox = styled("div")`
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
diff --git a/web/packages/new/photos/components/gallery/PeopleHeader.tsx b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
index b5b1214ea8..2ac1356998 100644
--- a/web/packages/new/photos/components/gallery/PeopleHeader.tsx
+++ b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
@@ -1,3 +1,4 @@
+import { CenteredBox } from "@/base/components/mui/Container";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { LoadingButton } from "@/base/components/mui/LoadingButton";
@@ -319,21 +320,23 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
             fullScreen={isSmallWidth}
             PaperProps={{ sx: { minHeight: "60svh" } }}
         >
-            <DialogTitle sx={{ "&&&": { pt: "20px" } }}>
+            <DialogTitle sx={{ "&&&": { py: "20px" } }}>
                 {pt(`${person.name}?`)}
             </DialogTitle>
-            <DialogContent>
+            <DialogContent dividers sx={{ display: "flex" }}>
                 {!suggestions ? (
-                    phase == "loading" ? (
-                        <ActivityIndicator />
-                    ) : (
-                        <Typography
-                            color="text.muted"
-                            sx={{ textAlign: "center" }}
-                        >
-                            {pt("No more suggestions for now")}
-                        </Typography>
-                    )
+                    <CenteredBox>
+                        {phase == "loading" || true ? (
+                            <ActivityIndicator />
+                        ) : (
+                            <Typography
+                                color="text.muted"
+                                sx={{ textAlign: "center" }}
+                            >
+                                {pt("No more suggestions for now")}
+                            </Typography>
+                        )}
+                    </CenteredBox>
                 ) : (
                     <ul>
                         {suggestions.map((suggestion) => (
@@ -344,7 +347,7 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
                     </ul>
                 )}
             </DialogContent>
-            <DialogActions>
+            <DialogActions sx={{ "&&": { pt: "12px" } }}>
                 <FocusVisibleButton
                     fullWidth
                     color="secondary"
diff --git a/web/packages/shared/components/Container.tsx b/web/packages/shared/components/Container.tsx
index 4ba62233e7..9a1eb9666e 100644
--- a/web/packages/shared/components/Container.tsx
+++ b/web/packages/shared/components/Container.tsx
@@ -20,6 +20,10 @@ export const SpaceBetweenFlex = styled(FlexWrapper)`
     justify-content: space-between;
 `;
 
+/**
+ * Deprecated, use {@link CenteredFlex} from @/base/components/mui/container
+ * instead
+ */
 export const CenteredFlex = styled(FlexWrapper)`
     justify-content: center;
 `;