From 79b7a050fa2f1b8ad8a6c60b44658691832cb90c Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 22 Aug 2025 16:48:58 +0200
Subject: [PATCH] style: refine AdminOverviewCards for improved UI consistency

- Adjusted padding and margin for card elements to enhance layout.
- Reduced font sizes for better readability and visual hierarchy.
- Updated icon sizes for a more cohesive look across all cards.
- Overall improvements to maintain a consistent design language in the admin overview section.
---
 .../admin/overview/admin-overview-cards.tsx   | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/components/admin/overview/admin-overview-cards.tsx b/components/admin/overview/admin-overview-cards.tsx
index ce0d11a..e059981 100644
--- a/components/admin/overview/admin-overview-cards.tsx
+++ b/components/admin/overview/admin-overview-cards.tsx
@@ -29,20 +29,20 @@ export function AdminOverviewCards({
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-      <div className="bg-gradient-to-br from-blue-900/30 to-blue-800/20 backdrop-blur-sm border border-blue-600/30 rounded-2xl p-6 hover:from-blue-800/40 hover:to-blue-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
-        <div className="flex items-center justify-between mb-4">
-          <div className="p-2 bg-blue-500/30 border border-blue-500/40 rounded-xl">
-            <Users className="h-5 w-5 text-blue-300" />
+      <div className="bg-gradient-to-br from-blue-900/30 to-blue-800/20 backdrop-blur-sm border border-blue-600/30 rounded-xl p-3 hover:from-blue-800/40 hover:to-blue-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
+        <div className="flex items-center justify-between mb-2">
+          <div className="p-1.5 bg-blue-500/30 border border-blue-500/40 rounded-lg">
+            <Users className="h-4 w-4 text-blue-300" />
           </div>
           <div className="text-xs text-blue-200 font-medium">
             {hasFilters ? "FILTRÉES" : "TOTAL"}
           </div>
         </div>
-        <div className="space-y-1">
-          <p className="text-2xl font-bold text-white">
+        <div className="space-y-0.5">
+          <p className="text-xl font-bold text-white">
             {hasFilters ? getFilteredTeamStats().length : teams.length}
           </p>
-          <p className="text-sm text-blue-200">
+          <p className="text-xs text-blue-200">
             {hasFilters ? "Équipes filtrées" : "Équipes"}
           </p>
           {hasFilters && (
@@ -51,17 +51,17 @@ export function AdminOverviewCards({
         </div>
       </div>
 
-      <div className="bg-gradient-to-br from-green-900/30 to-green-800/20 backdrop-blur-sm border border-green-600/30 rounded-2xl p-6 hover:from-green-800/40 hover:to-green-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
-        <div className="flex items-center justify-between mb-4">
-          <div className="p-2 bg-green-500/30 border border-green-500/40 rounded-xl">
-            <UserCheck className="h-5 w-5 text-green-300" />
+      <div className="bg-gradient-to-br from-green-900/30 to-green-800/20 backdrop-blur-sm border border-green-600/30 rounded-xl p-3 hover:from-green-800/40 hover:to-green-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
+        <div className="flex items-center justify-between mb-2">
+          <div className="p-1.5 bg-green-500/30 border border-green-500/40 rounded-lg">
+            <UserCheck className="h-4 w-4 text-green-300" />
           </div>
           <div className="text-xs text-green-200 font-medium">
             {hasFilters ? "FILTRÉS" : "TOTAL"}
           </div>
         </div>
-        <div className="space-y-1">
-          <p className="text-2xl font-bold text-white">
+        <div className="space-y-0.5">
+          <p className="text-xl font-bold text-white">
             {hasFilters
               ? getFilteredTeamStats().reduce(
                   (sum, t) => sum + t.totalMembers,
@@ -69,7 +69,7 @@ export function AdminOverviewCards({
                 )
               : teamStats.reduce((sum, t) => sum + t.totalMembers, 0)}
           </p>
-          <p className="text-sm text-green-200">
+          <p className="text-xs text-green-200">
             {hasFilters ? "Membres filtrés" : "Membres"}
           </p>
           {hasFilters && (
@@ -81,22 +81,22 @@ export function AdminOverviewCards({
         </div>
       </div>
 
-      <div className="bg-gradient-to-br from-purple-900/30 to-purple-800/20 backdrop-blur-sm border border-purple-600/30 rounded-2xl p-6 hover:from-purple-800/40 hover:to-purple-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
-        <div className="flex items-center justify-between mb-4">
-          <div className="p-2 bg-purple-500/30 border border-purple-500/40 rounded-xl">
-            <Building2 className="h-5 w-5 text-purple-300" />
+      <div className="bg-gradient-to-br from-purple-900/30 to-purple-800/20 backdrop-blur-sm border border-purple-600/30 rounded-xl p-3 hover:from-purple-800/40 hover:to-purple-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
+        <div className="flex items-center justify-between mb-2">
+          <div className="p-1.5 bg-purple-500/30 border border-purple-500/40 rounded-lg">
+            <Building2 className="h-4 w-4 text-purple-300" />
           </div>
           <div className="text-xs text-purple-200 font-medium">
             {hasFilters ? "FILTRÉES" : "TOTAL"}
           </div>
         </div>
-        <div className="space-y-1">
-          <p className="text-2xl font-bold text-white">
+        <div className="space-y-0.5">
+          <p className="text-xl font-bold text-white">
             {hasFilters
               ? getFilteredDirectionStats().length
               : directionStats.length}
           </p>
-          <p className="text-sm text-purple-200">
+          <p className="text-xs text-purple-200">
             {hasFilters ? "Directions filtrées" : "Directions"}
           </p>
           {hasFilters && (
@@ -107,21 +107,21 @@ export function AdminOverviewCards({
         </div>
       </div>
 
-      <div className="bg-gradient-to-br from-orange-900/30 to-orange-800/20 backdrop-blur-sm border border-orange-600/30 rounded-2xl p-6 hover:from-orange-800/40 hover:to-orange-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
-        <div className="flex items-center justify-between mb-4">
-          <div className="p-2 bg-orange-500/30 border border-orange-500/40 rounded-xl">
-            <Target className="h-5 w-5 text-orange-300" />
+      <div className="bg-gradient-to-br from-orange-900/30 to-orange-800/20 backdrop-blur-sm border border-orange-600/30 rounded-xl p-3 hover:from-orange-800/40 hover:to-orange-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
+        <div className="flex items-center justify-between mb-2">
+          <div className="p-1.5 bg-orange-500/30 border border-orange-500/40 rounded-lg">
+            <Target className="h-4 w-4 text-orange-300" />
           </div>
           <div className="text-xs text-orange-200 font-medium">RÉFÉRENTIEL</div>
         </div>
-        <div className="space-y-1">
-          <p className="text-2xl font-bold text-white">
+        <div className="space-y-0.5">
+          <p className="text-xl font-bold text-white">
             {skillCategories.reduce(
               (sum, cat) => sum + (cat.skills?.length || 0),
               0
             )}
           </p>
-          <p className="text-sm text-orange-200">Compétences suivies</p>
+          <p className="text-xs text-orange-200">Compétences suivies</p>
           <p className="text-xs text-orange-300">
             {skillCategories.length} catégories
           </p>