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

Skip to content

Commit 8e487c5

Browse files
ruvnetruvnet
committed
fix: dark mode for Live Demo tab + pose_source passthrough
- Convert all Live Demo sidebar panels to dark theme matching rest of UI - Fix pose_source not reaching LiveDemoTab (was lost in convertZoneDataToRestFormat — now passes through from WS message) - Dark backgrounds, muted text, consistent border opacity throughout - Estimation Mode badge colors adjusted for dark background contrast Co-Authored-By: claude-flow <[email protected]>
1 parent 135d7d3 commit 8e487c5

2 files changed

Lines changed: 60 additions & 56 deletions

File tree

‎ui/components/LiveDemoTab.js‎

Lines changed: 59 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -229,19 +229,19 @@ export class LiveDemoTab {
229229
flex-direction: column;
230230
height: 100%;
231231
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
232-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
233-
color: #333;
232+
background: #0a0f1a;
233+
color: #e0e0e0;
234234
}
235235
236236
.demo-header {
237237
display: flex;
238238
justify-content: space-between;
239239
align-items: center;
240240
padding: 20px 24px;
241-
background: rgba(255, 255, 255, 0.95);
241+
background: rgba(15, 20, 35, 0.95);
242242
backdrop-filter: blur(10px);
243-
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
244-
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
243+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
244+
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
245245
position: relative;
246246
z-index: 10;
247247
}
@@ -254,10 +254,10 @@ export class LiveDemoTab {
254254
255255
.demo-title h2 {
256256
margin: 0;
257-
color: #333;
257+
color: #e0e0e0;
258258
font-size: 22px;
259259
font-weight: 700;
260-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
260+
background: linear-gradient(135deg, #667eea 0%, #a78bfa 100%);
261261
-webkit-background-clip: text;
262262
-webkit-text-fill-color: transparent;
263263
background-clip: text;
@@ -268,9 +268,9 @@ export class LiveDemoTab {
268268
align-items: center;
269269
gap: 10px;
270270
padding: 8px 16px;
271-
background: rgba(248, 249, 250, 0.8);
271+
background: rgba(30, 40, 60, 0.8);
272272
border-radius: 20px;
273-
border: 1px solid rgba(222, 226, 230, 0.5);
273+
border: 1px solid rgba(255, 255, 255, 0.1);
274274
}
275275
276276
.status-indicator {
@@ -304,7 +304,7 @@ export class LiveDemoTab {
304304
.status-text {
305305
font-size: 13px;
306306
font-weight: 500;
307-
color: #495057;
307+
color: #b0b8c8;
308308
}
309309
310310
.demo-controls {
@@ -338,19 +338,19 @@ export class LiveDemoTab {
338338
339339
.btn--primary:hover:not(:disabled) {
340340
transform: translateY(-2px);
341-
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
341+
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
342342
}
343343
344344
.btn--secondary {
345-
background: #f8f9fa;
346-
color: #495057;
347-
border-color: #dee2e6;
345+
background: rgba(30, 40, 60, 0.8);
346+
color: #b0b8c8;
347+
border-color: rgba(255, 255, 255, 0.1);
348348
}
349349
350350
.btn--secondary:hover:not(:disabled) {
351-
background: #e9ecef;
351+
background: rgba(40, 50, 75, 0.9);
352352
transform: translateY(-1px);
353-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
353+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
354354
}
355355
356356
.btn:disabled {
@@ -368,38 +368,38 @@ export class LiveDemoTab {
368368
369369
.zone-select {
370370
padding: 10px 14px;
371-
border: 1px solid #dee2e6;
371+
border: 1px solid rgba(255, 255, 255, 0.1);
372372
border-radius: 8px;
373-
background: white;
373+
background: rgba(30, 40, 60, 0.8);
374+
color: #b0b8c8;
374375
font-size: 14px;
375376
cursor: pointer;
376-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
377+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
377378
transition: all 0.2s ease;
378379
}
379380
380381
.zone-select:focus {
381382
outline: none;
382383
border-color: #667eea;
383-
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
384+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
384385
}
385386
386387
.demo-content {
387388
display: flex;
388389
flex: 1;
389390
gap: 24px;
390391
padding: 24px;
391-
background: rgba(255, 255, 255, 0.1);
392-
backdrop-filter: blur(10px);
392+
background: #0a0f1a;
393393
}
394394
395395
.demo-main {
396396
flex: 2;
397397
min-height: 500px;
398-
background: white;
398+
background: #111827;
399399
border-radius: 12px;
400400
overflow: hidden;
401-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
402-
border: 1px solid rgba(255, 255, 255, 0.2);
401+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
402+
border: 1px solid rgba(255, 255, 255, 0.06);
403403
}
404404
405405
.pose-detection-container {
@@ -416,15 +416,15 @@ export class LiveDemoTab {
416416
}
417417
418418
.metrics-panel, .health-panel, .debug-panel {
419-
background: #fff;
420-
border: 1px solid #ddd;
419+
background: rgba(17, 24, 39, 0.9);
420+
border: 1px solid rgba(255, 255, 255, 0.08);
421421
border-radius: 8px;
422422
padding: 15px;
423423
}
424424
425425
.metrics-panel h4, .health-panel h4, .debug-panel h4 {
426426
margin: 0 0 15px 0;
427-
color: #333;
427+
color: #e0e0e0;
428428
font-size: 14px;
429429
font-weight: 600;
430430
}
@@ -438,12 +438,12 @@ export class LiveDemoTab {
438438
}
439439
440440
.metric label, .health-check label {
441-
color: #666;
441+
color: #8899aa;
442442
}
443443
444444
.metric span, .health-check span {
445445
font-weight: 500;
446-
color: #333;
446+
color: #c8d0dc;
447447
}
448448
449449
.debug-actions {
@@ -455,18 +455,20 @@ export class LiveDemoTab {
455455
456456
.debug-info textarea {
457457
width: 100%;
458-
border: 1px solid #ddd;
458+
border: 1px solid rgba(255, 255, 255, 0.1);
459459
border-radius: 4px;
460460
padding: 8px;
461461
font-family: monospace;
462462
font-size: 11px;
463463
resize: vertical;
464+
background: #0a0f1a;
465+
color: #c8d0dc;
464466
}
465467
466468
.error-display {
467-
background: #f8d7da;
468-
color: #721c24;
469-
border: 1px solid #f5c6cb;
469+
background: rgba(220, 53, 69, 0.15);
470+
color: #f5a0a8;
471+
border: 1px solid rgba(220, 53, 69, 0.3);
470472
border-radius: 4px;
471473
padding: 12px;
472474
margin: 10px 20px;
@@ -479,15 +481,15 @@ export class LiveDemoTab {
479481
480482
/* Pose estimation mode indicator */
481483
.pose-source-panel {
482-
background: #fff;
483-
border: 1px solid #ddd;
484+
background: rgba(17, 24, 39, 0.9);
485+
border: 1px solid rgba(255, 255, 255, 0.08);
484486
border-radius: 8px;
485487
padding: 15px;
486488
}
487489
488490
.pose-source-panel h4 {
489491
margin: 0 0 12px 0;
490-
color: #333;
492+
color: #e0e0e0;
491493
font-size: 14px;
492494
font-weight: 600;
493495
}
@@ -510,40 +512,40 @@ export class LiveDemoTab {
510512
}
511513
512514
.pose-source-unknown {
513-
background: #f0f0f0;
514-
color: #6c757d;
515-
border: 1px solid #dee2e6;
515+
background: rgba(108, 117, 125, 0.15);
516+
color: #8899aa;
517+
border: 1px solid rgba(108, 117, 125, 0.3);
516518
}
517519
518520
.pose-source-signal {
519-
background: #e8f5e9;
520-
color: #2e7d32;
521-
border: 1px solid #a5d6a7;
521+
background: rgba(0, 204, 136, 0.12);
522+
color: #00cc88;
523+
border: 1px solid rgba(0, 204, 136, 0.3);
522524
}
523525
524526
.pose-source-model {
525-
background: #e3f2fd;
526-
color: #1565c0;
527-
border: 1px solid #90caf9;
527+
background: rgba(102, 126, 234, 0.12);
528+
color: #8ea4f0;
529+
border: 1px solid rgba(102, 126, 234, 0.3);
528530
}
529531
530532
.pose-source-description {
531533
margin: 0;
532534
font-size: 11px;
533-
color: #666;
535+
color: #8899aa;
534536
line-height: 1.4;
535537
}
536538
537539
.setup-guide-panel {
538-
background: #fff;
539-
border: 1px solid #ddd;
540+
background: rgba(17, 24, 39, 0.9);
541+
border: 1px solid rgba(255, 255, 255, 0.08);
540542
border-radius: 8px;
541543
padding: 15px;
542544
}
543545
544546
.setup-guide-panel h4 {
545547
margin: 0 0 12px 0;
546-
color: #333;
548+
color: #e0e0e0;
547549
font-size: 14px;
548550
font-weight: 600;
549551
}
@@ -560,8 +562,8 @@ export class LiveDemoTab {
560562
gap: 10px;
561563
padding: 8px;
562564
border-radius: 6px;
563-
background: #f8f9fa;
564-
border: 1px solid #e9ecef;
565+
background: rgba(30, 40, 60, 0.6);
566+
border: 1px solid rgba(255, 255, 255, 0.06);
565567
}
566568
567569
.setup-level-icon {
@@ -580,25 +582,26 @@ export class LiveDemoTab {
580582
581583
.setup-level-info strong {
582584
font-size: 12px;
583-
color: #333;
585+
color: #c8d0dc;
584586
display: block;
585587
}
586588
587589
.setup-level-info p {
588590
margin: 2px 0 0;
589591
font-size: 11px;
590-
color: #666;
592+
color: #8899aa;
591593
}
592594
593595
.setup-note {
594596
margin: 10px 0 0;
595597
font-size: 11px;
596-
color: #888;
598+
color: #6b7a8d;
597599
line-height: 1.5;
598600
}
599601
600602
.setup-note code {
601-
background: #f0f0f0;
603+
background: rgba(102, 126, 234, 0.12);
604+
color: #8ea4f0;
602605
padding: 1px 4px;
603606
border-radius: 3px;
604607
font-size: 10px;

‎ui/services/pose.service.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -511,6 +511,7 @@ export class PoseService {
511511
persons: persons,
512512
zone_summary: zoneSummary,
513513
processing_time_ms: zoneData.metadata?.processing_time_ms || 0,
514+
pose_source: originalMessage.pose_source || zoneData.pose_source || null,
514515
metadata: {
515516
mock_data: false,
516517
source: 'websocket',

0 commit comments

Comments
 (0)