@/accounts - codemods then manual fixing

npx @mui/codemod@latest deprecations/all `git ls-files '**.tsx'` && npx @mui/codemod@latest v6.0.0/styled `git ls-files '**.tsx'` && npx @mui/codemod@latest v6.0.0/sx-prop `git ls-files '**.tsx'`
This commit is contained in:
Manav Rathi
2025-01-06 10:44:52 +05:30
parent e210b22efd
commit 69d0893c43
4 changed files with 67 additions and 60 deletions

View File

@@ -20,10 +20,12 @@ export interface SetPasswordFormProps {
) => Promise<void>;
buttonText: string;
}
export interface SetPasswordFormValues {
passphrase: string;
confirm: string;
}
function SetPasswordForm(props: SetPasswordFormProps) {
const [loading, setLoading] = useState(false);
const [showPassword, setShowPassword] = useState(false);
@@ -103,18 +105,20 @@ function SetPasswordForm(props: SetPasswordFormProps) {
helperText={errors.passphrase}
autoFocus
disabled={loading}
InputProps={{
endAdornment: (
<ShowHidePassword
showPassword={showPassword}
handleClickShowPassword={
handleClickShowPassword
}
handleMouseDownPassword={
handleMouseDownPassword
}
/>
),
slotProps={{
input: {
endAdornment: (
<ShowHidePassword
showPassword={showPassword}
handleClickShowPassword={
handleClickShowPassword
}
handleMouseDownPassword={
handleMouseDownPassword
}
/>
),
},
}}
/>
<TextField

View File

@@ -180,18 +180,20 @@ export const SignUp: React.FC<SignUpProps> = ({ router, login, host }) => {
error={Boolean(errors.passphrase)}
helperText={errors.passphrase}
disabled={loading}
InputProps={{
endAdornment: (
<ShowHidePassword
showPassword={showPassword}
handleClickShowPassword={
handleClickShowPassword
}
handleMouseDownPassword={
handleMouseDownPassword
}
/>
),
slotProps={{
input: {
endAdornment: (
<ShowHidePassword
showPassword={showPassword}
handleClickShowPassword={
handleClickShowPassword
}
handleMouseDownPassword={
handleMouseDownPassword
}
/>
),
},
}}
/>
@@ -222,23 +224,6 @@ export const SignUp: React.FC<SignUpProps> = ({ router, login, host }) => {
</Typography>
<TextField
hiddenLabel
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip
title={t("REFERRAL_INFO")}
>
<IconButton
tabIndex={-1}
color="secondary"
edge={"end"}
>
<InfoOutlinedIcon />
</IconButton>
</Tooltip>
</InputAdornment>
),
}}
fullWidth
name="referral"
type="text"
@@ -246,6 +231,27 @@ export const SignUp: React.FC<SignUpProps> = ({ router, login, host }) => {
onChange={handleChange("referral")}
error={Boolean(errors.referral)}
disabled={loading}
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">
<Tooltip
title={t(
"REFERRAL_INFO",
)}
>
<IconButton
tabIndex={-1}
color="secondary"
edge={"end"}
>
<InfoOutlinedIcon />
</IconButton>
</Tooltip>
</InputAdornment>
),
},
}}
/>
</Box>
<FormGroup sx={{ width: "100%" }}>
@@ -318,7 +324,6 @@ export const SignUp: React.FC<SignUpProps> = ({ router, login, host }) => {
</form>
)}
</Formik>
<FormPaperFooter>
<Stack gap={4}>
<LinkButton onClick={login}>

View File

@@ -3,7 +3,7 @@ import {
CenteredFlex,
VerticallyCentered,
} from "@ente/shared/components/Container";
import { Box, Typography, styled, type TypographyProps } from "@mui/material";
import { Box, Typography, styled } from "@mui/material";
import { Formik, type FormikHelpers } from "formik";
import { t } from "i18next";
import React, { useState } from "react";
@@ -119,7 +119,6 @@ const IndividualInput = styled("input")(
border-radius: 1px;
outline-color: ${theme.colors.accent.A300};
transition: 0.5s;
${theme.breakpoints.down("sm")} {
font-size: 1rem;
padding: 4px;
@@ -128,16 +127,13 @@ const IndividualInput = styled("input")(
`,
);
const InvalidInputMessage: React.FC<TypographyProps> = (props) => {
return (
<Typography
variant="mini"
sx={{
color: (theme) => theme.colors.danger.A700,
}}
{...props}
>
{props.children}
</Typography>
);
};
const InvalidInputMessage: React.FC<React.PropsWithChildren> = ({
children,
}) => (
<Typography
variant="mini"
sx={(theme) => ({ color: theme.colors.danger.A700 })}
>
{children}
</Typography>
);

View File

@@ -147,9 +147,6 @@ const ChangeEmailForm: React.FC = () => {
<VerticallyCentered>
<TextField
fullWidth
InputProps={{
readOnly: ottInputVisible,
}}
type="email"
label={t("ENTER_EMAIL")}
value={values.email}
@@ -158,6 +155,11 @@ const ChangeEmailForm: React.FC = () => {
helperText={errors.email}
autoFocus
disabled={loading}
slotProps={{
input: {
readOnly: ottInputVisible,
},
}}
/>
{ottInputVisible && (
<TextField