From 9ec721b9fca1b0e9bedd7d3c04ef48f0009d335f Mon Sep 17 00:00:00 2001
From: Christophe Vila <kriss@vilanet.fr>
Date: Sun, 19 Jul 2026 16:13:52 +0200
Subject: [PATCH] Style chart tooltips to match the dark theme

Recharts' default tooltip is a plain white box, which stood out badly
against the app's dark background. Applied across both the Review Queue's
pace/HR charts and the Progression chart.
---
 frontend/src/components/charts/ExpectedVsActualChart.tsx | 4 ++--
 frontend/src/components/charts/ProgressionChart.tsx      | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/charts/ExpectedVsActualChart.tsx b/frontend/src/components/charts/ExpectedVsActualChart.tsx
index 1328592..d1381e4 100644
--- a/frontend/src/components/charts/ExpectedVsActualChart.tsx
+++ b/frontend/src/components/charts/ExpectedVsActualChart.tsx
@@ -314,7 +314,7 @@ export function ExpectedVsActualChart({ laps, samples }: { laps: Lap[]; samples:
             ))}
             <XAxis dataKey="t" type="number" domain={[0, elapsedMin]} tick={{ fontSize: 10 }} tickFormatter={(v) => `${Math.round(Number(v))}m`} />
             <YAxis reversed domain={paceDomain} ticks={paceTicks} interval={0} tick={{ fontSize: 10 }} width={34} tickFormatter={(v) => formatPaceShort(Number(v))} />
-            <Tooltip formatter={paceTooltipFormatter} labelFormatter={(t) => `${formatElapsed(Number(t))} elapsed`} contentStyle={{ fontSize: 12 }} />
+            <Tooltip formatter={paceTooltipFormatter} labelFormatter={(t) => `${formatElapsed(Number(t))} elapsed`} contentStyle={{ fontSize: 12, background: "#1a1d24", border: "1px solid #2a2d35", borderRadius: 6 }} labelStyle={{ color: "#9aa0ab" }} itemStyle={{ color: "#e6e6e6" }} />
             {hasPaceTarget && (
               <Area type="stepAfter" dataKey="targetPaceRange" stroke="none" fill="#9aa0ab" fillOpacity={0.25} isAnimationActive={false} name="Target range" connectNulls />
             )}
@@ -335,7 +335,7 @@ export function ExpectedVsActualChart({ laps, samples }: { laps: Lap[]; samples:
             ))}
             <XAxis dataKey="t" type="number" domain={[0, elapsedMin]} tick={{ fontSize: 10 }} tickFormatter={(v) => `${Math.round(Number(v))}m`} />
             <YAxis domain={hrDomain} ticks={hrTicks} interval={0} tick={{ fontSize: 10 }} width={30} tickFormatter={(v) => String(Math.round(Number(v)))} />
-            <Tooltip formatter={hrTooltipFormatter} labelFormatter={(t) => `${formatElapsed(Number(t))} elapsed`} contentStyle={{ fontSize: 12 }} />
+            <Tooltip formatter={hrTooltipFormatter} labelFormatter={(t) => `${formatElapsed(Number(t))} elapsed`} contentStyle={{ fontSize: 12, background: "#1a1d24", border: "1px solid #2a2d35", borderRadius: 6 }} labelStyle={{ color: "#9aa0ab" }} itemStyle={{ color: "#e6e6e6" }} />
             {hasHRTarget && (
               <Area type="stepAfter" dataKey="targetHRRange" stroke="none" fill="#9aa0ab" fillOpacity={0.25} isAnimationActive={false} name="Target range" connectNulls />
             )}
diff --git a/frontend/src/components/charts/ProgressionChart.tsx b/frontend/src/components/charts/ProgressionChart.tsx
index 95711cf..87b5b59 100644
--- a/frontend/src/components/charts/ProgressionChart.tsx
+++ b/frontend/src/components/charts/ProgressionChart.tsx
@@ -28,6 +28,9 @@ export function ProgressionChart({ points, metric }: { points: ProgressionPoint[
         />
         <Tooltip
           formatter={(value) => [Number(value).toFixed(1), METRIC_LABELS[metric] ?? metric]}
+          contentStyle={{ background: "#1a1d24", border: "1px solid #2a2d35", borderRadius: 6 }}
+          labelStyle={{ color: "#9aa0ab" }}
+          itemStyle={{ color: "#e6e6e6" }}
         />
         <Line type="monotone" dataKey="value" stroke="#3b82f6" strokeWidth={2} dot={{ r: 3 }} />
       </LineChart>