feat: improve authentication forms (#605)

cesium · Dec 17, 2023 · 198f6f1 · 198f6f1
1 parent 4705974
commit 198f6f1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git 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
@@ -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;
+}