From 69a27a965fac95f9b802220d3162a0879eca273e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 14 Apr 2026 04:52:05 +0000
Subject: [PATCH] fix: color the status dot icon instead of the status text on
 dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous fix incorrectly applied color classes to the card-value text
element. This changes it to target the ● icon in the card label, matching
the header status dot behavior with color + glow/pulse effects.

https://claude.ai/code/session_01JjSrmv2syvkNMJziuSnzGE
---
 static/app.js     |  4 ++--
 static/index.html |  2 +-
 static/style.css  | 12 ++++++++----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/static/app.js b/static/app.js
index 1a2273c..d4bc404 100644
--- a/static/app.js
+++ b/static/app.js
@@ -354,8 +354,8 @@ async function refreshDashboard() {
 
   const summary = data.summary || {};
   setCardValue('dash-status', status.charAt(0).toUpperCase() + status.slice(1));
-  const dashStatusEl = document.getElementById('dash-status');
-  if (dashStatusEl) dashStatusEl.className = 'card-value status-' + status;
+  const dashStatusIcon = document.getElementById('dash-status-icon');
+  if (dashStatusIcon) dashStatusIcon.className = 'card-icon status-icon-' + status;
   setCardValue('dash-mode', (data.mode || '--').toUpperCase());
   setCardValue('dash-uptime', formatUptime(data.uptime));
   setCardValue('dash-corrupt', summary.corrupted != null ? summary.corrupted : '--');
diff --git a/static/index.html b/static/index.html
index 0facbd2..b73df6a 100644
--- a/static/index.html
+++ b/static/index.html
@@ -91,7 +91,7 @@ <h2>BeatsCheck Login</h2>
       <h2>Dashboard</h2>
       <div class="card-grid">
         <div class="card">
-          <div class="card-label"><span class="card-icon" aria-hidden="true">&#9679;</span> Status</div>
+          <div class="card-label"><span id="dash-status-icon" class="card-icon" aria-hidden="true">&#9679;</span> Status</div>
           <div id="dash-status" class="card-value">--</div>
         </div>
         <div class="card">
diff --git a/static/style.css b/static/style.css
index 11969d7..26176b0 100644
--- a/static/style.css
+++ b/static/style.css
@@ -210,15 +210,19 @@ header h1 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
 .status-dot.setup    { background: #b080e8; box-shadow: 0 0 6px rgba(176,128,232,.4); }
 .status-dot.error    { background: #e0506a; box-shadow: 0 0 8px rgba(224,80,106,.5); }
 #status-text { font-size: .82rem; color: var(--text-muted); }
-.card-value.status-idle     { color: #3ecfa0; }
-.card-value.status-scanning { color: #e8b84a; }
-.card-value.status-setup    { color: #b080e8; }
-.card-value.status-error    { color: #e0506a; }
+.card-icon.status-icon-idle     { color: #3ecfa0; text-shadow: 0 0 8px rgba(62,207,160,.5); }
+.card-icon.status-icon-scanning { color: #e8b84a; animation: pulse-scan-text 1.5s ease-in-out infinite; }
+.card-icon.status-icon-setup    { color: #b080e8; text-shadow: 0 0 6px rgba(176,128,232,.4); }
+.card-icon.status-icon-error    { color: #e0506a; text-shadow: 0 0 8px rgba(224,80,106,.5); }
 
 @keyframes pulse-scan {
   0%, 100% { box-shadow: 0 0 4px rgba(232,184,74,.3); }
   50%      { box-shadow: 0 0 14px rgba(232,184,74,.7); }
 }
+@keyframes pulse-scan-text {
+  0%, 100% { text-shadow: 0 0 4px rgba(232,184,74,.3); }
+  50%      { text-shadow: 0 0 14px rgba(232,184,74,.7); }
+}
 
 /* --- Sidebar Nav --- */
 nav#sidebar {