Eye-Icon Alingnment

I make some little changes it is very begginer freindly issue . In which there are some protocols i have to follow dont use inline styling

Author: Jatin24062005

client/modules/User/components/LoginForm.jsx

@@ -65,19 +65,29 @@ function LoginForm() {
                     autoComplete="current-password"
                     {...field.input}
                   />
-                  <button
-                    className="form__eye__icon"
-                    type="button"
-                    onClick={handleVisibility}
-                    aria-hidden="true"
-                  >
-                    {showPassword ? (
-                      <AiOutlineEyeInvisible />
-                    ) : (
-                      <AiOutlineEye />
-                    )}
-                  </button>
-                </div>
+
+            <button
+  type="button"
+  onClick={handleVisibility}
+  aria-hidden="true"
+  style={{
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '0 10px ',
+    paddingBottom:'16px' // Add padding
+  }}
+>
+  {showPassword ? (
+    <AiOutlineEyeInvisible style={{ fontSize: '24px' }} /> // Add inline styles
+  ) : (
+    <AiOutlineEye style={{ fontSize: '24px' }} /> // Add inline styles
+  )}
+</button>
+       </div>
                 {field.meta.touched && field.meta.error && (
                   <span className="form-error" aria-live="polite">
                     {field.meta.error}

client/styles/components/_forms.scss

@@ -81,7 +81,7 @@
   font-size: 28px;
   position: absolute;
   right: 0px;
-  top: 4px;
+  padding-top: 3px;
   vertical-align: middle;
 }