fix: styles

src/features/authentication/components/EmailSection.tsx

@@ -56,27 +56,42 @@ export function EmailSection({
   return (
     <>
       <FormGroup>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 6 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            px: { xs: 2, sm: 6 },
+          }}
+        >
           <Switch checked={showEmail} onChange={handleToggleEmail} />
-          <Typography sx={{ color: showEmail ? '#2979FF' : 'black' }}>
+          <Typography
+            sx={{ color: showEmail ? 'primary.main' : 'text.primary' }}
+          >
             {t('completion.determineEmail')}
           </Typography>
         </Box>
       </FormGroup>
+
       {showEmail && (
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, px: 6 }}>
-          <Box sx={{ display: 'flex', gap: 4 }}>
-            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            px: { xs: 2, sm: 6 },
+          }}
+        >
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+            <Box sx={{ flex: 1, minWidth: '260px', maxWidth: '634px' }}>
               <TextField
                 label={t('completion.email')}
                 variant="outlined"
+                fullWidth
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                error={!correctEmail}
-                sx={{
-                  width: !isVerifyingCode && !emailVerified ? '446px' : '634px',
-                  transition: 'width 0.3s',
-                }}
+                error={email.length > 0 && !correctEmail}
+                sx={{ maxWidth: '462px' }}
                 InputProps={{
                   startAdornment:
                     !isVerifyingCode && emailVerified ? (
@@ -114,46 +129,54 @@ export function EmailSection({
               />
               {email && (
                 <Typography
-                  sx={{ color: correctEmail ? 'green' : 'red' }}
+                  sx={{ color: correctEmail ? 'success.main' : 'error.main' }}
                   variant="caption"
                 >
                   {correctEmail ? '' : t('completion.emailCorrectForm')}
                 </Typography>
               )}
             </Box>
+
             {!isVerifyingCode && !emailVerified && (
               <Button
                 variant="text"
                 onClick={handleSendCode}
-                sx={{ width: '156px' }}
-                // disabled={
-                //   buttonState === 'sent' ||
-                //   buttonState === 'counting' ||
-                //   !correctEmail
-                // }
+                sx={{
+                  minWidth: '140px',
+                  width: { xs: '100%', sm: '156px' },
+                  alignSelf: 'center',
+                }}
               >
                 {getButtonLabel()}
               </Button>
             )}
           </Box>
+
           {!emailVerified && codeSent && (
-            <Box sx={{ display: 'flex', gap: 4 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: { xs: 'column', sm: 'row' },
+                gap: 2,
+              }}
+            >
               <TextField
                 label={t('completion.verificationCode')}
                 variant="outlined"
                 value={verificationCode}
                 onChange={(e) => setVerificationCode(e.target.value)}
-                sx={{ width: '446px' }}
+                fullWidth={false}
+                sx={{ flex: 1 }}
                 disabled={isVerifyingCode}
               />
               <Button
                 variant="contained"
-                sx={{
-                  width: '156px',
-                  border: 0.5,
-                }}
                 onClick={handleVerifyCode}
                 disabled={isVerifyingCode}
+                sx={{
+                  width: { xs: '100%', sm: '156px' },
+                  border: 0.5,
+                }}
               >
                 {isVerifyingCode ? (
                   <Box