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