Merge pull request #43 from Bibek200619/fix/dashboard-simulation-ui

Align dashboard with simulation and light UI

Author: Bibek200619

web_app/frontend/src/components/camera/CameraViewer.tsx

@@ -67,7 +67,7 @@ export function CameraViewer({ compact = false }: { compact?: boolean }) {
           <span className="eyebrow">PRIMARY VIEW</span>
         )}
       </header>
-      <div className="camera-stage">
+      <div className={`camera-stage ${live ? 'is-live' : 'is-idle'}`}>
         <span className="camera-state">
           <i className={live ? 'status-dot live' : 'status-dot'} />
           {live
@@ -114,9 +114,11 @@ export function CameraViewer({ compact = false }: { compact?: boolean }) {
             ) : null}
           </div>
         )}
-        <span className="viewport-corner">
-          01 <span>/</span> FORWARD
-        </span>
+        {live && (
+          <span className="viewport-corner">
+            01 <span>/</span> FORWARD
+          </span>
+        )}
       </div>
       <footer className="camera-toolbar">
         <span className="stream-meta">

web_app/frontend/src/components/common/StatusBadge.tsx

@@ -14,26 +14,24 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({
   className = '',
 }) => {
   const variantClasses = {
-    success: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
-    warning: 'bg-amber-500/10 text-amber-400 border-amber-500/20',
-    danger: 'bg-rose-500/10 text-rose-400 border-rose-500/20',
-    info: 'bg-sky-500/10 text-sky-400 border-sky-500/20',
-    default: 'bg-slate-500/10 text-slate-400 border-slate-500/20',
+    success: 'status-badge success',
+    warning: 'status-badge warning',
+    danger: 'status-badge danger',
+    info: 'status-badge info',
+    default: 'status-badge',
   };
 
   const dotClasses = {
-    success: 'bg-emerald-400',
-    warning: 'bg-amber-400',
-    danger: 'bg-rose-400',
-    info: 'bg-sky-400',
-    default: 'bg-slate-400',
+    success: 'live',
+    warning: 'warning',
+    danger: 'danger',
+    info: 'info',
+    default: '',
   };
 
   return (
-    <span
-      className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-[11px] font-mono font-medium border whitespace-nowrap ${variantClasses[variant]} ${className}`}
-    >
-      <span className={`w-1.5 h-1.5 rounded-full ${dotClasses[variant]} shrink-0`} />
+    <span className={`${variantClasses[variant]} ${className}`}>
+      <span className={`status-dot ${dotClasses[variant]}`.trim()} />
       <span>{children || status || 'Unknown'}</span>
     </span>
   );