ccopeland/red
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(portal): raise ConfirmDialog z-index to 1000 to clear FieldPlacer overlays and nav stacking context

Browse Source
This commit is contained in:
Chandler Copeland
2026-04-06 13:55:14 -06:00
parent e6e4dc92a6
commit db7a76defc
1 changed files with 8 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
teressa-copeland-homes/src/app/portal/_components/ConfirmDialog.tsx
View File

@@ -9,33 +9,26 @@ type Props = {
confirmLabel?: string;
};
export function ConfirmDialog({
isOpen,
title,
message,
onConfirm,
onCancel,
confirmLabel = "Delete",
}: Props) {
export function ConfirmDialog({ isOpen, title, message, onConfirm, onCancel, confirmLabel = "Delete" }: Props) {
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
<div className="bg-white rounded-xl shadow-xl p-6 w-full max-w-md">
<h2 className="text-[var(--navy)] text-lg font-semibold mb-2">{title}</h2>
<p className="text-gray-600 text-sm mb-6">{message}</p>
<div className="flex justify-end gap-3">
<div style={{ position: "fixed", inset: 0, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "rgba(0,0,0,0.4)" }}>
<div style={{ backgroundColor: "white", borderRadius: "1rem", boxShadow: "0 8px 32px rgba(0,0,0,0.18)", padding: "2rem", width: "100%", maxWidth: "28rem" }}>
<h2 style={{ color: "#1B2B4B", fontSize: "1.125rem", fontWeight: 700, marginBottom: "0.5rem" }}>{title}</h2>
<p style={{ color: "#6B7280", fontSize: "0.875rem", marginBottom: "1.5rem" }}>{message}</p>
<div style={{ display: "flex", justifyContent: "flex-end", gap: "0.75rem" }}>
<button
type="button"
onClick={onCancel}
className="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50"
className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
>
Cancel
</button>
<button
type="button"
onClick={onConfirm}
className="px-4 py-2 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700"
className="px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg hover:bg-red-700 transition"
>
{confirmLabel}
</button>