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.
riyadhafraa
21ccb6c426