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

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

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