fix(ui): add dark mode styles to amber warning boxes app-wide

Amber alert boxes were missing dark: variants, rendering as muddy
dark-orange in dark mode with near-unreadable text. Fixed in:
- VacationClient (Pending Approvals banner)
- VacationModal (conflict warning)
- ResourceDetail (load error)
- SkillMatrixUpload (replace warning)
- AllocationModal (open demand toggle)
- ProjectWizard (budget bar, post-creation warnings)

Pattern: bg-amber-50 → dark:bg-amber-950/30, border-amber-200 →
dark:border-amber-800, text-amber-7/800 → dark:text-amber-300/400

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-06 10:28:35 +02:00
parent d2caba8d7c
commit 813b21d1a0
6 changed files with 11 additions and 11 deletions
@@ -696,7 +696,7 @@ function Step3({ state, onChange }: Step3Props) {
const remainingCents = projectBudgetCents - allocatedCents;
const pct = projectBudgetCents > 0 ? Math.round((allocatedCents / projectBudgetCents) * 100) : 0;
return (
<div className={`mb-3 rounded-lg border p-3 text-xs ${remainingCents < 0 ? "bg-red-50 border-red-200 text-red-700" : remainingCents === 0 ? "bg-green-50 border-green-200 text-green-700" : "bg-amber-50 border-amber-200 text-amber-700"}`}>
<div className={`mb-3 rounded-lg border p-3 text-xs ${remainingCents < 0 ? "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400" : remainingCents === 0 ? "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800 text-green-700 dark:text-green-400" : "bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300"}`}>
<div className="flex items-center justify-between mb-1.5">
<span className="font-semibold">Budget Allocation</span>
<span>{pct}% allocated</span>
@@ -1219,12 +1219,12 @@ function Step5({ state, onChange, onSubmit, isSubmitting, submitError, submitWar
{/* Post-creation warnings */}
{submitWarnings.length > 0 && (
<div className="px-3 py-2 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-800 space-y-1">
<div className="px-3 py-2 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg text-sm text-amber-800 dark:text-amber-300 space-y-1">
<p className="font-medium">Project created with warnings:</p>
{submitWarnings.map((w, i) => (
<p key={i} className="text-xs">{w}</p>
))}
<p className="text-xs mt-1 text-amber-600">You can fix these staffing items from the project detail page.</p>
<p className="text-xs mt-1 text-amber-600 dark:text-amber-400">You can fix these staffing items from the project detail page.</p>
</div>
)}