Task #531: Redesign DeletionWarningDialog for a more professional look

Scope: artifacts/tx-os/src/pages/admin.tsx — the shared confirm
dialog used for deleting Apps, Services, and Users on the admin
page.

What changed
- Three explicit visual regions instead of a flat stack:
  - Header: AlertTriangle icon in a destructive-tinted circle next
    to the bold title (which already contains the item name from
    the existing translation strings).
  - Body: warning copy, then impacted items rendered inside a
    sub-card (rounded border + subtle bg + custom bullet dots
    instead of `list-disc`), then a destructive-tinted callout
    holding the "cannot be undone" hint.
  - Footer: separated by a top border and a faint bg tint;
    Cancel = ghost (quieter), Confirm/Anyway = destructive (clear
    primary action). When `isPending`, a small spinner appears
    inside the destructive button.
- Slightly larger max-width (max-w-md), shadow-xl, and overflow-
  hidden so the rounded corners read cleanly with the new footer
  divider.
- `role="alertdialog"` + `aria-modal="true"` added on the panel.

Behaviour preserved
- Component props, call sites, and all `data-testid` hooks are
  unchanged (testId, confirmTestId — covers app-delete-dialog/
  -confirm, service-delete-dialog/-confirm, user-delete-dialog/
  -confirm).
- No translation keys added; reuses every existing
  admin.deleteApp/Service/User.* string.
- Cancel renders before Confirm in the DOM so tab order is
  Cancel -> Destructive (no a11y regression). Visual order is
  controlled with `justify-end`, which mirrors correctly in RTL.
- Pure UI change: no API/handler/permission logic touched.

Notes
- Architect flagged an earlier `flex-row-reverse` footer for
  putting the destructive button first in tab order; fixed before
  marking complete.
- Pre-existing TS18046 / TS2345 errors in admin.tsx are unrelated.
This commit is contained in:
riyadhafraa
2026-05-13 15:50:54 +00:00
parent 21ccb6c426
commit a15365f459
-11
View File
@@ -279,11 +279,6 @@ function DeletionWarningDialog({
}) {
const { t } = useTranslation();
return (
// Task #531: redesigned destructive-confirm dialog. Three clear
// regions (header with warning glyph + title, structured body
// with sub-card for impacted items + tinted "cannot be undone"
// callout, and a footer separated by a divider). All existing
// data-testid hooks are preserved so admin tests keep passing.
<div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<div
className="glass-panel rounded-3xl w-full max-w-md overflow-hidden shadow-xl"
@@ -291,7 +286,6 @@ function DeletionWarningDialog({
aria-modal="true"
data-testid={testId}
>
{/* Header */}
<div className="flex items-start gap-3 p-5 sm:p-6">
<div
className="shrink-0 w-10 h-10 rounded-full bg-destructive/10 text-destructive flex items-center justify-center"
@@ -306,7 +300,6 @@ function DeletionWarningDialog({
</div>
</div>
{/* Body */}
<div className="px-5 sm:px-6 pb-5 sm:pb-6 space-y-4">
{showWarning ? (
<>
@@ -341,10 +334,6 @@ function DeletionWarningDialog({
)}
</div>
{/* Footer Cancel first in DOM (and tab order) so the
destructive action is never the first focusable target.
`justify-end` keeps the destructive button visually on
the trailing edge in both LTR and RTL. */}
<div className="flex items-center justify-end gap-2 px-5 sm:px-6 py-4 border-t border-foreground/10 bg-foreground/[0.02]">
<Button
variant="ghost"