danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: sync auth page otp step styles with new one

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-02 20:22:28 +03:30
parent 3deac45466
commit dc7625ae89
4 changed files with 50 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/button/PrimaryButton.tsx
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+47 -35
View File
@@ -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'>
<div className='block'>
<img src='/assets/images/login-banner.png' />
<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>
<OTPInputField
autoFocus
autoComplete='one-time-code'
type='number'
inputMode='numeric'
className='mt-10'
maxLength={6}
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>
}
<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 md:max-h-[812px] lg: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='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 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>
)
}