The "&&&"s are to override the style overrides

...which is what I want to refactor away, this is an intermediate step.
This commit is contained in:
Manav Rathi 2024-10-03 17:51:37 +05:30
parent 27bdc5d229
commit cd2d7be69a
No known key found for this signature in database

View File

@ -1,13 +1,12 @@
import type { CollectionMapping } from "@/base/types/ipc";
import { SpaceBetweenFlex } from "@/new/photos/components/mui";
import { CenteredFlex } from "@ente/shared/components/Container";
import CloseIcon from "@mui/icons-material/Close";
import FolderIcon from "@mui/icons-material/Folder";
import FolderCopyIcon from "@mui/icons-material/FolderCopy";
import {
Button,
Dialog,
DialogContent,
DialogTitle,
IconButton,
Stack,
Typography,
} from "@mui/material";
import { t } from "i18next";
@ -22,50 +21,53 @@ export const CollectionMappingChoiceModal: React.FC<
CollectionMappingChoiceModalProps
> = ({ open, onClose, didSelect }) => {
return (
<Dialog open={open} onClose={onClose} maxWidth={"sm"} fullWidth>
<DialogTitle>
<SpaceBetweenFlex>
<Dialog
open={open}
onClose={onClose}
fullWidth
PaperProps={{
sx: {
padding: "8px 12px",
maxWidth: "390px",
},
}}
>
<DialogTitle sx={{ "&&&": { paddingBlockEnd: 0 } }}>
<Typography variant="large" fontWeight={"bold"}>
{t("MULTI_FOLDER_UPLOAD")}
<IconButton
aria-label={t("close")}
color="secondary"
onClick={onClose}
>
<CloseIcon />
</IconButton>
</SpaceBetweenFlex>
</Typography>
</DialogTitle>
<DialogContent>
<CenteredFlex mb={1}>
<Typography color="text.muted">
<DialogContent sx={{ "&&&": { paddingBlockStart: "16px" } }}>
<Stack sx={{ gap: "16px" }}>
<Typography color="text.muted" mt={0}>
{t("UPLOAD_STRATEGY_CHOICE")}
</Typography>
</CenteredFlex>
<SpaceBetweenFlex px={2}>
<Button
size="medium"
color="accent"
onClick={() => {
onClose();
didSelect("root");
}}
>
{t("UPLOAD_STRATEGY_SINGLE_COLLECTION")}
</Button>
<Stack sx={{ gap: 1 }}>
<Button
size="medium"
color="accent"
startIcon={<FolderIcon />}
onClick={() => {
onClose();
didSelect("root");
}}
>
{t("UPLOAD_STRATEGY_SINGLE_COLLECTION")}
</Button>
<strong>{t("OR")}</strong>
<Button
size="medium"
color="accent"
onClick={() => {
onClose();
didSelect("parent");
}}
>
{t("UPLOAD_STRATEGY_COLLECTION_PER_FOLDER")}
</Button>
</SpaceBetweenFlex>
<Button
size="medium"
color="accent"
startIcon={<FolderCopyIcon />}
onClick={() => {
onClose();
didSelect("parent");
}}
>
{t("UPLOAD_STRATEGY_COLLECTION_PER_FOLDER")}
</Button>
</Stack>
</Stack>
</DialogContent>
</Dialog>
);