style: WIP ui updates

apps/edr-freight-web/backoffice/src/components/bookings/detail/booking-detail.styles.ts

@@ -55,7 +55,7 @@ export const detailStyles = {
 export function approvalStatusColor(status: string): string {
   switch (status) {
     case "APPROVED":
-      return "green";
+      return "edr-green";
     case "PENDING":
       return "yellow";
     case "REJECTED":

apps/edr-freight-web/backoffice/src/components/fleet/FleetToolbar.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from "react";
-import { LayoutGrid, Plus, Search, Table2 } from "lucide-react";
 import { Box, Button, Group, SegmentedControl, TextInput } from "@mantine/core";
+import { LayoutGrid, Plus, Search, Table2 } from "lucide-react";
+import type { ReactNode } from "react";
 
 import type { FleetViewMode } from "./useFleetViewMode";
 
@@ -67,7 +67,6 @@ const FleetToolbar = ({
           onChange={(value) => onViewModeChange(value as FleetViewMode)}
           size="sm"
           radius="lg"
-          color="green"
           data={[
             {
               value: "table",

apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleBookingsStep.tsx

@@ -1,4 +1,3 @@
-import { ArrowRight, Package, Train } from "lucide-react";
 import {
   Badge,
   Button,
@@ -8,6 +7,7 @@ import {
   Tabs,
   Text,
 } from "@mantine/core";
+import { ArrowRight, Package, Train } from "lucide-react";
 
 import type { EligibleContainerBooking, FreightType } from "@/types/trainScheduling";
 

apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleStatusBadge.tsx

@@ -3,7 +3,7 @@ import { Badge } from "@mantine/core";
 const STATUS_COLORS: Record<string, string> = {
   DRAFT: "gray",
   SCHEDULED: "blue",
-  DISPATCHED: "green",
+  DISPATCHED: "edr-green",
   ARRIVED: "teal",
   CANCELLED: "red",
 };
@@ -34,7 +34,7 @@ export function SchedulingStatusBadge({ status }: { status?: string | null }) {
     HOLDING: "yellow",
     ELIGIBLE: "blue",
     SCHEDULED: "indigo",
-    DISPATCHED: "green",
+    DISPATCHED: "edr-green",
   };
   return (
     <Badge variant="light" color={colors[status] ?? "gray"} size="sm">

apps/edr-freight-web/backoffice/src/components/trainScheduling/scheduleVisuals.tsx

@@ -32,7 +32,7 @@ const STATUS_META: Record<
   { color: string; dot: string; label?: string }
 > = {
   DRAFT: { color: "gray", dot: "var(--mantine-color-gray-5)" },
-  SCHEDULED: { color: "green", dot: freightBrand.primary },
+  SCHEDULED: { color: "edr-green", dot: freightBrand.primary },
   DISPATCHED: { color: "teal", dot: "var(--mantine-color-teal-6)" },
   ARRIVED: { color: "blue", dot: "var(--mantine-color-blue-6)" },
   CANCELLED: { color: "red", dot: "var(--mantine-color-red-6)" },

apps/edr-freight-web/backoffice/src/components/ui/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
-import { Fragment } from "react";
+import { Anchor, Breadcrumbs as MantineBreadcrumbs, Text } from "@mantine/core";
+import { ChevronRight } from "lucide-react";
 import { Link } from "react-router-dom";
-import { ChevronRight, Home } from "lucide-react";
 
 export interface BreadcrumbItem {
   label: string;
@@ -12,45 +12,48 @@ export interface BreadcrumbsProps {
 }
 
 export default function Breadcrumbs({ items }: BreadcrumbsProps) {
-  return (
-    <nav
-      aria-label="Breadcrumb"
-      className="flex items-center text-sm text-slate-500"
-    >
-      <Link
-        to="/"
-        aria-label="Home"
-        className="flex items-center transition hover:text-[var(--freight-brand)]"
-      >
-        {/* <Home className="h-4 w-4" /> */}
-        Dashboard
-      </Link>
+  // The dashboard root is always the first crumb; callers pass only the trail
+  // beyond it.
+  const crumbs: BreadcrumbItem[] = [{ label: "Dashboard", href: "/" }, ...items];
 
-      {items.map((item, i) => {
-        const isLast = i === items.length - 1;
+  return (
+    <MantineBreadcrumbs
+      separator={<ChevronRight size={14} aria-hidden />}
+      separatorMargin="xs"
+      styles={{
+        root: { flexWrap: "wrap", rowGap: 4 },
+        separator: { color: "var(--mantine-color-edr-muted-5)" },
+      }}
+    >
+      {crumbs.map((item, index) => {
+        const isLast = index === crumbs.length - 1;
+
+        if (item.href && !isLast) {
+          return (
+            <Anchor
+              key={`${item.label}-${index}`}
+              component={Link}
+              to={item.href}
+              size="sm"
+              c="dimmed"
+            >
+              {item.label}
+            </Anchor>
+          );
+        }
 
         return (
-          <Fragment key={`${item.label}-${i}`}>
-            <ChevronRight className="mx-2 h-4 w-4 text-slate-300" />
-
-            {item.href && !isLast ? (
-              <Link
-                to={item.href}
-                className="transition hover:text-[var(--freight-brand)]"
-              >
-                {item.label}
-              </Link>
-            ) : (
-              <span
-                aria-current={isLast ? "page" : undefined}
-                className="font-medium text-slate-900"
-              >
-                {item.label}
-              </span>
-            )}
-          </Fragment>
+          <Text
+            key={`${item.label}-${index}`}
+            size="sm"
+            fw={isLast ? 600 : 400}
+            c={isLast ? "edr-text" : "dimmed"}
+            aria-current={isLast ? "page" : undefined}
+          >
+            {item.label}
+          </Text>
         );
       })}
-    </nav>
+    </MantineBreadcrumbs>
   );
 }