fix: style issue after modifications

src/features/auth/components/StepEnterNumber.tsx

@@ -1,35 +1,35 @@
-'use client';
+'use client'
 
-import Button from '@/components/button/PrimaryButton';
+import Button from '@/components/button/PrimaryButton'
-import InputField from '@/components/input/InputField';
+import InputField from '@/components/input/InputField'
-import { AUTH_PAGE_ELEMENT } from '@/enums';
+import { AUTH_PAGE_ELEMENT } from '@/enums'
-import Image from 'next/image';
+import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'
 
 type Props = {
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onChange: React.ChangeEventHandler<HTMLInputElement>
-    value: string;
+  value: string
   pending?: boolean | undefined
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
 
-function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
+function StepEnterNumber ({ onChange, pending, disabled, value }: Props) {
-    const [error, setError] = useState('');
+  const [error, setError] = useState('')
-    const { t } = useTranslation('auth');
+  const { t } = useTranslation('auth')
 
   const hasError = (e = error) => {
     return e.trim().length > 0
   }
 
   useEffect(() => {
-        let error = '';
+    let error = ''
     if (value.length > 0) {
       if (!/^09\d{7,9}$/.test(value)) {
-                error = t('Errors.PhoneNumberFormat');
+        error = t('Errors.PhoneNumberFormat')
       }
     }
 
-        setError(error);
+    setError(error)
   }, [t, value])
 
   return (
@@ -54,15 +54,22 @@ function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
             aria-errormessage={error}
             inputMode='tel'
             autoComplete='tel'
-                        className='mt-10 w-full'
+            className='mt-10 w-full bg-container'
             htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
             labelText={t('Enter.LabelPhoneNumber')}
             value={value}
             placeholder='09120000000'
             onChange={onChange}
-                        type='number' />
+            type='number'
+          />
         </div>
-                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('Enter.ButtonSubmit')}</Button>
+        <Button
+          disabled={disabled || hasError() || value.length <= 0}
+          pending={pending}
+          type='submit'
+        >
+          {t('Enter.ButtonSubmit')}
+        </Button>
       </div>
     </>
   )

src/features/auth/components/StepEnterOtp.tsx

@@ -1,38 +1,51 @@
-'use client';
+'use client'
 
-import Button from '@/components/button/PrimaryButton';
+import Button from '@/components/button/PrimaryButton'
-import OTPInputField from '@/components/input/MultiInputField';
+import OTPInputField from '@/components/input/MultiInputField'
-import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
+import {
-import clsx from 'clsx';
+  AUTH_PAGE_ELEMENT,
-import Image from 'next/image';
+  AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS
+} from '@/enums'
+import clsx from 'clsx'
+import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'
 
 type Props = {
-    onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
+  onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
-    onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    React.ChangeEventHandler<HTMLInputElement>
-    value: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement> | undefined
-    phoneNumber: string;
+  value: string
-    timerRunning: boolean;
+  phoneNumber: string
-    secondsLeft: number;
+  timerRunning: boolean
+  secondsLeft: number
   pending?: boolean | undefined
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
 
-function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) {
+function StepEnterOtp ({
-    const [error, setError] = useState('');
+  onChange,
-    const { t } = useTranslation('auth');
+  onClick,
+  pending,
+  disabled = false,
+  value,
+  phoneNumber,
+  timerRunning,
+  secondsLeft
+}: Props) {
+  const [error, setError] = useState('')
+  const { t } = useTranslation('auth')
 
   const hasError = (e = error) => {
     return e.trim().length > 0
   }
 
   useEffect(() => {
-        let error = '';
+    let error = ''
     if (!/^\d{6}$/.test(value)) {
-            error = t('Errors.OTPFormat');
+      error = t('Errors.OTPFormat')
     }
 
-        setError(error);
+    setError(error)
   }, [t, value])
 
   return (
@@ -50,7 +63,9 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
         <div className='pt-4'>
           {/* // TODO: add persian digits font */}
           <h6 className='text-lg font-bold'>{t('OTP.Heading')}</h6>
-                    <p className='mt-3 text-[13px]'>{t('OTP.Description').replace('{phoneNumber}', phoneNumber)}</p>
+          <p className='mt-3 text-[13px]'>
+            {t('OTP.Description').replace('{phoneNumber}', phoneNumber)}
+          </p>
         </div>
         <div className='w-full flex justify-center items-center'>
           <OTPInputField
@@ -64,13 +79,20 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
             labelText=''
             value={value}
             placeholder=''
-                        onChange={onChange} />
+            onChange={onChange}
+          />
         </div>
 
         <div className='text-center w-full pt-6 text-xs'>
           <div>
-                        {timerRunning ?
+            {timerRunning ? (
-                            <div>{t('OTP.TimerRunning').replace('{seconds}', String(secondsLeft))}</div> :
+              <div>
+                {t('OTP.TimerRunning').replace(
+                  '{seconds}',
+                  String(secondsLeft)
+                )}
+              </div>
+            ) : (
               <div>
                 {t('OTP.TimerOut')}
                 <button
@@ -79,15 +101,25 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
                   id={AUTH_PAGE_ELEMENTS.RESEND_OTP}
                   className={clsx(
                     'px-1 transition-colors duration-200',
-                                        !pending ? 'text-primary cursor-pointer' : 'text-neutral-200 cursor-auto'
+                    !pending
-                                    )} onClick={onClick}>
+                      ? 'text-primary cursor-pointer'
+                      : 'text-neutral-200 cursor-auto'
+                  )}
+                  onClick={onClick}
+                >
                   {t('OTP.TimerReset')}
                 </button>
               </div>
-                        }
+            )}
           </div>
         </div>
-                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('OTP.ButtonSubmit')}</Button>
+        <Button
+          disabled={disabled || hasError() || value.length <= 0}
+          pending={pending}
+          type='submit'
+        >
+          {t('OTP.ButtonSubmit')}
+        </Button>
       </div>
     </>
   )

