From 9ea1a0b1552137f35d3358a96c6c6b6687df6e58 Mon Sep 17 00:00:00 2001
From: Kai Chen <kaichen0728@gmail.com>
Date: Thu, 9 Jul 2026 22:48:37 -0700
Subject: [PATCH] feat: gray out the Spotify live indicator

The now-playing dot and its pulse glow move from Spotify green to
black (light) / white (dark), completing the monochrome palette.

Co-authored-by: Claude <noreply@anthropic.com>
---
 app/components/listening-card.tsx | 4 ++--
 app/globals.css                   | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/listening-card.tsx b/app/components/listening-card.tsx
index 0c2cc61..998cea7 100644
--- a/app/components/listening-card.tsx
+++ b/app/components/listening-card.tsx
@@ -70,8 +70,8 @@ export default function ListeningCard() {
           <span
             className={`size-2 rounded-full shrink-0 transition-colors duration-300 ${
               live
-                ? "listening-live-dot bg-[#1DB954] dark:bg-[#1DB954]"
-                : "opacity-35 bg-[#1DB954] dark:bg-[#1DB954]"
+                ? "listening-live-dot bg-black dark:bg-white"
+                : "opacity-35 bg-black dark:bg-white"
             }`}
             style={
               live
diff --git a/app/globals.css b/app/globals.css
index e55a35a..f754395 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -489,19 +489,19 @@ button.mag-chip:disabled {
 @keyframes listening-live-pulse {
   0%,
   100% {
-    box-shadow: 0 0 0 0 rgb(29 185 84 / 0.45);
+    box-shadow: 0 0 0 0 rgb(0 0 0 / 0.35);
   }
   55% {
-    box-shadow: 0 0 0 10px rgb(29 185 84 / 0);
+    box-shadow: 0 0 0 10px rgb(0 0 0 / 0);
   }
 }
 @keyframes listening-live-pulse-dark {
   0%,
   100% {
-    box-shadow: 0 0 0 0 rgb(29 185 84 / 0.4);
+    box-shadow: 0 0 0 0 rgb(255 255 255 / 0.4);
   }
   55% {
-    box-shadow: 0 0 0 10px rgb(29 185 84 / 0);
+    box-shadow: 0 0 0 10px rgb(255 255 255 / 0);
   }
 }
 @keyframes listening-soft-breathe {