From fe51b671c724e0dd275f51a99cfcfc4ea6528717 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 14 Nov 2025 00:39:09 -0800
Subject: [PATCH] refactor Modal component styles to match provider

---
 src/shared/components/modal/modal.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/modal/modal.tsx b/src/shared/components/modal/modal.tsx
index 84180d89c..9092e91f3 100644
--- a/src/shared/components/modal/modal.tsx
+++ b/src/shared/components/modal/modal.tsx
@@ -28,20 +28,32 @@ export const Modal = ({ children, classNames, handlers, ...rest }: ModalProps) =
     return (
         <MantineModal
             {...rest}
+            centered={true}
             classNames={{
                 body: styles.body,
+                close: styles.close,
                 content: styles.content,
                 header: styles.header,
+                inner: styles.inner,
+                overlay: styles.overlay,
                 root: styles.root,
                 title: styles.title,
                 ...classNames,
             }}
+            closeButtonProps={{
+                icon: <Icon icon="x" size="xl" />,
+            }}
             onClose={handlers.close}
-            radius="lg"
+            overlayProps={{
+                backgroundOpacity: 0.8,
+                blur: 4,
+            }}
+            radius="xl"
+            scrollAreaComponent={ScrollArea}
             transitionProps={{
                 duration: 300,
                 exitDuration: 300,
-                transition: 'fade',
+                transition: 'fade' as const,
             }}
         >
             {children}