fix: styles and make it responsive

src/features/authentication/components/EmailSection.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   TextField,
   Box,
@@ -11,6 +11,7 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { TickCircle, Edit, Refresh } from 'iconsax-react';
+import { CustomAlert } from '@/components/CustomAlert';
 
 interface EmailSectionProps {
   showEmail: boolean;
@@ -48,11 +49,33 @@ export function EmailSection({
   handleEditEmail,
 }: EmailSectionProps) {
   const { t } = useTranslation('completionForm');
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
+  const [showEmailErrorAlert, setShowEmailErrorAlert] = useState(false);
+  const onSendCodeClick = () => {
+    if (!correctEmail) {
+      setShowEmailErrorAlert(true);
+      return;
+    }
+    setShowEmailErrorAlert(false);
+    handleSendCode();
+  };
 
   const handleToggleEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
     setShowEmail(e.target.checked);
   };
 
+  useEffect(() => {
+    if (emailVerified) {
+      setShowSuccessAlert(true);
+    }
+  }, [emailVerified]);
+
+  const fieldSx = {
+    flex: '1 1 260px',
+    maxWidth: emailVerified ? '634px' : '462px',
+    width: '100%',
+  };
+
   return (
     <>
       <FormGroup>
@@ -61,7 +84,7 @@ export function EmailSection({
             display: 'flex',
             alignItems: 'center',
             gap: 1,
-            px: { xs: 2, sm: 6 },
+            px: { xs: 2, sm: 0 },
           }}
         >
           <Switch checked={showEmail} onChange={handleToggleEmail} />
@@ -79,68 +102,68 @@ export function EmailSection({
             display: 'flex',
             flexDirection: 'column',
             gap: 2,
-            px: { xs: 2, sm: 6 },
+            px: { xs: 2, sm: 0 },
           }}
         >
-          <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={email.length > 0 && !correctEmail}
-                sx={{ maxWidth: '462px' }}
-                InputProps={{
-                  startAdornment:
-                    !isVerifyingCode && emailVerified ? (
-                      <InputAdornment position="end">
-                        <TickCircle
-                          size="24"
-                          color="#2e7d32"
-                          variant="Bold"
-                          style={{
-                            position: 'absolute',
-                            right: 0,
-                            marginRight: '16px',
-                          }}
+          <Box
+            sx={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 2,
+              justifyContent: 'center',
+              '@media(min-width: 600px)': {
+                justifyContent: 'flex-start',
+              },
+            }}
+          >
+            <TextField
+              label={t('completion.email')}
+              variant="outlined"
+              fullWidth
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              error={email.length > 0 && !correctEmail}
+              sx={fieldSx}
+              InputProps={{
+                startAdornment:
+                  !isVerifyingCode && emailVerified ? (
+                    <InputAdornment position="end">
+                      <TickCircle
+                        size="24"
+                        color="#2e7d32"
+                        variant="Bold"
+                        style={{
+                          position: 'absolute',
+                          right: 0,
+                          marginRight: '16px',
+                        }}
+                      />
+                    </InputAdornment>
+                  ) : null,
+                endAdornment:
+                  buttonState === 'counting' ? (
+                    <InputAdornment position="start">
+                      <IconButton onClick={handleEditEmail}>
+                        <Edit
+                          size="20"
+                          color="#2979FF"
+                          style={{ position: 'absolute', left: 0 }}
                         />
-                      </InputAdornment>
-                    ) : null,
-                  endAdornment:
-                    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 ? 'success.main' : 'error.main' }}
-                  variant="caption"
-                >
-                  {correctEmail ? '' : t('completion.emailCorrectForm')}
-                </Typography>
-              )}
-            </Box>
+                      </IconButton>
+                    </InputAdornment>
+                  ) : null,
+              }}
+              inputProps={{
+                style: {
+                  paddingLeft: buttonState === 'counting' ? '0px' : undefined,
+                },
+              }}
+            />
 
             {!isVerifyingCode && !emailVerified && (
               <Button
                 variant="text"
-                onClick={handleSendCode}
+                onClick={onSendCodeClick}
                 sx={{
                   minWidth: '140px',
                   width: { xs: '100%', sm: '156px' },
@@ -150,14 +173,38 @@ export function EmailSection({
                 {getButtonLabel()}
               </Button>
             )}
+            {showEmailErrorAlert && (
+              <CustomAlert
+                open={showEmailErrorAlert}
+                onClose={() => setShowEmailErrorAlert(false)}
+                message={t('completion.emailCorrectForm')}
+                severity="error"
+                duration={4000}
+                delayOnClose={2000}
+                rtl
+              />
+            )}
           </Box>
 
-          {!emailVerified && codeSent && (
+          {email && (
+            <Typography
+              sx={{ color: correctEmail ? 'success.main' : 'error.main' }}
+              variant="caption"
+            >
+              {correctEmail ? '' : t('completion.emailCorrectForm')}
+            </Typography>
+          )}
+
+          {!emailVerified && codeSent && correctEmail && (
             <Box
               sx={{
                 display: 'flex',
-                flexDirection: { xs: 'column', sm: 'row' },
+                flexWrap: 'wrap',
                 gap: 2,
+                justifyContent: 'center',
+                '@media(min-width: 600px)': {
+                  justifyContent: 'flex-start',
+                },
               }}
             >
               <TextField
@@ -165,8 +212,7 @@ export function EmailSection({
                 variant="outlined"
                 value={verificationCode}
                 onChange={(e) => setVerificationCode(e.target.value)}
-                fullWidth={false}
-                sx={{ flex: 1 }}
+                sx={fieldSx}
                 disabled={isVerifyingCode}
               />
               <Button
@@ -200,6 +246,16 @@ export function EmailSection({
           )}
         </Box>
       )}
+
+      <CustomAlert
+        open={showSuccessAlert}
+        onClose={() => setShowSuccessAlert(false)}
+        message="ایمیل با موفقیت تایید شد"
+        severity="success"
+        duration={4000}
+        delayOnClose={2000}
+        rtl
+      />
     </>
   );
 }