fix ui

apps/edr-freight-web/backoffice/src/components/overview/OverviewPageHeader.tsx

@@ -5,13 +5,12 @@ import {
   SegmentedControl,
   Stack,
   Text,
+  ThemeIcon,
   Title,
 } from "@mantine/core";
 import { Activity, RefreshCw } from "lucide-react";
 
-import { freightBrand } from "@/theme/freight-brand";
 import type { OverviewRange } from "@/types/overview";
-import "./overview.css";
 
 const RANGE_OPTIONS = [
   { label: "7 days", value: "7d" },
@@ -19,8 +18,6 @@ const RANGE_OPTIONS = [
   { label: "90 days", value: "90d" },
 ];
 
-const HERO_GRADIENT = `linear-gradient(125deg, ${freightBrand.primaryDark} 0%, ${freightBrand.primary} 50%, ${freightBrand.primaryLight} 125%)`;
-
 function formatRelativeTime(iso: string | undefined) {
   if (!iso) return "—";
   const diffMs = Date.now() - new Date(iso).getTime();
@@ -32,7 +29,7 @@ function formatRelativeTime(iso: string | undefined) {
   return new Date(iso).toLocaleString();
 }
 
-/** Decorative line-art locomotive + rails, sits faintly on the right of the hero. */
+/** Decorative line-art locomotive + rails — faint brand tint on the right. */
 function TrainArtwork() {
   return (
     <Box
@@ -43,34 +40,23 @@ function TrainArtwork() {
         bottom: -8,
         width: 360,
         height: 200,
-        opacity: 0.16,
+        opacity: 0.06,
         pointerEvents: "none",
-        color: "white",
+        color: "var(--mantine-color-green-7)",
       }}
     >
       <svg viewBox="0 0 360 200" fill="none" width="100%" height="100%">
-        {/* rails */}
         <path d="M0 168 H360" stroke="currentColor" strokeWidth="2" strokeDasharray="2 10" strokeLinecap="round" />
         <path d="M0 180 H360" stroke="currentColor" strokeWidth="2" />
-        {/* locomotive body */}
-        <path
-          d="M70 60 H250 a14 14 0 0 1 14 14 V150 H56 V94 a34 34 0 0 1 14-28 Z"
-          stroke="currentColor"
-          strokeWidth="3"
-        />
-        {/* cab windows */}
+        <path d="M70 60 H250 a14 14 0 0 1 14 14 V150 H56 V94 a34 34 0 0 1 14-28 Z" stroke="currentColor" strokeWidth="3" />
         <rect x="84" y="80" width="40" height="30" rx="6" stroke="currentColor" strokeWidth="3" />
         <rect x="140" y="80" width="44" height="30" rx="6" stroke="currentColor" strokeWidth="3" />
         <rect x="200" y="80" width="44" height="30" rx="6" stroke="currentColor" strokeWidth="3" />
-        {/* lower stripe */}
         <path d="M56 130 H264" stroke="currentColor" strokeWidth="3" />
-        {/* wheels */}
         <circle cx="96" cy="150" r="16" stroke="currentColor" strokeWidth="3" />
         <circle cx="150" cy="150" r="16" stroke="currentColor" strokeWidth="3" />
         <circle cx="214" cy="150" r="16" stroke="currentColor" strokeWidth="3" />
-        {/* coupling */}
         <path d="M264 120 H300 a8 8 0 0 1 8 8 V150 H300" stroke="currentColor" strokeWidth="3" />
-        {/* headlight beam */}
         <path d="M56 100 l-28 -10 M56 112 l-30 0 M56 124 l-28 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
       </svg>
     </Box>
@@ -98,50 +84,28 @@ export function OverviewPageHeader({
         position: "relative",
         overflow: "hidden",
         borderRadius: 20,
-        padding: "28px 28px",
-        background: HERO_GRADIENT,
-        boxShadow: freightBrand.shadow,
+        padding: "26px 28px",
+        background: "#ffffff",
+        border: "1px solid var(--mantine-color-gray-2)",
+        boxShadow: "0 1px 3px rgba(15,23,42,0.04)",
       }}
     >
-      {/* decorative glows */}
-      <Box
-        style={{
-          position: "absolute",
-          top: -120,
-          right: 120,
-          width: 280,
-          height: 280,
-          borderRadius: "50%",
-          background: "rgba(255,255,255,0.10)",
-          pointerEvents: "none",
-        }}
-      />
       <TrainArtwork />
 
       <Group justify="space-between" align="flex-end" wrap="wrap" gap="lg" style={{ position: "relative" }}>
         <Stack gap={6} style={{ minWidth: 0 }}>
           <Group gap={8} align="center">
-            <Box
-              style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: 28,
-                height: 28,
-                borderRadius: 8,
-                background: "rgba(255,255,255,0.2)",
-              }}
-            >
-              <Activity size={16} color="white" />
-            </Box>
-            <Text size="xs" fw={700} c="rgba(255,255,255,0.85)" tt="uppercase" style={{ letterSpacing: 1.2 }}>
+            <ThemeIcon size={28} radius="md" variant="light" color="green">
+              <Activity size={16} />
+            </ThemeIcon>
+            <Text size="xs" fw={700} c="green.7" tt="uppercase" style={{ letterSpacing: 1.2 }}>
               Freight Backoffice · Live
             </Text>
           </Group>
-          <Title order={1} c="white" style={{ letterSpacing: "-0.03em", fontSize: 34, lineHeight: 1.1 }}>
+          <Title order={1} style={{ letterSpacing: "-0.03em", fontSize: 34, lineHeight: 1.1, color: "#0f172a" }}>
             Operations Overview
           </Title>
-          <Text size="sm" c="rgba(255,255,255,0.85)">
+          <Text size="sm" c="dimmed">
             Real-time freight performance · updated {formatRelativeTime(generatedAt)}
           </Text>
         </Stack>
@@ -153,14 +117,10 @@ export function OverviewPageHeader({
             data={RANGE_OPTIONS}
             size="sm"
             radius="lg"
-            classNames={{
-              root: "ov-seg-root",
-              indicator: "ov-seg-indicator",
-              label: "ov-seg-label",
-            }}
+            color="green"
           />
           <ActionIcon
-            variant="white"
+            variant="light"
             color="green"
             size="lg"
             radius="lg"