feat: refactor PopupModal to use Headless UI components and update FormLogin layout

app/components/popup/modal.tsx

@@ -1,3 +1,4 @@
+import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
 import type { ReactNode } from 'react'
 
 interface ModalProperties {
@@ -13,18 +14,17 @@ export default function PopupModal({
 }: ModalProperties) {
   if (!isOpen) return
   return (
-    <>
-      <div className="bg-opacity-50 fixed inset-0 z-50 grid place-items-center bg-gray-300/50">
-        <button
-          onClick={onClose}
-          className="absolute top-5 right-5 z-50 bg-red-500 p-3 text-gray-500 hover:text-gray-800"
-        >
-          ✖
-        </button>
-        <div className="relative rounded-lg bg-white p-6 shadow-lg">
-          {children}
-        </div>
+    <Dialog
+      open={isOpen}
+      onClose={onClose}
+      className="relative z-50"
+    >
+      <DialogBackdrop className="fixed inset-0 bg-black/30" />
+      <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">
+          <div className="relative">{children}</div>
+        </DialogPanel>
       </div>
-    </>
+    </Dialog>
   )
 }

app/components/ui/form-login.tsx

@@ -2,27 +2,14 @@
 import { useState } from 'react'
 import { Link } from 'react-router'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
 import { APP } from '~/data/meta'
 
 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="flex items-center justify-center">
+      <div className="w-full max-w-md">
         <div className="mb-6 flex justify-center">
           <Link to="/news">
             <img