From 6d94a0d037b5bec1cc2d923a8232db467f19483e Mon Sep 17 00:00:00 2001
From: Koosha Lahouti <klahouti81@gmail.com>
Date: Tue, 22 Jul 2025 12:08:48 +0330
Subject: [PATCH] fix: styles

---
 public/locales/en/completionForm.json         |  31 +++++
 public/locales/fa/completionForm.json         |   3 +-
 src/App.tsx                                   |   2 +
 .../components/EmailSection.tsx               |  59 ++++-----
 .../components/PasswordSection.tsx            | 118 ++++++++++++------
 .../components/PasswordValidation.tsx         |   2 +-
 .../components/PersonalInfoFields.tsx         |   4 +-
 .../components/SubmitSection.tsx              |   2 +-
 .../components/UserCompletionForm.tsx         |   8 +-
 9 files changed, 152 insertions(+), 77 deletions(-)
 create mode 100644 public/locales/en/completionForm.json

diff --git a/public/locales/en/completionForm.json b/public/locales/en/completionForm.json
new file mode 100644
index 0000000..4ffaedd
--- /dev/null
+++ b/public/locales/en/completionForm.json
@@ -0,0 +1,31 @@
+{
+  "completion": {
+    "title": "Completion of user account information",
+    "description": "Enter your business information",
+    "name": "Name",
+    "familyName": "Family Name",
+    "gender": "Gender",
+    "optionalNationalCode": "National Code(Optional)",
+    "determinePassword": "Determine Password",
+    "password": "Password",
+    "passwordRepetition": "Repeat password",
+    "determineEmail": "Connect your email",
+    "email": "Email",
+    "vericationCodeButton": "Send verification code",
+    "verificationCode": "verification code",
+    "checkCodeButton": "Check code",
+    "registerButton": "Confirm and Register",
+    "man": "male",
+    "woman": "female",
+    "hasNumber": "includes number",
+    "hasMinLength": "at least 8 characters",
+    "hasUpperAndLower": "includes a lowercase and uppercase letter",
+    "hasSpecialChar": "includes sign (!@#$%^&*)",
+    "notCompatibility": "does not match",
+    "emailCorrectForm": "Enter the correct email form.",
+    "agreementPart1": "By continuing the registration process, you agree to the",
+    "agreementLinkText": " Harmony Terms and Conditions",
+    "agreementPart2": ".",
+    "sent": "sent"
+  }
+}
diff --git a/public/locales/fa/completionForm.json b/public/locales/fa/completionForm.json
index bd9a9bd..0f7e883 100644
--- a/public/locales/fa/completionForm.json
+++ b/public/locales/fa/completionForm.json
@@ -25,6 +25,7 @@
     "emailCorrectForm": "فرم درست ایمیل را وارد کنید",
     "agreementPart1": " ادامه فرایند ثبت نام به منزله تایید و قبول",
     "agreementLinkText": " قوانین و مقررات هارمونی",
