fix: styles

public/locales/en/completionForm.json

@@ -26,6 +26,8 @@
     "agreementPart1": "By continuing the registration process, you agree to the",
     "agreementLinkText": " Harmony Terms and Conditions",
     "agreementPart2": ".",
-    "sent": "sent"
+    "sent": "sent",
+    "country": "country",
+    "dateOfBirth": "Date of birth(optional)"
   }
 }

public/locales/fa/completionForm.json

@@ -26,6 +26,8 @@
     "agreementPart1": " ادامه فرایند ثبت نام به منزله تایید و قبول",
     "agreementLinkText": " قوانین و مقررات هارمونی",
     "agreementPart2": "می باشد.",
-    "sent": "ارسال شد!"
+    "sent": "ارسال شد!",
+    "country": "کشور",
+    "dateOfBirth": "تاریخ تولد(اختیاری)"
   }
 }

src/features/authentication/components/EmailSection.tsx

@@ -116,7 +116,7 @@ export function EmailSection({
               <Button
                 variant="text"
                 onClick={handleSendCode}
-                sx={{ width: '156px', color: '#2979FF' }}
+                sx={{ width: '156px' }}
                 disabled={
                   buttonState === 'sent' ||
                   buttonState === 'counting' ||
@@ -141,10 +141,7 @@ export function EmailSection({
                 variant="contained"
                 sx={{
                   width: '156px',
-                  backgroundColor: 'white',
                   border: 0.5,
-                  borderColor: '#2979FF',
-                  color: '#2979FF',
                 }}
                 onClick={handleVerifyCode}
                 disabled={isVerifyingCode}

src/features/authentication/components/PersonalInfoFields.tsx

@@ -12,15 +12,129 @@ import { useTranslation } from 'react-i18next';
 interface PersonalInfoFieldsProps {
   sex: string;
   setSex: (sex: string) => void;
+  country: string;
+  setCountry: (country: string) => void;
 }
 
-export function PersonalInfoFields({ sex, setSex }: PersonalInfoFieldsProps) {
+export function PersonalInfoFields({
+  sex,
+  setSex,
+  country,
+  setCountry,
+}: PersonalInfoFieldsProps) {
   const { t } = useTranslation('completionForm');
+  const countries = [
+    { name: 'Afghanistan', fa: 'افغانستان', flag: 'af' },
+    { name: 'Albania', fa: 'آلبانی', flag: 'al' },
+    { name: 'Algeria', fa: 'الجزایر', flag: 'dz' },
+    { name: 'Andorra', fa: 'آندورا', flag: 'ad' },
+    { name: 'Angola', fa: 'آنگولا', flag: 'ao' },
+    { name: 'Argentina', fa: 'آرژانتین', flag: 'ar' },
+    { name: 'Armenia', fa: 'ارمنستان', flag: 'am' },
+    { name: 'Australia', fa: 'استرالیا', flag: 'au' },
+    { name: 'Austria', fa: 'اتریش', flag: 'at' },
+    { name: 'Azerbaijan', fa: 'آذربایجان', flag: 'az' },
+    { name: 'Bahamas', fa: 'باهاما', flag: 'bs' },
+    { name: 'Bahrain', fa: 'بحرین', flag: 'bh' },
+    { name: 'Bangladesh', fa: 'بنگلادش', flag: 'bd' },
+    { name: 'Barbados', fa: 'باربادوس', flag: 'bb' },
+    { name: 'Belarus', fa: 'بلاروس', flag: 'by' },
+    { name: 'Belgium', fa: 'بلژیک', flag: 'be' },
+    { name: 'Belize', fa: 'بلیز', flag: 'bz' },
+    { name: 'Benin', fa: 'بنین', flag: 'bj' },
+    { name: 'Bhutan', fa: 'بوتان', flag: 'bt' },
+    { name: 'Bolivia', fa: 'بولیوی', flag: 'bo' },
+    { name: 'Bosnia and Herzegovina', fa: 'بوسنی و هرزگوین', flag: 'ba' },
+    { name: 'Botswana', fa: 'بوتسوانا', flag: 'bw' },
+    { name: 'Brazil', fa: 'برزیل', flag: 'br' },
+    { name: 'Brunei', fa: 'برونئی', flag: 'bn' },
+    { name: 'Bulgaria', fa: 'بلغارستان', flag: 'bg' },
+    { name: 'Burkina Faso', fa: 'بورکینافاسو', flag: 'bf' },
+    { name: 'Burundi', fa: 'بوروندی', flag: 'bi' },
+    { name: 'Cambodia', fa: 'کامبوج', flag: 'kh' },
+    { name: 'Cameroon', fa: 'کامرون', flag: 'cm' },
+    { name: 'Canada', fa: 'کانادا', flag: 'ca' },
+    { name: 'Cape Verde', fa: 'کیپ ورد', flag: '🇨🇻' },
+    {
+      name: 'Central African Republic',
+      fa: 'جمهوری آفریقای مرکزی',
+      flag: 'cf',
+    },
+    { name: 'Chad', fa: 'چاد', flag: 'td' },
+    { name: 'Chile', fa: 'شیلی', flag: 'cl' },
+    { name: 'China', fa: 'چین', flag: 'cn' },
+    { name: 'Colombia', fa: 'کلمبیا', flag: 'co' },
+    { name: 'Comoros', fa: 'کومور', flag: 'km' },
+    { name: 'Congo (Brazzaville)', fa: 'کنگو (برازاویل)', flag: 'cg' },
+    { name: 'Congo (Kinshasa)', fa: 'کنگو (کینشاسا)', flag: 'cd' },
+    { name: 'Costa Rica', fa: 'کاستاریکا', flag: 'cr' },
+    { name: 'Croatia', fa: 'کرواسی', flag: 'hr' },
+    { name: 'Cuba', fa: 'کوبا', flag: 'cu' },
+    { name: 'Cyprus', fa: 'قبرس', flag: 'cy' },
+    { name: 'Czech Republic', fa: 'جمهوری چک', flag: 'cz' },
+    { name: 'Denmark', fa: 'دانمارک', flag: 'dk' },
+    { name: 'Djibouti', fa: 'جیبوتی', flag: 'dj' },
+    { name: 'Dominica', fa: 'دومینیکا', flag: 'dm' },
+    { name: 'Dominican Republic', fa: 'جمهوری دومینیکن', flag: 'do' },
+    { name: 'Ecuador', fa: 'اکوادور', flag: 'ec' },
+    { name: 'Egypt', fa: 'مصر', flag: 'eg' },
+    { name: 'El Salvador', fa: 'السالوادور', flag: 'sv' },
+    { name: 'Equatorial Guinea', fa: 'گینه استوایی', flag: 'gq' },
+    { name: 'Eritrea', fa: 'اریتره', flag: 'er' },
+    { name: 'Estonia', fa: 'استونی', flag: 'ee' },
+    { name: 'Eswatini', fa: 'اسواتینی', flag: 'az' },
+    { name: 'Ethiopia', fa: 'اتیوپی', flag: 'et' },
+    { name: 'Fiji', fa: 'فیجی', flag: 'fj' },
+    { name: 'Finland', fa: 'فنلاند', flag: 'fi' },
+    { name: 'France', fa: 'فرانسه', flag: 'fr' },
+    { name: 'Gabon', fa: 'گابون', flag: 'ga' },
+    { name: 'Gambia', fa: 'گامبیا', flag: 'gm' },
+    { name: 'Georgia', fa: 'گرجستان', flag: 'ge' },
+    { name: 'Germany', fa: 'آلمان', flag: 'de' },
+    { name: 'Ghana', fa: 'غنا', flag: 'gh' },
+    { name: 'Greece', fa: 'یونان', flag: 'gr' },
+    { name: 'Guatemala', fa: 'گواتمالا', flag: 'gt' },
+    { name: 'India', fa: 'هند', flag: 'in' },
+    { name: 'Indonesia', fa: 'اندونزی', flag: 'id' },
+    { name: 'Iran', fa: 'ایران', flag: 'ir' },
+    { name: 'Iraq', fa: 'عراق', flag: 'iq' },
+    { name: 'Ireland', fa: 'ایرلند', flag: 'ie' },
+    { name: 'Israel', fa: 'اسرائیل', flag: 'il' },
+    { name: 'Italy', fa: 'ایتالیا', flag: 'it' },
+    { name: 'Japan', fa: 'ژاپن', flag: 'jp' },
+    { name: 'Jordan', fa: 'اردن', flag: 'jo' },
+    { name: 'Kazakhstan', fa: 'قزاقستان', flag: 'kz' },
+    { name: 'Kuwait', fa: 'کویت', flag: 'kw' },
+    { name: 'Lebanon', fa: 'لبنان', flag: 'lb' },
+    { name: 'Malaysia', fa: 'مالزی', flag: 'my' },
+    { name: 'Netherlands', fa: 'هلند', flag: 'nl' },
+    { name: 'Norway', fa: 'نروژ', flag: 'no' },
+    { name: 'Oman', fa: 'عمان', flag: 'om' },
+    { name: 'Pakistan', fa: 'پاکستان', flag: 'pk' },
+    { name: 'Palestine', fa: 'فلسطین', flag: 'ps' },
+    { name: 'Qatar', fa: 'قطر', flag: 'qa' },
+    { name: 'Russia', fa: 'روسیه', flag: 'ru' },
+    { name: 'Saudi Arabia', fa: 'عربستان سعودی', flag: 'sa' },
+    { name: 'Spain', fa: 'اسپانیا', flag: 'es' },
+    { name: 'Sweden', fa: 'سوئد', flag: 'se' },
+    { name: 'Switzerland', fa: 'سوئیس', flag: 'ch' },
+    { name: 'Syria', fa: 'سوریه', flag: 'sy' },
+    { name: 'Turkey', fa: 'ترکیه', flag: 'tr' },
+    { name: 'Ukraine', fa: 'اوکراین', flag: 'ua' },
+    { name: 'United Arab Emirates', fa: 'امارات متحده عربی', flag: 'ae' },
+    { name: 'United Kingdom', fa: 'بریتانیا', flag: 'gb' },
+    { name: 'United States', fa: 'ایالات متحده آمریکا', flag: 'us' },
+    { name: 'Yemen', fa: 'یمن', flag: 'ye' },
+  ];
 
   const handleChange = (e: SelectChangeEvent) => {
     setSex(e.target.value);
   };
 
+  const handleChangeCountry = (e: SelectChangeEvent) => {
+    setCountry(e.target.value);
+  };
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, px: 6 }}>
       <Box sx={{ display: 'flex', gap: 2 }}>
@@ -64,6 +178,42 @@ export function PersonalInfoFields({ sex, setSex }: PersonalInfoFieldsProps) {
           }}
         />
       </Box>
+      <Box sx={{ display: 'flex', gap: 2 }}>
+        <FormControl sx={{ width: '309px' }}>
+          <InputLabel>{t('completion.country')}</InputLabel>
+          <Select
+            value={country}
+            label={t('completion.country')}
+            onChange={handleChangeCountry}
+          >
+            {countries.map((c) => (
+              <MenuItem key={c.name} value={c.name}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <span>
+                    <img
+                      src={`https://flagcdn.com/w40/${c.flag}.png`}
+                      alt={c.name}
+                      width="24"
+                      height="16"
+                      style={{ borderRadius: '2px', border: '1px solid #ccc' }}
+                    />
+                  </span>
+                  <span>{c.fa}</span>
+                </Box>
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <TextField
+          label={t('completion.dateOfBirth')}
+          placeholder={t('completion.dateOfBirth')}
+          variant="outlined"
+          sx={{
+            width: '309px',
+          }}
+        />
+      </Box>
     </Box>
   );
 }

src/features/authentication/components/SubmitSection.tsx

@@ -8,15 +8,10 @@ export function SubmitSection() {
     <Box sx={{ display: 'flex', gap: 2, px: 6, mb: '17px' }}>
       <Typography variant="body2" sx={{ flex: 1 }} color="text.primary">
         {t('completion.agreementPart1')}
-        <Link target="_blank" sx={{ color: '#2979FF' }}>
-          {t('completion.agreementLinkText')}
-        </Link>{' '}
+        <Link target="_blank">{t('completion.agreementLinkText')}</Link>{' '}
         {t('completion.agreementPart2')}
       </Typography>
-      <Button
-        variant="contained"
-        sx={{ width: '247px', backgroundColor: '#2979FF' }}
-      >
+      <Button variant="contained" sx={{ width: '247px' }}>
         {t('completion.registerButton')}
       </Button>
     </Box>

src/features/authentication/components/UserCompletionForm.tsx

@@ -9,6 +9,7 @@ import { SubmitSection } from './SubmitSection';
 export function UserCompletionForm() {
   const { t } = useTranslation('completionForm');
   const [sex, setSex] = useState('');
+  const [country, setCountry] = useState('');
   const [showPasswordSection, setShowPasswordSection] = useState(false);
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
@@ -141,7 +142,12 @@ export function UserCompletionForm() {
           </Typography>
         </Box>
 
-        <PersonalInfoFields sex={sex} setSex={setSex} />
+        <PersonalInfoFields
+          sex={sex}
+          setSex={setSex}
+          country={country}
+          setCountry={setCountry}
+        />
 
         <PasswordSection
           showPasswordSection={showPasswordSection}