Merge pull request #21 from Molecule-AI/fix/uiux-audit

fix: UX audit — dark theme buttons, input backgrounds, ReactFlow dark mode, contrast & a11y

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}

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>

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" />

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;