From b552437327295a7222aca3c1478b0fa833fd4f20 Mon Sep 17 00:00:00 2001
From: Basile Spaenlehauer <spaenleh@gmail.com>
Date: Thu, 21 Nov 2024 14:02:23 +0100
Subject: [PATCH] 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
---
 .../settings/password/PasswordField.tsx       | 20 ++++++++++---------
 .../publicProfile/CustomTextField.tsx         | 10 ++++++----
 .../auth/components/common/PasswordInput.tsx  |  2 +-
 .../common/{Adornments.tsx => adornments.tsx} |  9 ++++++++-
 .../auth/components/register/EmailInput.tsx   |  8 +++++---
 .../auth/components/register/Register.tsx     |  8 +++++---
 .../RequestPasswordReset.tsx                  | 14 +++++++------
 .../requestPasswordReset/ResetPassword.tsx    |  2 +-
 .../auth/components/signIn/EmailInput.tsx     |  8 +++++---
 src/routes/auth/reset-password.tsx            |  2 +-
 10 files changed, 51 insertions(+), 32 deletions(-)
 rename src/modules/auth/components/common/{Adornments.tsx => adornments.tsx} (61%)

diff --git a/src/modules/account/settings/password/PasswordField.tsx b/src/modules/account/settings/password/PasswordField.tsx
index 9c6239308..fc44fad01 100644
--- 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
index bd0a1ab93..ac63ba3fd 100644
--- 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
index 67b233e37..27c76f15e 100644
--- 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/src/modules/auth/components/common/Adornments.tsx b/src/modules/auth/components/common/adornments.tsx
similarity index 61%
rename from src/modules/auth/components/common/Adornments.tsx
rename to src/modules/auth/components/common/adornments.tsx
index 7d0f8dd21..755042d89 100644
--- a/src/modules/auth/components/common/Adornments.tsx
+++ b/src/modules/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
index ac2a4b9ba..7e0403780 100644
--- 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
index e7e1f7ba3..38e913c61 100644
--- 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
index b3ac839c7..9824e06bf 100644
--- 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
index 8738b617b..51e663caa 100644
--- 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
index 00a6a35e7..2196b19da 100644
--- 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
index 160c2b034..c9ff352c0 100644
--- 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';