Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 47d0640

Browse files
ruvnetruvnet
committed
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 <[email protected]>
1 parent 6959668 commit 47d0640

1 file changed

Lines changed: 109 additions & 103 deletions

File tree

‎ui/components/PoseDetectionCanvas.js‎

Lines changed: 109 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -89,21 +89,17 @@ export class PoseDetectionCanvas {
8989
</div>
9090
</div>
9191
<div class="pose-canvas-controls" id="controls-${this.containerId}">
92-
<div class="control-group primary-controls">
93-
<button class="btn btn-start" id="start-btn-${this.containerId}">Start</button>
94-
<button class="btn btn-stop" id="stop-btn-${this.containerId}" disabled>Stop</button>
95-
<button class="btn btn-reconnect" id="reconnect-btn-${this.containerId}" disabled>Reconnect</button>
96-
<button class="btn btn-demo" id="demo-btn-${this.containerId}">Demo</button>
97-
</div>
98-
<div class="control-group secondary-controls">
99-
<select class="mode-select" id="mode-select-${this.containerId}">
100-
<option value="skeleton">Skeleton</option>
101-
<option value="keypoints">Keypoints</option>
102-
<option value="heatmap">Heatmap</option>
103-
<option value="dense">Dense</option>
104-
</select>
105-
<button class="btn btn-settings" id="settings-btn-${this.containerId}">⚙️ Settings</button>
106-
</div>
92+
<button class="btn btn-start" id="start-btn-${this.containerId}">&#9654; Start</button>
93+
<button class="btn btn-stop" id="stop-btn-${this.containerId}" disabled>&#9632; Stop</button>
94+
<button class="btn btn-reconnect" id="reconnect-btn-${this.containerId}" disabled>&#8635; Reconnect</button>
95+
<button class="btn btn-demo" id="demo-btn-${this.containerId}">&#9881; Demo</button>
96+
<select class="mode-select" id="mode-select-${this.containerId}">
97+
<option value="skeleton">Skeleton</option>
98+
<option value="keypoints">Keypoints</option>
99+
<option value="heatmap">Heatmap</option>
100+
<option value="dense">Dense</option>
101+
</select>
102+
<button class="btn btn-settings" id="settings-btn-${this.containerId}">&#9881; Settings</button>
107103
</div>
108104
</div>
109105
<div class="pose-canvas-container">
@@ -124,20 +120,20 @@ export class PoseDetectionCanvas {
124120
const style = document.createElement('style');
125121
style.textContent = `
126122
.pose-detection-canvas-wrapper {
127-
border: 1px solid #ddd;
123+
border: 1px solid rgba(255, 255, 255, 0.06);
128124
border-radius: 8px;
129125
overflow: hidden;
130-
background: #f9f9f9;
131-
font-family: Arial, sans-serif;
126+
background: #0d1117;
127+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
132128
}
133129
134130
.pose-canvas-header {
135131
display: flex;
136132
justify-content: space-between;
137133
align-items: center;
138-
padding: 10px 15px;
139-
background: #f0f0f0;
140-
border-bottom: 1px solid #ddd;
134+
padding: 12px 16px;
135+
background: rgba(15, 20, 35, 0.95);
136+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
141137
}
142138
143139
.pose-canvas-title {
@@ -148,156 +144,166 @@ export class PoseDetectionCanvas {
148144
149145
.pose-canvas-title h3 {
150146
margin: 0;
151-
color: #333;
147+
color: #e0e0e0;
152148
font-size: 16px;
149+
font-weight: 600;
153150
}
154151
155152
.connection-status {
156153
display: flex;
157154
align-items: center;
158-
gap: 5px;
155+
gap: 6px;
156+
padding: 4px 10px;
157+
background: rgba(30, 40, 60, 0.6);
158+
border-radius: 12px;
159+
border: 1px solid rgba(255, 255, 255, 0.06);
159160
}
160161
161162
.status-indicator {
162-
width: 10px;
163-
height: 10px;
163+
width: 8px;
164+
height: 8px;
164165
border-radius: 50%;
165-
background: #ccc;
166+
background: #4a5568;
166167
transition: background-color 0.3s;
167168
}
168169
169-
.status-indicator.connected { background: #28a745; }
170-
.status-indicator.connecting { background: #ffc107; }
171-
.status-indicator.error { background: #dc3545; }
172-
.status-indicator.disconnected { background: #6c757d; }
170+
.status-indicator.connected { background: #00cc88; box-shadow: 0 0 6px rgba(0, 204, 136, 0.5); }
171+
.status-indicator.connecting { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.5); animation: pulse 1.5s ease-in-out infinite; }
172+
.status-indicator.error { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
173+
.status-indicator.disconnected { background: #4a5568; }
173174
174175
.status-text {
175-
font-size: 12px;
176-
color: #666;
177-
min-width: 80px;
176+
font-size: 11px;
177+
color: #8899aa;
178+
min-width: 70px;
179+
text-transform: uppercase;
180+
letter-spacing: 0.5px;
181+
font-weight: 500;
178182
}
179183
180184
.pose-canvas-controls {
181-
display: flex;
182-
align-items: center;
183-
justify-content: space-between;
184-
gap: 15px;
185-
flex-wrap: wrap;
186-
}
187-
188-
.control-group {
189185
display: flex;
190186
align-items: center;
191187
gap: 8px;
192-
}
193-
194-
.primary-controls {
195-
flex: 1;
196-
}
197-
198-
.secondary-controls {
199-
flex-shrink: 0;
188+
flex-wrap: nowrap;
200189
}
201190
202191
.btn {
203192
padding: 8px 16px;
204-
border: 1px solid #ddd;
205-
border-radius: 6px;
206-
background: #ffffff;
207-
color: #333333;
193+
border: 1px solid rgba(255, 255, 255, 0.1);
194+
border-radius: 8px;
195+
background: rgba(30, 40, 60, 0.8);
196+
color: #c8d0dc;
208197
cursor: pointer;
209198
font-size: 13px;
210199
font-weight: 500;
211200
transition: all 0.2s ease;
212-
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
201+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
213202
text-decoration: none;
214-
display: inline-block;
203+
display: inline-flex;
204+
align-items: center;
205+
gap: 4px;
215206
min-width: 80px;
216-
text-align: center;
207+
justify-content: center;
217208
}
218209
219210
.btn:hover:not(:disabled) {
220-
background: #f8f9fa;
221-
border-color: #adb5bd;
222-
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
223211
transform: translateY(-1px);
212+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
224213
}
225214
226215
.btn:active:not(:disabled) {
227216
transform: translateY(0);
228-
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
217+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
229218
}
230219
231220
.btn:disabled {
232-
opacity: 0.6;
221+
opacity: 0.35;
233222
cursor: not-allowed;
234-
background: #e9ecef;
235-
color: #6c757d;
223+
background: rgba(20, 30, 50, 0.6);
224+
color: #4a5568;
236225
transform: none !important;
237226
box-shadow: none !important;
238227
}
239228
240-
.btn-start {
241-
background: #28a745;
242-
color: white;
243-
border-color: #28a745;
229+
.btn-start {
230+
background: rgba(0, 204, 136, 0.15);
231+
color: #00cc88;
232+
border-color: rgba(0, 204, 136, 0.3);
244233
}
245234
246-
.btn-start:hover:not(:disabled) {
247-
background: #218838;
248-
border-color: #1e7e34;
235+
.btn-start:hover:not(:disabled) {
236+
background: rgba(0, 204, 136, 0.25);
237+
border-color: rgba(0, 204, 136, 0.5);
238+
box-shadow: 0 4px 12px rgba(0, 204, 136, 0.2);
249239
}
250240
251-
.btn-stop {
252-
background: #dc3545;
253-
color: white;
254-
border-color: #dc3545;
241+
.btn-stop {
242+
background: rgba(239, 68, 68, 0.15);
243+
color: #ef4444;
244+
border-color: rgba(239, 68, 68, 0.3);
255245
}
256246
257-
.btn-stop:hover:not(:disabled) {
258-
background: #c82333;
259-
border-color: #bd2130;
247+
.btn-stop:hover:not(:disabled) {
248+
background: rgba(239, 68, 68, 0.25);
249+
border-color: rgba(239, 68, 68, 0.5);
250+
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
260251
}
261252
262-
.btn-reconnect {
263-
background: #17a2b8;
264-
color: white;
265-
border-color: #17a2b8;
253+
.btn-reconnect {
254+
background: rgba(59, 130, 246, 0.15);
255+
color: #60a5fa;
256+
border-color: rgba(59, 130, 246, 0.3);
266257
}
267258
268-
.btn-reconnect:hover:not(:disabled) {
269-
background: #138496;
270-
border-color: #117a8b;
259+
.btn-reconnect:hover:not(:disabled) {
260+
background: rgba(59, 130, 246, 0.25);
261+
border-color: rgba(59, 130, 246, 0.5);
262+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
271263
}
272264
273-
.btn-demo {
274-
background: #6f42c1;
275-
color: white;
276-
border-color: #6f42c1;
265+
.btn-demo {
266+
background: rgba(139, 92, 246, 0.15);
267+
color: #a78bfa;
268+
border-color: rgba(139, 92, 246, 0.3);
277269
}
278270
279-
.btn-demo:hover:not(:disabled) {
280-
background: #5a32a3;
281-
border-color: #512a97;
271+
.btn-demo:hover:not(:disabled) {
272+
background: rgba(139, 92, 246, 0.25);
273+
border-color: rgba(139, 92, 246, 0.5);
274+
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
282275
}
283276
284-
.btn-settings {
285-
background: #6c757d;
286-
color: white;
287-
border-color: #6c757d;
277+
.btn-settings {
278+
background: rgba(100, 116, 139, 0.15);
279+
color: #94a3b8;
280+
border-color: rgba(100, 116, 139, 0.3);
288281
}
289282
290-
.btn-settings:hover:not(:disabled) {
291-
background: #5a6268;
292-
border-color: #545b62;
283+
.btn-settings:hover:not(:disabled) {
284+
background: rgba(100, 116, 139, 0.25);
285+
border-color: rgba(100, 116, 139, 0.5);
293286
}
294287
295288
.mode-select {
296-
padding: 5px 8px;
297-
border: 1px solid #ddd;
298-
border-radius: 4px;
299-
background: #fff;
300-
font-size: 12px;
289+
padding: 8px 12px;
290+
border: 1px solid rgba(255, 255, 255, 0.1);
291+
border-radius: 8px;
292+
background: rgba(30, 40, 60, 0.8);
293+
color: #b0b8c8;
294+
font-size: 13px;
295+
cursor: pointer;
296+
}
297+
298+
.mode-select:focus {
299+
outline: none;
300+
border-color: rgba(139, 92, 246, 0.5);
301+
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
302+
}
303+
304+
.mode-select option {
305+
background: #1a2234;
306+
color: #c8d0dc;
301307
}
302308
303309
.pose-canvas-container {

0 commit comments

Comments
 (0)