From 78478c4e17ad038ab10a34580869a41d842f3e6c Mon Sep 17 00:00:00 2001
From: Hardik <shardik99@gmail.com>
Date: Sun, 21 Jun 2026 12:37:25 +0530
Subject: [PATCH] fix(po): make cancel buttons red & visible (use defined
 danger tokens)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The theme only defines danger / danger-50 / danger-100 / danger-700, so
bg-danger-600 / danger-500 / danger-200 generated no CSS — the modal confirm
button was white-on-nothing (invisible) and the header button wasn't red.

- Header "Cancel PO" button → solid red (bg-danger text-white hover:bg-danger-700)
- Modal "Cancel this PO" confirm button → bg-danger (now visible)
- Inputs/asterisk/banner border → defined danger tokens

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 App/components/po/cancel-po-controls.tsx | 10 +++++-----
 App/components/po/po-detail.tsx          |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/App/components/po/cancel-po-controls.tsx b/App/components/po/cancel-po-controls.tsx
index 26b71be..8245e73 100644
--- a/App/components/po/cancel-po-controls.tsx
+++ b/App/components/po/cancel-po-controls.tsx
@@ -47,7 +47,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
       <button
         type="button"
         onClick={() => setOpen(true)}
-        className="rounded-lg border border-danger-200 bg-white px-3 py-2 text-sm font-medium text-danger-600 hover:bg-danger-50 transition-colors"
+        className="rounded-lg bg-danger px-3 py-2 text-sm font-semibold text-white hover:bg-danger-700 transition-colors"
       >
         Cancel PO
       </button>
@@ -65,7 +65,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
             </p>
 
             <label className="mt-4 block text-xs font-medium text-neutral-700">
-              Reason for cancellation <span className="text-danger-600">*</span>
+              Reason for cancellation <span className="text-danger">*</span>
             </label>
             <textarea
               value={reason}
@@ -73,7 +73,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
               rows={3}
               autoFocus
               placeholder="e.g. Duplicate order — superseded by a corrected PO"
-              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-danger-500 focus:outline-none focus:ring-2 focus:ring-danger-500/20"
+              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-danger focus:outline-none focus:ring-2 focus:ring-danger/20"
             />
 
             <label className="mt-3 block text-xs font-medium text-neutral-700">
@@ -83,7 +83,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
               value={confirmText}
               onChange={(e) => setConfirmText(e.target.value)}
               placeholder="cancel"
-              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm font-mono focus:border-danger-500 focus:outline-none focus:ring-2 focus:ring-danger-500/20"
+              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm font-mono focus:border-danger focus:outline-none focus:ring-2 focus:ring-danger/20"
             />
 
             {error && <p className="mt-3 text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>}
@@ -101,7 +101,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
                 type="button"
                 onClick={handleCancel}
                 disabled={!canSubmit}
-                className="rounded-lg bg-danger-600 px-4 py-2 text-sm font-semibold text-white hover:bg-danger-700 disabled:opacity-50"
+                className="rounded-lg bg-danger px-4 py-2 text-sm font-semibold text-white hover:bg-danger-700 disabled:opacity-50"
               >
                 {pending ? "Cancelling…" : "Cancel this PO"}
               </button>
diff --git a/App/components/po/po-detail.tsx b/App/components/po/po-detail.tsx
index c9f81f3..8af02fc 100644
--- a/App/components/po/po-detail.tsx
+++ b/App/components/po/po-detail.tsx
@@ -238,7 +238,7 @@ export async function PoDetail({ po, currentUserId, currentRole, readOnly = fals
 
       {/* Cancelled banner — reason + supersede link (and the reciprocal "supersedes") */}
       {po.status === "CANCELLED" && (
-        <div className="rounded-lg border border-danger-200 bg-danger-50 px-4 py-3">
+        <div className="rounded-lg border border-danger-100 bg-danger-50 px-4 py-3">
           <p className="text-sm font-semibold text-danger-700">
             Cancelled{po.cancelledAt ? ` on ${formatDate(po.cancelledAt)}` : ""}
           </p>