kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-08-08 07:28:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert Box/flex => Stack/row

Browse Source 
> Box component is not intended to be used with Figma, it's a specific implementation based on the underlying style engine we are using which might be removed once we switched to Pigment CSS (not related to design again).
>
> https://github.com/mui/material-ui/issues/43898#issuecomment-2482313907
This commit is contained in:
Manav Rathi 2025-01-06 16:58:04 +05:30
parent f7596c6cca
commit 7adb64f0f5
No known key found for this signature in database
13 changed files with 48 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/apps/accounts/src/pages/passkeys/index.tsx
View File

@ -331,7 +331,7 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
};
const CreatedAtEntry: React.FC<React.PropsWithChildren> = ({ children }) => (
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5, pb: 1 }}>
<Stack direction="row" sx={{ alignItems: "center", gap: 0.5, pb: 1 }}>
<CalendarTodayIcon color="secondary" sx={{ m: "16px" }} />
<Box sx={{ py: 0.5 }}>
<Typography>{t("created_at")}</Typography>
@ -339,7 +339,7 @@ const CreatedAtEntry: React.FC<React.PropsWithChildren> = ({ children }) => (
{children}
</Typography>
</Box>
</Box>
</Stack>
);
interface RenamePasskeyDialogProps {

1
web/apps/photos/src/components/Collections/CollectionShare.tsx
View File

@ -435,6 +435,7 @@ const AvatarContainerOuter = styled("div")({
alignItems: "center",
marginLeft: 8,
});
const AvatarCounter = styled(NumberAvatar)({
height: 20,
width: 20,

13
web/apps/photos/src/components/FixCreationTime.tsx
View File

@ -13,7 +13,6 @@ import { FileType } from "@/media/file-type";
import { PhotoDateTimePicker } from "@/new/photos/components/PhotoDateTimePicker";
import { extractExifDates } from "@/new/photos/services/exif";
import {
Box,
Dialog,
DialogContent,
DialogTitle,
@ -136,12 +135,12 @@ const messageForStatus = (step?: Step) => {
const Progress: React.FC<FixProgress> = ({ completed, total }) => (
<Stack sx={{ width: "100%", gap: "2rem", marginBlockEnd: "20px" }}>
<Box sx={{ display: "flex", justifyContent: "center", gap: "2rem" }}>
<Stack direction="row" sx={{ justifyContent: "center", gap: "2rem" }}>
<Typography sx={{ wordSpacing: "1rem" }}>
{completed} / {total}
</Typography>
<Typography>{t("fix_creation_time_file_updated")}</Typography>
</Box>
</Stack>
<LinearProgress
variant="determinate"
@ -231,10 +230,10 @@ interface FooterProps {
const Footer: React.FC<FooterProps> = ({ step, onSubmit, onClose }) =>
step != "running" && (
<div
style={{
<Stack
direction="row"
sx={{
width: "100%",
display: "flex",
marginTop: "24px",
justifyContent: "space-around",
}}
@ -266,7 +265,7 @@ const Footer: React.FC<FooterProps> = ({ step, onSubmit, onClose }) =>
</FocusVisibleButton>
</>
)}
</div>
</Stack>
);
const updateFiles = async (

18
web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
View File

@ -320,9 +320,9 @@ export const FileInfo: React.FC<FileInfoProps> = ({
)}
{showCollectionChips && (
<InfoItem icon={<FolderOutlinedIcon />}>
<Box
<Stack
direction="row"
sx={{
display: "flex",
gap: 1,
flexWrap: "wrap",
justifyContent: "flex-start",
@ -344,7 +344,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
{collectionNameMap.get(collectionID)}
</ChipButton>
))}
</Box>
</Stack>
</InfoItem>
)}
</Stack>
@ -448,13 +448,9 @@ const InfoItem: React.FC<React.PropsWithChildren<InfoItemProps>> = ({
trailingButton,
children,
}) => (
<Box
sx={{
display: "flex",
alignItems: "flex-start",
flex: 1,
gap: "12px",
}}
<Stack
direction="row"
sx={{ alignItems: "flex-start", flex: 1, gap: "12px" }}
>
<InfoItemIconContainer>{icon}</InfoItemIconContainer>
<Box sx={{ flex: 1, mt: "4px" }}>
@ -478,7 +474,7 @@ const InfoItem: React.FC<React.PropsWithChildren<InfoItemProps>> = ({
)}
</Box>
{trailingButton}
</Box>
</Stack>
);
const InfoItemIconContainer = styled("div")(

12
web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
View File

@ -554,7 +554,8 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
<MenuIcon />
</IconButton>
</Stack>
<Box
<Stack
direction="row"
onMouseUp={handleDragEnd}
onMouseMove={isDragging ? handleDrag : null}
onMouseDown={handleDragStart}
@ -563,7 +564,6 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
height: "100%",
overflow: "hidden",
boxSizing: "border-box",
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
@ -576,12 +576,12 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
height: "100%",
}}
>
<Box
<Stack
ref={parentRef}
direction="row"
sx={{
height: "88%",
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
@ -616,7 +616,7 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
setIsDragging={setIsDragging}
/>
)}
</Box>
</Stack>
{currentTab === "crop" && (
<CenteredFlex marginTop="1rem">
<Button
@ -629,7 +629,7 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
</CenteredFlex>
)}
</Box>
</Box>
</Stack>
</Box>
<SidebarDrawer
variant="persistent"

4
web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
View File

@ -330,12 +330,12 @@ interface LegendProps {
}
const Legend: React.FC<LegendProps> = ({ label, color }) => (
<Box sx={{ display: "flex", alignItems: "center" }}>
<Stack direction="row" sx={{ alignItems: "center" }}>
<LegendDot sx={{ color }} />
<Typography variant="mini" sx={{ fontWeight: "bold" }}>
{label}
</Typography>
</Box>
</Stack>
);
const LegendDot = styled(CircleIcon)`

6
web/packages/base/components/ErrorIndicator.tsx
View File

@ -1,5 +1,5 @@
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import { Box, Stack, Typography } from "@mui/material";
import { Stack, Typography } from "@mui/material";
import { t } from "i18next";
import type React from "react";
@ -32,10 +32,10 @@ export const ActivityErrorIndicator: React.FC<React.PropsWithChildren> = ({
export const InlineErrorIndicator: React.FC<React.PropsWithChildren> = ({
children,
}) => (
<Box sx={{ display: "flex", gap: "5px", alignItems: "center" }}>
<Stack direction="row" sx={{ gap: "5px", alignItems: "center" }}>
<ErrorOutlineIcon sx={{ fontSize: "16px", color: "critical.main" }} />
<Typography variant="small" sx={{ color: "critical.main" }}>
{children ?? t("generic_error")}
</Typography>
</Box>
</Stack>
);

6
web/packages/base/components/MiniDialog.tsx
View File

@ -273,9 +273,9 @@ export const AttributedMiniDialog: React.FC<
{...rest}
>
{(attributes.icon ?? attributes.title) ? (
<Box
<Stack
direction="row"
sx={(theme) => ({
display: "flex",
justifyContent: "space-between",
alignItems: "center",
"& > svg": {
@ -301,7 +301,7 @@ export const AttributedMiniDialog: React.FC<
</DialogTitle>
)}
{attributes.icon}
</Box>
</Stack>
) : (
<Box sx={{ height: "8px" }} /> /* Spacer */
)}

6
web/packages/base/components/Titlebar.tsx
View File

@ -1,7 +1,7 @@
import { FlexWrapper } from "@ente/shared/components/Container";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import CloseIcon from "@mui/icons-material/Close";
import { Box, IconButton, Typography } from "@mui/material";
import { Box, IconButton, Stack, Typography } from "@mui/material";
import React from "react";
interface TitlebarProps {
@ -36,14 +36,14 @@ export const Titlebar: React.FC<TitlebarProps> = ({
>
{backIsClose ? <CloseIcon /> : <ArrowBackIcon />}
</IconButton>
<Box sx={{ display: "flex", gap: "4px" }}>
<Stack direction="row" sx={{ gap: "4px" }}>
{actionButton && actionButton}
{!backIsClose && (
<IconButton onClick={onRootClose} color={"secondary"}>
<CloseIcon />
</IconButton>
)}
</Box>
</Stack>
</FlexWrapper>
<Box sx={{ py: 0.5, px: 2 }}>
<Typography variant="h3" sx={{ fontWeight: "bold" }}>

4
web/packages/base/components/mui/SidebarDrawer.tsx
View File

@ -118,12 +118,12 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
<IconButton onClick={onClose} color={"primary"}>
<ArrowBackIcon />
</IconButton>
<Box sx={{ display: "flex", gap: "4px" }}>
<Stack direction="row" sx={{ gap: "4px" }}>
{actionButton && actionButton}
<IconButton onClick={onRootClose} color={"secondary"}>
<CloseIcon />
</IconButton>
</Box>
</Stack>
</SpaceBetweenFlex>
<Box sx={{ px: "16px", py: "4px" }}>
<Typography variant="h3" sx={{ fontWeight: "bold" }}>

4
web/packages/new/photos/components/SearchBar.tsx
View File

@ -120,11 +120,11 @@ interface MobileSearchAreaProps {
}
const MobileSearchArea: React.FC<MobileSearchAreaProps> = ({ onSearch }) => (
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
<Stack direction="row" sx={{ justifyContent: "flex-end" }}>
<IconButton onClick={onSearch}>
<SearchIcon />
</IconButton>
</Box>
</Stack>
);
const SearchInput: React.FC<Omit<SearchBarProps, "onShowSearchInput">> = ({

6
web/packages/new/photos/components/SingleInputForm.tsx
View File

@ -3,10 +3,10 @@ import { LoadingButton } from "@/base/components/mui/LoadingButton";
import type { ModalVisibilityProps } from "@/base/components/utils/modal";
import log from "@/base/log";
import {
Box,
Dialog,
DialogContent,
DialogTitle,
Stack,
TextField,
type TextFieldProps,
} from "@mui/material";
@ -105,7 +105,7 @@ export const SingleInputForm: React.FC<SingleInputFormProps> = ({
helperText={formik.errors.value ?? " "}
{...rest}
/>
<Box sx={{ display: "flex", gap: "12px" }}>
<Stack direction="row" sx={{ gap: "12px" }}>
<FocusVisibleButton
size="large"
color="secondary"
@ -121,7 +121,7 @@ export const SingleInputForm: React.FC<SingleInputFormProps> = ({
>
{submitButtonTitle}
</LoadingButton>
</Box>
</Stack>
</form>
);
};

24
web/packages/new/photos/components/gallery/BarImpl.tsx
View File

@ -218,13 +218,9 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
);
const controls1 = isSmallWidth && (
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 1,
minHeight: "64px",
}}
<Stack
direction="row"
sx={{ alignItems: "center", gap: 1, minHeight: "64px" }}
>
{mode != "people" && (
<>
@ -238,17 +234,13 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
</IconButton>
</>
)}
</Box>
</Stack>
);
const controls2 = !isSmallWidth && mode != "people" && (
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 1,
height: "64px",
}}
<Stack
direction="row"
sx={{ alignItems: "center", gap: 1, height: "64px" }}
>
<CollectionsSortOptions
activeSortBy={collectionsSortBy}
@ -257,7 +249,7 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
<FilledIconButton onClick={onShowAllCollections}>
<ExpandMoreIcon />
</FilledIconButton>
</Box>
</Stack>
);
return (