From 69f6acbc4d31adaa48b7bb785f167be84939ea55 Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Mon, 10 Apr 2023 14:30:29 +0200
Subject: [PATCH] fix(web): PasswordField eye icon alignment (#824)

* keep eye icon inside PasswordField during onboarding

* proper solution

* removed redundant relative class
---
 web/src/components/inputs/input.tsx | 79 ++++++++++++++++-------------
 1 file changed, 44 insertions(+), 35 deletions(-)

diff --git a/web/src/components/inputs/input.tsx b/web/src/components/inputs/input.tsx
index d52021c..367022e 100644
--- a/web/src/components/inputs/input.tsx
+++ b/web/src/components/inputs/input.tsx
@@ -247,14 +247,14 @@ export const TextArea = ({
 );
 
 interface PasswordFieldProps {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    columns?: COL_WIDTHS;
-    autoComplete?: string;
-    defaultValue?: string;
-    help?: string;
-    required?: boolean;
+  name: string;
+  label?: string;
+  placeholder?: string;
+  columns?: COL_WIDTHS;
+  autoComplete?: string;
+  defaultValue?: string;
+  help?: string;
+  required?: boolean;
 }
 
 export const PasswordField = ({
@@ -280,35 +280,44 @@ export const PasswordField = ({
           {label} {required && <span className="text-gray-500">*</span>}
         </label>
       )}
-      <Field name={name} defaultValue={defaultValue}>
-        {({
-          field,
-          meta
-        }: FieldProps) => (
-          <div className="sm:col-span-2 relative">
-            <input
-              {...field}
-              id={name}
-              type={isVisible ? "text" : "password"}
-              autoComplete={autoComplete}
-              className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "mt-2 block w-full dark:bg-gray-800 dark:text-gray-100 rounded-md")}
-              placeholder={placeholder}
-            />
+      <div>
+        <Field name={name} defaultValue={defaultValue}>
+          {({
+            field,
+            meta
+          }: FieldProps) => (
+            <>
+              <div className="sm:col-span-2 relative">
+                <input
+                  {...field}
+                  id={name}
+                  type={isVisible ? "text" : "password"}
+                  autoComplete={autoComplete}
+                  className={classNames(
+                    meta.touched && meta.error
+                      ? "focus:ring-red-500 focus:border-red-500 border-red-500"
+                      : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
+                    "mt-2 block w-full dark:bg-gray-800 dark:text-gray-100 rounded-md"
+                  )}
+                  placeholder={placeholder}
+                />
 
-            <div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
-              {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
-            </div>
+                <div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
+                  {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />
+                    : <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
+                </div>
+              </div>
+              {help && (
+                <p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p>
+              )}
 
-            {help && (
-              <p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p>
-            )}
-
-            {meta.touched && meta.error && (
-              <p className="error text-sm text-red-600 mt-1">* {meta.error}</p>
-            )}
-          </div>
-        )}
-      </Field>
+              {meta.touched && meta.error && (
+                <p className="error text-sm text-red-600 mt-1">* {meta.error}</p>
+              )}
+            </>
+          )}
+        </Field>
+      </div>
     </div>
   );
 };