From a15365f459ddb149d2788bba003b543637d895df Mon Sep 17 00:00:00 2001
From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com>
Date: Wed, 13 May 2026 15:50:54 +0000
Subject: [PATCH] Task #531: Redesign DeletionWarningDialog for a more
 professional look
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 artifacts/tx-os/src/pages/admin.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/artifacts/tx-os/src/pages/admin.tsx b/artifacts/tx-os/src/pages/admin.tsx
index 89008c0f..4b31d66c 100644
--- a/artifacts/tx-os/src/pages/admin.tsx
+++ b/artifacts/tx-os/src/pages/admin.tsx
@@ -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"