chore: sync auth page otp step styles with new one

src/components/button/PrimaryButton.tsx

@@ -4,7 +4,7 @@ type Props = {} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 function Button({ children, className, ...rest }: Props) {
   return (
-    <button className={`${className} cursor-pointer bg-primary w-full rounded-normal p-3 text-white font-bold text-sm`} {...rest}>
+    <button className={`${className} cursor-pointer bg-primary w-full rounded-normal p-3 text-white font-normal text-sm`} {...rest}>
       {children}
     </button>
   )

src/components/input/InputField.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 function InputField({ onChange, htmlFor, labelText, children, valid = true, className, ...inputProps }: Props) {
     return (
-        <div className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border focus-within:border-primary`}>
+        <div className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
             <label
                 className='absolute right-2 -top-3 px-2 bg-container text-[12px] text-foreground'
                 htmlFor={htmlFor}>

src/components/input/MultiInputField.tsx

@@ -68,7 +68,7 @@ function OTPInputField({ onChange, maxLength = 6, htmlFor, labelText, className,
                             ref={ref}
                             value={values?.at(i) ?? ''}
                             maxLength={1}
-                            className='pt-1 outline-none text-center inline-flex items-center justify-center h-full relative border border-[#E5E5E5]  w-full rounded-normal group focus-within:border focus-within:border-primary' />
+                            className='pt-1 outline-none text-center inline-flex items-center justify-center h-full relative border border-border  w-full rounded-normal group focus-within:border focus:primary' />
                     )
                 })}
             </div>

src/features/auth/components/StepEnterOtp.tsx

@@ -1,6 +1,7 @@
 import Button from '@/components/button/PrimaryButton';
 import OTPInputField from '@/components/input/MultiInputField';
 import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
+import Image from 'next/image';
 import React from 'react'
 
 type Props = {
@@ -16,44 +17,55 @@ type Props = {
 function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRunning, secondsLeft }: Props) {
 
     return (
-        <form autoComplete='off' onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'>
+        <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='block'>
+            <div className='h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col md:max-h-[812px] lg:max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
-                <img src='/assets/images/login-banner.png' />
+                <Image
-                <div className='pt-4' dir='rtl'>
+                    className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
-                    {/* // TODO: add persian digits font */}
+                    src={'/assets/images/login-banner.png'}
-                    <h6 className='text-lg font-bold'>کد فعالسازی را وارد کنید</h6>
+                    alt='login banner'
-                    <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
+                    width={100}
-                </div>
+                    height={100}
-                <OTPInputField
+                    unoptimized={true}
-                    autoFocus
+                />
-                    autoComplete='one-time-code'
+                <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'>
-                    type='number'
+                    <div className='pt-4' dir='rtl'>
-                    inputMode='numeric'
+                        {/* // TODO: add persian digits font */}
-                    className='mt-10'
+                        <h6 className='text-lg font-bold'>کد فعالسازی را وارد کنید</h6>
-                    maxLength={6}
+                        <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
-                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
-                    labelText=''
-                    value={value}
-                    placeholder=''
-                    onChange={onChange} />
-
-                <div className='inline-flex justify-center items-center w-full pt-6 text-xs'>
-                    <div dir='rtl'>
-                        {timerRunning ?
-                            <div>{secondsLeft} ثانیه دیگر تا دریافت کد</div> :
-                            <div>
-                                کد را دریافت نکردید؟
-                                <span className='text-primary px-1'>
-                                    <button id={AUTH_PAGE_ELEMENTS.RESEND_OTP} className='cursor-pointer' onClick={onClick}>
-                                        دوباره امتحان کنید
-                                    </button>
-                                </span>
-                            </div>
-                        }
                     </div>
+                    <div className='w-full flex justify-center items-center'>
+                        <OTPInputField
+                            autoFocus
+                            autoComplete='one-time-code'
+                            type='number'
+                            inputMode='numeric'
+                            className='mt-10 min-h-14 max-w-[304px]'
+                            maxLength={6}
+                            htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
+                            labelText=''
+                            value={value}
+                            placeholder=''
+                            onChange={onChange} />
+                    </div>
+
+                    <div className='inline-flex justify-center items-center w-full pt-6 text-xs'>
+                        <div dir='rtl'>
+                            {timerRunning ?
+                                <div>{secondsLeft} ثانیه دیگر تا دریافت کد</div> :
+                                <div>
+                                    کد را دریافت نکردید؟
+                                    <span className='text-primary px-1'>
+                                        <button id={AUTH_PAGE_ELEMENTS.RESEND_OTP} className='' onClick={onClick}>
+                                            دوباره امتحان کنید
+                                        </button>
+                                    </span>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                    <Button type='submit'>بعدی</Button>
                 </div>
             </div>
-            <Button type='submit'>بعدی</Button>
         </form>
     )
 }