fix: styles

src/features/authentication/components/EmailSection.tsx

@@ -57,18 +57,7 @@ export function EmailSection({
     <>
       <FormGroup>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 6 }}>
-          <Switch
-            checked={showEmail}
-            onChange={handleToggleEmail}
-            sx={{
-              '& .MuiSwitch-switchBase.Mui-checked': {
-                color: '#2979FF',
-              },
-              '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-                backgroundColor: '#2979FF',
-              },
-            }}
-          />
+          <Switch checked={showEmail} onChange={handleToggleEmail} />
           <Typography sx={{ color: showEmail ? '#2979FF' : 'black' }}>
             {t('completion.determineEmail')}
           </Typography>
@@ -89,33 +78,45 @@ export function EmailSection({
                 }}
                 InputProps={{
                   startAdornment:
-                    buttonState === 'counting' ? (
-                      <InputAdornment position="start">
-                        <IconButton size="small" onClick={handleEditEmail}>
-                          <Edit size="20" color="#2979FF" />
-                        </IconButton>
+                    !isVerifyingCode && emailVerified ? (
+                      <InputAdornment position="end">
+                        <TickCircle
+                          size="24"
+                          color="#2e7d32"
+                          variant="Bold"
+                          style={{
+                            position: 'absolute',
+                            right: 0,
+                            marginRight: '16px',
+                          }}
+                        />
                       </InputAdornment>
                     ) : null,
                   endAdornment:
-                    !isVerifyingCode && emailVerified ? (
-                      <TickCircle size="16" color="#2e7d32" variant="Bold" />
+                    buttonState === 'counting' ? (
+                      <InputAdornment position="start">
+                        <IconButton onClick={handleEditEmail}>
+                          <Edit
+                            size="20"
+                            color="#2979FF"
+                            style={{ position: 'absolute', left: 0 }}
+                          />
+                        </IconButton>
+                      </InputAdornment>
                     ) : null,
                 }}
+                inputProps={{
+                  style: {
+                    paddingLeft: buttonState === 'counting' ? '0px' : undefined,
+                  },
+                }}
               />
-              {email && (
-                <Typography
-                  sx={{ color: correctEmail ? 'green' : 'red' }}
-                  variant="caption"
-                >
-                  {correctEmail ? '' : t('completion.emailCorrectForm')}
-                </Typography>
-              )}
             </Box>
             {!isVerifyingCode && !emailVerified && (
               <Button
                 variant="text"
                 onClick={handleSendCode}
-                sx={{ width: '200px', color: '#2979FF' }}
+                sx={{ width: '156px', color: '#2979FF' }}
                 disabled={
                   buttonState === 'sent' ||
                   buttonState === 'counting' ||
@@ -160,7 +161,7 @@ export function EmailSection({
                       },
                     }}
                   >
-                    <Refresh size="20" color="text.secondary" />
+                    <Refresh size="24" color="text.secondary" />
                   </Box>
                 ) : (
                   t('completion.checkCodeButton')