From c91ca9e00aaa6b128a7a20164f915f0e1c24c7e1 Mon Sep 17 00:00:00 2001
From: Brent Andrew Hendricks <brent.hendricks@p5software.com>
Date: Sun, 21 Jun 2026 14:39:30 -0400
Subject: [PATCH] Make toast messages fully opaque for readability

Removes /50 transparency from dark mode toast backgrounds and bumps
light mode from -50 to -100 tints (with matching -300 borders) so
success, warning, and error toasts are fully opaque in both themes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 Controller/ui/src/components/ToastContainer.vue             | 6 +++---
 .../ui/src/components/ToastContainer.vue                    | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Controller/ui/src/components/ToastContainer.vue b/Controller/ui/src/components/ToastContainer.vue
index ab54bd35..7832f93f 100644
--- a/Controller/ui/src/components/ToastContainer.vue
+++ b/Controller/ui/src/components/ToastContainer.vue
@@ -6,9 +6,9 @@
         :key="toast.id"
         class="rounded-lg px-4 py-3 shadow-lg flex items-start gap-3"
         :class="{
-          'bg-green-50 border border-green-200 dark:bg-green-900/50 dark:border-green-700 text-green-800 dark:text-green-200': toast.type === 'success',
-          'bg-amber-50 border border-amber-200 dark:bg-amber-900/50 dark:border-amber-700 text-amber-800 dark:text-amber-200': toast.type === 'warning',
-          'bg-red-50 border border-red-200 dark:bg-red-900/50 dark:border-red-700 text-red-800 dark:text-red-200': toast.type === 'error'
+          'bg-green-100 border border-green-300 dark:bg-green-900 dark:border-green-700 text-green-800 dark:text-green-200': toast.type === 'success',
+          'bg-amber-100 border border-amber-300 dark:bg-amber-900 dark:border-amber-700 text-amber-800 dark:text-amber-200': toast.type === 'warning',
+          'bg-red-100 border border-red-300 dark:bg-red-900 dark:border-red-700 text-red-800 dark:text-red-200': toast.type === 'error'
         }"
       >
         <p class="flex-1 text-sm font-medium whitespace-pre-wrap">{{ toast.message }}</p>
diff --git a/Hardware-Registration-and-Configuration/ui/src/components/ToastContainer.vue b/Hardware-Registration-and-Configuration/ui/src/components/ToastContainer.vue
index 6c2bdc45..5d73a073 100644
--- a/Hardware-Registration-and-Configuration/ui/src/components/ToastContainer.vue
+++ b/Hardware-Registration-and-Configuration/ui/src/components/ToastContainer.vue
@@ -7,8 +7,8 @@
         class="rounded-lg px-4 py-3 shadow-lg flex items-start gap-3"
         :class="
           toast.type === 'success'
-            ? 'bg-green-50 border border-green-200 dark:bg-green-900/50 dark:border-green-700 text-green-800 dark:text-green-200'
-            : 'bg-red-50 border border-red-200 dark:bg-red-900/50 dark:border-red-700 text-red-800 dark:text-red-200'
+            ? 'bg-green-100 border border-green-300 dark:bg-green-900 dark:border-green-700 text-green-800 dark:text-green-200'
+            : 'bg-red-100 border border-red-300 dark:bg-red-900 dark:border-red-700 text-red-800 dark:text-red-200'
         "
       >
         <p class="flex-1 text-sm font-medium">{{ toast.message }}</p>