From d42a30967d082376b6e5e6fde54ab24eceaca1af Mon Sep 17 00:00:00 2001
From: SaelixCode <dev@saelix.com>
Date: Thu, 2 Jul 2026 12:13:25 -0400
Subject: [PATCH] fix: reduce masthead rail opacity to match login page pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed all MastheadRail background classes from 100% to 70% opacity
(bg-brand → bg-brand/70, etc.) so the shimmer highlight reads as a surface
reflection rather than a detached floating bar. Matches the AuthCanvas
login card precedent.
---
 frontend/src/components/dashboard/HealthStatusBar.tsx | 6 +++---
 frontend/src/components/fleet/FleetMasthead.tsx       | 6 +++---
 frontend/src/components/ui/PageMasthead.tsx           | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/dashboard/HealthStatusBar.tsx b/frontend/src/components/dashboard/HealthStatusBar.tsx
index 5c7f20a5..02fa0fad 100644
--- a/frontend/src/components/dashboard/HealthStatusBar.tsx
+++ b/frontend/src/components/dashboard/HealthStatusBar.tsx
@@ -20,19 +20,19 @@ const healthConfig: Record<HealthLevel, { label: string; textClass: string; rail
   healthy: {
     label: 'Healthy',
     textClass: 'text-stat-value',
-    railClass: 'bg-brand',
+    railClass: 'bg-brand/70',
     tintClass: 'from-brand/[0.06] via-transparent to-transparent',
   },
   degraded: {
     label: 'Degraded',
     textClass: 'text-warning',
-    railClass: 'bg-warning',
+    railClass: 'bg-warning/70',
     tintClass: 'from-warning/[0.06] via-transparent to-transparent',
   },
   critical: {
     label: 'Critical',
     textClass: 'text-destructive',
-    railClass: 'bg-destructive',
+    railClass: 'bg-destructive/70',
     tintClass: 'from-destructive/[0.06] via-transparent to-transparent',
   },
 };
diff --git a/frontend/src/components/fleet/FleetMasthead.tsx b/frontend/src/components/fleet/FleetMasthead.tsx
index c3eb53ec..ac819b50 100644
--- a/frontend/src/components/fleet/FleetMasthead.tsx
+++ b/frontend/src/components/fleet/FleetMasthead.tsx
@@ -42,19 +42,19 @@ const healthConfig: Record<FleetHealth, { label: string; textClass: string; rail
   healthy: {
     label: 'The fleet',
     textClass: 'text-stat-value',
-    railClass: 'bg-brand',
+    railClass: 'bg-brand/70',
     tintClass: 'from-brand/[0.06] via-transparent to-transparent',
   },
   degraded: {
     label: 'The fleet',
     textClass: 'text-warning',
-    railClass: 'bg-warning',
+    railClass: 'bg-warning/70',
     tintClass: 'from-warning/[0.06] via-transparent to-transparent',
   },
   critical: {
     label: 'The fleet',
     textClass: 'text-destructive',
-    railClass: 'bg-destructive',
+    railClass: 'bg-destructive/70',
     tintClass: 'from-destructive/[0.06] via-transparent to-transparent',
   },
 };
diff --git a/frontend/src/components/ui/PageMasthead.tsx b/frontend/src/components/ui/PageMasthead.tsx
index 141772c8..501f4a6e 100644
--- a/frontend/src/components/ui/PageMasthead.tsx
+++ b/frontend/src/components/ui/PageMasthead.tsx
@@ -36,22 +36,22 @@ const toneConfig: Record<MastheadTone, {
     tintClass: string;
 }> = {
     live: {
-        railClass: 'bg-brand',
+        railClass: 'bg-brand/70',
         stateTextClass: 'text-stat-value',
         tintClass: 'from-brand/[0.06] via-transparent to-transparent',
     },
     idle: {
-        railClass: 'bg-stat-subtitle',
+        railClass: 'bg-stat-subtitle/70',
         stateTextClass: 'text-stat-title',
         tintClass: 'from-transparent via-transparent to-transparent',
     },
     warn: {
-        railClass: 'bg-warning',
+        railClass: 'bg-warning/70',
         stateTextClass: 'text-warning',
         tintClass: 'from-warning/[0.06] via-transparent to-transparent',
     },
     error: {
-        railClass: 'bg-destructive',
+        railClass: 'bg-destructive/70',
         stateTextClass: 'text-destructive',
         tintClass: 'from-destructive/[0.06] via-transparent to-transparent',
     },