TestNotification Styling Update

This commit is contained in:
headlesdev 2025-05-25 21:13:35 +02:00
parent 3d982bf1ac
commit 78f1d54fc3

View File

@ -1,21 +1,44 @@
import { Bell } from "lucide-react" import { Bell, CheckCircle2, Clock } from "lucide-react"
export default function TestNotification() { export default function TestNotification() {
return ( return (
<div> <div>
<dialog id="test_notification" className="modal"> <dialog id="test_notification" className="modal">
<div className="modal-box w-11/12 max-w-3xl border-l-4 border-success"> <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-3 mb-3"> <div className="flex items-center gap-4 mb-6">
<div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center"> <div className="bg-success/10 text-success rounded-full p-3 flex items-center justify-center">
<Bell className="h-6 w-6" /> <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> </div>
<h3 className="font-bold text-xl">Test Notification</h3>
</div> </div>
<div className="bg-base-200 p-4 rounded-lg mb-4"> <div className="bg-base-200/50 p-6 rounded-xl mb-6">
<p> <div className="space-y-4">
This will send a test notification to the selected notification provider. <p className="text-base-content/90">
</p> 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>
</div> </div>
</dialog> </dialog>