Use

web/apps/photos/src/components/Upload/UploadTypeSelector.tsx

@@ -1,12 +1,12 @@
 import { useIsTouchscreen } from "@/base/hooks";
 import { FocusVisibleButton } from "@/new/photos/components/FocusVisibleButton";
 import { SpaceBetweenFlex } from "@/new/photos/components/mui";
+import { DialogCloseIconButton } from "@/new/photos/components/mui/Dialog";
 import DialogTitleWithCloseButton, {
     dialogCloseHandler,
 } from "@ente/shared/components/DialogBox/TitleWithCloseButton";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import ChevronRight from "@mui/icons-material/ChevronRight";
-import CloseIcon from "@mui/icons-material/Close";
 import GoogleIcon from "@mui/icons-material/Google";
 import { default as FileUploadIcon } from "@mui/icons-material/ImageOutlined";
 import { default as FolderUploadIcon } from "@mui/icons-material/PermMediaOutlined";
@@ -14,7 +14,6 @@ import {
     Box,
     Dialog,
     DialogTitle,
-    IconButton,
     Link,
     Stack,
     Typography,
@@ -222,13 +221,7 @@ const TakeoutOptions: React.FC<Omit<OptionsProps, "intent">> = ({
         <>
             <SpaceBetweenFlex sx={{ padding: "8px 8px 0px 0" }}>
                 <DialogTitle variant="h5">{t("google_takeout")}</DialogTitle>
-                <IconButton
-                    aria-label={t("close")}
-                    color="secondary"
-                    onClick={onClose}
-                >
-                    <CloseIcon />
-                </IconButton>
+                <DialogCloseIconButton {...{ onClose }} />
             </SpaceBetweenFlex>
 
             <Stack sx={{ padding: "12px", gap: "20px" }}>

web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx

@@ -1,19 +1,18 @@
 import type { CollectionMapping } from "@/base/types/ipc";
 import { FocusVisibleButton } from "@/new/photos/components/FocusVisibleButton";
-import CloseIcon from "@mui/icons-material/Close";
 import FolderIcon from "@mui/icons-material/Folder";
 import FolderCopyIcon from "@mui/icons-material/FolderCopy";
 import {
     Dialog,
     DialogContent,
     DialogTitle,
-    IconButton,
     Stack,
     Typography,
 } from "@mui/material";
 import { t } from "i18next";
 import React from "react";
-import { SpaceBetweenFlex, type DialogVisiblityProps } from "./mui";
+import { SpaceBetweenFlex } from "./mui";
+import { DialogCloseIconButton, type DialogVisiblityProps } from "./mui/Dialog";
 
 type CollectionMappingChoiceModalProps = DialogVisiblityProps & {
     didSelect: (mapping: CollectionMapping) => void;
@@ -35,14 +34,9 @@ export const CollectionMappingChoiceDialog: React.FC<
     >
         <SpaceBetweenFlex sx={{ paddingInlineEnd: "4px" }}>
             <DialogTitle>{t("multi_folder_upload")}</DialogTitle>
-            <IconButton
-                aria-label={t("close")}
-                color="secondary"
-                onClick={onClose}
-            >
-                <CloseIcon />
-            </IconButton>
+            <DialogCloseIconButton {...{ onClose }} />
         </SpaceBetweenFlex>
+
         <DialogContent
             sx={{
                 display: "flex",

web/packages/new/photos/components/NameInputDialog.tsx

@@ -5,7 +5,7 @@ import SingleInputForm, {
 import { Dialog, DialogContent, DialogTitle } from "@mui/material";
 import { t } from "i18next";
 import React from "react";
-import type { DialogVisiblityProps } from "./mui";
+import { type DialogVisiblityProps } from "./mui/Dialog";
 
 type NameInputDialogProps = DialogVisiblityProps & {
     /** Title of the dialog. */

web/packages/new/photos/components/mui/Dialog.tsx

@@ -1,10 +1,31 @@
-import { DialogTitle, styled } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { IconButton } from "@mui/material";
+import { t } from "i18next";
+import React from "react";
 
 /**
- * TODO: Remove me.
+ * Common props to control the display of a dialog-like component.
  */
-export const DialogTitleV3 = styled(DialogTitle)`
-    "&&&": {
-        padding: 0;
-    }
-`;
+export interface DialogVisiblityProps {
+    /** If `true`, the dialog is shown. */
+    open: boolean;
+    /** Callback fired when the dialog wants to be closed. */
+    onClose: () => void;
+}
+
+type DialogCloseIconButtonProps = Omit<DialogVisiblityProps, "open">;
+
+/**
+ * A convenience {@link IconButton} commonly needed on {@link Dialog}s, at the
+ * top right, to allow the user to close the dialog.
+ *
+ * Note that an explicit "Cancel" button is a better approach whenever possible,
+ * so use this sparingly.
+ */
+export const DialogCloseIconButton: React.FC<DialogCloseIconButtonProps> = ({
+    onClose,
+}) => (
+    <IconButton aria-label={t("close")} color="secondary" onClick={onClose}>
+        <CloseIcon />
+    </IconButton>
+);

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

@@ -1,15 +1,5 @@
 import { Box, IconButton, styled } from "@mui/material";
 
-/**
- * Common props to control the display of a dialog-like component.
- */
-export interface DialogVisiblityProps {
-    /** If `true`, the dialog is shown. */
-    open: boolean;
-    /** Callback fired when the dialog wants to be closed. */
-    onClose: () => void;
-}
-
 /**
  * A MUI {@link IconButton} filled in with at faint background.
  */