From 52f3051c82590b302c9fc6c78ac1ceffd2336ec3 Mon Sep 17 00:00:00 2001
From: Decobus <deco@deco.sh>
Date: Tue, 22 Jul 2025 14:36:07 -0400
Subject: [PATCH] Fix status indicator dots visibility in footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added custom CSS for status dots using Solarized theme colors
- Replaced Tailwind classes with custom .status-dot classes
- Fixed connection status dot (green when connected, red when disconnected)
- Fixed streaming/recording status dots (red when active, gray when idle)
- Used proper Solarized color palette for consistency

Status dots now properly display:
- Connection: Green dot for connected, red for disconnected
- Streaming: Red dot when live, gray when offline
- Recording: Red dot when recording, gray when idle

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/globals.css       | 24 ++++++++++++++++++++++++
 components/Footer.tsx |  6 +++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 288b6ab..e1107df 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -40,6 +40,30 @@ body {
   line-height: 1.6;
 }
 
+/* Status Indicator Dots */
+.status-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.status-dot.connected {
+  background-color: #859900; /* Solarized green */
+}
+
+.status-dot.disconnected {
+  background-color: #dc322f; /* Solarized red */
+}
+
+.status-dot.streaming {
+  background-color: #dc322f; /* Solarized red */
+}
+
+.status-dot.idle {
+  background-color: #586e75; /* Solarized base01 */
+}
+
 /* Glass Card Component */
 .glass {
   background: rgba(7, 54, 66, 0.4);
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 06a8cbe..b4e585c 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -82,7 +82,7 @@ export default function Footer() {
           {/* Connection Status */}
           <div>
             <div className="flex items-center gap-3 mb-4">
-              <div className={`w-3 h-3 rounded-full ${obsStatus?.connected ? 'bg-green-500' : 'bg-red-500'}`}></div>
+              <div className={`status-dot ${obsStatus?.connected ? 'connected' : 'disconnected'}`}></div>
               <div>
                 <h3 className="font-semibold">OBS Studio</h3>
                 <p className="text-sm opacity-60">
@@ -151,12 +151,12 @@ export default function Footer() {
 
                 <div className="flex gap-4 mt-4">
                   <div className={`flex items-center gap-2 ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}>
-                    <div className={`w-2 h-2 rounded-full ${obsStatus.streaming ? 'bg-red-500' : 'bg-gray-500'}`}></div>
+                    <div className={`status-dot ${obsStatus.streaming ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
                     <span className="text-sm">{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}</span>
                   </div>
                   
                   <div className={`flex items-center gap-2 ${obsStatus.recording ? 'text-red-400' : 'opacity-60'}`}>
-                    <div className={`w-2 h-2 rounded-full ${obsStatus.recording ? 'bg-red-500' : 'bg-gray-500'}`}></div>
+                    <div className={`status-dot ${obsStatus.recording ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
                     <span className="text-sm">{obsStatus.recording ? 'REC' : 'IDLE'}</span>
                   </div>
                 </div>