fix: styles

src/features/authentication/components/EmailSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import {
   TextField,
   Box,
@@ -28,7 +28,7 @@ interface EmailSectionProps {
   handleSendCode: () => void;
   handleVerifyCode: () => void;
   emailVerified: boolean;
-  isVerifyingCode: boolean;
+  loading: boolean;
   handleEditEmail: () => void;
 }
 
@@ -46,15 +46,13 @@ export function EmailSection({
   handleSendCode,
   handleVerifyCode,
   emailVerified,
-  isVerifyingCode,
+  loading,
   handleEditEmail,
 }: EmailSectionProps) {
   const { t } = useTranslation('completionForm');
 
   const onSendCodeClick = () => {
-    if (!correctEmail) {
-      return;
-    }
+    if (!correctEmail) return;
     handleSendCode();
   };
 
@@ -62,15 +60,6 @@ export function EmailSection({
     setShowEmail(e.target.checked);
   };
 
-  useEffect(() => {
-    if (emailVerified) {
-    }
-  }, [emailVerified]);
-
-  const fieldSx = {
-    flex: '1 1 260px',
-  };
-
   return (
     <>
       <FormGroup>
@@ -90,7 +79,6 @@ export function EmailSection({
           </Typography>
         </Box>
       </FormGroup>
-
       {showEmail && (
         <Box
           sx={{
@@ -105,10 +93,7 @@ export function EmailSection({
               display: 'flex',
               flexWrap: 'wrap',
               gap: 2,
-              justifyContent: 'center',
-              '@media(min-width: 600px)': {
-                justifyContent: 'flex-start',
-              },
+              justifyContent: { xs: 'center', sm: 'flex-start' },
             }}
           >
             <TextField
@@ -118,40 +103,39 @@ export function EmailSection({
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               error={email.length > 0 && !correctEmail}
-              sx={fieldSx}
-              InputProps={{
-                startAdornment:
-                  !isVerifyingCode && emailVerified ? (
-                    <InputAdornment position="end">
-                      <Icon
-                        Component={TickCircle}
-                        size="medium"
-                        variant="Bold"
-                        color="success.main"
-                      />
-                    </InputAdornment>
-                  ) : null,
-                endAdornment:
-                  buttonState === 'counting' ? (
-                    <InputAdornment position="start">
-                      <IconButton onClick={handleEditEmail}>
+              sx={{ flex: '1 1 260px' }}
+              slotProps={{
+                input: {
+                  startAdornment:
+                    !loading && emailVerified ? (
+                      <InputAdornment position="end">
                         <Icon
-                          Component={Edit}
-                          color="primary.main"
+                          Component={TickCircle}
                           size="medium"
+                          variant="Bold"
+                          color="success.main"
                         />
-                      </IconButton>
-                    </InputAdornment>
-                  ) : null,
-              }}
-              inputProps={{
-                style: {
-                  paddingLeft: buttonState === 'counting' ? '0px' : undefined,
+                      </InputAdornment>
+                    ) : null,
+                  endAdornment:
+                    buttonState === 'counting' ? (
+                      <InputAdornment position="start">
+                        <IconButton onClick={handleEditEmail}>
+                          <Icon
+                            Component={Edit}
+                            color="primary.main"
+                            size="medium"
+                          />
+                        </IconButton>
+                      </InputAdornment>
+                    ) : null,
+                  sx: {
+                    paddingLeft: buttonState === 'counting' ? 0 : undefined,
+                  },
                 },
               }}
             />
-
-            {!isVerifyingCode && !emailVerified && (
+            {!loading && !emailVerified && (
               <Button
                 type="button"
                 variant="text"
@@ -167,7 +151,6 @@ export function EmailSection({
               </Button>
             )}
           </Box>
-
           {email && (
             <Typography
               sx={{ color: correctEmail ? 'success.main' : 'error.main' }}
@@ -176,17 +159,13 @@ export function EmailSection({
               {correctEmail ? '' : t('completion.emailCorrectForm')}
             </Typography>
           )}
-
           {!emailVerified && codeSent && correctEmail && (
             <Box
               sx={{
                 display: 'flex',
                 flexWrap: 'wrap',
                 gap: 2,
-                justifyContent: 'center',
-                '@media(min-width: 600px)': {
-                  justifyContent: 'flex-start',
-                },
+                justifyContent: { xs: 'center', sm: 'flex-start' },
               }}
             >
               <TextField
@@ -194,21 +173,21 @@ export function EmailSection({
                 variant="outlined"
                 value={verificationCode}
                 onChange={(e) => setVerificationCode(e.target.value)}
-                sx={fieldSx}
-                disabled={isVerifyingCode}
+                sx={{ flex: '1 1 260px' }}
+                disabled={loading}
               />
               <Button
                 variant="contained"
                 onClick={handleVerifyCode}
-                disabled={isVerifyingCode}
+                disabled={loading}
                 sx={{
                   width: { xs: '100%', sm: '156px' },
                   border: 0.5,
                   textTransform: 'none',
                 }}
               >
-                {isVerifyingCode ? (
-                  <CircularProgress />
+                {loading ? (
+                  <CircularProgress size={20} />
                 ) : (
                   t('completion.checkCodeButton')
                 )}