From 50d329f645430b33790b2d959d6837459efa7f13 Mon Sep 17 00:00:00 2001
From: Mayur Shinde <mayurshinde6776@gmail.com>
Date: Thu, 18 Jun 2026 15:24:26 +0530
Subject: [PATCH] leaderboard column colours changed

---
 src/pages/LeaderboardPage.jsx | 78 +++++++++++++++++++++++++----------
 1 file changed, 57 insertions(+), 21 deletions(-)

diff --git a/src/pages/LeaderboardPage.jsx b/src/pages/LeaderboardPage.jsx
index 3352f38..650b771 100644
--- a/src/pages/LeaderboardPage.jsx
+++ b/src/pages/LeaderboardPage.jsx
@@ -16,47 +16,85 @@ const rankBadge = (i) =>
     i === 2 ? 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300' :
               'text-zinc-500';
 
-// ── Podium (shared) ──────────────────────────────────────────────────────────
-const TopPodium = ({ data, metricKey, numberFormat = {}, accentColor = 'border-yellow-400' }) => {
-    if (data.length < 3) return null;
-    const [first, second, third] = data;
-    // Bars grow from a shared baseline at a constant speed, so the shortest (bronze)
-    // finishes first, then silver, and the tallest (gold) lands last.
-    const Step = ({ agent, rank, heightPx, color, glow }) => (
+// ── Podium tier styling (gold / silver / bronze) ───────────────────────────────
+// Solid metal bars with dark, clearly-legible rank numerals. Height encodes rank:
+// 1st is tallest, then 2nd, then 3rd.
+const PODIUM_TIERS = {
+    1: {
+        heightPx: 200,
+        border: 'border-yellow-400',
+        avatarRing: 'border-yellow-400',
+        bar: 'bg-gradient-to-b from-yellow-300 to-yellow-500',
+        numeral: 'text-yellow-900/80',
+        text: 'text-yellow-600 dark:text-yellow-400',
+        glow: 'bg-yellow-500',
+    },
+    2: {
+        heightPx: 144,
+        border: 'border-zinc-300',
+        avatarRing: 'border-zinc-300',
+        bar: 'bg-gradient-to-b from-zinc-200 to-zinc-400',
+        numeral: 'text-zinc-700/80',
+        text: 'text-zinc-500 dark:text-zinc-300',
+        glow: 'bg-zinc-400',
+    },
+    3: {
+        heightPx: 100,
+        border: 'border-orange-400',
+        avatarRing: 'border-orange-400',
+        bar: 'bg-gradient-to-b from-orange-300 to-orange-500',
+        numeral: 'text-orange-900/80',
+        text: 'text-orange-600 dark:text-orange-400',
+        glow: 'bg-orange-500',
+    },
+};
+
+// ── Podium step (single column) ───────────────────────────────────────────────
+// Bars grow from a shared baseline at a constant speed, so the shortest (bronze)
+// finishes first, then silver, and the tallest (gold) lands last.
+const PodiumStep = ({ agent, rank, metricKey, numberFormat = {} }) => {
+    const tier = PODIUM_TIERS[rank];
+    return (
         <div className="flex flex-col items-center z-10 mx-2 md:mx-4">
             <div className="mb-4 text-center">
                 <div className="relative inline-block">
-                    <div className={`w-16 h-16 md:w-20 md:h-20 rounded-full border-4 ${color} flex items-center justify-center bg-zinc-900/5 dark:bg-zinc-800 shadow-xl overflow-hidden mb-2 relative z-10`}>
+                    <div className={`w-16 h-16 md:w-20 md:h-20 rounded-full border-4 ${tier.avatarRing} flex items-center justify-center bg-zinc-900/5 dark:bg-zinc-800 shadow-xl overflow-hidden mb-2 relative z-10`}>
                         <span className="text-xl font-bold text-zinc-700 dark:text-zinc-300">
                             {agent.name.split(' ').map(n => n[0]).join('')}
                         </span>
                     </div>
                     {rank === 1 && <Crown size={24} className="absolute -top-4 -right-2 text-yellow-400 fill-yellow-400 animate-bounce" />}
-                    <div className={`absolute inset-0 rounded-full blur-xl opacity-40 ${glow}`} />
+                    <div className={`absolute inset-0 rounded-full blur-xl opacity-40 ${tier.glow}`} />
                 </div>
                 <h3 className="font-bold text-sm md:text-base text-zinc-900 dark:text-white truncate max-w-[100px]">{agent.name}</h3>
-                <p className={`font-mono font-bold text-sm md:text-lg ${color.replace('border-', 'text-')}`}>
+                <p className={`font-mono font-bold text-sm md:text-lg ${tier.text}`}>
                     <AnimatedNumber value={agent[metricKey]} duration={1.4} {...numberFormat} />
                 </p>
             </div>
             <motion.div
                 initial={{ height: 0 }}
-                animate={{ height: heightPx }}
-                transition={{ duration: heightPx / 100, ease: 'easeOut' }}
-                className={`w-24 md:w-32 rounded-t-lg bg-gradient-to-b from-white/80 to-white/20 dark:from-white/10 dark:to-white/5 border-t border-x ${color} backdrop-blur-md relative overflow-hidden hover:brightness-110`}
+                animate={{ height: tier.heightPx }}
+                transition={{ duration: tier.heightPx / 100, ease: 'easeOut' }}
+                className={`w-24 md:w-32 rounded-t-lg ${tier.bar} border-t border-x ${tier.border} shadow-lg relative overflow-hidden hover:brightness-110`}
             >
-                <div className="absolute inset-x-0 top-0 h-[1px] bg-white/50" />
-                <div className="w-full h-full flex items-end justify-center pb-4 text-4xl font-black text-black/5 dark:text-white/5 select-none">{rank}</div>
+                <div className="absolute inset-x-0 top-0 h-[2px] bg-white/50" />
+                <div className={`w-full h-full flex items-end justify-center pb-4 text-5xl font-black ${tier.numeral} select-none`}>{rank}</div>
             </motion.div>
         </div>
     );
+};
+
+// ── Podium (shared) ──────────────────────────────────────────────────────────
+const TopPodium = ({ data, metricKey, numberFormat = {} }) => {
+    if (data.length < 3) return null;
+    const [first, second, third] = data;
     return (
         // Fixed min-height reserves the full podium space so the shared baseline
         // never shifts while the bars animate — they grow upward from the floor.
-        <div className="flex items-end justify-center mb-12 pt-8 min-h-[360px]">
-            <Step agent={second} rank={2} heightPx={128} color="border-zinc-300"    glow="bg-zinc-400" />
-            <Step agent={first}  rank={1} heightPx={176} color={accentColor}         glow="bg-yellow-500" />
-            <Step agent={third}  rank={3} heightPx={96}  color="border-orange-400"  glow="bg-orange-500" />
+        <div className="flex items-end justify-center mb-12 pt-8 min-h-[380px]">
+            <PodiumStep agent={second} rank={2} metricKey={metricKey} numberFormat={numberFormat} />
+            <PodiumStep agent={first}  rank={1} metricKey={metricKey} numberFormat={numberFormat} />
+            <PodiumStep agent={third}  rank={3} metricKey={metricKey} numberFormat={numberFormat} />
         </div>
     );
 };
@@ -262,7 +300,6 @@ const LeaderboardPage = () => {
                                 volume:  { suffix: ' Deals' },
                                 winRate: { suffix: '%', decimals: 1 },
                             }[metric]}
-                            accentColor="border-yellow-400"
                         />
                     </div>
 
@@ -357,7 +394,6 @@ const LeaderboardPage = () => {
                                 total:    {},
                                 convRate: { suffix: '%', decimals: 1 },
                             }[cvMetric]}
-                            accentColor="border-emerald-400"
                         />
                     </div>