julienfroidefond/peakskills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update UI components for improved visual consistency and interactivity

Browse Source 
- Enhanced AdminOverviewCards with gradient backgrounds and updated hover effects for better user engagement.
- Introduced a utility function to dynamically assign colors based on direction in DirectionOverview, improving maintainability.
- Updated TeamStatsRow with gradient backgrounds and refined text colors for better readability and aesthetics.
- Overall improvements to component styling for a more cohesive look across the admin interface.
This commit is contained in:
Julien Froidefond
2025-08-22 14:03:45 +02:00
parent 5c76ec0549
commit 1a05b22242
3 changed files with 116 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/admin/overview/admin-overview-cards.tsx
View File

@@ -29,12 +29,12 @@ export function AdminOverviewCards({
return (
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
<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/20 border border-blue-500/30 rounded-xl">
<Users className="h-5 w-5 text-blue-400" />
<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>
<div className="text-xs text-slate-400 font-medium">
<div className="text-xs text-blue-200 font-medium">
{hasFilters ? "FILTRÉES" : "TOTAL"}
</div>
</div>
@@ -42,23 +42,21 @@ export function AdminOverviewCards({
<p className="text-2xl font-bold text-white">
{hasFilters ? getFilteredTeamStats().length : teams.length}
</p>
<p className="text-sm text-slate-400">
<p className="text-sm text-blue-200">
{hasFilters ? "Équipes filtrées" : "Équipes"}
</p>
{hasFilters && (
<p className="text-xs text-slate-500">
sur {teams.length} au total
</p>
<p className="text-xs text-blue-300">sur {teams.length} au total</p>
)}
</div>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
<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/20 border border-green-500/30 rounded-xl">
<UserCheck className="h-5 w-5 text-green-400" />
<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>
<div className="text-xs text-slate-400 font-medium">
<div className="text-xs text-green-200 font-medium">
{hasFilters ? "FILTRÉS" : "TOTAL"}
</div>
</div>
@@ -71,11 +69,11 @@ export function AdminOverviewCards({
)
: teamStats.reduce((sum, t) => sum + t.totalMembers, 0)}
</p>
<p className="text-sm text-slate-400">
<p className="text-sm text-green-200">
{hasFilters ? "Membres filtrés" : "Membres"}
</p>
{hasFilters && (
<p className="text-xs text-slate-500">
<p className="text-xs text-green-300">
sur {teamStats.reduce((sum, t) => sum + t.totalMembers, 0)} au
total
</p>
@@ -83,12 +81,12 @@ export function AdminOverviewCards({
</div>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
<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/20 border border-purple-500/30 rounded-xl">
<Building2 className="h-5 w-5 text-purple-400" />
<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>
<div className="text-xs text-slate-400 font-medium">
<div className="text-xs text-purple-200 font-medium">
{hasFilters ? "FILTRÉES" : "TOTAL"}
</div>
</div>
@@ -98,23 +96,23 @@ export function AdminOverviewCards({
? getFilteredDirectionStats().length
: directionStats.length}
</p>
<p className="text-sm text-slate-400">
<p className="text-sm text-purple-200">
{hasFilters ? "Directions filtrées" : "Directions"}
</p>
{hasFilters && (
<p className="text-xs text-slate-500">
<p className="text-xs text-purple-300">
sur {directionStats.length} au total
</p>
)}
</div>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
<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/20 border border-orange-500/30 rounded-xl">
<Target className="h-5 w-5 text-orange-400" />
<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>
<div className="text-xs text-slate-400 font-medium">RÉFÉRENTIEL</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">
@@ -123,8 +121,8 @@ export function AdminOverviewCards({
0
)}
</p>
<p className="text-sm text-slate-400">Compétences suivies</p>
<p className="text-xs text-slate-500">
<p className="text-sm text-orange-200">Compétences suivies</p>
<p className="text-xs text-orange-300">
{skillCategories.length} catégories
</p>
</div>