src/features/auth/components/StepEnterPassword.tsx

@@ -1,39 +1,48 @@
-'use client';
+'use client'
 
-import Button from '@/components/button/PrimaryButton';
+import Button from '@/components/button/PrimaryButton'
-import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
+import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon'
-import InputField from '@/components/input/InputField';
+import InputField from '@/components/input/InputField'
-import { AUTH_PAGE_ELEMENT } from '@/enums';
+import { AUTH_PAGE_ELEMENT } from '@/enums'
-import Image from 'next/image';
+import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'
 
 type Props = {
-    onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
+  onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
-    onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    React.ChangeEventHandler<HTMLInputElement>
-    value: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement> | undefined
-    passwordVisible: boolean;
+  value: string
-    rememberMe: boolean;
+  passwordVisible: boolean
+  rememberMe: boolean
   pending?: boolean | undefined
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
 
-function StepEnterPassword({ onChange, onClick, pending, disabled = false, value, passwordVisible, rememberMe }: Props) {
+function StepEnterPassword ({
-    const [error, setError] = useState('');
+  onChange,
-    const { t } = useTranslation('auth');
+  onClick,
+  pending,
+  disabled = false,
+  value,
+  passwordVisible,
+  rememberMe
+}: Props) {
+  const [error, setError] = useState('')
+  const { t } = useTranslation('auth')
 
   const hasError = (e = error) => {
     return e.trim().length > 0
   }
 
   useEffect(() => {
-        let error = '';
+    let error = ''
     if (value.length > 0) {
       if (!/^.{6,}$/.test(value)) {
-                error = t('Errors.PasswordLength');
+        error = t('Errors.PasswordLength')
       }
     }
 
-        setError(error);
+    setError(error)
   }, [t, value])
 
   return (
@@ -58,31 +67,61 @@ function StepEnterPassword({ onChange, onClick, pending, disabled = false, value
             aria-errormessage={error}
             autoFocus
             autoComplete='current-password'
-                        className='mt-10'
+            className='mt-10 bg-container'
             htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
             labelText={t('EnterPass.LabelPass')}
             value={value}
             placeholder=''
             onChange={onChange}
-                        type={passwordVisible ? 'text' : 'password'}>
+            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
+              className='ps-3'
+              id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD}
+              type='button'
+              onClick={onClick}
+            >
+              <EyeToggleIcon
+                slash={passwordVisible}
+                className='pointer-events-none'
+              />
             </button>
           </InputField>
           <div className='inline-flex justify-between items-center w-full pt-3'>
-                        <button id={AUTH_PAGE_ELEMENT.RESET_PASSWORD} type='button' onClick={onClick} className='text-sm2 cursor-pointer'>
+            <button
+              id={AUTH_PAGE_ELEMENT.RESET_PASSWORD}
+              type='button'
+              onClick={onClick}
+              className='text-sm2 cursor-pointer'
+            >
               {t('EnterPass.ButtonRecover')}
             </button>
 
             <div className='inline-flex justify-between items-center'>
               {/* TODO: customize checkbox */}
-                            <label htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='text-sm2 px-2 py-0.5'>
+              <label
+                htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME}
+                className='text-sm2 px-2 py-0.5'
+              >
                 {t('EnterPass.LabelRememberance')}
               </label>
-                            <input name={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='h-4.5 w-4.5 checked:accent-primary' onChange={onChange} type='checkbox' checked={rememberMe} /></div>
+              <input
+                name={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME}
+                className='h-4.5 w-4.5 checked:accent-primary'
+                onChange={onChange}
+                type='checkbox'
+                checked={rememberMe}
+              />
             </div>
           </div>
-                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('EnterPass.ButtonSubmit')}</Button>
+        </div>
+        <Button
+          disabled={disabled || hasError() || value.length <= 0}
+          pending={pending}
+          type='submit'
+        >
+          {t('EnterPass.ButtonSubmit')}
+        </Button>
       </div>
     </>
   )

src/features/auth/components/StepNewPassword.tsx

@@ -1,51 +1,62 @@
-'use client';
+'use client'
 
-import Button from '@/components/button/PrimaryButton';
+import Button from '@/components/button/PrimaryButton'
-import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
+import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon'
-import InputField from '@/components/input/InputField';
+import InputField from '@/components/input/InputField'
-import { AUTH_PAGE_ELEMENT } from '@/enums';
+import { AUTH_PAGE_ELEMENT } from '@/enums'
-import Image from 'next/image';
+import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next'
 
 type Props = {
-    onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
+  onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
-    onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    React.ChangeEventHandler<HTMLInputElement>
-    value: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement> | undefined
-    repeatValue: string;
+  value: string
-    isReset?: boolean;
+  repeatValue: string
-    passwordVisible: boolean;
+  isReset?: boolean
-    repeatPasswordVisible: boolean;
+  passwordVisible: boolean
+  repeatPasswordVisible: boolean
   pending?: boolean | undefined
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
 
-function StepNewPassword({ isReset: reset = false, pending, disabled = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
+function StepNewPassword ({
-    const [error, setError] = useState('');
+  isReset: reset = false,
-    const [error2, setError2] = useState('');
+  pending,
-    const { t } = useTranslation('auth');
+  disabled = false,
+  onChange,
+  onClick,
+  value,
+  repeatValue,
+  passwordVisible,
+  repeatPasswordVisible
+}: Props) {
+  const [error, setError] = useState('')
+  const [error2, setError2] = useState('')
+  const { t } = useTranslation('auth')
 
   const hasError = (e = error) => {
     return e.trim().length > 0
   }
 
   useEffect(() => {
-        let error = '';
+    let error = ''
-        let error2 = '';
+    let error2 = ''
     if (value.length > 0) {
       if (!/^.{6,}$/.test(value)) {
-                error = t('Errors.PasswordLength');
+        error = t('Errors.PasswordLength')
       }
     }
     if (repeatValue.length > 0) {
       if (!/^.{6,}$/.test(repeatValue)) {
-                error2 = t('Errors.PasswordLength');
+        error2 = t('Errors.PasswordLength')
       } else if (repeatValue !== value) {
-                error2 = t('Errors.PasswordMatch');
+        error2 = t('Errors.PasswordMatch')
       }
     }
 
-        setError(error);
+    setError(error)
-        setError2(error2);
+    setError2(error2)
   }, [value, repeatValue, t])
 
   return (
@@ -63,7 +74,9 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
         <div className='w-full'>
           <div className='pt-4'>
             <h6 className='text-lg font-bold'>
-                            {reset ? t('NewPassword.HeadingResetPass') : t('NewPassword.HeadingCreatePass')}
+              {reset
+                ? t('NewPassword.HeadingResetPass')
+                : t('NewPassword.HeadingCreatePass')}
             </h6>
             <p className='mt-3 text-[13px]'>{t('NewPassword.Description')}</p>
           </div>
@@ -71,34 +84,60 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
             valid={!hasError()}
             aria-errormessage={error}
             autoComplete='new-password'
-                        className='mt-10'
+            className='mt-10 bg-container'
             htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
             labelText={t('NewPassword.LabelPass')}
             value={value}
             placeholder=''
             onChange={onChange}
-                        type={passwordVisible ? 'text' : 'password'}>
+            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
+              className='ps-3'
+              id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD}
+              type='button'
+              onClick={onClick}
+            >
+              <EyeToggleIcon
+                slash={passwordVisible}
+                className='pointer-events-none'
+              />
             </button>
           </InputField>
           <InputField
             valid={!hasError(error2)}
             aria-errormessage={error2}
             autoComplete='new-password'
-                        className='mt-6'
+            className='mt-6 bg-container'
             htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
             labelText={t('NewPassword.LabelRepeatPass')}
             value={repeatValue}
             placeholder=''
             onChange={onChange}
-                        type={repeatPasswordVisible ? 'text' : 'password'}>
+            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
+              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 disabled={disabled || hasError() || hasError(error2) || value.length <= 0} pending={pending} type='submit'>{t('NewPassword.ButtonSubmit')}</Button>
+        <Button
+          disabled={
+            disabled || hasError() || hasError(error2) || value.length <= 0
+          }
+          pending={pending}
+          type='submit'
+        >
+          {t('NewPassword.ButtonSubmit')}
+        </Button>
       </div>
     </>
   )