fix: delete dialog UI

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/settings/_components/delete-dialog.tsx

@@ -5,17 +5,18 @@ import {
 	GearIcon,
 	PencilSimpleIcon,
 	TrashIcon,
+	WarningCircleIcon,
 } from "@phosphor-icons/react";
 import { useParams, useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { DeleteDialog } from "@/components/ui/delete-dialog";
 import { Label } from "@/components/ui/label";
 import { WebsiteDialog } from "@/components/website-dialog";
 import { useDeleteWebsite, useWebsite } from "@/hooks/use-websites";
 import { PageHeader } from "../../../_components/page-header";
 import { TOAST_MESSAGES } from "../../_components/shared/tracking-constants";
-import { DeleteWebsiteDialog } from "../_components/delete-dialog";
 
 export default function GeneralSettingsPage() {
 	const params = useParams();
@@ -158,13 +159,30 @@ export default function GeneralSettingsPage() {
 				open={showEditDialog}
 				website={websiteData}
 			/>
-			<DeleteWebsiteDialog
+			<DeleteDialog
+				confirmLabel="Delete Website"
+				description={`Are you sure you want to delete ${websiteData.name || websiteData.domain}?`}
 				isDeleting={deleteWebsiteMutation.isPending}
-				onConfirmDelete={handleDeleteWebsite}
-				onOpenChange={setShowDeleteDialog}
-				open={showDeleteDialog}
-				websiteData={websiteData}
-			/>
+				isOpen={showDeleteDialog}
+				itemName={websiteData.name || websiteData.domain}
+				onClose={() => setShowDeleteDialog(false)}
+				onConfirm={handleDeleteWebsite}
+				title="Delete Website"
+			>
+				<div className="rounded-md bg-secondary p-3 text-sm">
+					<div className="flex items-start gap-2">
+						<WarningCircleIcon className="h-5 w-5 shrink-0" />
+						<div className="space-y-1">
+							<p className="font-medium">Warning:</p>
+							<ul className="list-disc space-y-1 pl-4 text-xs">
+								<li>All analytics data will be permanently deleted</li>
+								<li>Tracking will stop immediately</li>
+								<li>All website settings will be lost</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</DeleteDialog>
 		</div>
 	);
 }

apps/dashboard/app/(main)/websites/[id]/settings/general/page.tsx

@@ -76,7 +76,7 @@ export function DeleteDialog({
 									weight="duotone"
 								/>
 							</div>
-							<p className="text-muted-foreground text-sm">
+							<p className="text-foreground text-sm">
 								This action cannot be undone.
 							</p>
 						</div>
@@ -90,7 +90,7 @@ export function DeleteDialog({
 								weight="duotone"
 							/>
 						</div>
-						<p className="text-muted-foreground text-sm">
+						<p className="text-foreground text-sm">
 							This action cannot be undone.
 						</p>
 					</div>

apps/dashboard/components/ui/delete-dialog.tsx

@@ -37,7 +37,7 @@ function DialogOverlay({
 	return (
 		<DialogPrimitive.Overlay
 			className={cn(
-				'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in',
+				'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[120] bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in',
 				className
 			)}
 			data-slot="dialog-overlay"
@@ -59,7 +59,7 @@ function DialogContent({
 			<DialogOverlay />
 			<DialogPrimitive.Content
 				className={cn(
-					'data-[state=closed]:fade-out-0 overflow-hidden data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-5 rounded-lg border bg-card p-5 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg',
+					'data-[state=closed]:fade-out-0 overflow-hidden data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[130] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-5 rounded-lg border bg-card p-5 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg',
 					className
 				)}
 				data-slot="dialog-content"