From f7a9fb5e2a1fa1db0afa2eee58b983a4dc0468f7 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Wed, 2 Jul 2025 21:33:35 +0330
Subject: [PATCH] chore: sync auth page create password step styles

---
 src/app/auth/page.tsx                         | 13 +--
 src/app/globals.css                           |  6 +-
 .../auth/components/StepNewPassword.tsx       | 85 +++++++++++--------
 3 files changed, 59 insertions(+), 45 deletions(-)

diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
index 4856d8a..3956ab4 100644
--- a/src/app/auth/page.tsx
+++ b/src/app/auth/page.tsx
@@ -9,12 +9,12 @@ import StepEnterOtp from '@/features/auth/components/StepEnterOtp';
 import { AUTH_PAGE_ELEMENT, AUTH_STEP } from '@/enums';
 import { useCountdown } from '@/hooks/useCountdown';
 import StepNewPassword from '@/features/auth/components/StepNewPassword';
-import { useLogin } from '@/hooks/auth/useLogin';
-import { useSignup } from '@/hooks/auth/useSignup';
-import { useCheckUserExistsLazy } from '@/hooks/auth/useCheckUserExists';
-import { useOtpRequest } from '@/hooks/auth/useOtpRequest';
-import { useOtpValidation } from '@/hooks/auth/useOtpValidation';
-import { useResetPassword } from '@/hooks/auth/useResetPassword';
+// import { useLogin } from '@/hooks/auth/useLogin';
+// import { useSignup } from '@/hooks/auth/useSignup';
+// import { useCheckUserExistsLazy } from '@/hooks/auth/useCheckUserExists';
+// import { useOtpRequest } from '@/hooks/auth/useOtpRequest';
+// import { useOtpValidation } from '@/hooks/auth/useOtpValidation';
+// import { useResetPassword } from '@/hooks/auth/useResetPassword';
 
 type Props = object
 
@@ -66,6 +66,7 @@ function AuthIndex({ }: Props) {
             setNumber(() => e.target.value)
         }
         else if (e.target.name == AUTH_PAGE_ELEMENT.INPUT_PASSWORD) {
+            console.log(e.target.value, 's');
             setPassword(() => e.target.value)
         }
         else if (e.target.name == AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT) {
diff --git a/src/app/globals.css b/src/app/globals.css
index 68cdee5..daa5a66 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -43,13 +43,13 @@ input[type="number"] {
 }
 
 input[type="password"] {
-  font-family: "fontello";
+  font-family: "irancell";
   font-style: normal;
   font-weight: normal;
   speak: none;
-  color: var(--color-disabled);
+  color: #b6b6b6da;
   margin: 5px 0px 10px 0px;
-  font-size: 34px;
+  font-size: 24px;
   /* Controls dot size (width & height) */
   line-height: 8px;
   /* Ensures vertical alignment */
diff --git a/src/features/auth/components/StepNewPassword.tsx b/src/features/auth/components/StepNewPassword.tsx
index a604762..e0a0e7b 100644
--- a/src/features/auth/components/StepNewPassword.tsx
+++ b/src/features/auth/components/StepNewPassword.tsx
@@ -2,6 +2,7 @@ import Button from '@/components/button/PrimaryButton';
 import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
 import InputField from '@/components/input/InputField';
 import { AUTH_PAGE_ELEMENT } from '@/enums';
+import Image from 'next/image';
 import React from 'react'
 
 type Props = {
@@ -17,44 +18,56 @@ type Props = {
 
 function StepNewPassword({ reset = false, onSubmit, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
     return (
-        <form autoComplete='off' onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'>
-            <div className='block'>
-                <img src='/assets/images/login-banner.png' />
-                <div className='pt-4' dir='rtl'>
-                    <h6 className='text-lg font-bold'>
-                        { reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور" }
-                    </h6>
-                    <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
+        <form autoComplete='off' onSubmit={onSubmit} className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'>
+            <div className='h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
+                <Image
+                    className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
+                    src={'/assets/images/login-banner.png'}
+                    alt='login banner'
+                    width={100}
+                    height={100}
+                    unoptimized={true}
+                />
+                <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
+                    <div className='w-full'>
+                        <div className='pt-4' dir='rtl'>
+                            <h6 className='text-lg font-bold'>
+                                {reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور"}
+                            </h6>
+                            <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
+                        </div>
+                        <InputField
+                            autoComplete='new-password'
+                            className='mt-10'
+                            htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
+                            labelText='کلمه عبور'
+                            value={value}
+                            placeholder=''
+                            onChange={onChange}
+                            type={passwordVisible ? 'text' : 'password'}>
+                            <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}>
+                                <EyeToggleIcon slash={passwordVisible} className="pointer-events-none" />
+                            </button>
+                        </InputField>
+                        <InputField
+                            autoComplete='new-password'
+                            valid={value === repeatValue}
+                            className='mt-6'
+                            htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
+                            labelText='تکرار کلمه عبور'
+                            value={repeatValue}
+                            placeholder=''
+                            onChange={onChange}
+                            type={repeatPasswordVisible ? 'text' : 'password'}>
+                            <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD} type='button' onClick={onClick}>
+                                <EyeToggleIcon slash={repeatPasswordVisible} className="pointer-events-none" />
+                            </button>
+                        </InputField>
+                    </div>
+                    <Button type='submit'>ورود</Button>
                 </div>
-                <InputField
-                    autoComplete='new-password'
-                    className='mt-10'
-                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
-                    labelText='کلمه عبور'
-                    value={value}
-                    placeholder=''
-                    onChange={onChange}
-                    type={passwordVisible ? 'text' : 'password'}>
-                    <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}>
-                        <EyeToggleIcon slash={passwordVisible} className="pointer-events-none" />
-                    </button>
-                </InputField>
-                <InputField
-                    autoComplete='new-password'
-                    valid={value === repeatValue}
-                    className='mt-6'
-                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
-                    labelText='تکرار کلمه عبور'
-                    value={repeatValue}
-                    placeholder=''
-                    onChange={onChange}
-                    type={repeatPasswordVisible ? 'text' : 'password'}>
-                    <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD} type='button' onClick={onClick}>
-                        <EyeToggleIcon slash={repeatPasswordVisible} className="pointer-events-none" />
-                    </button>
-                </InputField>
+
             </div>
-            <Button type='submit'>ورود</Button>
         </form>
     )
 }