From 9e50f8c7dcdc2250b31e4e40989dbf0f056d9e63 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sat, 22 Feb 2025 16:08:40 +0800
Subject: [PATCH] feat: enhance PopupModal with improved transition effects and
 backdrop styling

---
 app/components/popup/modal.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/popup/modal.tsx b/app/components/popup/modal.tsx
index 2aec6a7..c072f5b 100644
--- a/app/components/popup/modal.tsx
+++ b/app/components/popup/modal.tsx
@@ -18,10 +18,14 @@ export default function PopupModal({
       open={isOpen}
       onClose={onClose}
       className="relative z-50"
+      transition
     >
-      <DialogBackdrop className="fixed inset-0 bg-black/30" />
+      <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">
+        <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>