From ccbb7bc2b709eaa9dfc6b3f31032caaf1ead139d Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 14:44:47 +0100
Subject: [PATCH] [#809] Fix DeadlineCountdown style in stat boxes

Add valueClassName prop to DeadlineCountdown. When provided, overrides
the default text-accent font-medium styling. Stat box passes
text-foreground text-sm font-bold to match Market Cap and Supply boxes.
Expired state preserves text-error. No change to other DeadlineCountdown
usages (storyline cards, etc).

Fixes #809

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/story/[storylineId]/page.tsx |  2 +-
 src/components/DeadlineCountdown.tsx | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 3f80dead..e83eb57b 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -357,7 +357,7 @@ function StoryHeader({
                 ) : storyline.last_plot_time ? (
                   <>
                     <div className="text-foreground text-sm font-bold leading-tight">
-                      <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel />
+                      <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel valueClassName="text-foreground text-sm font-bold" />
                     </div>
                     <div className="text-muted text-[9px]">Deadline</div>
                   </>
diff --git a/src/components/DeadlineCountdown.tsx b/src/components/DeadlineCountdown.tsx
index 1cf0ee92..dcd93a18 100644
--- a/src/components/DeadlineCountdown.tsx
+++ b/src/components/DeadlineCountdown.tsx
@@ -5,7 +5,15 @@ import { useState, useEffect } from "react";
 export const DEADLINE_HOURS = 168;
 export const DEADLINE_MS = DEADLINE_HOURS * 60 * 60 * 1000;
 
-export function DeadlineCountdown({ lastPlotTime, hideLabel }: { lastPlotTime: string; hideLabel?: boolean }) {
+export function DeadlineCountdown({
+  lastPlotTime,
+  hideLabel,
+  valueClassName,
+}: {
+  lastPlotTime: string;
+  hideLabel?: boolean;
+  valueClassName?: string;
+}) {
   const [remaining, setRemaining] = useState<number | null>(null);
 
   useEffect(() => {
@@ -17,11 +25,14 @@ export function DeadlineCountdown({ lastPlotTime, hideLabel }: { lastPlotTime: s
     return () => clearInterval(interval);
   }, [lastPlotTime]);
 
+  const defaultValueClass = "text-accent font-medium";
+  const activeClass = valueClassName ?? defaultValueClass;
+
   if (remaining === null) {
     return (
       <div className="text-xs">
         {!hideLabel && <><span className="text-muted">Deadline:</span>{" "}</>}
-        <span className="text-accent font-medium">--</span>
+        <span className={activeClass}>--</span>
       </div>
     );
   }
@@ -30,7 +41,7 @@ export function DeadlineCountdown({ lastPlotTime, hideLabel }: { lastPlotTime: s
     return (
       <div className="text-xs">
         {!hideLabel && <><span className="text-muted">Deadline:</span>{" "}</>}
-        <span className="text-error font-medium">expired</span>
+        <span className={valueClassName ? `${valueClassName} text-error` : "text-error font-medium"}>expired</span>
       </div>
     );
   }
@@ -52,7 +63,7 @@ export function DeadlineCountdown({ lastPlotTime, hideLabel }: { lastPlotTime: s
   return (
     <div className="text-xs">
       {!hideLabel && <><span className="text-muted">Deadline:</span>{" "}</>}
-      <span className="text-accent font-medium">{formatted}</span>
+      <span className={activeClass}>{formatted}</span>
     </div>
   );
 }