mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
76bfbe1b17
- Added tab navigation for All, Import, Export, and On hold shipments. - Implemented a new LivePill component to show real-time updates. - Refactored shipment filtering logic to accommodate new tab functionality. - Improved UI elements including buttons and text inputs for better user experience. - Updated styles for table cells to allow text wrapping for long company names. - Adjusted theme to use Space Grotesk font for headings.
61 lines
3.6 KiB
TypeScript
61 lines
3.6 KiB
TypeScript
/** Shared surfaces for booking list & detail — frosted glass, brand accents. */
|
|
|
|
export const bookingGlass = {
|
|
card: "border border-border/50 bg-card/75 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/60",
|
|
panel:
|
|
"border border-border/50 bg-card/80 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/65",
|
|
rail: "border border-border/40 bg-muted/20 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/15",
|
|
iconWell:
|
|
"border border-border/50 bg-background/70 text-foreground/75 shadow-sm backdrop-blur-sm supports-[backdrop-filter]:bg-background/50",
|
|
iconWellHero:
|
|
"border border-border/50 bg-background/60 text-foreground shadow-sm ring-1 ring-border/30 backdrop-blur-md supports-[backdrop-filter]:bg-background/45",
|
|
activeTab:
|
|
"border border-[color:var(--freight-brand-border)] bg-[color:var(--freight-brand-muted)] shadow-sm backdrop-blur-md ring-1 ring-[color:var(--freight-brand-ring)]",
|
|
iconWellGreen:
|
|
"border border-[color:var(--freight-brand-border)] bg-[color:var(--freight-brand-muted)] text-[color:var(--freight-brand)] shadow-sm backdrop-blur-sm",
|
|
tabRail:
|
|
"rounded-xl border border-border/60 bg-muted/10 p-2 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/5",
|
|
tableHeader:
|
|
"bg-muted/30 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/20",
|
|
} as const;
|
|
|
|
export const bookingSurface = {
|
|
page: "min-h-screen bg-background ",
|
|
pageInner: "mx-auto max-w-[1600px] space-y-5 ",
|
|
hero: `relative overflow-hidden rounded-2xl ${bookingGlass.card}`,
|
|
heroGlow:
|
|
"pointer-events-none absolute -right-24 -top-24 size-72 rounded-full bg-muted/40 blur-3xl",
|
|
heroSheen:
|
|
"pointer-events-none absolute inset-0 bg-gradient-to-br from-background/40 via-transparent to-muted/20",
|
|
panel: `overflow-hidden rounded-xl ${bookingGlass.panel}`,
|
|
panelToolbar: `flex flex-wrap items-center justify-between gap-3 border-b border-border/50 px-4 py-3.5 sm:px-5 ${bookingGlass.rail}`,
|
|
tableWrap: "px-0",
|
|
sectionCard: `overflow-hidden rounded-xl transition-shadow duration-200 hover:shadow-md ${bookingGlass.card}`,
|
|
sectionHeader:
|
|
"flex items-center gap-3 border-b border-border/50 bg-muted/15 px-5 py-4 backdrop-blur-sm",
|
|
sectionBody: "px-5 py-5",
|
|
detailHero: `relative overflow-hidden rounded-2xl ${bookingGlass.card}`,
|
|
sectionIcon: `flex size-9 shrink-0 items-center justify-center rounded-lg ${bookingGlass.iconWellGreen}`,
|
|
sectionIconLg: `flex size-11 shrink-0 items-center justify-center rounded-xl ${bookingGlass.iconWellGreen}`,
|
|
valueCard:
|
|
"rounded-xl border border-[color:var(--freight-brand-border)] bg-[color:var(--freight-brand-muted)] p-4 shadow-sm backdrop-blur-md",
|
|
stickySidebar: "lg:sticky lg:top-6 lg:self-start",
|
|
metricTile:
|
|
"rounded-lg border border-border/50 bg-background/70 px-4 py-3 shadow-xs backdrop-blur-sm",
|
|
emptyState:
|
|
"flex flex-col items-center justify-center gap-3 px-6 py-16 text-center",
|
|
} as const;
|
|
|
|
export const bookingInput = {
|
|
search:
|
|
"h-10 w-full rounded-lg border border-border/60 bg-background/80 pl-10 text-sm shadow-xs backdrop-blur-sm transition-[box-shadow,border-color] placeholder:text-muted-foreground focus-visible:border-[color:var(--freight-brand)] focus-visible:ring-[3px] focus-visible:ring-[color:var(--freight-brand-ring)] sm:max-w-xs",
|
|
} as const;
|
|
|
|
export const bookingTable = {
|
|
headerCell:
|
|
"whitespace-nowrap text-[10px] font-semibold uppercase tracking-[0.08em] text-edr-muted",
|
|
rowHover:
|
|
"transition-colors hover:bg-muted/25 data-[state=selected]:bg-muted/30",
|
|
rowIcon: `flex size-10 shrink-0 items-center justify-center rounded-xl ${bookingGlass.iconWellGreen}`,
|
|
} as const;
|