From 183ca6b1492df5abcb32df38fab95d8b6fed2784 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 22 Jan 2026 14:42:09 +0100
Subject: [PATCH] style: improve contrast and legibility for comparison figures

- AdsPerformance.tsx: Updated 'Prev:' labels and figures to indigo-300 for higher contrast
- AdsPerformance.tsx: Brightened secondary labels and product titles across the dashboard
- Ensures clear readability on dark backgrounds as requested by the user
---
 components/AdsPerformance.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/AdsPerformance.tsx b/components/AdsPerformance.tsx
index 17c9e39..bac4654 100644
--- a/components/AdsPerformance.tsx
+++ b/components/AdsPerformance.tsx
@@ -171,7 +171,7 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters }) => {
             <div className="flex justify-between items-end">
                 <div>
                     <h1 className="text-2xl font-bold text-white mb-1">Performance Overview</h1>
-                    <div className="flex items-center gap-2 text-xs text-slate-500">
+                    <div className="flex items-center gap-2 text-xs text-slate-400">
                         <span className="w-2 h-2 rounded-full bg-emerald-500"></span>
                         <span>
                             {aggregatedByAsin.length} products •
@@ -203,7 +203,7 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters }) => {
                 <div className="p-4 border-b border-white/5 flex justify-between items-center bg-[#1A1F29]">
                     <div>
                         <h2 className="text-sm font-bold text-white uppercase tracking-wider">Product Inventory</h2>
-                        <p className="text-[10px] text-slate-500 mt-0.5">
+                        <p className="text-[10px] text-slate-400 mt-0.5">
                             {comparisonConfig ? `Comparing ${comparisonConfig.curr} vs ${comparisonConfig.prev}` : 'Displaying total data for selected filters.'}
                         </p>
                     </div>
@@ -245,7 +245,7 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters }) => {
                                         <div className="flex flex-col gap-0.5">
                                             <span className="text-white font-bold text-sm tracking-tight">{row.asin}</span>
                                             <span className="text-[10px] uppercase font-black text-indigo-400 tracking-tighter">SKU: {row.sku}</span>
-                                            <span className="text-[10px] text-slate-500 truncate max-w-[220px] leading-tight" title={row.title}>{row.title}</span>
+                                            <span className="text-[10px] text-slate-400 truncate max-w-[220px] leading-tight" title={row.title}>{row.title}</span>
                                         </div>
                                     </td>
                                     <TableCell value={row.salesTotal} prevValue={row.prevData?.salesTotal} format="currency" />
@@ -307,7 +307,9 @@ const SummaryCard = ({
                 <span className="text-sm font-bold text-white transition-all">{formatVal(value)}</span>
                 {prevValue !== undefined && (
                     <div className="flex flex-col items-center mt-0.5">
-                        <span className="text-[9px] text-slate-500 font-medium">Prev: {formatVal(prevValue)}</span>
+                        <span className="text-[9px] text-slate-400 font-medium whitespace-nowrap">
+                            Prev: <span className="text-indigo-300 font-bold">{formatVal(prevValue)}</span>
+                        </span>
                         {growth !== null && (
                             <span className={`text-[9px] font-black ${(growth > 0 ? !inverse : inverse) ? 'text-emerald-400' : 'text-rose-500'}`}>
                                 {growth > 0 ? '↑' : '↓'} {Math.abs(growth).toFixed(1)}%
@@ -341,7 +343,9 @@ const TableCell = ({ value, prevValue, format, prefix = "", inverse = false, hig
                 <span className={`font-bold ${highlight ? 'text-blue-300' : 'text-white'}`}>{formatVal(value)}</span>
                 {prevValue !== undefined && (
                     <div className="flex flex-col items-end scale-[0.85] origin-right opacity-80 mt-0.5">
-                        <span className="text-[10px] text-slate-500 font-medium">Prev: {formatVal(prevValue)}</span>
+                        <span className="text-[9px] text-slate-400 font-medium whitespace-nowrap">
+                            Prev: <span className="text-indigo-300 font-bold">{formatVal(prevValue)}</span>
+                        </span>
                         {growth !== null && (
                             <span className={`text-[10px] font-black ${(growth > 0 ? !inverse : inverse) ? 'text-emerald-400' : 'text-rose-400'}`}>
                                 {growth > 0 ? '+' : ''}{growth.toFixed(1)}%