From a6226985cfe1668cd5cc6d37ae20541a6c6d84c6 Mon Sep 17 00:00:00 2001
From: ZaimMarzuki <ZaimMarzuki@users.noreply.github.com>
Date: Sat, 29 Aug 2026 07:25:15 +0700
Subject: [PATCH] fix(dashboard): use opaque background and readable text color
 on cost chart tooltips

The three Recharts tooltips in CostCharts.tsx (ProviderSpendCard,
CostTrendCard, WeeklyPatternCard) used var(--surface) for background
which can be transparent on dark themes and had no explicit text color,
making tooltip content unreadable when it blended with the chart bars.

Align the tooltip contentStyle with the pattern already used in
ProviderCharts.tsx: backgroundColor via var(--color-surface),
borderColor via var(--color-border), color via var(--color-text-main),
and boxShadow via var(--shadow-soft).
---
 .../dashboard/costs/components/CostCharts.tsx | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/costs/components/CostCharts.tsx b/src/app/(dashboard)/dashboard/costs/components/CostCharts.tsx
index dec6c2ded40a..e3bd12c58be8 100644
--- a/src/app/(dashboard)/dashboard/costs/components/CostCharts.tsx
+++ b/src/app/(dashboard)/dashboard/costs/components/CostCharts.tsx
@@ -88,9 +88,11 @@ export function ProviderSpendCard({
               <Tooltip
                 formatter={(value: number) => currencyFormatter.format(value || 0)}
                 contentStyle={{
-                  background: "var(--surface)",
-                  border: "1px solid rgba(255,255,255,0.1)",
-                  borderRadius: "12px",
+                  backgroundColor: "var(--color-surface)",
+                  borderColor: "var(--color-border)",
+                  borderRadius: 12,
+                  color: "var(--color-text-main)",
+                  boxShadow: "var(--shadow-soft)",
                 }}
               />
             </PieChart>
@@ -158,9 +160,11 @@ export function CostTrendCard({
             <Tooltip
               formatter={(value: number) => currencyFormatter.format(value || 0)}
               contentStyle={{
-                background: "var(--surface)",
-                border: "1px solid rgba(255,255,255,0.1)",
-                borderRadius: "12px",
+                backgroundColor: "var(--color-surface)",
+                borderColor: "var(--color-border)",
+                borderRadius: 12,
+                color: "var(--color-text-main)",
+                boxShadow: "var(--shadow-soft)",
               }}
             />
             <Line
@@ -224,9 +228,11 @@ export function WeeklyPatternCard({
                 `${new Intl.NumberFormat(locale).format(value || 0)} ${tokensLabel}`
               }
               contentStyle={{
-                background: "var(--surface)",
-                border: "1px solid rgba(255,255,255,0.1)",
-                borderRadius: "12px",
+                backgroundColor: "var(--color-surface)",
+                borderColor: "var(--color-border)",
+                borderRadius: 12,
+                color: "var(--color-text-main)",
+                boxShadow: "var(--shadow-soft)",
               }}
             />
             <Bar dataKey="tokens" fill="#8b5cf6" radius={[4, 4, 0, 0]} />