TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify

Browse Source
This commit is contained in:
Manav Rathi
2025-01-10 06:38:38 +05:30
parent 39103e6937
commit 2c56f7e8c8
9 changed files with 38 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/apps/photos/src/components/DeleteAccountModal.tsx
View File

@@ -2,6 +2,7 @@ import { assertionFailed } from "@/base/assert";
import { TitledMiniDialog } from "@/base/components/MiniDialog";
import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
import { LoadingButton } from "@/base/components/mui/LoadingButton";
import { isSxArray } from "@/base/components/utils/sx";
import { sharedCryptoWorker } from "@/base/crypto";
import { AppContext } from "@/new/photos/types/context";
import { initiateEmail } from "@/new/photos/utils/web";
@@ -276,7 +277,7 @@ function MultilineInput({
variant="small"
sx={[
{ px: "8px", color: "text.secondary" },
...(Array.isArray(messageSxProps)
...(isSxArray(messageSxProps)
? messageSxProps
: [messageSxProps]),
]}

3
web/apps/photos/src/components/DropdownInput.tsx
View File

@@ -1,3 +1,4 @@
import { isSxArray } from "@/base/components/utils/sx";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import {
Box,
@@ -119,7 +120,7 @@ export default function DropdownInput<T extends string>({
variant="small"
sx={[
{ px: "8px", color: "text.muted" },
...(Array.isArray(messageSxProps)
...(isSxArray(messageSxProps)
? messageSxProps
: [messageSxProps]),
]}

9
web/packages/accounts/components/LoginComponents.tsx
View File

@@ -53,15 +53,8 @@ export const LoginFlowFormFooter: React.FC<React.PropsWithChildren> = ({
return (
<FormPaperFooter>
<Stack
sx={{
gap: "16px",
width: "100%",
textAlign: "start",
}}
>
<Stack sx={{ gap: "16px", width: "100%", textAlign: "start" }}>
{children}
{host && (
<Typography variant="small" sx={{ color: "text.faint" }}>
{host}

8
web/packages/accounts/pages/change-email.tsx
View File

@@ -185,13 +185,7 @@ const ChangeEmailForm: React.FC = () => {
</VerticallyCentered>
</form>
<FormPaperFooter
sx={[
ottInputVisible
? { justifyContent: "space-between" }
: { justifyContent: "center" },
]}
>
<FormPaperFooter>
{ottInputVisible && (
<LinkButton
onClick={() => setShowOttInputVisibility(false)}

2
web/packages/accounts/pages/recover.tsx
View File

@@ -118,7 +118,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
buttonText={t("recover")}
disableAutoComplete
/>
<FormPaperFooter sx={{ justifyContent: "space-between" }}>
<FormPaperFooter>
<LinkButton onClick={showNoRecoveryKeyMessage}>
{t("no_recovery_key_title")}
</LinkButton>

2
web/packages/accounts/pages/two-factor/recover.tsx
View File

@@ -176,7 +176,7 @@ const Page: React.FC<RecoverPageProps> = ({ appContext, twoFactorType }) => {
buttonText={t("recover")}
disableAutoComplete
/>
<FormPaperFooter sx={{ justifyContent: "space-between" }}>
<FormPaperFooter>
<LinkButton onClick={() => showContactSupportDialog()}>
{t("no_recovery_key_title")}
</LinkButton>

2
web/packages/accounts/pages/two-factor/verify.tsx
View File

@@ -78,7 +78,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
<FormPaperTitle>{t("two_factor")}</FormPaperTitle>
<VerifyTwoFactor onSubmit={onSubmit} buttonText={t("verify")} />
<FormPaperFooter sx={{ justifyContent: "space-between" }}>
<FormPaperFooter>
<LinkButton
onClick={() => router.push(PAGES.TWO_FACTOR_RECOVER)}
>

2
web/packages/accounts/pages/verify.tsx
View File

@@ -221,7 +221,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
return (
<VerticallyCentered>
<FormPaper>
<FormPaperTitle sx={{ mb: 14, wordBreak: "break-word" }}>
<FormPaperTitle sx={{ wordBreak: "break-word" }}>
<Trans
i18nKey="email_sent"
components={{

52
web/packages/base/components/FormPaper.tsx
View File

@@ -1,7 +1,6 @@
import { VerticallyCentered } from "@ente/shared/components/Container";
import {
Divider,
Paper,
Stack,
styled,
Typography,
type TypographyProps,
@@ -16,26 +15,31 @@ export const FormPaper = styled(Paper)(({ theme }) => ({
textAlign: "left",
}));
export const FormPaperTitle: React.FC<TypographyProps> = ({ sx, ...props }) => {
return (
<Typography variant="h2" sx={{ mb: 8, ...sx }} {...props}>
{props.children}
</Typography>
);
};
export const FormPaperFooter: React.FC<
React.PropsWithChildren<{ sx?: TypographyProps["sx"] }>
> = ({ sx, children }) => (
<>
<Divider />
<VerticallyCentered
sx={[
{ mt: 3, flexDirection: "row" },
...(sx ? (isSxArray(sx) ? sx : [sx]) : []),
]}
>
{children}
</VerticallyCentered>
</>
export const FormPaperTitle: React.FC<TypographyProps> = ({
sx,
children,
...rest
}) => (
<Typography
variant="h2"
sx={{ mb: 8, ...(sx ? (isSxArray(sx) ? sx : [sx]) : []) }}
{...rest}
>
{children}
</Typography>
);
export const FormPaperFooter: React.FC<React.PropsWithChildren> = ({
children,
}) => (
<Stack
direction="row"
sx={{
mt: 5,
textAlign: "center",
justifyContent: "space-evenly",
}}
>
{children}
</Stack>
);