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

fix: light mode : review some styles

Browse Source
This commit is contained in:
Julien Froidefond
2025-09-23 21:36:50 +02:00
parent fd3827214f
commit 34b9aff6e7
5 changed files with 160 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/app/globals.css
View File

@@ -69,6 +69,92 @@ body {
background: var(--primary);
}
/* Outline card styles pour meilleure lisibilité */
.outline-card-blue {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--primary);
background-color: color-mix(in srgb, var(--primary) 8%, transparent);
border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}
.outline-card-green {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--success);
background-color: color-mix(in srgb, var(--success) 8%, transparent);
border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}
.outline-card-orange {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 8%, transparent);
border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.outline-card-red {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--destructive);
background-color: color-mix(in srgb, var(--destructive) 8%, transparent);
border-color: color-mix(in srgb, var(--destructive) 25%, var(--border));
}
.outline-card-purple {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: #8b5cf6; /* purple-500 */
background-color: color-mix(in srgb, #8b5cf6 8%, transparent);
border-color: color-mix(in srgb, #8b5cf6 25%, var(--border));
}
.outline-card-yellow {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: #eab308; /* yellow-500 */
background-color: color-mix(in srgb, #eab308 8%, transparent);
border-color: color-mix(in srgb, #eab308 25%, var(--border));
}
.outline-card-gray {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--muted-foreground);
background-color: color-mix(in srgb, var(--muted) 8%, transparent);
border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
}
/* Variantes pour les métriques (padding plus large) */
.outline-metric-blue {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--primary);
background-color: color-mix(in srgb, var(--primary) 8%, transparent);
border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}
.outline-metric-green {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--success);
background-color: color-mix(in srgb, var(--success) 8%, transparent);
border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}
.outline-metric-orange {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 8%, transparent);
border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.outline-metric-purple {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: #8b5cf6; /* purple-500 */
background-color: color-mix(in srgb, #8b5cf6 8%, transparent);
border-color: color-mix(in srgb, #8b5cf6 25%, var(--border));
}
.outline-metric-gray {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--muted-foreground);
background-color: color-mix(in srgb, var(--muted) 8%, transparent);
border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
}
/* Animations tech */
@keyframes glow {
0%, 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.3); }

70
src/components/dashboard/ManagerWeeklySummary.tsx
View File

@@ -32,19 +32,19 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
const getPriorityBadgeStyle = (priority: 'low' | 'medium' | 'high') => {
const config = getPriorityConfig(priority);
const baseClasses = 'text-xs px-2 py-0.5 rounded font-medium';
const baseClasses = 'text-xs px-2 py-0.5 rounded font-medium border';
switch (config.color) {
case 'blue':
return `${baseClasses} bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400`;
return `${baseClasses} text-[var(--primary)] bg-[var(--primary)]/10 border-[var(--primary)]/20`;
case 'yellow':
return `${baseClasses} bg-yellow-100 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400`;
return `${baseClasses} text-[var(--accent)] bg-[var(--accent)]/10 border-[var(--accent)]/20`;
case 'purple':
return `${baseClasses} bg-purple-100 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400`;
return `${baseClasses} text-[#8b5cf6] bg-[#8b5cf6]/10 border-[#8b5cf6]/20`;
case 'red':
return `${baseClasses} bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400`;
return `${baseClasses} text-[var(--destructive)] bg-[var(--destructive)]/10 border-[var(--destructive)]/20`;
default:
return `${baseClasses} bg-gray-100 dark:bg-gray-900/20 text-gray-600 dark:text-gray-400`;
return `${baseClasses} text-[var(--muted-foreground)] bg-[var(--muted)]/10 border-[var(--muted)]/20`;
}
};
@@ -123,19 +123,19 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
</h2>
</CardHeader>
<CardContent className="space-y-4">
<div className="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-400">
<h3 className="font-medium text-blue-900 mb-2">🎯 Points clés accomplis</h3>
<p className="text-blue-800">{summary.narrative.weekHighlight}</p>
<div className="outline-card-blue p-4">
<h3 className="font-medium mb-2">🎯 Points clés accomplis</h3>
<p>{summary.narrative.weekHighlight}</p>
</div>
<div className="bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-400">
<h3 className="font-medium text-yellow-900 mb-2">⚡ Défis traités</h3>
<p className="text-yellow-800">{summary.narrative.mainChallenges}</p>
<div className="outline-card-yellow p-4">
<h3 className="font-medium mb-2">⚡ Défis traités</h3>
<p>{summary.narrative.mainChallenges}</p>
</div>
<div className="bg-green-50 p-4 rounded-lg border-l-4 border-green-400">
<h3 className="font-medium text-green-900 mb-2">🔮 Focus 7 prochains jours</h3>
<p className="text-green-800">{summary.narrative.nextWeekFocus}</p>
<div className="outline-card-green p-4">
<h3 className="font-medium mb-2">🔮 Focus 7 prochains jours</h3>
<p>{summary.narrative.nextWeekFocus}</p>
</div>
</CardContent>
</Card>
@@ -147,42 +147,42 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div className="text-center p-4 bg-blue-50 rounded-lg">
<div className="text-2xl font-bold text-blue-600">
<div className="outline-metric-blue">
<div className="text-2xl font-bold">
{summary.metrics.totalTasksCompleted}
</div>
<div className="text-sm text-blue-600">Tâches complétées</div>
<div className="text-xs text-blue-500">
<div className="text-sm">Tâches complétées</div>
<div className="text-xs opacity-75">
dont {summary.metrics.highPriorityTasksCompleted} priorité haute
</div>
</div>
<div className="text-center p-4 bg-green-50 rounded-lg">
<div className="text-2xl font-bold text-green-600">
<div className="outline-metric-green">
<div className="text-2xl font-bold">
{summary.metrics.totalCheckboxesCompleted}
</div>
<div className="text-sm text-green-600">Todos complétés</div>
<div className="text-xs text-green-500">
<div className="text-sm">Todos complétés</div>
<div className="text-xs opacity-75">
dont {summary.metrics.meetingCheckboxesCompleted} meetings
</div>
</div>
<div className="text-center p-4 bg-purple-50 rounded-lg">
<div className="text-2xl font-bold text-purple-600">
<div className="outline-metric-purple">
<div className="text-2xl font-bold">
{summary.keyAccomplishments.filter(a => a.impact === 'high').length}
</div>
<div className="text-sm text-purple-600">Items à fort impact</div>
<div className="text-xs text-purple-500">
<div className="text-sm">Items à fort impact</div>
<div className="text-xs opacity-75">
/ {summary.keyAccomplishments.length} accomplissements
</div>
</div>
<div className="text-center p-4 bg-orange-50 rounded-lg">
<div className="text-2xl font-bold text-orange-600">
<div className="outline-metric-orange">
<div className="text-2xl font-bold">
{summary.upcomingChallenges.filter(c => c.priority === 'high').length}
</div>
<div className="text-sm text-orange-600">Priorités critiques</div>
<div className="text-xs text-orange-500">
<div className="text-sm">Priorités critiques</div>
<div className="text-xs opacity-75">
/ {summary.upcomingChallenges.length} enjeux
</div>
</div>
@@ -214,7 +214,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
{/* Header compact */}
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<span className="w-5 h-5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full text-xs font-bold flex items-center justify-center">
<span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--success)] bg-[var(--success)]/15 border border-[var(--success)]/25">
#{index + 1}
</span>
<span className={getPriorityBadgeStyle(accomplishment.impact)}>
@@ -288,7 +288,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
{/* Header compact */}
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<span className="w-5 h-5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full text-xs font-bold flex items-center justify-center">
<span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--accent)] bg-[var(--accent)]/15 border border-[var(--accent)]/25">
#{index + 1}
</span>
<span className={getPriorityBadgeStyle(challenge.priority)}>
@@ -364,7 +364,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
{/* Header compact */}
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<span className="w-5 h-5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full text-xs font-bold flex items-center justify-center">
<span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--success)] bg-[var(--success)]/15 border border-[var(--success)]/25">
#{index + 1}
</span>
<span className={getPriorityBadgeStyle(accomplishment.impact)}>
@@ -436,7 +436,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
{/* Header compact */}
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<span className="w-5 h-5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full text-xs font-bold flex items-center justify-center">
<span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--accent)] bg-[var(--accent)]/15 border border-[var(--accent)]/25">
#{index + 1}
</span>
<span className={getPriorityBadgeStyle(challenge.priority)}>

