fix: updated padding and set patterns

Signed-off-by: Adithya Krishna <adikrish@redhat.com>
This commit is contained in:
Adithya Krishna
2023-08-26 20:42:15 +05:30
committed by Mythie
parent b733defcd9
commit c902fb8412
3 changed files with 12 additions and 28 deletions

View File

@ -83,14 +83,6 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
} }
}; };
const onShowPassword = () => {
setShowPassword(!showPassword);
};
const onShowConfirmPassword = () => {
setShowConfirmPassword(!showConfirmPassword);
};
return ( return (
<form <form
className={cn('flex w-full flex-col gap-y-4', className)} className={cn('flex w-full flex-col gap-y-4', className)}
@ -105,16 +97,16 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
<Input <Input
id="password" id="password"
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
className="bg-background mt-2" className="bg-background mt-2 pr-10"
{...register('password')} {...register('password')}
/> />
<Button <Button
variant="link" variant="link"
type="button" type="button"
className="absolute right-0 top-0 flex h-full items-center justify-center" className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
aria-label={showPassword ? 'Mask password' : 'Reveal password'} aria-label={showPassword ? 'Mask password' : 'Reveal password'}
onClick={onShowPassword} onClick={() => setShowPassword((showPassword) => !showPassword)}
> >
{showPassword ? ( {showPassword ? (
<EyeOff className="text-slate-500" /> <EyeOff className="text-slate-500" />
@ -136,16 +128,16 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
<Input <Input
id="repeated-password" id="repeated-password"
type={showConfirmPassword ? 'text' : 'password'} type={showConfirmPassword ? 'text' : 'password'}
className="bg-background mt-2" className="bg-background mt-2 pr-10"
{...register('repeatedPassword')} {...register('repeatedPassword')}
/> />
<Button <Button
variant="link" variant="link"
type="button" type="button"
className="absolute right-0 top-0 flex h-full items-center justify-center" className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'} aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
onClick={onShowConfirmPassword} onClick={() => setShowConfirmPassword((showConfirmPassword) => !showConfirmPassword)}
> >
{showConfirmPassword ? ( {showConfirmPassword ? (
<EyeOff className="text-slate-500" /> <EyeOff className="text-slate-500" />

View File

@ -76,10 +76,6 @@ export const SignInForm = ({ className }: SignInFormProps) => {
} }
}; };
const onShowPassword = () => {
setShowPassword(!showPassword);
};
return ( return (
<form <form
className={cn('flex w-full flex-col gap-y-4', className)} className={cn('flex w-full flex-col gap-y-4', className)}
@ -107,16 +103,16 @@ export const SignInForm = ({ className }: SignInFormProps) => {
<Input <Input
id="password" id="password"
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
className="bg-background mt-2" className="bg-background mt-2 pr-10"
{...register('password')} {...register('password')}
/> />
<Button <Button
variant="link" variant="link"
type="button" type="button"
className="absolute right-0 top-0 flex h-full items-center justify-center" className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
aria-label={showPassword ? 'Mask password' : 'Reveal password'} aria-label={showPassword ? 'Mask password' : 'Reveal password'}
onClick={onShowPassword} onClick={() => setShowPassword((showPassword) => !showPassword)}
> >
{showPassword ? ( {showPassword ? (
<EyeOff className="text-slate-500" /> <EyeOff className="text-slate-500" />

View File

@ -75,10 +75,6 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
} }
}; };
const onShowPassword = () => {
setShowPassword(!showPassword);
};
return ( return (
<form <form
className={cn('flex w-full flex-col gap-y-4', className)} className={cn('flex w-full flex-col gap-y-4', className)}
@ -113,16 +109,16 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
<Input <Input
id="password" id="password"
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
className="bg-background mt-2" className="bg-background mt-2 pr-10"
{...register('password')} {...register('password')}
/> />
<Button <Button
variant="link" variant="link"
type="button" type="button"
className="absolute right-0 top-0 flex h-full items-center justify-center" className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
aria-label={showPassword ? 'Mask password' : 'Reveal password'} aria-label={showPassword ? 'Mask password' : 'Reveal password'}
onClick={onShowPassword} onClick={() => setShowPassword((showPassword) => !showPassword)}
> >
{showPassword ? ( {showPassword ? (
<EyeOff className="text-slate-500" /> <EyeOff className="text-slate-500" />