Merge remote-tracking branch 'origin/master' into feature/slicing

app/components/popup/modal.tsx

@@ -1,4 +1,4 @@
-import { Dialog, DialogPanel } from '@headlessui/react'
+import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
 import type { ReactNode } from 'react'
 
 type ModalProperties = {
@@ -16,19 +16,18 @@ export default function PopupModal({
   return (
     <Dialog
       open={isOpen}
-      as="div"
-      className="relative z-30 focus:outline-none"
       onClose={onClose}
+      className="relative z-50"
+      transition
     >
-      <div className="fixed inset-0 z-30 w-screen overflow-y-auto backdrop-blur-sm">
-        <div className="flex min-h-full items-center justify-center sm:p-4">
-          <DialogPanel
-            transition
-            className="w-full rounded-xl bg-white p-5 shadow duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0 max-md:min-h-screen max-md:min-w-screen max-sm:p-[50px] sm:max-w-md sm:p-10"
-          >
-            {children}
-          </DialogPanel>
-        </div>
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+        <DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
+          <div className="relative">{children}</div>
+        </DialogPanel>
       </div>
     </Dialog>
   )

app/components/ui/form-login.tsx

@@ -4,18 +4,30 @@ import { useState } from 'react'
 import { Link } from 'react-router'
 
 import { EyeIcon } from '~/components/icons/eye'
-import HeaderModal from '~/components/popup/header-modal'
+import { APP } from '~/data/meta'
 
 const FormLogin = () => {
   const [showPassword, setShowPassword] = useState(false)
 
   return (
-    <div className="relative flex flex-col items-center justify-center">
-      <HeaderModal>
-        <p>Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!</p>
-      </HeaderModal>
-
+    <div className="flex items-center justify-center">
       <div className="w-full max-w-md">
+        <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>
+
         <form>
           {/* Input Email / No Telepon */}
           <div className="mb-4">