-    "agreementPart2": "می باشد."
+    "agreementPart2": "می باشد.",
+    "sent": "ارسال شد!"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
index f1bd30e..dcc2651 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import {
 import './App.css';
 import { useTranslation } from 'react-i18next';
 import { LanguageManager } from './components/LanguageManager';
+import { UserCompletionForm } from './features/authentication/components/UserCompletionForm';
 
 function App() {
   const { t } = useTranslation();
@@ -18,6 +19,7 @@ function App() {
     <>
       <CssBaseline />
       <LanguageManager />
+      <UserCompletionForm />
       <div style={{ padding: '16px' }}>
         <Typography variant="h3">{t('helloWorld')}</Typography>
         <Box
diff --git a/src/features/authentication/components/EmailSection.tsx b/src/features/authentication/components/EmailSection.tsx
index ae54a59..9512151 100644
--- a/src/features/authentication/components/EmailSection.tsx
+++ b/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')
diff --git a/src/features/authentication/components/PasswordSection.tsx b/src/features/authentication/components/PasswordSection.tsx
index 507bc17..3194b07 100644
--- a/src/features/authentication/components/PasswordSection.tsx
+++ b/src/features/authentication/components/PasswordSection.tsx
@@ -45,6 +45,8 @@ export function PasswordSection({
 }: PasswordSectionProps) {
   const { t } = useTranslation('completionForm');
   const [showPasswordText, setShowPasswordText] = useState(false);
+  const [showPasswordRepititonText, setShowPasswordRepetitionText] =
+    useState(false);
 
   const handleTogglePasswordSection = (
     e: React.ChangeEvent<HTMLInputElement>,
@@ -56,6 +58,10 @@ export function PasswordSection({
     setShowPasswordText((prev) => !prev);
   };
 
+  const handleTogglePasswordRepetitionEye = () => {
+    setShowPasswordRepetitionText((prev) => !prev);
+  };
+
   return (
     <>
       <FormGroup>
@@ -63,14 +69,10 @@ export function PasswordSection({
           <Switch
             checked={showPasswordSection}
             onChange={handleTogglePasswordSection}
-            sx={{
-              '& .MuiSwitch-switchBase.Mui-checked': { color: '#2979FF' },
-              '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-                backgroundColor: '#2979FF',
-              },
-            }}
           />
-          <Typography sx={{ color: showPasswordSection ? '#2979FF' : 'black' }}>
+          <Typography
+            sx={{ color: showPasswordSection ? '#2979FF' : 'text.primary' }}
+          >
             {t('completion.determinePassword')}
           </Typography>
         </Box>
@@ -88,25 +90,45 @@ export function PasswordSection({
               sx={{ width: '309px' }}
               InputProps={{
                 endAdornment: (
-                  <InputAdornment position="end">
-                    {validPassword && (
-                      <TickCircle
-                        size="16"
-                        color="#2e7d32"
-                        variant="Bold"
-                        style={{ marginRight: '8px' }}
-                      />
-                    )}
-                    <IconButton onClick={handleTogglePasswordEye}>
-                      {showPasswordText ? (
-                        <EyeSlash size="20" color="#000" />
-                      ) : (
-                        <Eye size="20" color="#000" />
+                  <InputAdornment position="end" sx={{ height: 'unset' }}>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: '100%',
+                      }}
+                    >
+                      {validPassword && (
+                        <TickCircle
+                          size="24"
+                          color="#14AE5C"
+                          variant="Bold"
+                          style={{
+                            position: 'absolute',
+                            right: 0,
+                            marginRight: '16px',
+                          }}
+                        />
                       )}
-                    </IconButton>
+                      <IconButton
+                        onClick={handleTogglePasswordEye}
+                        sx={{ ml: validPassword ? 0.5 : 'auto' }}
+                      >
+                        {showPasswordText ? (
+                          <Eye size="24" color="#2979FF" />
+                        ) : (
+                          <EyeSlash size="24" color="#2979FF" />
+                        )}
+                      </IconButton>
+                    </Box>
                   </InputAdornment>
                 ),
               }}
+              inputProps={{
+                style: {
+                  paddingRight: validPassword ? '48px' : '20px',
+                },
+              }}
             />
 
             {password && (
@@ -147,28 +169,48 @@ export function PasswordSection({
                 : ' '
             }
             sx={{ width: '309px' }}
-            type={showPasswordText ? 'text' : 'password'}
+            type={showPasswordRepititonText ? 'text' : 'password'}
             InputProps={{
               endAdornment: (
-                <InputAdornment position="end">
-                  {confirmPassword.length > 0 && matchPassword && (
-                    <TickCircle
-                      size="16"
-                      color="#2e7d32"
-                      variant="Bold"
-                      style={{ marginRight: '8px' }}
-                    />
-                  )}
-                  <IconButton onClick={handleTogglePasswordEye}>
-                    {showPasswordText ? (
-                      <EyeSlash size="20" color="#000" />
-                    ) : (
-                      <Eye size="20" color="#000" />
+                <InputAdornment position="end" sx={{ height: 'unset' }}>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      width: '100%',
+                    }}
+                  >
+                    {confirmPassword.length > 0 && matchPassword && (
+                      <TickCircle
+                        size="24"
+                        color="#14AE5C"
+                        variant="Bold"
+                        style={{
+                          position: 'absolute',
+                          right: 0,
+                          marginRight: '16px',
+                        }}
+                      />
                     )}
-                  </IconButton>
+                    <IconButton
+                      onClick={handleTogglePasswordRepetitionEye}
+                      sx={{ ml: validPassword ? 0.5 : 'auto' }}
+                    >
+                      {showPasswordRepititonText ? (
+                        <Eye size="24" color="#2979FF" />
+                      ) : (
+                        <EyeSlash size="24" color="#2979FF" />
+                      )}
+                    </IconButton>
+                  </Box>
                 </InputAdornment>
               ),
             }}
+            inputProps={{
+              style: {
+                paddingRight: validPassword ? '48px' : '20px',
+              },
+            }}
           />
         </Box>
       )}
diff --git a/src/features/authentication/components/PasswordValidation.tsx b/src/features/authentication/components/PasswordValidation.tsx
index 97154fe..9625d2c 100644
--- a/src/features/authentication/components/PasswordValidation.tsx
+++ b/src/features/authentication/components/PasswordValidation.tsx
@@ -14,7 +14,7 @@ export function PasswordValidationItem({
     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
       <TickCircle
         size="16"
-        color={isValid ? '#2e7d32' : '#2979FF'}
+        color={isValid ? '#14AE5C' : '#2979FF'}
         variant={isValid ? 'Bold' : 'Outline'}
       />
       <Typography variant="body2" color="text.primary">
diff --git a/src/features/authentication/components/PersonalInfoFields.tsx b/src/features/authentication/components/PersonalInfoFields.tsx
index fab1045..dd895bd 100644
--- a/src/features/authentication/components/PersonalInfoFields.tsx
+++ b/src/features/authentication/components/PersonalInfoFields.tsx
@@ -44,10 +44,8 @@ export function PersonalInfoFields({ sex, setSex }: PersonalInfoFieldsProps) {
 
       <Box sx={{ display: 'flex', gap: 2 }}>
         <FormControl sx={{ width: '309px' }}>
-          <InputLabel id="sex-label">{t('completion.gender')}</InputLabel>
+          <InputLabel>{t('completion.gender')}</InputLabel>
           <Select
-            labelId="sex-label"
-            id="sex"
             value={sex}
             label={t('completion.gender')}
             onChange={handleChange}
diff --git a/src/features/authentication/components/SubmitSection.tsx b/src/features/authentication/components/SubmitSection.tsx
index 7e7213a..77be9ae 100644
--- a/src/features/authentication/components/SubmitSection.tsx
+++ b/src/features/authentication/components/SubmitSection.tsx
@@ -6,7 +6,7 @@ export function SubmitSection() {
 
   return (
     <Box sx={{ display: 'flex', gap: 2, px: 6, mb: '17px' }}>
-      <Typography variant="body2" sx={{ flex: 1 }}>
+      <Typography variant="body2" sx={{ flex: 1 }} color="text.primary">
         {t('completion.agreementPart1')}
         <Link target="_blank" sx={{ color: '#2979FF' }}>
           {t('completion.agreementLinkText')}
diff --git a/src/features/authentication/components/UserCompletionForm.tsx b/src/features/authentication/components/UserCompletionForm.tsx
index 2c602aa..971aefc 100644
--- a/src/features/authentication/components/UserCompletionForm.tsx
+++ b/src/features/authentication/components/UserCompletionForm.tsx
@@ -66,7 +66,7 @@ export function UserCompletionForm() {
     str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
 
   const getButtonLabel = () => {
-    if (buttonState === 'sent') return 'ارسال شد!';
+    if (buttonState === 'sent') return t('completion.sent');
     if (buttonState === 'counting') {
       const minutes = String(Math.floor(countdown / 60)).padStart(2, '0');
       const seconds = String(countdown % 60).padStart(2, '0');
@@ -82,7 +82,7 @@ export function UserCompletionForm() {
     setTimeout(() => {
       setButtonState('counting');
       setCountdown(60);
-    }, 1000);
+    }, 500);
   };
 
   const handleVerifyCode = () => {
@@ -90,7 +90,7 @@ export function UserCompletionForm() {
     setTimeout(() => {
       setIsVerifyingCode(false);
       setEmailVerified(true);
-    }, 1000);
+    }, 500);
   };
 
   const handleEditEmail = () => {
@@ -112,7 +112,7 @@ export function UserCompletionForm() {
       <Box
         sx={{
           width: '730px',
-          backgroundColor: 'white',
+          backgroundColor: '#FFFFFF',
           border: '1px solid #ccc',
           display: 'flex',
           flexDirection: 'column',