From fad575fc95c53b375f8beb0fbd6cae4ebfbd0fbc Mon Sep 17 00:00:00 2001
From: Dev Lead Agent <agent@molecule.ai>
Date: Tue, 14 Apr 2026 02:26:45 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20UX=20audit=20=E2=80=94=20dark=20theme=20?=
 =?UTF-8?q?buttons,=20input=20backgrounds,=20ReactFlow=20dark=20mode,=20co?=
 =?UTF-8?q?ntrast=20&=20a11y?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix 1: 6 CTA buttons (#f4f4f5/#18181b → #2563eb/#ffffff) for dark theme legibility
- Fix 2: Dark backgrounds on add-key-form and key-value-field inputs
- Fix 3: Add colorMode="dark" prop to ReactFlow canvas
- Fix 4: Replace non-standard #0066cc with #3b82f6 in focus ring, clear-search, settings-button--active
- Fix 5: Improve text contrast (zinc-600/zinc-500 → zinc-400) in EmptyState tips/loading
- Fix 6: aria-label="Template Palette" on palette toggle button
- Fix 7: aria-label="Refresh org templates" + font-size 9px→10px on ↻ button

Tests: 357/357 ✓  Build: clean ✓

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 canvas/src/components/Canvas.tsx          |  1 +
 canvas/src/components/EmptyState.tsx      |  6 ++--
 canvas/src/components/TemplatePalette.tsx |  4 ++-
 canvas/src/styles/settings-panel.css      | 34 +++++++++++++----------
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/canvas/src/components/Canvas.tsx b/canvas/src/components/Canvas.tsx
index 43b369ac..24c6c2fa 100644
--- a/canvas/src/components/Canvas.tsx
+++ b/canvas/src/components/Canvas.tsx
@@ -228,6 +228,7 @@ function CanvasInner() {
   return (
     <div className="w-screen h-screen bg-zinc-950">
       <ReactFlow
+        colorMode="dark"
         nodes={nodes}
         edges={edges}
         onNodesChange={onNodesChange}
diff --git a/canvas/src/components/EmptyState.tsx b/canvas/src/components/EmptyState.tsx
index d8090e44..8111d294 100644
--- a/canvas/src/components/EmptyState.tsx
+++ b/canvas/src/components/EmptyState.tsx
@@ -99,13 +99,13 @@ export function EmptyState() {
         <h2 className="text-xl font-semibold text-zinc-100 mb-1">
           Deploy your first agent
         </h2>
-        <p className="text-sm text-zinc-500 mb-6 leading-relaxed">
+        <p className="text-sm text-zinc-400 mb-6 leading-relaxed">
           Pick a template to get started instantly, or create a blank workspace.
         </p>
 
         {/* Template grid */}
         {loading ? (
-          <div className="text-xs text-zinc-600 py-4">Loading templates...</div>
+          <div className="text-xs text-zinc-400 py-4">Loading templates...</div>
         ) : templates.length > 0 ? (
           <div className="grid grid-cols-2 gap-2.5 mb-4 text-left max-h-[240px] overflow-y-auto">
             {templates.slice(0, 6).map((t) => {
@@ -162,7 +162,7 @@ export function EmptyState() {
 
         {/* Tips */}
         <div className="mt-5 pt-4 border-t border-zinc-800/50">
-          <div className="flex items-center justify-center gap-6 text-[10px] text-zinc-600">
+          <div className="flex items-center justify-center gap-6 text-[10px] text-zinc-400">
             <span>Drag to nest workspaces into teams</span>
             <span className="text-zinc-700">|</span>
             <span>Right-click for actions</span>
diff --git a/canvas/src/components/TemplatePalette.tsx b/canvas/src/components/TemplatePalette.tsx
index 1f73464e..447dc871 100644
--- a/canvas/src/components/TemplatePalette.tsx
+++ b/canvas/src/components/TemplatePalette.tsx
@@ -82,7 +82,8 @@ export function OrgTemplatesSection() {
         </h3>
         <button
           onClick={loadOrgs}
-          className="text-[9px] text-zinc-500 hover:text-zinc-300"
+          aria-label="Refresh org templates"
+          className="text-[10px] text-zinc-500 hover:text-zinc-300"
         >
           ↻
         </button>
@@ -314,6 +315,7 @@ export function TemplatePalette() {
             : "bg-zinc-900/90 border border-zinc-700/50 text-zinc-400 hover:text-zinc-200 hover:border-zinc-600"
         }`}
         title="Template Palette"
+        aria-label="Template Palette"
       >
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
           <rect x="1" y="1" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
diff --git a/canvas/src/styles/settings-panel.css b/canvas/src/styles/settings-panel.css
index 6f4aa6c1..0cb7f35e 100644
--- a/canvas/src/styles/settings-panel.css
+++ b/canvas/src/styles/settings-panel.css
@@ -8,7 +8,7 @@
   --backdrop-color: rgba(0, 0, 0, 0.3);
   --slide-duration: 200ms;
   --slide-easing: ease-out;
-  --focus-ring: 2px solid #0066cc;
+  --focus-ring: 2px solid #3b82f6;
   --focus-ring-offset: 2px;
   --status-valid: #16a34a;
   --status-invalid: #dc2626;
@@ -277,8 +277,8 @@
 }
 
 .secret-row__save-btn {
-  background: #f4f4f5;
-  color: #18181b;
+  background: #2563eb;
+  color: #ffffff;
   border: none;
   padding: 6px 12px;
   border-radius: 6px;
@@ -323,6 +323,8 @@
   border-radius: 6px;
   font-size: 14px;
   font-family: inherit;
+  background: #18181b;
+  color: #f4f4f5;
 }
 
 .add-key-form__select:focus,
@@ -353,8 +355,8 @@
 }
 
 .add-key-form__save-btn {
-  background: #f4f4f5;
-  color: #18181b;
+  background: #2563eb;
+  color: #ffffff;
   border: none;
   padding: 8px 16px;
   border-radius: 6px;
@@ -396,6 +398,8 @@
   border-radius: 6px;
   font-size: 14px;
   font-family: monospace;
+  background: #18181b;
+  color: #f4f4f5;
 }
 
 .key-value-field input:focus {
@@ -481,8 +485,8 @@
 .empty-state__body { font-size: 14px; color: #a1a1aa; margin: 0 0 24px; line-height: 1.5; }
 
 .empty-state__cta {
-  background: #f4f4f5;
-  color: #18181b;
+  background: #2563eb;
+  color: #ffffff;
   border: none;
   padding: 10px 20px;
   border-radius: 8px;
@@ -532,8 +536,8 @@
 .secrets-tab__error p { color: var(--status-invalid); margin: 0 0 12px; }
 
 .secrets-tab__refresh-btn {
-  background: #f4f4f5;
-  color: #18181b;
+  background: #2563eb;
+  color: #ffffff;
   border: none;
   padding: 8px 16px;
   border-radius: 6px;
@@ -550,7 +554,7 @@
 .secrets-tab__clear-search {
   background: none;
   border: none;
-  color: #0066cc;
+  color: #3b82f6;
   cursor: pointer;
   margin-left: 8px;
   font-size: 14px;
@@ -656,8 +660,8 @@
 }
 
 .guard-dialog__discard-btn {
-  background: #f4f4f5;
-  color: #18181b;
+  background: #2563eb;
+  color: #ffffff;
   border: none;
   padding: 8px 16px;
   border-radius: 6px;
@@ -679,7 +683,7 @@
 }
 
 .settings-button:hover { background: #27272a; color: #f4f4f5; }
-.settings-button--active { color: #0066cc; background: #1e3a5f; }
+.settings-button--active { color: #3b82f6; background: #1e3a5f; }
 .settings-button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
 
 .settings-button__tooltip {
@@ -708,8 +712,8 @@
 .top-bar__name { font-size: 14px; font-weight: 500; color: #d4d4d8; }
 
 .top-bar__btn {
-  background: #f4f4f5;
-  color: #18181b;
+  background: #2563eb;
+  color: #ffffff;
   border: none;
   padding: 6px 12px;
   border-radius: 6px;