From 47d0640c49bf3089f446977fd747f5102b3c8b1f Mon Sep 17 00:00:00 2001
From: ruv <ruv@ruv.net>
Date: Mon, 2 Mar 2026 11:10:31 -0500
Subject: [PATCH] fix: dark mode for pose canvas controls, single-row layout
 with icons

- All buttons converted to dark translucent style with colored accents:
  Start (green), Stop (red), Reconnect (blue), Demo (purple)
- Header, wrapper, status badge all use dark backgrounds
- Controls in single flat row (no wrapping)
- Mode select dropdown styled for dark theme
- HTML entity icons on all buttons

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 ui/components/PoseDetectionCanvas.js | 212 ++++++++++++++-------------
 1 file changed, 109 insertions(+), 103 deletions(-)

diff --git a/ui/components/PoseDetectionCanvas.js b/ui/components/PoseDetectionCanvas.js
index 62f98149..cc267eba 100644
--- a/ui/components/PoseDetectionCanvas.js
+++ b/ui/components/PoseDetectionCanvas.js
@@ -89,21 +89,17 @@ export class PoseDetectionCanvas {
             </div>
           </div>
           <div class="pose-canvas-controls" id="controls-${this.containerId}">
-            <div class="control-group primary-controls">
-              <button class="btn btn-start" id="start-btn-${this.containerId}">Start</button>
-              <button class="btn btn-stop" id="stop-btn-${this.containerId}" disabled>Stop</button>
-              <button class="btn btn-reconnect" id="reconnect-btn-${this.containerId}" disabled>Reconnect</button>
-              <button class="btn btn-demo" id="demo-btn-${this.containerId}">Demo</button>
-            </div>
-            <div class="control-group secondary-controls">
-              <select class="mode-select" id="mode-select-${this.containerId}">
-                <option value="skeleton">Skeleton</option>
-                <option value="keypoints">Keypoints</option>
-                <option value="heatmap">Heatmap</option>
-                <option value="dense">Dense</option>
-              </select>
-              <button class="btn btn-settings" id="settings-btn-${this.containerId}">⚙️ Settings</button>
-            </div>
+            <button class="btn btn-start" id="start-btn-${this.containerId}">&#9654; Start</button>
+            <button class="btn btn-stop" id="stop-btn-${this.containerId}" disabled>&#9632; Stop</button>
+            <button class="btn btn-reconnect" id="reconnect-btn-${this.containerId}" disabled>&#8635; Reconnect</button>
+            <button class="btn btn-demo" id="demo-btn-${this.containerId}">&#9881; Demo</button>
+            <select class="mode-select" id="mode-select-${this.containerId}">
+              <option value="skeleton">Skeleton</option>
+              <option value="keypoints">Keypoints</option>
+              <option value="heatmap">Heatmap</option>
+              <option value="dense">Dense</option>
+            </select>
+            <button class="btn btn-settings" id="settings-btn-${this.containerId}">&#9881; Settings</button>
           </div>
         </div>
         <div class="pose-canvas-container">
@@ -124,20 +120,20 @@ export class PoseDetectionCanvas {
     const style = document.createElement('style');
     style.textContent = `
       .pose-detection-canvas-wrapper {
-        border: 1px solid #ddd;
+        border: 1px solid rgba(255, 255, 255, 0.06);
         border-radius: 8px;
         overflow: hidden;
-        background: #f9f9f9;
-        font-family: Arial, sans-serif;
+        background: #0d1117;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       }
 
       .pose-canvas-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 10px 15px;
-        background: #f0f0f0;
-        border-bottom: 1px solid #ddd;
+        padding: 12px 16px;
+        background: rgba(15, 20, 35, 0.95);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
       }
 
       .pose-canvas-title {
@@ -148,156 +144,166 @@ export class PoseDetectionCanvas {
 
       .pose-canvas-title h3 {
         margin: 0;
-        color: #333;
+        color: #e0e0e0;
         font-size: 16px;
+        font-weight: 600;
       }
 
       .connection-status {
         display: flex;
         align-items: center;
-        gap: 5px;
+        gap: 6px;
+        padding: 4px 10px;
+        background: rgba(30, 40, 60, 0.6);
+        border-radius: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.06);
       }
 
       .status-indicator {
-        width: 10px;
-        height: 10px;
+        width: 8px;
+        height: 8px;
         border-radius: 50%;
-        background: #ccc;
+        background: #4a5568;
         transition: background-color 0.3s;
       }
 
-      .status-indicator.connected { background: #28a745; }
-      .status-indicator.connecting { background: #ffc107; }
-      .status-indicator.error { background: #dc3545; }
-      .status-indicator.disconnected { background: #6c757d; }
+      .status-indicator.connected { background: #00cc88; box-shadow: 0 0 6px rgba(0, 204, 136, 0.5); }
+      .status-indicator.connecting { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.5); animation: pulse 1.5s ease-in-out infinite; }
+      .status-indicator.error { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
+      .status-indicator.disconnected { background: #4a5568; }
 
       .status-text {
-        font-size: 12px;
-        color: #666;
-        min-width: 80px;
+        font-size: 11px;
+        color: #8899aa;
+        min-width: 70px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        font-weight: 500;
       }
 
       .pose-canvas-controls {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 15px;
-        flex-wrap: wrap;
-      }
-
-      .control-group {
         display: flex;
         align-items: center;
         gap: 8px;
-      }
-
-      .primary-controls {
-        flex: 1;
-      }
-
-      .secondary-controls {
-        flex-shrink: 0;
+        flex-wrap: nowrap;
       }
 
       .btn {
         padding: 8px 16px;
-        border: 1px solid #ddd;
-        border-radius: 6px;
-        background: #ffffff;
-        color: #333333;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 8px;
+        background: rgba(30, 40, 60, 0.8);
+        color: #c8d0dc;
         cursor: pointer;
         font-size: 13px;
         font-weight: 500;
         transition: all 0.2s ease;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         text-decoration: none;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
         min-width: 80px;
-        text-align: center;
+        justify-content: center;
       }
 
       .btn:hover:not(:disabled) {
-        background: #f8f9fa;
-        border-color: #adb5bd;
-        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
         transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
       }
 
       .btn:active:not(:disabled) {
         transform: translateY(0);
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
       }
 
       .btn:disabled {
-        opacity: 0.6;
+        opacity: 0.35;
         cursor: not-allowed;
-        background: #e9ecef;
-        color: #6c757d;
+        background: rgba(20, 30, 50, 0.6);
+        color: #4a5568;
         transform: none !important;
         box-shadow: none !important;
       }
 
-      .btn-start { 
-        background: #28a745; 
-        color: white; 
-        border-color: #28a745; 
+      .btn-start {
+        background: rgba(0, 204, 136, 0.15);
+        color: #00cc88;
+        border-color: rgba(0, 204, 136, 0.3);
       }
 
-      .btn-start:hover:not(:disabled) { 
-        background: #218838; 
-        border-color: #1e7e34; 
+      .btn-start:hover:not(:disabled) {
+        background: rgba(0, 204, 136, 0.25);
+        border-color: rgba(0, 204, 136, 0.5);
+        box-shadow: 0 4px 12px rgba(0, 204, 136, 0.2);
       }
 
-      .btn-stop { 
-        background: #dc3545; 
-        color: white; 
-        border-color: #dc3545; 
+      .btn-stop {
+        background: rgba(239, 68, 68, 0.15);
+        color: #ef4444;
+        border-color: rgba(239, 68, 68, 0.3);
       }
 
-      .btn-stop:hover:not(:disabled) { 
-        background: #c82333; 
-        border-color: #bd2130; 
+      .btn-stop:hover:not(:disabled) {
+        background: rgba(239, 68, 68, 0.25);
+        border-color: rgba(239, 68, 68, 0.5);
+        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
       }
 
-      .btn-reconnect { 
-        background: #17a2b8; 
-        color: white; 
-        border-color: #17a2b8; 
+      .btn-reconnect {
+        background: rgba(59, 130, 246, 0.15);
+        color: #60a5fa;
+        border-color: rgba(59, 130, 246, 0.3);
       }
 
-      .btn-reconnect:hover:not(:disabled) { 
-        background: #138496; 
-        border-color: #117a8b; 
+      .btn-reconnect:hover:not(:disabled) {
+        background: rgba(59, 130, 246, 0.25);
+        border-color: rgba(59, 130, 246, 0.5);
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
       }
 
-      .btn-demo { 
-        background: #6f42c1; 
-        color: white; 
-        border-color: #6f42c1; 
+      .btn-demo {
+        background: rgba(139, 92, 246, 0.15);
+        color: #a78bfa;
+        border-color: rgba(139, 92, 246, 0.3);
       }
 
-      .btn-demo:hover:not(:disabled) { 
-        background: #5a32a3; 
-        border-color: #512a97; 
+      .btn-demo:hover:not(:disabled) {
+        background: rgba(139, 92, 246, 0.25);
+        border-color: rgba(139, 92, 246, 0.5);
+        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
       }
 
-      .btn-settings { 
-        background: #6c757d; 
-        color: white; 
-        border-color: #6c757d; 
+      .btn-settings {
+        background: rgba(100, 116, 139, 0.15);
+        color: #94a3b8;
+        border-color: rgba(100, 116, 139, 0.3);
       }
 
-      .btn-settings:hover:not(:disabled) { 
-        background: #5a6268; 
-        border-color: #545b62; 
+      .btn-settings:hover:not(:disabled) {
+        background: rgba(100, 116, 139, 0.25);
+        border-color: rgba(100, 116, 139, 0.5);
       }
 
       .mode-select {
-        padding: 5px 8px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        background: #fff;
-        font-size: 12px;
+        padding: 8px 12px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 8px;
+        background: rgba(30, 40, 60, 0.8);
+        color: #b0b8c8;
+        font-size: 13px;
+        cursor: pointer;
+      }
+
+      .mode-select:focus {
+        outline: none;
+        border-color: rgba(139, 92, 246, 0.5);
+        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
+      }
+
+      .mode-select option {
+        background: #1a2234;
+        color: #c8d0dc;
       }
 
       .pose-canvas-container {