From c902fb8412b553c2b67f6a98716a26dbd7bc7d48 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <adikrish@redhat.com>
Date: Sat, 26 Aug 2023 20:42:15 +0530
Subject: [PATCH] fix: updated padding and set patterns

Signed-off-by: Adithya Krishna <adikrish@redhat.com>
---
 apps/web/src/components/forms/password.tsx | 20 ++++++--------------
 apps/web/src/components/forms/signin.tsx   | 10 +++-------
 apps/web/src/components/forms/signup.tsx   | 10 +++-------
 3 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/components/forms/password.tsx b/apps/web/src/components/forms/password.tsx
index 4689e0dbe..d258b2693 100644
--- a/apps/web/src/components/forms/password.tsx
+++ b/apps/web/src/components/forms/password.tsx
@@ -83,14 +83,6 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
     }
   };
 
-  const onShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-
-  const onShowConfirmPassword = () => {
-    setShowConfirmPassword(!showConfirmPassword);
-  };
-
   return (
     <form
       className={cn('flex w-full flex-col gap-y-4', className)}
@@ -105,16 +97,16 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           <Input
             id="password"
             type={showPassword ? 'text' : 'password'}
-            className="bg-background mt-2"
+            className="bg-background mt-2 pr-10"
             {...register('password')}
           />
 
           <Button
             variant="link"
             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'}
-            onClick={onShowPassword}
+            onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
               <EyeOff className="text-slate-500" />
@@ -136,16 +128,16 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           <Input
             id="repeated-password"
             type={showConfirmPassword ? 'text' : 'password'}
-            className="bg-background mt-2"
+            className="bg-background mt-2 pr-10"
             {...register('repeatedPassword')}
           />
 
           <Button
             variant="link"
             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'}
-            onClick={onShowConfirmPassword}
+            onClick={() => setShowConfirmPassword((showConfirmPassword) => !showConfirmPassword)}
           >
             {showConfirmPassword ? (
               <EyeOff className="text-slate-500" />
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index 2f3c3a4d6..d62e376ff 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -76,10 +76,6 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     }
   };
 
-  const onShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-
   return (
     <form
       className={cn('flex w-full flex-col gap-y-4', className)}
@@ -107,16 +103,16 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           <Input
             id="password"
             type={showPassword ? 'text' : 'password'}
-            className="bg-background mt-2"
+            className="bg-background mt-2 pr-10"
             {...register('password')}
           />
 
           <Button
             variant="link"
             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'}
-            onClick={onShowPassword}
+            onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
               <EyeOff className="text-slate-500" />
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index a66e43caf..795dad25d 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@@ -75,10 +75,6 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
     }
   };
 
-  const onShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-
   return (
     <form
       className={cn('flex w-full flex-col gap-y-4', className)}
@@ -113,16 +109,16 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
           <Input
             id="password"
             type={showPassword ? 'text' : 'password'}
-            className="bg-background mt-2"
+            className="bg-background mt-2 pr-10"
             {...register('password')}
           />
 
           <Button
             variant="link"
             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'}
-            onClick={onShowPassword}
+            onClick={() => setShowPassword((showPassword) => !showPassword)}
           >
             {showPassword ? (
               <EyeOff className="text-slate-500" />