From 813b21d1a06c0d2622f19a0939c911377899e07b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Mon, 6 Apr 2026 10:28:35 +0200
Subject: [PATCH] fix(ui): add dark mode styles to amber warning boxes app-wide
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/web/src/components/allocations/AllocationModal.tsx | 2 +-
 apps/web/src/components/projects/ProjectWizard.tsx      | 6 +++---
 apps/web/src/components/resources/ResourceDetail.tsx    | 2 +-
 apps/web/src/components/resources/SkillMatrixUpload.tsx | 2 +-
 apps/web/src/components/vacations/VacationClient.tsx    | 8 ++++----
 apps/web/src/components/vacations/VacationModal.tsx     | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/allocations/AllocationModal.tsx b/apps/web/src/components/allocations/AllocationModal.tsx
index 8d2223c..fe61829 100644
--- a/apps/web/src/components/allocations/AllocationModal.tsx
+++ b/apps/web/src/components/allocations/AllocationModal.tsx
@@ -291,7 +291,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
         {/* Form */}
         <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
           {/* Demand toggle */}
-          <div className="flex items-center gap-3 p-3 bg-amber-50 border border-amber-200 rounded-lg">
+          <div className="flex items-center gap-3 p-3 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg">
             <label className="flex items-center gap-2 text-sm cursor-pointer select-none flex-1">
               <input
                 type="checkbox"
diff --git a/apps/web/src/components/projects/ProjectWizard.tsx b/apps/web/src/components/projects/ProjectWizard.tsx
index 23e4945..5b786d1 100644
--- a/apps/web/src/components/projects/ProjectWizard.tsx
+++ b/apps/web/src/components/projects/ProjectWizard.tsx
@@ -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>
       )}
 
diff --git a/apps/web/src/components/resources/ResourceDetail.tsx b/apps/web/src/components/resources/ResourceDetail.tsx
index af11ce1..b18ff70 100644
--- a/apps/web/src/components/resources/ResourceDetail.tsx
+++ b/apps/web/src/components/resources/ResourceDetail.tsx
@@ -167,7 +167,7 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
   if (error || !resource) {
     return (
       <div className="p-6">
-        <div className="bg-amber-50 border border-amber-200 rounded-xl p-6 text-amber-800 text-sm">
+        <div className="bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-xl p-6 text-amber-800 dark:text-amber-300 text-sm">
           This resource could not be loaded right now.{" "}
           <Link href="/resources" className="underline">Back to resources</Link>
         </div>
diff --git a/apps/web/src/components/resources/SkillMatrixUpload.tsx b/apps/web/src/components/resources/SkillMatrixUpload.tsx
index e374c94..d9c39b6 100644
--- a/apps/web/src/components/resources/SkillMatrixUpload.tsx
+++ b/apps/web/src/components/resources/SkillMatrixUpload.tsx
@@ -185,7 +185,7 @@ export function SkillMatrixUpload({ resourceId, isOwner, onClose, onSuccess }: P
                 </p>
               )}
 
-              <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
+              <p className="text-xs text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg px-3 py-2">
                 This will <strong>replace all existing skills</strong> for this resource.
               </p>
 
diff --git a/apps/web/src/components/vacations/VacationClient.tsx b/apps/web/src/components/vacations/VacationClient.tsx
index da2086b..e9c82d9 100644
--- a/apps/web/src/components/vacations/VacationClient.tsx
+++ b/apps/web/src/components/vacations/VacationClient.tsx
@@ -179,19 +179,19 @@ export function VacationClient() {
         <>
           {/* Pending approvals (manager view) */}
           {pendingList.length > 0 && (
-            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
+            <div className="bg-amber-50 dark:bg-gray-800 border border-amber-200 dark:border-amber-700/50 rounded-xl p-4">
               <div className="flex items-center justify-between mb-3">
-                <h2 className="text-sm font-semibold text-amber-800">
+                <h2 className="text-sm font-semibold text-amber-800 dark:text-amber-400">
                   Pending Approvals ({pendingList.length})
                 </h2>
                 {/* Batch controls */}
                 <div className="flex items-center gap-2">
-                  <label className="flex items-center gap-1.5 text-xs text-amber-700 cursor-pointer">
+                  <label className="flex items-center gap-1.5 text-xs text-amber-700 dark:text-amber-400 cursor-pointer">
                     <input
                       type="checkbox"
                       checked={allPendingSelected}
                       onChange={toggleSelectAll}
-                      className="rounded border-amber-300 text-amber-600"
+                      className="rounded border-amber-300 dark:border-amber-600 text-amber-600"
                     />
                     Select all
                   </label>
diff --git a/apps/web/src/components/vacations/VacationModal.tsx b/apps/web/src/components/vacations/VacationModal.tsx
index c3519f9..f0b9222 100644
--- a/apps/web/src/components/vacations/VacationModal.tsx
+++ b/apps/web/src/components/vacations/VacationModal.tsx
@@ -317,7 +317,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
 
           {/* Conflict warning */}
           {existingVacations && existingVacations.length > 0 && (
-            <div className="rounded-lg bg-amber-50 border border-amber-200 px-4 py-3 text-sm text-amber-700">
+            <div className="rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 px-4 py-3 text-sm text-amber-700 dark:text-amber-300">
               <strong>Existing vacation in this period:</strong>
               <ul className="mt-1 space-y-0.5">
                 {existingVacations.map((v) => (