From 51df7f57ecbc20a9160cf07379eddcb5e2a0bd55 Mon Sep 17 00:00:00 2001
From: Aleksandar <b.aleksandar@outlook.com>
Date: Thu, 11 Dec 2025 13:37:01 +0100
Subject: [PATCH] style: compact stats cards with better colors and layout

---
 apps/admin/src/components/ui/StatsCard.tsx | 67 ++++++++++------------
 1 file changed, 31 insertions(+), 36 deletions(-)

diff --git a/apps/admin/src/components/ui/StatsCard.tsx b/apps/admin/src/components/ui/StatsCard.tsx
index 2096291..ceb2494 100644
--- a/apps/admin/src/components/ui/StatsCard.tsx
+++ b/apps/admin/src/components/ui/StatsCard.tsx
@@ -13,68 +13,63 @@ 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-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",
+            bg: "from-blue-600 to-blue-700",
+            text: "text-blue-900",
+            light: "from-blue-50 to-blue-100",
+            badge: "bg-blue-100 text-blue-700",
+            icon: "bg-blue-200/70 text-blue-700",
         },
         green: {
-            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",
+            bg: "from-emerald-600 to-emerald-700",
+            text: "text-emerald-900",
+            light: "from-emerald-50 to-emerald-100",
+            badge: "bg-emerald-100 text-emerald-700",
+            icon: "bg-emerald-200/70 text-emerald-700",
         },
         purple: {
-            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",
+            bg: "from-purple-600 to-purple-700",
+            text: "text-purple-900",
+            light: "from-purple-50 to-purple-100",
+            badge: "bg-purple-100 text-purple-700",
+            icon: "bg-purple-200/70 text-purple-700",
         },
         orange: {
-            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",
+            bg: "from-orange-600 to-orange-700",
+            text: "text-orange-900",
+            light: "from-orange-50 to-orange-100",
+            badge: "bg-orange-100 text-orange-700",
+            icon: "bg-orange-200/70 text-orange-700",
         },
     };
 
     const styles = colorStyles[color];
 
     return (
-        <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}`}>
+        <Card className={`bg-gradient-to-br ${styles.light} border-0 shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group h-full`}>
+            <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3 pt-5 px-5">
+                <CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}>
                     {title}
                 </CardTitle>
-                <div className={`p-2.5 rounded-2xl ${styles.icon} backdrop-blur-sm flex-shrink-0`}>
-                    <Icon size={22} strokeWidth={2.5} />
+                <div className={`p-1.5 rounded-lg ${styles.icon} flex-shrink-0`}>
+                    <Icon size={16} strokeWidth={2} />
                 </div>
             </CardHeader>
-            <CardContent className="px-6 pb-6 flex flex-col justify-end">
-                <div className={`text-5xl font-black ${styles.text} mb-4 leading-tight`}>
+            <CardContent className="px-5 pb-5 space-y-3">
+                <div className={`text-3xl font-black ${styles.text}`}>
                     {value}
                 </div>
                 {change && (
-                    <div className="flex items-center gap-2 mt-auto">
+                    <div className="flex items-center gap-1.5">
                         <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"
-                            }`}
+                            className={`inline-flex items-center gap-0.5 font-bold px-2 py-1 rounded-md text-xs tracking-wide ${styles.badge}`}
                         >
                             {trend === "up" ? "↑" : trend === "down" ? "↓" : "→"} {change}
                         </span>
-                        <span className="text-xs text-gray-600 font-medium">vs last month</span>
+                        <span className="text-xs text-gray-600">vs month</span>
                     </div>
                 )}
             </CardContent>
         </Card>
     );
 }
+}