From 49ba6e8be588045c6b3e50d3e506735f24753410 Mon Sep 17 00:00:00 2001
From: Hardik <shardik99@gmail.com>
Date: Wed, 27 May 2026 13:11:10 +0530
Subject: [PATCH] fix(ui): use defined theme colors for danger/warning buttons

The theme only defines danger/warning/success as flat colors plus -50/-100/-700
shades. bg-danger-600 and bg-warning-600 don't exist so those buttons rendered
with a transparent background, making white text invisible until hover revealed
bg-danger-700. Replaced with bg-danger / bg-warning which are defined.
Also fixed border-danger-200/400 and text-danger-600 (undefined) on the
Delete and Confirm Delete buttons.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 App/app/(portal)/payments/payment-actions.tsx | 2 +-
 App/components/ui/confirm-delete-button.tsx   | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/App/app/(portal)/payments/payment-actions.tsx b/App/app/(portal)/payments/payment-actions.tsx
index 73f179f..03125e7 100644
--- a/App/app/(portal)/payments/payment-actions.tsx
+++ b/App/app/(portal)/payments/payment-actions.tsx
@@ -105,7 +105,7 @@ export function PaymentActions({ poId, poStatus, totalAmount = 0, paidAmount = 0
             <button
               type="submit"
               disabled={pending}
-              className="rounded-lg bg-warning-600 px-4 py-2 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-60 transition-opacity"
+              className="rounded-lg bg-warning px-4 py-2 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-60 transition-opacity"
             >
               {pending ? "Confirming…" : "Confirm Partial Payment"}
             </button>
diff --git a/App/components/ui/confirm-delete-button.tsx b/App/components/ui/confirm-delete-button.tsx
index 1e7aaac..00f2171 100644
--- a/App/components/ui/confirm-delete-button.tsx
+++ b/App/components/ui/confirm-delete-button.tsx
@@ -34,13 +34,13 @@ export function ConfirmDeleteButton({
             })
           }
           disabled={isPending}
-          className="rounded border border-danger-400 bg-danger-600 px-2 py-0.5 text-xs font-semibold text-white hover:bg-danger-700 disabled:opacity-50 whitespace-nowrap transition-colors"
+          className="rounded border border-danger bg-danger px-2 py-0.5 text-xs font-semibold text-white hover:bg-danger-700 disabled:opacity-50 whitespace-nowrap transition-colors"
         >
-          {isPending ? "Deleting…" : "Confirm"}
+          {isPending ? "Deleting…" : "Confirm Delete"}
         </button>
         <button
           onClick={() => { setConfirming(false); setError(""); }}
-          className="rounded border border-neutral-300 bg-white px-2 py-0.5 text-xs text-neutral-600 hover:bg-neutral-50 whitespace-nowrap transition-colors"
+          className="rounded border border-neutral-300 bg-white px-2 py-0.5 text-xs font-medium text-neutral-600 hover:bg-neutral-50 whitespace-nowrap transition-colors"
         >
           Cancel
         </button>
@@ -52,7 +52,7 @@ export function ConfirmDeleteButton({
   return (
     <button
       onClick={() => setConfirming(true)}
-      className="rounded border border-danger-200 bg-white px-2.5 py-1 text-xs font-medium text-danger-600 hover:bg-danger-50 hover:border-danger-300 transition-colors"
+      className="rounded border border-danger-100 bg-white px-2.5 py-1 text-xs font-medium text-danger-700 hover:bg-danger-50 hover:border-danger transition-colors"
     >
       Delete
     </button>