From 78f1d54fc3f77e9e1b0e14807f391cfa41ec1cbf Mon Sep 17 00:00:00 2001
From: headlesdev <damian.bergemann@outlook.com>
Date: Sun, 25 May 2025 21:13:35 +0200
Subject: [PATCH] TestNotification Styling Update

---
 components/dialogues/TestNotification.tsx | 43 +++++++++++++++++------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/components/dialogues/TestNotification.tsx b/components/dialogues/TestNotification.tsx
index 7901cd4..c00df93 100644
--- a/components/dialogues/TestNotification.tsx
+++ b/components/dialogues/TestNotification.tsx
@@ -1,21 +1,44 @@
-import { Bell } from "lucide-react"
+import { Bell, CheckCircle2, Clock } from "lucide-react"
 
 export default function TestNotification() {
     return (
         <div>
             <dialog id="test_notification" className="modal">
-                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
-                    <div className="flex items-center gap-3 mb-3">
-                        <div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
-                            <Bell className="h-6 w-6" />
+                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success bg-base-100 shadow-xl">
+                    <div className="flex items-center gap-4 mb-6">
+                        <div className="bg-success/10 text-success rounded-full p-3 flex items-center justify-center">
+                            <Bell className="h-7 w-7" />
+                        </div>
+                        <div>
+                            <h3 className="font-bold text-2xl">Test Notification</h3>
+                            <p className="text-sm text-base-content/70">Verify your notification settings</p>
                         </div>
-                        <h3 className="font-bold text-xl">Test Notification</h3>
                     </div>
     
-                    <div className="bg-base-200 p-4 rounded-lg mb-4">
-                        <p>
-                            This will send a test notification to the selected notification provider.
-                        </p>
+                    <div className="bg-base-200/50 p-6 rounded-xl mb-6">
+                        <div className="space-y-4">
+                            <p className="text-base-content/90">
+                                A notification test has been sent to the selected notification provider.
+                            </p>
+                            <p className="text-sm text-base-content/70">
+                                You can click the button below to check the status of the notification test.
+                            </p>
+                            
+                            <div className="flex items-center gap-3 mt-6">
+                                <button className="btn btn-success gap-2">
+                                    <Clock className="h-4 w-4" />
+                                    Check Status
+                                </button>
+                                
+                                <div className="flex items-center gap-2 px-4 py-2 bg-base-300 rounded-lg">
+                                    <span className="text-sm font-medium">Status:</span>
+                                    <div className="flex items-center gap-1.5 text-warning">
+                                        <Clock className="h-4 w-4" />
+                                        <span className="text-sm">Pending</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </dialog>