christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 13:15:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: improve contrast and legibility for comparison figures

Browse Source 
- 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
This commit is contained in:
Christian Vidal Wolf
2026-01-22 14:42:09 +01:00
parent 9ebbdcf581
commit 183ca6b149
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AdsPerformance.tsx
+9 -5
View File
@@ -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)}%