From d38f0a4cc26d804fefad38acc6c90b079dde7ee1 Mon Sep 17 00:00:00 2001
From: Aleksandar <b.aleksandar@outlook.com>
Date: Thu, 11 Dec 2025 13:32:35 +0100
Subject: [PATCH] style: enhance card colors and improve typography hierarchy

---
 .../analytics/AnalyticsDashboard.tsx          | 30 ++++----
 apps/admin/src/components/ui/StatsCard.tsx    | 76 +++++++++++--------
 2 files changed, 60 insertions(+), 46 deletions(-)

diff --git a/apps/admin/src/components/analytics/AnalyticsDashboard.tsx b/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
index e4825b8..f76b01d 100644
--- a/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
+++ b/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
@@ -79,27 +79,27 @@ export function AnalyticsDashboard() {
     <div className="space-y-6">
       {/* Key Metrics Cards */}
       <div className="grid grid-cols-1 gap-4">
-        <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-5 border border-blue-200/30 hover:border-blue-200 transition-colors">
-          <p className="text-xs uppercase tracking-wide font-semibold text-gray-600 mb-2">Total Athletes</p>
-          <div className="flex items-baseline gap-2">
-            <div className="text-3xl font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">{totalUsers}</div>
-            <span className="text-sm text-gray-500">active</span>
+        <div className="bg-gradient-to-br from-blue-100 to-blue-150 rounded-2xl p-6 border border-blue-300/30 hover:border-blue-400/50 hover:shadow-xl transition-all min-h-[120px] flex flex-col justify-between">
+          <p className="text-xs uppercase tracking-widest font-bold text-blue-800 mb-3">Total Athletes</p>
+          <div className="flex items-baseline gap-3">
+            <div className="text-5xl font-black text-blue-900">{totalUsers}</div>
+            <span className="text-sm text-blue-700 font-semibold">active</span>
           </div>
         </div>
 
-        <div className="bg-gradient-to-br from-emerald-50 to-teal-50 rounded-xl p-5 border border-emerald-200/30 hover:border-emerald-200 transition-colors">
-          <p className="text-xs uppercase tracking-wide font-semibold text-gray-600 mb-2">Total Revenue</p>
-          <div className="flex items-baseline gap-2">
-            <div className="text-3xl font-black bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">${totalRevenue.toLocaleString()}</div>
-            <span className="text-sm text-gray-500">ytd</span>
+        <div className="bg-gradient-to-br from-emerald-100 to-emerald-150 rounded-2xl p-6 border border-emerald-300/30 hover:border-emerald-400/50 hover:shadow-xl transition-all min-h-[120px] flex flex-col justify-between">
+          <p className="text-xs uppercase tracking-widest font-bold text-emerald-800 mb-3">Total Revenue</p>
+          <div className="flex items-baseline gap-3">
+            <div className="text-5xl font-black text-emerald-900">${totalRevenue.toLocaleString()}</div>
+            <span className="text-sm text-emerald-700 font-semibold">ytd</span>
           </div>
         </div>
 
-        <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-5 border border-purple-200/30 hover:border-purple-200 transition-colors">
-          <p className="text-xs uppercase tracking-wide font-semibold text-gray-600 mb-2">Active Members</p>
-          <div className="flex items-baseline gap-2">
-            <div className="text-3xl font-black bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">{activeMembers}</div>
-            <span className="text-sm text-gray-500">members</span>
+        <div className="bg-gradient-to-br from-purple-100 to-purple-150 rounded-2xl p-6 border border-purple-300/30 hover:border-purple-400/50 hover:shadow-xl transition-all min-h-[120px] flex flex-col justify-between">
+          <p className="text-xs uppercase tracking-widest font-bold text-purple-800 mb-3">Active Members</p>
+          <div className="flex items-baseline gap-3">
+            <div className="text-5xl font-black text-purple-900">{activeMembers}</div>
+            <span className="text-sm text-purple-700 font-semibold">members</span>
           </div>
         </div>
       </div>
diff --git a/apps/admin/src/components/ui/StatsCard.tsx b/apps/admin/src/components/ui/StatsCard.tsx
index 7e23530..a277723 100644
--- a/apps/admin/src/components/ui/StatsCard.tsx
+++ b/apps/admin/src/components/ui/StatsCard.tsx
@@ -13,56 +13,70 @@ interface StatsCardProps {
 export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
     const colorStyles = {
         blue: {
-            bg: "bg-gradient-to-br from-blue-600 to-blue-700",
-            iconBg: "bg-blue-500/20 text-blue-300",
-            light: "from-blue-50 to-blue-100/50",
+            bg: "bg-gradient-to-br from-blue-600 to-blue-800",
+            text: "text-blue-800",
+            light: "from-blue-100/80 to-blue-150/80",
+            badge: "bg-blue-200/60 text-blue-900",
+            icon: "bg-blue-600/30 text-blue-700",
         },
         green: {
-            bg: "bg-gradient-to-br from-emerald-600 to-emerald-700",
-            iconBg: "bg-emerald-500/20 text-emerald-300",
-            light: "from-emerald-50 to-emerald-100/50",
+            bg: "bg-gradient-to-br from-emerald-600 to-emerald-800",
+            text: "text-emerald-800",
+            light: "from-emerald-100/80 to-emerald-150/80",
+            badge: "bg-emerald-200/60 text-emerald-900",
+            icon: "bg-emerald-600/30 text-emerald-700",
         },
         purple: {
-            bg: "bg-gradient-to-br from-purple-600 to-purple-700",
-            iconBg: "bg-purple-500/20 text-purple-300",
-            light: "from-purple-50 to-purple-100/50",
+            bg: "bg-gradient-to-br from-purple-600 to-purple-800",
+            text: "text-purple-800",
+            light: "from-purple-100/80 to-purple-150/80",
+            badge: "bg-purple-200/60 text-purple-900",
+            icon: "bg-purple-600/30 text-purple-700",
         },
         orange: {
-            bg: "bg-gradient-to-br from-orange-600 to-orange-700",
-            iconBg: "bg-orange-500/20 text-orange-300",
-            light: "from-orange-50 to-orange-100/50",
+            bg: "bg-gradient-to-br from-orange-600 to-orange-800",
+            text: "text-orange-800",
+            light: "from-orange-100/80 to-orange-150/80",
+            badge: "bg-orange-200/60 text-orange-900",
+            icon: "bg-orange-600/30 text-orange-700",
         },
     };
 
     const styles = colorStyles[color];
 
     return (
-        <Card className={`bg-gradient-to-br ${styles.light} border-0 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group`}>
-            <div className={`absolute inset-0 opacity-0 group-hover:opacity-5 ${styles.bg} transition-opacity`}></div>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3 relative z-10">
-                <CardTitle className="text-sm font-semibold text-gray-700 uppercase tracking-wide">
+        <Card className={`bg-gradient-to-br ${styles.light} border-0 shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group min-h-[180px]`}>
+            <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 pt-6 px-6">
+                <CardTitle className={`text-xs font-bold uppercase tracking-widest ${styles.text}`}>
                     {title}
                 </CardTitle>
-                <div className={`p-3 rounded-2xl ${styles.iconBg} backdrop-blur-sm`}>
-                    <Icon size={20} />
+                <div className={`p-2.5 rounded-2xl ${styles.icon} backdrop-blur-sm flex-shrink-0`}>
+                    <Icon size={22} strokeWidth={2.5} />
                 </div>
             </CardHeader>
-            <CardContent className="relative z-10">
-                <div className={`text-4xl font-black bg-gradient-to-r ${styles.bg.replace('bg-gradient-to-br', '')} bg-clip-text text-transparent`}>
+            <CardContent className="px-6 pb-6 flex flex-col justify-end">
+                <div className={`text-5xl font-black ${styles.text} mb-4 leading-tight`}>
                     {value}
                 </div>
                 {change && (
-                    <div className="flex items-center gap-2 mt-3">
-                        <p className="text-xs text-gray-600 font-medium">
-                            <span
-                                className={`font-bold px-2 py-1 rounded-full text-xs ${
-                                    trend === "up"
-                                        ? "bg-emerald-100 text-emerald-700"
-                                        : trend === "down"
-                                            ? "bg-red-100 text-red-700"
-                                            : "bg-gray-100 text-gray-700"
-                                }`}
-                            >
+                    <div className="flex items-center gap-2 mt-auto">
+                        <span
+                            className={`font-bold px-3 py-1.5 rounded-full text-xs tracking-wide ${
+                                trend === "up"
+                                    ? "bg-emerald-200/70 text-emerald-800"
+                                    : trend === "down"
+                                        ? "bg-red-200/70 text-red-800"
+                                        : "bg-gray-200/70 text-gray-800"
+                            }`}
+                        >
+                            {trend === "up" ? "↑" : trend === "down" ? "↓" : "→"} {change}
+                        </span>
+                        <span className="text-xs text-gray-600 font-medium">vs last month</span>
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+    );
                                 {trend === "up" ? "↑" : trend === "down" ? "↓" : "→"} {change}
                             </span>
                         </p>