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

28
components/admin/team-detail/team-stats-row.tsx
View File

@@ -81,7 +81,7 @@ export function TeamStatsRow({
onViewReport,
}: TeamStatsRowProps) {
return (
<div className="group bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 hover:bg-white/10 hover:border-white/20 transition-all duration-300">
<div className="group bg-gradient-to-r from-slate-800/50 to-slate-700/40 backdrop-blur-sm border border-slate-600/40 rounded-xl p-4 hover:from-slate-700/60 hover:to-slate-600/50 hover:border-slate-500/50 transition-all duration-300 shadow-lg hover:shadow-xl">
{/* Layout horizontal compact */}
<div className="flex items-center gap-6">
{/* Informations de base */}
@@ -90,10 +90,10 @@ export function TeamStatsRow({
<h3 className="text-lg font-semibold text-white truncate">
{teamName}
</h3>
<div className="px-2 py-1 bg-white/10 border border-white/20 rounded-md">
<div className="px-2 py-1 bg-slate-700/60 border border-slate-500/40 rounded-md">
<div className="flex items-center gap-1.5">
<Users className="h-3 w-3 text-slate-400" />
<span className="text-xs text-slate-300">{totalMembers}</span>
<Users className="h-3 w-3 text-slate-300" />
<span className="text-xs text-slate-200">{totalMembers}</span>
</div>
</div>
</div>
@@ -101,14 +101,14 @@ export function TeamStatsRow({
{/* Mini barre de progression */}
<div className="w-full max-w-xs">
<div className="flex items-center justify-between mb-1">
<span className="text-xs text-slate-400">Niveau</span>
<span className="text-xs text-slate-300">
<span className="text-xs text-slate-300">Niveau</span>
<span className="text-xs text-slate-200">
{((averageSkillLevel / 3) * 100).toFixed(0)}%
</span>
</div>
<div className="w-full bg-white/10 rounded-full h-1.5">
<div className="w-full bg-slate-700/60 rounded-full h-1.5">
<div
className={`h-1.5 rounded-full transition-all duration-300 ${
className={`h-1.5 rounded-full transition-all duration-300 shadow-sm ${
averageSkillLevel < 0.5
? "bg-gradient-to-r from-red-500 to-red-400"
: averageSkillLevel < 1.5
@@ -129,21 +129,21 @@ export function TeamStatsRow({
<div className="text-sm font-bold text-white">
{averageSkillLevel.toFixed(1)}
</div>
<div className="text-xs text-slate-400">/ 3.0</div>
<div className="text-xs text-slate-300">/ 3.0</div>
</div>
<div className="text-center">
<div className="text-sm font-bold text-white">
{skillCoverage.toFixed(0)}%
</div>
<div className="text-xs text-slate-400">Couv.</div>
<div className="text-xs text-slate-300">Couv.</div>
</div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div
className={`px-2.5 py-1.5 border rounded-lg text-center cursor-help ${getSkillLevelBadgeClasses(
className={`px-2.5 py-1.5 border rounded-lg text-center cursor-help shadow-sm ${getSkillLevelBadgeClasses(
averageSkillLevel
)}`}
>
@@ -172,7 +172,7 @@ export function TeamStatsRow({
{topSkills.slice(0, 3).map((skill, idx) => (
<div
key={idx}
className={`px-2 py-1 border rounded-md text-center min-w-[60px] ${getSkillLevelBadgeClasses(
className={`px-2 py-1 border rounded-md text-center min-w-[60px] shadow-sm ${getSkillLevelBadgeClasses(
skill.averageLevel
)}`}
>
@@ -192,7 +192,7 @@ export function TeamStatsRow({
variant="outline"
size="sm"
onClick={onViewReport}
className="h-8 px-3 bg-white/5 border-white/20 text-white hover:bg-white/10 hover:border-white/30"
className="h-8 px-3 bg-slate-700/50 border-slate-500/40 text-white hover:bg-slate-600/60 hover:border-slate-400/50 shadow-sm"
>
<ExternalLink className="h-3 w-3" />
</Button>
@@ -200,7 +200,7 @@ export function TeamStatsRow({
variant="outline"
size="sm"
onClick={onViewDetails}
className="h-8 px-3 bg-white/5 border-white/20 text-white hover:bg-white/10 hover:border-white/30"
className="h-8 px-3 bg-slate-700/50 border-slate-500/40 text-white hover:bg-slate-600/60 hover:border-slate-400/50 shadow-sm"
>
<ChevronRight className="h-3 w-3" />
</Button>