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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user