From febe700d4564e5c0fec0dfbda7dcfcdff0af589b Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Fri, 7 Nov 2025 19:58:44 +0100
Subject: [WIP] Fix stop alert colours in dark mode and consolidate styling
 (#84)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>
---
 src/frontend/app/components/ErrorDisplay.css  | 10 +++----
 src/frontend/app/components/ServiceAlerts.css | 39 +++++++--------------------
 src/frontend/app/components/StopAlert.css     | 28 +++++--------------
 src/frontend/app/root.css                     | 36 +++++++++++++++++++++++++
 src/frontend/app/routes/estimates-$id.css     | 16 +++++------
 5 files changed, 64 insertions(+), 65 deletions(-)

(limited to 'src/frontend')

diff --git a/src/frontend/app/components/ErrorDisplay.css b/src/frontend/app/components/ErrorDisplay.css
index 096182a..4799949 100644
--- a/src/frontend/app/components/ErrorDisplay.css
+++ b/src/frontend/app/components/ErrorDisplay.css
@@ -14,7 +14,7 @@
 .error-icon {
   width: 48px;
   height: 48px;
-  color: #e74c3c;
+  color: var(--error-icon-color);
   margin: 0 auto 1rem;
   display: block;
 }
@@ -22,12 +22,12 @@
 .error-title {
   font-size: 1.5rem;
   font-weight: 600;
-  color: #2c3e50;
+  color: var(--error-title-color);
   margin: 0 0 0.5rem;
 }
 
 .error-message {
-  color: #7f8c8d;
+  color: var(--error-message-color);
   margin: 0 0 1.5rem;
   line-height: 1.5;
 }
@@ -36,7 +36,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  background: #3498db;
+  background: var(--button-background-color);
   color: white;
   border: none;
   padding: 0.75rem 1.5rem;
@@ -48,7 +48,7 @@
 }
 
 .error-retry-button:hover {
-  background: #2980b9;
+  background: var(--button-hover-background-color);
 }
 
 .error-retry-button:active {
diff --git a/src/frontend/app/components/ServiceAlerts.css b/src/frontend/app/components/ServiceAlerts.css
index 484b45b..7c271f9 100644
--- a/src/frontend/app/components/ServiceAlerts.css
+++ b/src/frontend/app/components/ServiceAlerts.css
@@ -13,42 +13,21 @@
 }
 
 .service-alert.info {
-  background-color: #e3f2fd;
-  border-color: #2196f3;
-  color: #0d47a1;
+  background-color: var(--alert-info-bg);
+  border-color: var(--alert-info-border);
+  color: var(--alert-info-text);
 }
 
 .service-alert.warning {
-  background-color: #fff3e0;
-  border-color: #ff9800;
-  color: #e65100;
+  background-color: var(--alert-warning-bg);
+  border-color: var(--alert-warning-border);
+  color: var(--alert-warning-text);
 }
 
 .service-alert.error {
-  background-color: #ffebee;
-  border-color: #f44336;
-  color: #b71c1c;
-}
-
-/* Dark mode adjustments */
-@media (prefers-color-scheme: dark) {
-  .service-alert.info {
-    background-color: #0d47a1;
-    border-color: #2196f3;
-    color: #e3f2fd;
-  }
-
-  .service-alert.warning {
-    background-color: #e65100;
-    border-color: #ff9800;
-    color: #fff3e0;
-  }
-
-  .service-alert.error {
-    background-color: #b71c1c;
-    border-color: #f44336;
-    color: #ffebee;
-  }
+  background-color: var(--alert-error-bg);
+  border-color: var(--alert-error-border);
+  color: var(--alert-error-text);
 }
 
 .alert-icon {
diff --git a/src/frontend/app/components/StopAlert.css b/src/frontend/app/components/StopAlert.css
index 8bcc4b0..ac24f8c 100644
--- a/src/frontend/app/components/StopAlert.css
+++ b/src/frontend/app/components/StopAlert.css
@@ -1,24 +1,4 @@
-/* Alert color variables */
-:root {
-  --alert-info-bg: rgba(59, 130, 246, 0.1);
-  --alert-info-border: rgba(59, 130, 246, 0.5);
-  --alert-info-text: #1e40af;
-
-  --alert-error-bg: rgba(239, 68, 68, 0.1);
-  --alert-error-border: rgba(239, 68, 68, 0.5);
-  --alert-error-text: #991b1b;
-}
-
-/* Dark mode overrides use data-mode */
-[data-mode="dark"] {
-  --alert-info-bg: rgba(59, 130, 246, 0.15);
-  --alert-info-border: rgba(59, 130, 246, 0.4);
-  --alert-info-text: #93c5fd;
-
-  --alert-error-bg: rgba(239, 68, 68, 0.15);
-  --alert-error-border: rgba(239, 68, 68, 0.4);
-  --alert-error-text: #fca5a5;
-}
+/* Alert styles use variables from root.css */
 
 .stop-alert {
   display: flex;
@@ -36,6 +16,12 @@
   color: var(--alert-info-text);
 }
 
+.stop-alert-warning {
+  background-color: var(--alert-warning-bg);
+  border-color: var(--alert-warning-border);
+  color: var(--alert-warning-text);
+}
+
 .stop-alert-error {
   background-color: var(--alert-error-bg);
   border-color: var(--alert-error-border);
diff --git a/src/frontend/app/root.css b/src/frontend/app/root.css
index 61cbfe4..12441af 100644
--- a/src/frontend/app/root.css
+++ b/src/frontend/app/root.css
@@ -26,6 +26,24 @@
   --service-background: #f0f0f0;
   --service-background-past: #e8e8e8;
 
+  /* Alert color variables */
+  --alert-info-bg: rgba(59, 130, 246, 0.1);
+  --alert-info-border: rgba(59, 130, 246, 0.5);
+  --alert-info-text: #1e40af;
+
+  --alert-warning-bg: rgba(255, 152, 0, 0.1);
+  --alert-warning-border: rgba(255, 152, 0, 0.5);
+  --alert-warning-text: #e65100;
+
+  --alert-error-bg: rgba(239, 68, 68, 0.1);
+  --alert-error-border: rgba(239, 68, 68, 0.5);
+  --alert-error-text: #991b1b;
+
+  /* Error display colors */
+  --error-icon-color: #e74c3c;
+  --error-title-color: #2c3e50;
+  --error-message-color: #7f8c8d;
+
   color-scheme: light;
   font-family: "Roboto Variable", Roboto, Arial, sans-serif;
 }
@@ -58,6 +76,24 @@
   --service-background: #222222;
   --service-background-past: #1f1f1f;
 
+  /* Alert color variables (dark) */
+  --alert-info-bg: rgba(59, 130, 246, 0.15);
+  --alert-info-border: rgba(59, 130, 246, 0.4);
+  --alert-info-text: #93c5fd;
+
+  --alert-warning-bg: rgba(255, 152, 0, 0.15);
+  --alert-warning-border: rgba(255, 152, 0, 0.4);
+  --alert-warning-text: #ffa726;
+
+  --alert-error-bg: rgba(239, 68, 68, 0.15);
+  --alert-error-border: rgba(239, 68, 68, 0.4);
+  --alert-error-text: #fca5a5;
+
+  /* Error display colors (dark) */
+  --error-icon-color: #e74c3c;
+  --error-title-color: #e0e0e0;
+  --error-message-color: #b0b0b0;
+
   color-scheme: dark;
 }
 
diff --git a/src/frontend/app/routes/estimates-$id.css b/src/frontend/app/routes/estimates-$id.css
index 72ade06..0658156 100644
--- a/src/frontend/app/routes/estimates-$id.css
+++ b/src/frontend/app/routes/estimates-$id.css
@@ -259,14 +259,12 @@
   line-height: 1.4;
 }
 
-@media (prefers-color-scheme: dark) {
-  .experimental-notice {
-    background-color: #3d3100;
-    border-color: #ffc107;
-    color: #ffd966;
-  }
+[data-theme="dark"] .experimental-notice {
+  background-color: #3d3100;
+  border-color: #ffc107;
+  color: #ffd966;
+}
 
-  .experimental-notice strong {
-    color: #ffd966;
-  }
+[data-theme="dark"] .experimental-notice strong {
+  color: #ffd966;
 }
-- 
cgit v1.3