From b9efedbb88aa25aa5cde73ea96379c1e696a6965 Mon Sep 17 00:00:00 2001
From: Aleksandar <b.aleksandar@outlook.com>
Date: Thu, 11 Dec 2025 14:13:10 +0100
Subject: [PATCH] style: add chameleon gradient transitions with via colors for
 smooth color blending

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

diff --git a/apps/admin/src/components/ui/StatsCard.tsx b/apps/admin/src/components/ui/StatsCard.tsx
index a2081a9..272aa55 100644
--- a/apps/admin/src/components/ui/StatsCard.tsx
+++ b/apps/admin/src/components/ui/StatsCard.tsx
@@ -13,28 +13,28 @@ interface StatsCardProps {
 export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
     const colorStyles = {
         blue: {
-            bg: "from-blue-600 to-cyan-600",
+            bg: "from-blue-600 via-cyan-500 to-teal-500",
             text: "text-white",
             light: "from-blue-50 to-cyan-50",
             badge: "bg-blue-100 text-blue-700",
             icon: "bg-blue-100/50 text-blue-600",
         },
         green: {
-            bg: "from-emerald-600 to-teal-600",
+            bg: "from-emerald-600 via-teal-500 to-cyan-500",
             text: "text-white",
             light: "from-emerald-50 to-teal-50",
             badge: "bg-emerald-100 text-emerald-700",
             icon: "bg-emerald-100/50 text-emerald-600",
         },
         purple: {
-            bg: "from-purple-600 to-blue-600",
+            bg: "from-purple-600 via-pink-500 to-blue-500",
             text: "text-white",
             light: "from-purple-50 to-blue-50",
             badge: "bg-purple-100 text-purple-700",
             icon: "bg-purple-100/50 text-purple-600",
         },
         orange: {
-            bg: "from-orange-600 to-red-600",
+            bg: "from-orange-600 via-red-500 to-pink-500",
             text: "text-white",
             light: "from-orange-50 to-red-50",
             badge: "bg-orange-100 text-orange-700",
@@ -46,22 +46,22 @@ export function StatsCard({ title, value, change, trend, icon: Icon, color = "bl
 
     return (
         <Card className={`bg-gradient-to-br ${styles.bg} border-0 shadow-lg hover:shadow-2xl 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">
+            <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 pt-4 px-4">
                 <CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}>
                     {title}
                 </CardTitle>
-                <div className={`p-1.5 rounded-lg ${styles.icon} flex-shrink-0`}>
-                    <Icon size={16} strokeWidth={2} />
+                <div className={`p-1 rounded-lg ${styles.icon} flex-shrink-0`}>
+                    <Icon size={14} strokeWidth={2} />
                 </div>
             </CardHeader>
-            <CardContent className="px-5 pb-5 space-y-3">
-                <div className={`text-3xl font-black ${styles.text}`}>
+            <CardContent className="px-4 pb-4 space-y-2">
+                <div className={`text-2xl font-black ${styles.text}`}>
                     {value}
                 </div>
                 {change && (
-                    <div className="flex items-center gap-1.5">
+                    <div className="flex items-center gap-1">
                         <span
-                            className={`inline-flex items-center gap-0.5 font-bold px-2 py-1 rounded-md text-xs tracking-wide ${styles.badge}`}
+                            className={`inline-flex items-center gap-0.5 font-bold px-2 py-0.5 rounded-md text-xs tracking-wide ${styles.badge}`}
                         >
                             {trend === "up" ? "↑" : trend === "down" ? "↓" : "→"} {change}
                         </span>