From 69d0893c433188a435ed0aec22fa86cc5b2cc8a4 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 6 Jan 2025 10:44:52 +0530
Subject: [PATCH] @/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'`
---
 .../accounts/components/SetPasswordForm.tsx   | 28 ++++----
 web/packages/accounts/components/SignUp.tsx   | 65 ++++++++++---------
 .../components/two-factor/VerifyTwoFactor.tsx | 26 ++++----
 web/packages/accounts/pages/change-email.tsx  |  8 ++-
 4 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/web/packages/accounts/components/SetPasswordForm.tsx b/web/packages/accounts/components/SetPasswordForm.tsx
index 53be317c31..43bcc9d653 100644
--- a/web/packages/accounts/components/SetPasswordForm.tsx
+++ b/web/packages/accounts/components/SetPasswordForm.tsx
@@ -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
diff --git a/web/packages/accounts/components/SignUp.tsx b/web/packages/accounts/components/SignUp.tsx
index a41bec8531..cccaf2b379 100644
--- a/web/packages/accounts/components/SignUp.tsx
+++ b/web/packages/accounts/components/SignUp.tsx
@@ -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}>
diff --git a/web/packages/accounts/components/two-factor/VerifyTwoFactor.tsx b/web/packages/accounts/components/two-factor/VerifyTwoFactor.tsx
index 78b6c3410c..e21601f151 100644
--- a/web/packages/accounts/components/two-factor/VerifyTwoFactor.tsx
+++ b/web/packages/accounts/components/two-factor/VerifyTwoFactor.tsx
@@ -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>
+);
diff --git a/web/packages/accounts/pages/change-email.tsx b/web/packages/accounts/pages/change-email.tsx
index c1262a622d..4abe7d6988 100644
--- a/web/packages/accounts/pages/change-email.tsx
+++ b/web/packages/accounts/pages/change-email.tsx
@@ -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