From 90d530fa7af39c31a5377716ac46052fc67eafb3 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Wed, 26 Nov 2025 15:36:53 +0800
Subject: [PATCH] fix(ui): improve ConfirmDialog styling for better visual
 consistency

- Remove header/footer borders and backgrounds for compact alert style
- Use theme-aware overlay color (bg-background/80) instead of black
- Add zIndex="alert" to ensure dialog appears above other dialogs
---
 src/components/ConfirmDialog.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
index 6509933a2..b0f2f8192 100644
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -40,8 +40,12 @@ export function ConfirmDialog({
         }
       }}
     >
-      <DialogContent className="max-w-sm">
-        <DialogHeader className="space-y-3">
+      <DialogContent
+        className="max-w-sm"
+        zIndex="alert"
+        overlayClassName="bg-background/80"
+      >
+        <DialogHeader className="space-y-3 border-b-0 bg-transparent pb-0">
           <DialogTitle className="flex items-center gap-2 text-lg font-semibold">
             <AlertTriangle className="h-5 w-5 text-destructive" />
             {title}
@@ -50,7 +54,7 @@ export function ConfirmDialog({
             {message}
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter className="flex gap-2 sm:justify-end">
+        <DialogFooter className="flex gap-2 border-t-0 bg-transparent pt-2 sm:justify-end">
           <Button variant="outline" onClick={onCancel}>
             {cancelText || t("common.cancel")}
           </Button>