30
src/components/dashboard/charts/MetricsOverview.tsx
View File

@@ -33,41 +33,41 @@ export function MetricsOverview({ metrics }: MetricsOverviewProps) {
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
<div className="text-center p-4 bg-green-50 dark:bg-green-950/20 rounded-lg">
<div className="text-2xl font-bold text-green-600">
<div className="outline-metric-green">
<div className="text-2xl font-bold">
{metrics.summary.totalTasksCompleted}
</div>
<div className="text-sm text-green-600">Terminées</div>
<div className="text-sm">Terminées</div>
</div>
<div className="text-center p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
<div className="text-2xl font-bold text-blue-600">
<div className="outline-metric-blue">
<div className="text-2xl font-bold">
{metrics.summary.totalTasksCreated}
</div>
<div className="text-sm text-blue-600">Créées</div>
<div className="text-sm">Créées</div>
</div>
<div className="text-center p-4 bg-purple-50 dark:bg-purple-950/20 rounded-lg">
<div className="text-2xl font-bold text-purple-600">
<div className="outline-metric-purple">
<div className="text-2xl font-bold">
{metrics.summary.averageCompletionRate.toFixed(1)}%
</div>
<div className="text-sm text-purple-600">Taux moyen</div>
<div className="text-sm">Taux moyen</div>
</div>
<div className="text-center p-4 bg-orange-50 dark:bg-orange-950/20 rounded-lg">
<div className="text-2xl font-bold text-orange-600">
<div className="outline-metric-orange">
<div className="text-2xl font-bold">
{getTrendIcon(metrics.summary.trendsAnalysis.completionTrend)}
</div>
<div className="text-sm text-orange-600 capitalize">
<div className="text-sm capitalize">
{metrics.summary.trendsAnalysis.completionTrend}
</div>
</div>
<div className="text-center p-4 bg-gray-50 dark:bg-gray-950/20 rounded-lg">
<div className="text-2xl font-bold text-gray-600">
<div className="outline-metric-gray">
<div className="text-2xl font-bold">
{getPatternIcon(metrics.summary.trendsAnalysis.productivityPattern)}
</div>
<div className="text-sm text-gray-600">
<div className="text-sm">
{metrics.summary.trendsAnalysis.productivityPattern === 'consistent' ? 'Régulier' :
metrics.summary.trendsAnalysis.productivityPattern === 'variable' ? 'Variable' : 'Weekend+'}
</div>

26
src/components/dashboard/charts/ProductivityInsights.tsx
View File

@@ -76,37 +76,37 @@ export function ProductivityInsights({ data, className }: ProductivityInsightsPr
{/* Insights principaux */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Jour le plus productif */}
<div className="p-4 bg-green-50 dark:bg-green-950/20 rounded-lg">
<div className="outline-card-green p-4">
<div className="flex items-center justify-between mb-2">
<h4 className="font-medium text-green-900 dark:text-green-100">
<h4 className="font-medium">
🏆 Jour champion
</h4>
<span className="text-2xl font-bold text-green-600">
<span className="text-2xl font-bold">
{mostProductiveDay.completed}
</span>
</div>
<p className="text-sm text-green-800 dark:text-green-200">
<p className="text-sm">
{mostProductiveDay.dayName} - {mostProductiveDay.completed} tâches terminées
</p>
<p className="text-xs text-green-600 mt-1">
<p className="text-xs opacity-75 mt-1">
Taux: {mostProductiveDay.completionRate.toFixed(1)}%
</p>
</div>
{/* Jour le plus créatif */}
<div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
<div className="outline-card-blue p-4">
<div className="flex items-center justify-between mb-2">
<h4 className="font-medium text-blue-900 dark:text-blue-100">
<h4 className="font-medium">
💡 Jour créatif
</h4>
<span className="text-2xl font-bold text-blue-600">
<span className="text-2xl font-bold">
{mostCreativeDay.newTasks}
</span>
</div>
<p className="text-sm text-blue-800 dark:text-blue-200">
<p className="text-sm">
{mostCreativeDay.dayName} - {mostCreativeDay.newTasks} nouvelles tâches
</p>
<p className="text-xs text-blue-600 mt-1">
<p className="text-xs opacity-75 mt-1">
{mostCreativeDay.dayName === mostProductiveDay.dayName ?
'Également jour le plus productif!' :
'Journée de planification'}
@@ -162,11 +162,11 @@ export function ProductivityInsights({ data, className }: ProductivityInsightsPr
</div>
{/* Recommandations */}
<div className="p-4 bg-yellow-50 dark:bg-yellow-950/20 rounded-lg">
<h4 className="font-medium text-yellow-900 dark:text-yellow-100 mb-2 flex items-center gap-2">
<div className="outline-card-yellow p-4">
<h4 className="font-medium mb-2 flex items-center gap-2">
💡 Recommandations
</h4>
<div className="space-y-1 text-sm text-yellow-800 dark:text-yellow-200">
<div className="space-y-1 text-sm">
{trend === 'down' && (
<p>• Essayez de retrouver votre rythme du début de semaine</p>
)}

12
src/components/deadline/CriticalDeadlinesCard.tsx
View File

@@ -93,10 +93,20 @@ export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDe
{urgentTasks.map((task) => {
const urgencyStyle = getUrgencyStyle(task);
const getStyleClass = (urgencyLevel: string) => {
if (urgencyLevel === 'overdue') {
return 'outline-card-red';
} else if (urgencyLevel === 'critical') {
return 'outline-card-orange';
} else {
return 'outline-card-yellow';
}
};
return (
<div
key={task.id}
className={`p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01] ${urgencyStyle.style}`}
className={getStyleClass(task.urgencyLevel)}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">