style: use the proper primary color

2026-09-07 16:35:42 +00:00 · 2026-06-22 08:11:11 +00:00
parent ec708d85b3
commit feddce8a0c
62 changed files with 182 additions and 200 deletions
--- a/apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx
@@ -68,7 +68,7 @@ export function ApprovalStepsCard({ booking, mutations }: ApprovalStepsCardProps
        icon={ShieldCheck}
        title="Approval chain"
        extra={
-          <Badge color="green" variant="light" radius="sm">
+          <Badge color="edr-green" variant="light" radius="sm">
            {steps.filter((s) => s.status === "APPROVED").length}/{steps.length}
          </Badge>
        }
@@ -144,11 +144,11 @@ function StepRow({
  const canApprove = canActOnApprovalStep(user, step, steps);
  const statusColor =
    step.status === "APPROVED"
-      ? "green"
+      ? "edr-green"
      : step.status === "REJECTED"
        ? "red"
        : isNext
-          ? "green"
+          ? "edr-green"
          : "gray";

  return (
@@ -200,7 +200,7 @@ function StepRow({
        {canApprove && (
          <Button
            size="compact-sm"
-            color="green"
+            color="edr-green"
            leftSection={<Check size={14} />}
            disabled={isPending}
            onClick={() => onApprove(step)}
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsMenu.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsMenu.tsx
@@ -86,7 +86,7 @@ export function BookingActionsMenu({
                key={action.id}
                size="sm"
                variant={action.primary && !destructive ? "filled" : "default"}
-                color={destructive ? "red" : action.primary ? "green" : "gray"}
+                color={destructive ? "red" : action.primary ? "edr-green" : "gray"}
                leftSection={<Icon size={16} />}
                disabled={mutations.isPending}
                onClick={() => handleAction(action)}
@@ -113,7 +113,7 @@ export function BookingActionsMenu({
      {variant === "table" && primary && (
        <Button
          size="compact-sm"
-          color="green"
+          color="edr-green"
          visibleFrom="lg"
          leftSection={<primary.icon size={14} />}
          disabled={mutations.isPending}
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingConfirmDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingConfirmDialog.tsx
@@ -49,7 +49,7 @@ export function BookingConfirmDialog({
  const inputMissing =
    (needsTextInput && !inputValue.trim()) || (needsFileInput && !selectedFile);
  const isDestructive = action.variant === "destructive";
-  const accent = isDestructive ? "red" : "green";
+  const accent = isDestructive ? "red" : "edr-green";

  return (
    <Modal
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingPricingSummary.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingPricingSummary.tsx
@@ -20,7 +20,7 @@ export function BookingPricingSummary({ booking }: { booking: BookingDetail }) {
          <Text
            size="xl"
            fw={700}
-            c="green.9"
+            c="edr-green.9"
            mt={4}
            style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.5px" }}
          >
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingRequestsHeader.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingRequestsHeader.tsx
@@ -62,7 +62,7 @@ export function BookingRequestsHeader({
  return (
    <Stack gap="lg">
      <Group justify="flex-end" gap="sm">
-        <Button color="green" radius="lg" leftSection={<Plus size={18} />} onClick={onCreate}>
+        <Button color="edr-green" radius="lg" leftSection={<Plus size={18} />} onClick={onCreate}>
          Create booking
        </Button>
        <Button
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
@@ -8,7 +8,7 @@ const statusColorMap: Record<string, string> = {
  CHANGES_REQUESTED: "orange",
  PENDING_APPROVAL: "yellow",
  APPROVED_PENDING_SIGNATURE: "cyan",
-  APPROVED: "green",
+  APPROVED: "edr-green",
  CONTRACT_READY: "indigo",
  SIGNED_CUSTOMER: "cyan",
  FULLY_EXECUTED: "indigo",
@@ -16,7 +16,7 @@ const statusColorMap: Record<string, string> = {
  PAYMENT_VERIFICATION_IN_PROGRESS: "yellow",
  SELECTED_FOR_BATCH: "orange",
  EXPIRED: "red",
-  PAID: "green",
+  PAID: "edr-green",
  IN_TRANSIT: "cyan",
  COMPLETED: "indigo",
  REJECTED: "red",
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx
@@ -43,7 +43,7 @@ export function BookingStatusTabs({
      value={active}
      onChange={(value) => onChange((value as BookingStatusTabKey) ?? "all")}
      variant="pills"
-      color="green"
+      color="edr-green"
      keepMounted={false}
      classNames={{ list: "ov-tablist", tab: "ov-tab" }}
    >
@@ -62,7 +62,7 @@ export function BookingStatusTabs({
                    size="sm"
                    radius="sm"
                    variant={isActive ? "white" : "light"}
-                    color={isActive ? "green" : "gray"}
+                    color={isActive ? "edr-green" : "gray"}
                    styles={
                      isActive
                        ? { root: { background: "rgba(255,255,255,0.9)", color: "#15805f" } }
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingWorkflowStepper.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingWorkflowStepper.tsx
@@ -83,7 +83,7 @@ export function BookingWorkflowStepper({
                  <Text
                    size="xs"
                    fw={isActive ? 600 : 500}
-                    c={isActive ? "green.7" : isComplete ? "dark" : "dimmed"}
+                    c={isActive ? "edr-green.7" : isComplete ? "dark" : "dimmed"}
                    ta="center"
                    style={{ whiteSpace: "nowrap" }}
                  >
--- a/apps/edr-freight-web/backoffice/src/components/bookings/OperationsBookingQueue.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/OperationsBookingQueue.tsx
@@ -190,7 +190,7 @@ export function OperationsBookingQueue({
                      <Badge variant="light">{selected.length} selected</Badge>
                      <Button
                        size="compact-sm"
-                        color="green"
+                        color="edr-green"
                        disabled={!selected.length}
                        onClick={(e) => {
                          e.stopPropagation();
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingApprovalCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingApprovalCard.tsx
@@ -19,14 +19,14 @@ export function BookingApprovalCard({ steps, approvedCount }: BookingApprovalCar
    <SectionCard
      icon={CheckCircle}
      title="Approval Workflow"
-      accent="green"
+      accent="edr-green"
      extra={
-        <Badge color="green" variant="light" radius="sm">
+        <Badge color="edr-green" variant="light" radius="sm">
          {approvedCount} / {steps.length} approved
        </Badge>
      }
    >
-      <Timeline active={approvedCount - 1} bulletSize={26} lineWidth={2} color="green">
+      <Timeline active={approvedCount - 1} bulletSize={26} lineWidth={2} color="edr-green">
        {steps.map((step) => (
          <Timeline.Item
            key={step.id}
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingDetailToolbar.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingDetailToolbar.tsx
@@ -28,7 +28,7 @@ export function BookingDetailToolbar({
        <Button variant="default" leftSection={<Download size={16} />} onClick={onExport}>
          Export
        </Button>
-        <Button color="green" leftSection={<CheckCircle size={16} />} onClick={onAction}>
+        <Button color="edr-green" leftSection={<CheckCircle size={16} />} onClick={onAction}>
          Take Action
        </Button>
      </Group>
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingLifecycleStepper.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingLifecycleStepper.tsx
@@ -68,7 +68,7 @@ export function BookingLifecycleStepper({ status }: BookingLifecycleStepperProps
                  <Text
                    size="xs"
                    fw={isActive ? 600 : 500}
-                    c={isActive ? "green.7" : isComplete ? "dark" : "dimmed"}
+                    c={isActive ? "edr-green.7" : isComplete ? "dark" : "dimmed"}
                    ta="center"
                    style={{ whiteSpace: "nowrap" }}
                  >
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingPaymentCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingPaymentCard.tsx
@@ -29,7 +29,7 @@ export function BookingPaymentCard({
          </Text>
        </Group>
        <Badge
-          color={paymentStatus === "PAID" ? "green" : "yellow"}
+          color={paymentStatus === "PAID" ? "edr-green" : "yellow"}
          variant="light"
          radius="sm"
          mt="xs"
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRequestHero.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRequestHero.tsx
@@ -49,13 +49,7 @@ export function BookingRequestHero({
    <Paper
      radius="xl"
      p="xl"
-      style={{
-        position: "relative",
-        overflow: "hidden",
-        background: "#ffffff",
-        border: "1px solid var(--mantine-color-gray-2)",
-        boxShadow: "0 1px 3px rgba(15,23,42,0.04)",
-      }}
+      style={{ position: "relative", overflow: "hidden" }}
    >
      <Stack gap="lg" style={{ position: "relative" }}>
        <Group justify="space-between" align="flex-start" wrap="wrap">
@@ -70,7 +64,7 @@ export function BookingRequestHero({
          </Button>
          <Button
            variant="light"
-            color="green"
+            color="edr-green"
            size="compact-sm"
            radius="lg"
            leftSection={<RefreshCw size={15} />}
@@ -87,7 +81,7 @@ export function BookingRequestHero({
              Booking reference
            </Text>
            <Group gap="sm" align="center" wrap="wrap">
-              <Title order={2} fw={700} style={{ letterSpacing: "-0.4px", color: "#0f172a" }}>
+              <Title order={2} fw={700} style={{ letterSpacing: "-0.4px" }}>
                {booking.reference}
              </Title>
              <BookingStatusBadge status={booking.status} />
@@ -130,7 +124,7 @@ export function BookingRequestHero({
              minimumFractionDigits: 2,
            })}`}
            hint={booking.paymentStatus}
-            accent="green"
+            accent="edr-green"
          />
          <HeroTile icon={Weight} label="Cargo weight" value={`${weight} T`} hint="VGM total" accent="blue" />
          <HeroTile
@@ -177,7 +171,7 @@ function HeroTile({
  label,
  value,
  hint,
-  accent = "green",
+  accent = "edr-green",
 }: {
  icon: LucideIcon;
  label: string;
@@ -204,7 +198,7 @@ function HeroTile({
          <Text size="xs" fw={600} tt="uppercase" c="dimmed" style={{ letterSpacing: 0.4 }}>
            {label}
          </Text>
-          <Text fw={700} size="lg" lh={1.1} style={{ whiteSpace: "nowrap", color: "#0f172a" }}>
+          <Text fw={700} size="lg" lh={1.1} style={{ whiteSpace: "nowrap" }}>
            {value}
          </Text>
          {hint ? (
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingReviewNotesCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingReviewNotesCard.tsx
@@ -30,7 +30,7 @@ export function BookingReviewNotesCard({ notes }: BookingReviewNotesCardProps) {
            </ThemeIcon>
            <Stack gap={2} style={{ flex: 1 }}>
              <Group justify="space-between">
-                <Badge color="green" variant="light" size="sm" radius="sm">
+                <Badge color="edr-green" variant="light" size="sm" radius="sm">
                  {note.type}
                </Badge>
                <Text size="xs" c="dimmed">
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/SectionCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/SectionCard.tsx
@@ -9,38 +9,29 @@ export interface SectionCardProps {
  title: string;
  /** Optional one-line context shown under the title. */
  subtitle?: string;
-  /** Mantine palette key used to tint the icon chip + top accent (default green). */
+  /** Mantine palette key used to tint the icon chip (default brand green). */
  accent?: string;
  extra?: ReactNode;
  children: ReactNode;
 }

-/** Consistent card with a colored icon chip + accent stripe header used by every detail section. */
+/** Consistent card with a colored icon chip header used by every detail section. */
 export function SectionCard({
  icon: Icon,
  title,
  subtitle,
-  accent = "green",
+  accent = "edr-green",
  extra,
  children,
 }: SectionCardProps) {
  return (
    <Paper radius="md" withBorder style={{ ...detailStyles.card, overflow: "hidden" }}>
-      <Box
-        style={{
-          height: 3,
-          background: `linear-gradient(90deg, var(--mantine-color-${accent}-5) 0%, var(--mantine-color-${accent}-7) 100%)`,
-        }}
-      />
      <Group
        justify="space-between"
        px="xl"
        py="md"
        wrap="nowrap"
-        style={{
-          ...detailStyles.cardHeader,
-          background: `linear-gradient(180deg, var(--mantine-color-${accent}-0) 0%, white 100%)`,
-        }}
+        style={detailStyles.cardHeader}
      >
        <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
          <Box