From d2c202ddabf6671a42d24a440377ee3059fe5b40 Mon Sep 17 00:00:00 2001
From: Hongming Wang <hongmingwang.rabbit@users.noreply.github.com>
Date: Sun, 3 May 2026 12:56:00 -0700
Subject: [PATCH] fix(canvas): ApprovalBanner Approve/Deny button polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same bug class as #2622 (ConfirmDialog), but on a more critical surface
— this is the top-of-page banner asking the user to approve / deny a
real workspace permission request.

1. **Deny was a no-op hover.** `bg-surface-card hover:bg-surface-card`
   gave zero visual feedback before the user clicked a destructive
   action. Now lifts to surface-elevated + brightens the text so the
   button visibly responds.
2. **Approve hover went LIGHTER.** `bg-emerald-600 hover:bg-emerald-500`
   dropped white-text contrast on hover. Reversed to emerald-700.
3. **No focus rings on either button.** Keyboard users had no way to
   tell which decision was focused. Added focus-visible rings
   (offset against the dark amber banner bg) — emerald for Approve,
   amber for Deny so the choice is unambiguous.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 canvas/src/components/ApprovalBanner.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/canvas/src/components/ApprovalBanner.tsx b/canvas/src/components/ApprovalBanner.tsx
index 5d36efc5..e9baa776 100644
--- a/canvas/src/components/ApprovalBanner.tsx
+++ b/canvas/src/components/ApprovalBanner.tsx
@@ -73,14 +73,19 @@ export function ApprovalBanner() {
                 <button
                   type="button"
                   onClick={() => handleDecide(approval, "approved")}
-                  className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-500 text-xs rounded-lg text-white font-medium transition-colors"
+                  // Hover DARKER not lighter — emerald-500 on white text
+                  // drops contrast vs emerald-700.
+                  className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-xs rounded-lg text-white font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-amber-950 focus-visible:ring-emerald-400/70"
                 >
                   Approve
                 </button>
                 <button
                   type="button"
                   onClick={() => handleDecide(approval, "denied")}
-                  className="px-3 py-1.5 bg-surface-card hover:bg-surface-card text-xs rounded-lg text-ink-mid transition-colors"
+                  // Was a no-op hover (`bg-surface-card hover:bg-surface-card`).
+                  // Lift to surface-elevated on hover so the button visibly
+                  // responds before a destructive deny.
+                  className="px-3 py-1.5 bg-surface-card hover:bg-surface-elevated hover:text-ink text-xs rounded-lg text-ink-mid transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-amber-950 focus-visible:ring-amber-400/70"
                 >
                   Deny
                 </button>