fix: update adornemnt and use slotprops (#468)

* fix: update adornemnt and use slotprops * fix: rename file * fix: temp rename file * fix: use correct file name
graasp · Nov 21, 2024 · b552437 · b552437
1 parent d8d89c6
commit b552437
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 32 deletions.
diff --git a/src/modules/account/settings/password/PasswordField.tsx b/src/modules/account/settings/password/PasswordField.tsx
@@ -24,15 +24,17 @@ export function PasswordField<T extends string>({
 
   return (
     <TextField
-      InputProps={{
-        sx: { paddingRight: 0 },
-        endAdornment: (
-          <InputAdornment position="end" sx={{ margin: 0 }}>
-            <IconButton onClick={() => setShowPassword((s) => !s)}>
-              <Eye />
-            </IconButton>
-          </InputAdornment>
-        ),
+      slotProps={{
+        input: {
+          sx: { paddingRight: 0 },
+          endAdornment: (
+            <InputAdornment position="end" sx={{ margin: 0 }}>
+              <IconButton onClick={() => setShowPassword((s) => !s)}>
+                <Eye />
+              </IconButton>
+            </InputAdornment>
+          ),
+        },
       }}
       label={label}
       variant="outlined"

diff --git a/src/modules/account/settings/publicProfile/CustomTextField.tsx b/src/modules/account/settings/publicProfile/CustomTextField.tsx
@@ -43,11 +43,13 @@ export function CustomTextField({
       rows={rows}
       required={required}
       multiline={multiline}
-      InputProps={
+      slotProps={
         Icon && {
-          startAdornment: (
-            <InputAdornment position="start">{Icon}</InputAdornment>
-          ),
+          input: {
+            startAdornment: (
+              <InputAdornment position="start">{Icon}</InputAdornment>
+            ),
+          },
         }
       }
       id={id}

diff --git a/src/modules/auth/components/common/PasswordInput.tsx b/src/modules/auth/components/common/PasswordInput.tsx
@@ -10,8 +10,8 @@ import { NS } from '@/config/constants';
 
 import { AUTH } from '~auth/langs';
 
-import { PasswordAdornment } from './Adornments';
 import { StyledTextField } from './StyledTextField';
+import { PasswordAdornment } from './adornments';
 
 type Props = {
   id: string;

diff --git a/...les/auth/components/common/Adornments.tsx → ...les/auth/components/common/adornments.tsx b/...les/auth/components/common/Adornments.tsx → ...les/auth/components/common/adornments.tsx
@@ -1,12 +1,19 @@
 import { InputAdornment } from '@mui/material';
 
-import { LockIcon, MailIcon } from 'lucide-react';
+import { LockIcon, MailIcon, UserRoundIcon } from 'lucide-react';
 
 export const EmailAdornment = (
   <InputAdornment position="start" color="inherit">
     <MailIcon color="currentColor" />
   </InputAdornment>
 );
+
+export const NameAdornment = (
+  <InputAdornment position="start" color="inherit">
+    <UserRoundIcon color="currentColor" />
+  </InputAdornment>
+);
+
 export const PasswordAdornment = (
   <InputAdornment position="start" color="inherit">
     <LockIcon color="currentColor" />

diff --git a/src/modules/auth/components/register/EmailInput.tsx b/src/modules/auth/components/register/EmailInput.tsx
@@ -6,8 +6,8 @@ import { NS } from '@/config/constants';
 import { AUTH } from '~auth/langs';
 import { emailValidator } from '~auth/validation';
 
-import { EmailAdornment } from '../common/Adornments';
 import { StyledTextField } from '../common/StyledTextField';
+import { EmailAdornment } from '../common/adornments';
 
 type Props = {
   required?: boolean;
@@ -52,8 +52,10 @@ export function EmailInput({
 
   return (
     <StyledTextField
-      InputProps={{
-        startAdornment: EmailAdornment,
+      slotProps={{
+        input: {
+          startAdornment: EmailAdornment,
+        },
       }}
       variant="outlined"
       value={value}

diff --git a/src/modules/auth/components/register/Register.tsx b/src/modules/auth/components/register/Register.tsx
@@ -28,10 +28,10 @@ import { useMobileAppLogin } from '~auth/hooks/useMobileAppLogin';
 import { AUTH } from '~auth/langs';
 import { emailValidator, nameValidator } from '~auth/validation';
 
-import { EmailAdornment } from '../common/Adornments';
 import { ErrorDisplay } from '../common/ErrorDisplay';
 import { FormHeader } from '../common/FormHeader';
 import { StyledTextField } from '../common/StyledTextField';
+import { NameAdornment } from '../common/adornments';
 import { AgreementForm } from '../register/AgreementForm';
 import { EmailInput } from './EmailInput';
 import { EnableAnalyticsForm } from './EnableAnalyticsForm';
@@ -162,8 +162,10 @@ export function Register({ search }: RegisterProps) {
       <FormControl>
         <Stack direction="column" spacing={1}>
           <StyledTextField
-            InputProps={{
-              startAdornment: EmailAdornment,
+            slotProps={{
+              input: {
+                startAdornment: NameAdornment,
+              },
             }}
             required
             placeholder={t(NAME_FIELD_LABEL)}

diff --git a/src/modules/auth/components/requestPasswordReset/RequestPasswordReset.tsx b/src/modules/auth/components/requestPasswordReset/RequestPasswordReset.tsx
@@ -21,7 +21,7 @@ import { HELP_EMAIL } from '~auth/constants';
 import { AUTH } from '~auth/langs';
 
 import { useRecaptcha } from '../../context/RecaptchaContext';
-import { EmailAdornment } from '../common/Adornments';
+import { EmailAdornment } from '../common/adornments';
 import { CenteredContent } from '../layout/CenteredContent';
 import { DialogHeader } from '../layout/DialogHeader';
 
@@ -79,11 +79,13 @@ export function RequestPasswordReset() {
             validate: (email) =>
               isEmail(email, {}) || t(AUTH.INVALID_EMAIL_ERROR),
           })}
-          FormHelperTextProps={{
-            id: REQUEST_PASSWORD_RESET_EMAIL_FIELD_HELPER_ID,
-          }}
-          InputProps={{
-            startAdornment: EmailAdornment,
+          slotProps={{
+            input: {
+              startAdornment: EmailAdornment,
+            },
+            formHelperText: {
+              id: REQUEST_PASSWORD_RESET_EMAIL_FIELD_HELPER_ID,
+            },
           }}
           placeholder={t(AUTH.EMAIL_INPUT_PLACEHOLDER)}
           helperText={errorMessage}

diff --git a/src/modules/auth/components/requestPasswordReset/ResetPassword.tsx b/src/modules/auth/components/requestPasswordReset/ResetPassword.tsx
@@ -35,7 +35,7 @@ import { HELP_EMAIL } from '~auth/constants';
 import { useValidateJWTToken } from '~auth/hooks/useValidateJWTToken';
 import { AUTH } from '~auth/langs';
 
-import { PasswordAdornment } from '../common/Adornments';
+import { PasswordAdornment } from '../common/adornments';
 import { CenteredContent } from '../layout/CenteredContent';
 import { DialogHeader } from '../layout/DialogHeader';
 import { InvalidTokenScreen } from './InvalidTokenScreen';

diff --git a/src/modules/auth/components/signIn/EmailInput.tsx b/src/modules/auth/components/signIn/EmailInput.tsx
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 
 import { NS } from '@/config/constants';
 
-import { EmailAdornment } from '../common/Adornments';
 import { StyledTextField } from '../common/StyledTextField';
+import { EmailAdornment } from '../common/adornments';
 
 type Props = {
   id?: string;
@@ -28,8 +28,10 @@ export function EmailInput({
   return (
     <StyledTextField
       id={id}
-      InputProps={{
-        startAdornment: EmailAdornment,
+      slotProps={{
+        input: {
+          startAdornment: EmailAdornment,
+        },
       }}
       variant="outlined"
       error={Boolean(error)}

diff --git a/src/routes/auth/reset-password.tsx b/src/routes/auth/reset-password.tsx
@@ -22,7 +22,7 @@ import { ButtonLink } from '@/components/ui/ButtonLink';
 import { TypographyLink } from '@/components/ui/TypographyLink';
 import { NS } from '@/config/constants';
 
-import { PasswordAdornment } from '~auth/components/common/Adornments';
+import { PasswordAdornment } from '~auth/components/common/adornments';
 import { CenteredContent } from '~auth/components/layout/CenteredContent';
 import { DialogHeader } from '~auth/components/layout/DialogHeader';
 import { InvalidTokenScreen } from '~auth/components/requestPasswordReset/InvalidTokenScreen';