Conv

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

@@ -18,6 +18,7 @@ import {
     OverflowMenuOption,
 } from "ente-base/components/OverflowMenu";
 import { EllipsizedTypography } from "ente-base/components/Typography";
+import { SpacedRow } from "ente-base/components/containers";
 import type { ButtonishProps } from "ente-base/components/mui";
 import { DialogCloseIconButton } from "ente-base/components/mui/DialogCloseIconButton";
 import type { ModalVisibilityProps } from "ente-base/components/utils/modal";
@@ -177,10 +178,10 @@ export const Export: React.FC<ExportProps> = ({
 
     return (
         <Dialog {...{ open, onClose }} maxWidth="xs" fullWidth>
-            <SpaceBetweenFlex sx={{ p: "12px 4px 0px 0px" }}>
+            <SpacedRow sx={{ p: "12px 4px 0px 0px" }}>
                 <DialogTitle variant="h3">{t("export_data")}</DialogTitle>
                 <DialogCloseIconButton {...{ onClose }} />
-            </SpaceBetweenFlex>
+            </SpacedRow>
 
             <DialogContent>
                 <Stack>

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

@@ -23,11 +23,11 @@ import {
     type DialogProps,
 } from "@mui/material";
 import ItemList from "components/ItemList";
+import { SpacedRow } from "ente-base/components/containers";
 import { FilledIconButton } from "ente-base/components/mui";
 import { useBaseContext } from "ente-base/context";
 import { formattedListJoin } from "ente-base/i18n";
 import { type UploadPhase } from "ente-gallery/services/upload";
-import { SpaceBetweenFlex } from "ente-shared/components/Container";
 import { t } from "i18next";
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { Trans } from "react-i18next";
@@ -170,22 +170,20 @@ const UploadProgressTitle: React.FC = () => {
 
     return (
         <DialogTitle>
-            <SpaceBetweenFlex>
+            <SpacedRow>
                 <Box>
                     <Typography variant="h3">{t("file_upload")}</Typography>
                     <UploadProgressSubtitleText />
                 </Box>
-                <Box>
-                    <Stack direction="row" sx={{ gap: 1 }}>
-                        <FilledIconButton onClick={toggleExpanded}>
-                            {expanded ? <UnfoldLessIcon /> : <UnfoldMoreIcon />}
-                        </FilledIconButton>
-                        <FilledIconButton onClick={onClose}>
-                            <CloseIcon />
-                        </FilledIconButton>
-                    </Stack>
-                </Box>
-            </SpaceBetweenFlex>
+                <Stack direction="row" sx={{ gap: 1 }}>
+                    <FilledIconButton onClick={toggleExpanded}>
+                        {expanded ? <UnfoldLessIcon /> : <UnfoldMoreIcon />}
+                    </FilledIconButton>
+                    <FilledIconButton onClick={onClose}>
+                        <CloseIcon />
+                    </FilledIconButton>
+                </Stack>
+            </SpacedRow>
         </DialogTitle>
     );
 };