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

style: update DeadlineReminder component styles

Browse Source 
- Refactored styles in `DeadlineReminder` for improved visual consistency and clarity.
- Changed card structure and applied new background and border colors using CSS color-mix for better aesthetics.
- Simplified text formatting and ensured proper opacity settings for better readability.
This commit is contained in:
Julien Froidefond
2025-09-24 08:22:16 +02:00
parent ea21df13c7
commit 75aa60cb83
1 changed files with 41 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/daily/DeadlineReminder.tsx
View File

@@ -37,39 +37,47 @@ export function DeadlineReminder({ deadlineMetrics }: DeadlineReminderProps) {
}
return (
<Card className="mb-2 p-4 bg-gradient-to-r from-amber-50/50 to-orange-50/50 dark:from-amber-950/20 dark:to-orange-950/20 border-amber-200/50 dark:border-amber-800/50">
<div className="flex items-start gap-3">
<div className="text-2xl">⚠️</div>
<div className="flex-1 min-w-0">
<h3 className="text-sm font-semibold text-amber-800 dark:text-amber-200 mb-2">
Rappel - Tâches urgentes ({urgentTasks.length})
</h3>
<div className="flex flex-wrap gap-2">
{urgentTasks.map((task, index) => (
<div
key={task.id}
className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-white/60 dark:bg-gray-800/60 border border-amber-200/60 dark:border-amber-700/60"
>
<span>{getUrgencyIcon(task)}</span>
<span className="truncate max-w-[200px]" title={task.title}>
{task.title}
</span>
<span className="text-[10px] text-amber-700 dark:text-amber-300 opacity-75">
({getUrgencyText(task)})
</span>
<span className="text-[10px] opacity-60">
{getSourceIcon(task.source)}
</span>
{index < urgentTasks.length - 1 && (
<span className="text-amber-400 dark:text-amber-500 opacity-50">•</span>
)}
</div>
))}
</div>
<div className="mt-2 text-xs text-amber-700 dark:text-amber-300 opacity-75">
Consultez la page d&apos;accueil pour plus de détails sur les échéances
<Card className="mb-2">
<div className="outline-card-yellow p-4">
<div className="flex items-start gap-3">
<div className="text-2xl">⚠️</div>
<div className="flex-1 min-w-0">
<h3 className="text-sm font-semibold mb-2">
Rappel - Tâches urgentes ({urgentTasks.length})
</h3>
<div className="flex flex-wrap gap-2">
{urgentTasks.map((task, index) => (
<div
key={task.id}
className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium"
style={{
backgroundColor: 'color-mix(in srgb, #eab308 15%, var(--card))',
borderColor: 'color-mix(in srgb, #eab308 35%, var(--border))',
border: '1px solid',
color: 'color-mix(in srgb, #eab308 85%, var(--foreground))'
}}
>
<span>{getUrgencyIcon(task)}</span>
<span className="truncate max-w-[200px]" title={task.title}>
{task.title}
</span>
<span className="text-[10px] opacity-75">
({getUrgencyText(task)})
</span>
<span className="text-[10px] opacity-60">
{getSourceIcon(task.source)}
</span>
{index < urgentTasks.length - 1 && (
<span className="opacity-50">•</span>
)}
</div>
))}
</div>
<div className="mt-2 text-xs opacity-75">
Consultez la page d&apos;accueil pour plus de détails sur les échéances
</div>
</div>
</div>
</div>