From 198f6f19145cb02c4d3cd16f38d87598dea08f3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?=
 <30907944+joaodiaslobo@users.noreply.github.com>
Date: Sun, 17 Dec 2023 12:45:07 +0000
Subject: [PATCH] feat: improve authentication forms (#605)

---
 components/PasswordInput/index.tsx | 19 ++++++++++++-------
 styles/globals.css                 | 16 ++++++++++++++++
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/components/PasswordInput/index.tsx b/components/PasswordInput/index.tsx
index 82181a6b..6cde9441 100644
--- a/components/PasswordInput/index.tsx
+++ b/components/PasswordInput/index.tsx
@@ -2,8 +2,7 @@ import { forwardRef, useState } from "react";
 
 import { InputBase, InputDefaultProps } from "@components/Input";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
 
 export default forwardRef<HTMLInputElement, InputDefaultProps>(
   function PasswordInput(
@@ -34,11 +33,17 @@ export default forwardRef<HTMLInputElement, InputDefaultProps>(
           ref={ref}
           {...rest}
         />
-        <FontAwesomeIcon
-          className="mx-2 cursor-pointer"
-          onClick={togglePasswordVisibility}
-          icon={isPasswordVisible ? faEyeSlash : faEye}
-        />
+        {isPasswordVisible ? (
+          <EyeOffIcon
+            className="mx-2 h-5 cursor-pointer"
+            onClick={togglePasswordVisibility}
+          />
+        ) : (
+          <EyeIcon
+            className="mx-2 h-5 cursor-pointer"
+            onClick={togglePasswordVisibility}
+          />
+        )}
       </InputBase>
     );
   }
diff --git a/styles/globals.css b/styles/globals.css
index b9ae2344..02505ccd 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -79,3 +79,19 @@ canvas {
   -webkit-text-stroke-color: currentColor;
   -webkit-text-stroke-width: 0.25px;
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  /* Revert text color */
+  -webkit-text-fill-color: white !important;
+  color: white !important;
+  caret-color: white !important;
+
+  /* Revert background color */
+  transition: background-color 5000s ease-in-out 0s;
+}
+input:autofill {
+  background: transparent !important;
+}