log in

src/components/Input.tsx

@@ -17,7 +17,7 @@ type Props = {
 const Input: FC<Props> = (props: Props) => {
 
     const inputClass = clx(
-        'w-full h-12 text-black block px-4 text-sm rounded-xl mt-1 border border-border',
+        'w-full h-10 text-black block px-4 text-xs rounded-xl mt-1 border border-border',
         props.readOnly && 'bg-gray-100',
         props.className
     );

src/index.css

@@ -36,7 +36,7 @@ textarea::placeholder {
   }
 }
 .rmdp-input {
-  min-height: 48px;
+  min-height: 40px;
   border-radius: 12px !important;
   border: 1px solid #d0d0d0 !important;
   font-size: 14px !important;

src/langs/fa.json

@@ -10,12 +10,15 @@
     "select_date": "انتخاب تاریخ",
     "dateofbirth": "تاریخ تولد",
     "national_code": "کد ملی",
+    "national_code_enter": "کد ملی خود را وارد کنید",
     "email": "ایمیل",
     "enter_email": "ایمیل خود را وارد کنید",
     "phonen_number": "شماره تماس",
     "enter_phone_number": "شماره تماس خود را وارد کنید",
     "password": "رمز عبور",
     "enter_password": "رمز عبور انتخابی خود را وارد کنید",
-    "next": "ادامه"
+    "next": "ادامه",
+    "before_registered": "آیا قبلا ثبت نام کردید؟",
+    "login": "ورود"
   }
 }

src/pages/auth/Login.tsx

@@ -11,43 +11,47 @@ const Login: FC = () => {
     const { t } = useTranslation('global')
 
     return (
-        <div className='w-full h-full flex justify-center py-[100px] items-center px-10'>
-            <div className='flex w-full max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden'>
+        <div className='w-full h-full flex justify-center py-[75px] items-center px-10'>
+            <div className='flex w-full max-h-[812px] max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden'>
                 <div className='flex-1 min-w-[50%] overflow-y-auto  bg-white p-9'>
                     <div className=''>
                         <img src={LogoSmallImage} className='w-8' />
                         <div className='mt-5'>
-                            <h2 className='text-3xl font-bold'>
+                            <h2 className='text-2xl font-bold'>
                                 {t('auth.welcome')}
                             </h2>
-                            <p className='text-description mt-2'>
+                            <p className='text-description text-sm mt-2'>
                                 {t('auth.enter_information')}
                             </p>
                         </div>
 
-                        <div className='mt-8'>
+                        {/* <div className='mt-5 text-sm'>
                             {t('auth.user_info')}
-                        </div>
+                        </div> */}
 
-                        <div className='mt-6 rowTwoInput'>
+                        <div className='mt-5 rowTwoInput'>
                             <Input
                                 label={t('auth.name')}
                                 placeholder={t('auth.enter_name')}
                             />
+
                             <Input
                                 label={t('auth.family')}
                                 placeholder={t('auth.enter_family')}
                             />
+
                         </div>
-                        <div className='mt-6 min-w-full rowTwoInput'>
+                        <div className='mt-4 min-w-full rowTwoInput'>
                             <DatePickerComponent label={t('auth.dateofbirth')} onChange={(date: string) => console.log(date)} placeholder={t('auth.select_date')} />
+
                             <Input
-                                label={t('auth.family')}
-                                placeholder={t('auth.enter_family')}
+                                label={t('auth.national_code')}
+                                placeholder={t('auth.national_code_enter')}
                             />
+
                         </div>
 
-                        <div className='mt-6 rowTwoInput'>
+                        <div className='mt-4 rowTwoInput'>
                             <Input
                                 label={t('auth.email')}
                                 placeholder={t('auth.enter_email')}
@@ -58,7 +62,7 @@ const Login: FC = () => {
                             />
                         </div>
 
-                        <div className='mt-6 rowTwoInput'>
+                        <div className='mt-4 rowTwoInput'>
                             <Input
                                 label={t('auth.password')}
                                 placeholder={t('auth.enter_password')}
@@ -68,9 +72,16 @@ const Login: FC = () => {
 
                         <Button
                             label={t('auth.next')}
-                            className='mt-6'
+                            className='mt-8'
                         />
 
+                        <div className='mt-6 flex justify-center gap-2 items-center text-sm'>
+                            <p className='text-description'>
+                                {t('auth.before_registered')}
+                            </p>
+                            <div>{t('auth.login')}</div>
+                        </div>
+
                     </div>
                 </div>