feat: adj component

app/components/ui/form-login.tsx

@@ -1,44 +1,21 @@
 // import { EyeIcon, EyeOffIcon } from 'lucide-react'
+import { Button } from '@headlessui/react'
 import { useState } from 'react'
 import { Link } from 'react-router'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
-import { APP } from '~/data/meta'
+import { EyeIcon } from '~/components/icons/eye'
+import HeaderModal from '~/components/popup/header-modal'
 
 const FormLogin = () => {
   const [showPassword, setShowPassword] = useState(false)
 
   return (
-    <div className="flex min-h-screen items-center justify-center">
-      <div className="w-full max-w-md p-6">
-        <div className="absolute top-[80px] left-[50px]">
-          <Link
-            to="/#"
-            className="mt-2 h-full py-2"
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
-
-        <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">
-            Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!
-          </p>
-        </div>
+    <div className="relative flex flex-col items-center justify-center">
+      <HeaderModal>
+        <p>Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!</p>
+      </HeaderModal>
 
+      <div className="w-full max-w-md">
         <form>
           {/* Input Email / No Telepon */}
           <div className="mb-4">
@@ -73,7 +50,17 @@ const FormLogin = () => {
               className="absolute top-9 right-3 text-gray-500"
               onClick={() => setShowPassword(!showPassword)}
             >
-              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
+              {showPassword ? (
+                <EyeIcon
+                  width={15}
+                  height={15}
+                />
+              ) : (
+                <EyeIcon
+                  width={15}
+                  height={15}
+                />
+              )}
             </button>
           </div>
 
@@ -89,9 +76,9 @@ const FormLogin = () => {
           </div>
 
           {/* Tombol Masuk */}
-          <button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Masuk
-          </button>
+          </Button>
         </form>
 
         {/* Link Daftar */}