style: use the proper primary color

This commit is contained in:
Nathnael
2026-06-22 08:11:11 +00:00
parent ec708d85b3
commit feddce8a0c
62 changed files with 182 additions and 200 deletions

View File

@@ -95,7 +95,7 @@ export const AssignedBookingsPanel = ({
}}
>
<Group gap={8} wrap="nowrap" align="flex-start">
<ThemeIcon size={30} radius="md" variant="light" color="green">
<ThemeIcon size={30} radius="md" variant="light" color="edr-green">
<Package size={16} />
</ThemeIcon>
<Box style={{ flex: 1, minWidth: 0 }}>
@@ -107,7 +107,7 @@ export const AssignedBookingsPanel = ({
<Badge
size="xs"
variant="light"
color="green"
color="edr-green"
leftSection={<TrainFront size={9} />}
>
{wagonCountByBooking.get(booking.id)}

View File

@@ -43,7 +43,7 @@ function InfoRow({
return (
<Group justify="space-between" wrap="nowrap" gap="md">
<Group gap={8} wrap="nowrap">
<ThemeIcon size={28} radius="md" variant="light" color="green">
<ThemeIcon size={28} radius="md" variant="light" color="edr-green">
{icon}
</ThemeIcon>
<Text size="sm" c="dimmed">
@@ -146,7 +146,7 @@ export const BookingDetailModal = ({
bookingWagons.length ? (
<Group gap={4} justify="flex-end">
{bookingWagons.map((w) => (
<Badge key={w.id} size="sm" variant="outline" color="green" radius="sm">
<Badge key={w.id} size="sm" variant="outline" color="edr-green" radius="sm">
#{w.sequenceNo}
</Badge>
))}

View File

@@ -29,7 +29,7 @@ interface CompositionBookingTabsProps {
type TabKey = "assigned" | "unassigned" | "payment" | "expired" | "removed";
const TAB_META: Record<TabKey, { label: string; icon: LucideIcon; color: string }> = {
assigned: { label: "Assigned to train", icon: PackageCheck, color: "green" },
assigned: { label: "Assigned to train", icon: PackageCheck, color: "edr-green" },
unassigned: { label: "Unassigned (ready to load)", icon: PackagePlus, color: "orange" },
payment: { label: "Awaiting payment", icon: CreditCard, color: "orange" },
expired: { label: "Expired bookings", icon: XCircle, color: "red" },
@@ -152,7 +152,7 @@ export const CompositionBookingTabs = ({
value={tab}
onChange={(v) => v && setTab(v as TabKey)}
variant="default"
color="green"
color="edr-green"
style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}
>
<Tabs.List grow>
@@ -220,7 +220,7 @@ export const CompositionBookingTabs = ({
}}
>
<Group gap={5} wrap="nowrap">
<PackageCheck size={13} color="var(--mantine-color-green-7)" />
<PackageCheck size={13} color="var(--mantine-color-edr-green-7)" />
<Text size="xs" c="dimmed">
{assignedCount} on train
</Text>

View File

@@ -60,7 +60,7 @@ export const RemoveBookingConfirmModal = ({
<Text fw={800} size="sm">
{target?.reference ?? "Booking"}
</Text>
<Badge variant="light" color="green" leftSection={<TrainFront size={10} />}>
<Badge variant="light" color="edr-green" leftSection={<TrainFront size={10} />}>
{target?.wagonCount ?? 0} wagon{target?.wagonCount === 1 ? "" : "s"}
</Badge>
</Group>

View File

@@ -165,7 +165,7 @@ export const TrainConsistView = ({
{selectedWagon ? (
<Box>
<Group gap={6} mb={6} wrap="nowrap">
<Badge variant="light" color="green" radius="sm">
<Badge variant="light" color="edr-green" radius="sm">
Editing wagon #{selectedWagon.sequenceNo}
</Badge>
<Text size="xs" c="dimmed">

View File

@@ -48,18 +48,18 @@ const YardFleetBanner = ({ fleetAtOrigin }: { fleetAtOrigin: FleetAvailabilityRo
py={6}
style={{
borderRadius: 8,
background: "var(--mantine-color-green-0)",
border: "1px solid var(--mantine-color-green-1)",
background: "var(--mantine-color-edr-green-0)",
border: "1px solid var(--mantine-color-edr-green-1)",
}}
>
<Group gap={5} wrap="nowrap">
<MapPin size={13} color="var(--mantine-color-green-7)" />
<Text size="xs" fw={700} c="green.8">
<MapPin size={13} color="var(--mantine-color-edr-green-7)" />
<Text size="xs" fw={700} c="edr-green.8">
Origin yard
</Text>
</Group>
{fleetAtOrigin.map((row) => (
<Badge key={row.wagonTypeId} size="sm" variant="light" color="green">
<Badge key={row.wagonTypeId} size="sm" variant="light" color="edr-green">
{row.wagonTypeCode}: {row.available}
</Badge>
))}
@@ -148,7 +148,7 @@ export const UnassignedBookingsPanel = ({
}
style={{
cursor: "pointer",
borderColor: isActive ? "var(--mantine-color-green-5)" : undefined,
borderColor: isActive ? "var(--mantine-color-edr-green-5)" : undefined,
}}
>
<Stack gap={6}>
@@ -162,7 +162,7 @@ export const UnassignedBookingsPanel = ({
{booking.reference}
</Text>
{booking.priorityScore ? (
<Badge size="xs" color="green">
<Badge size="xs" color="edr-green">
P{booking.priorityScore}
</Badge>
) : null}
@@ -194,7 +194,7 @@ export const UnassignedBookingsPanel = ({
<Button
size="xs"
variant="light"
color="green"
color="edr-green"
disabled={!fits}
onClick={(e) => {
e.stopPropagation();

View File

@@ -47,7 +47,7 @@ export const WagonCard = ({
<Card.Section withBorder inheritPadding py="xs" style={{ background: freightBrand.mutedBg }}>
<Group justify="space-between">
<Group gap={6}>
<ThemeIcon size={28} radius="md" variant="white" color="green">
<ThemeIcon size={28} radius="md" variant="white" color="edr-green">
<TrainFront size={16} />
</ThemeIcon>
<div>
@@ -55,7 +55,7 @@ export const WagonCard = ({
<Text size="sm" fw={800}>
Wagon #{wagon.sequenceNo}
</Text>
<Badge size="xs" variant="light" color="green">
<Badge size="xs" variant="light" color="edr-green">
{wagonType}
</Badge>
</Group>
@@ -142,7 +142,7 @@ export const WagonCard = ({
</Group>
<Progress
value={Math.min(weightPercent, 100)}
color={weightPercent > 90 ? "red" : weightPercent > 75 ? "orange" : "green"}
color={weightPercent > 90 ? "red" : weightPercent > 75 ? "orange" : "edr-green"}
size="sm"
radius="xl"
/>