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,26 +17,36 @@ 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
+                    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='pt-4' dir='rtl'>
                         {/* // TODO: add persian digits font */}
                         <h6 className='text-lg font-bold'>کد فعالسازی را وارد کنید</h6>
                         <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
                     </div>
+                    <div className='w-full flex justify-center items-center'>
                         <OTPInputField
                             autoFocus
                             autoComplete='one-time-code'
                             type='number'
                             inputMode='numeric'
-                    className='mt-10'
+                            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'>
@@ -44,7 +55,7 @@ function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRu
                                 <div>
                                     کد را دریافت نکردید؟
                                     <span className='text-primary px-1'>
-                                    <button id={AUTH_PAGE_ELEMENTS.RESEND_OTP} className='cursor-pointer' onClick={onClick}>
+                                        <button id={AUTH_PAGE_ELEMENTS.RESEND_OTP} className='' onClick={onClick}>
                                             دوباره امتحان کنید
                                         </button>
                                     </span>
@@ -52,8 +63,9 @@ function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRu
                             }
                         </div>
                     </div>
-            </div>
                     <Button type='submit'>بعدی</Button>
+                </div>
+            </div>
         </form>
     )
 }