Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-30 01:48:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix the layout style

Browse Source
This commit is contained in:
Nathnael
2026-06-10 09:03:33 +00:00
parent f423fc2e6f
commit 97ed1c4b85
1 changed files with 67 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
apps/edr-freight-web/portal/src/components/AppLayout.tsx
View File

@@ -22,7 +22,7 @@ import {
Sun, Sun,
User, User,
} from "lucide-react"; } from "lucide-react";
import { type CSSProperties, Fragment, type ReactNode, useState } from "react"; import { Fragment, type ReactNode, useState } from "react";
export interface SidebarItem { export interface SidebarItem {
label: string; label: string;
@@ -47,18 +47,6 @@ export interface AppLayoutProps {
type Theme = "light" | "dark"; type Theme = "light" | "dark";
const THEME_KEY = "edr-theme"; const THEME_KEY = "edr-theme";
const EDR = {
primary: "#0EA371",
primaryDark: "#0A6F4D",
soft: "#ECF6F1",
border: "#E6ECF2",
bg: "#F4F7FA",
text: "#10202F",
muted: "#6B7C8E",
ink: "#0C1A2B",
accent: "#F2A516",
};
function getStoredTheme(): Theme { function getStoredTheme(): Theme {
if (typeof window === "undefined") return "light"; if (typeof window === "undefined") return "light";
const stored = localStorage.getItem(THEME_KEY); const stored = localStorage.getItem(THEME_KEY);
@@ -94,18 +82,24 @@ function getActivePage(items: SidebarItem[], activePath: string): { label: strin
const navClassNames = (active: boolean) => { const navClassNames = (active: boolean) => {
if (active) { if (active) {
return { return {
root: `rounded-[10px] font-medium transition-all duration-150 bg-[#ECF6F1]! ring-1 ring-inset ring-[#0EA371]/15`, root: "rounded-[10px] font-medium transition-all duration-150 bg-[var(--mantine-color-edr-soft-0)]! ring-1 ring-inset ring-[var(--mantine-color-edr-green-5)]/15",
label: `text-[#0A6F4D]! font-bold!`, label: "text-[var(--mantine-color-edr-green-7)]! font-bold!",
section: `text-[#0A6F4D]!`, section: "text-[var(--mantine-color-edr-green-7)]!",
}; };
} }
return { return {
root: `rounded-[10px] font-medium transition-all duration-150 hover:bg-[#F1F4F7]!`, root: "rounded-[10px] font-medium transition-all duration-150 hover:bg-[var(--mantine-color-edr-slate-soft-0)]!",
label: `text-[#3D4D5C]! font-semibold! hover:text-[#0C1A2B]!`, label: "text-[var(--mantine-color-edr-slate-0)]! font-semibold! hover:text-[var(--mantine-color-edr-ink-0)]!",
section: `text-[#54657A]! hover:text-[#0C1A2B]!`, section: "text-[var(--mantine-color-edr-muted-0)]! hover:text-[var(--mantine-color-edr-ink-0)]!",
}; };
}; };
// 36×36 header control chips
const islandCls =
"size-9 rounded-full border border-[var(--mantine-color-edr-border-0)] bg-white flex items-center justify-center shrink-0 cursor-pointer";
const squareIslandCls =
"size-9 rounded-[10px] border border-[var(--mantine-color-edr-border-0)] bg-white flex items-center justify-center shrink-0 cursor-pointer";
export function AppLayout({ export function AppLayout({
title = "EDR Freight", title = "EDR Freight",
sidebarItems, sidebarItems,
@@ -139,21 +133,6 @@ export function AppLayout({
activePath === item.href.toLowerCase() || activePath === item.href.toLowerCase() ||
activePath.startsWith(item.href.toLowerCase() + "/"); activePath.startsWith(item.href.toLowerCase() + "/");
// Shared header "island" styles — every control is a consistent 36px chip.
const islandStyle: CSSProperties = {
width: 36,
height: 36,
borderRadius: 999,
border: `1px solid ${EDR.border}`,
backgroundColor: "#fff",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
cursor: "pointer",
};
const toggleStyle: CSSProperties = { ...islandStyle, borderRadius: 10 };
return ( return (
<AppShell <AppShell
layout="alt" layout="alt"
@@ -161,37 +140,27 @@ export function AppLayout({
header={{ height: 56 }} header={{ height: 56 }}
padding={0} padding={0}
> >
{/* ── Header (frosted glass; compact floating islands, mirrors the pen) ── */} {/* ── Header ── */}
<AppShell.Header <AppShell.Header
withBorder={false} withBorder={false}
style={{ style={{
backdropFilter: "blur(14px)", backdropFilter: "blur(14px)",
WebkitBackdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)",
border: "none", background: "transparent",
boxShadow: "none", boxShadow: "none",
background:'transparent', border: "none",
}} }}
> >
<Group h="100%" px={24} justify="space-between" wrap="nowrap"> <Group h="100%" px={24} justify="space-between" wrap="nowrap">
{/* Left: sidebar toggle + page title */}
<Group gap={12} wrap="nowrap" align="center"> <Group gap={12} wrap="nowrap" align="center">
<UnstyledButton onClick={toggleMobile} style={toggleStyle} aria-label="Toggle sidebar"> <UnstyledButton onClick={toggleMobile} className={squareIslandCls} aria-label="Toggle sidebar">
<MenuIcon size={18} color={EDR.text} strokeWidth={1.8} /> <MenuIcon size={18} color="var(--mantine-color-edr-text-0)" strokeWidth={1.8} />
</UnstyledButton> </UnstyledButton>
<Text <Text fw={700} fz="lg" c="edr-text">
style={{
fontFamily: '"Inter", sans-serif',
fontSize: 16,
fontWeight: 700,
color: EDR.text,
lineHeight: 1,
}}
>
{activePage ? activePage.label : title} {activePage ? activePage.label : title}
</Text> </Text>
</Group> </Group>
{/* Right: search + bell + avatar */}
<Group gap={10} wrap="nowrap" align="center"> <Group gap={10} wrap="nowrap" align="center">
{/* Search pill */} {/* Search pill */}
<Group <Group
@@ -202,22 +171,22 @@ export function AppLayout({
width: 260, width: 260,
height: 36, height: 36,
borderRadius: 999, borderRadius: 999,
border: `1px solid ${EDR.border}`, border: "1px solid var(--mantine-color-edr-border-0)",
backgroundColor: "#fff", backgroundColor: "var(--mantine-color-white)",
padding: "0 14px", padding: "0 14px",
cursor: "text", cursor: "text",
}} }}
> >
<Search size={15} color={EDR.muted} strokeWidth={1.8} /> <Search size={15} color="var(--mantine-color-edr-muted-0)" strokeWidth={1.8} />
<Text size="sm" style={{ color: EDR.muted, userSelect: "none" }}> <Text size="sm" c="edr-muted" style={{ userSelect: "none" }}>
Search shipments, bookings… Search shipments, bookings…
</Text> </Text>
</Group> </Group>
{/* Bell */} {/* Bell */}
<Box style={{ position: "relative" }}> <Box style={{ position: "relative" }}>
<UnstyledButton style={islandStyle} aria-label="Notifications"> <UnstyledButton className={islandCls} aria-label="Notifications">
<Bell size={17} color={EDR.text} strokeWidth={1.8} /> <Bell size={17} color="var(--mantine-color-edr-text-0)" strokeWidth={1.8} />
</UnstyledButton> </UnstyledButton>
<Box <Box
style={{ style={{
@@ -227,30 +196,30 @@ export function AppLayout({
width: 7, width: 7,
height: 7, height: 7,
borderRadius: "50%", borderRadius: "50%",
backgroundColor: EDR.accent, backgroundColor: "var(--mantine-color-edr-accent-0)",
border: "1.5px solid #fff", border: "1.5px solid var(--mantine-color-white)",
pointerEvents: "none", pointerEvents: "none",
}} }}
/> />
</Box> </Box>
{enableThemeToggle && ( {enableThemeToggle && (
<UnstyledButton onClick={toggleTheme} style={islandStyle} aria-label="Toggle theme"> <UnstyledButton onClick={toggleTheme} className={islandCls} aria-label="Toggle theme">
{theme === "dark" {theme === "dark"
? <Sun size={17} color={EDR.text} strokeWidth={1.8} /> ? <Sun size={17} color="var(--mantine-color-edr-text-0)" strokeWidth={1.8} />
: <Moon size={17} color={EDR.text} strokeWidth={1.8} />} : <Moon size={17} color="var(--mantine-color-edr-text-0)" strokeWidth={1.8} />}
</UnstyledButton> </UnstyledButton>
)} )}
{/* Avatar pill */} {/* Avatar dropdown */}
<Menu width={220} position="bottom-end" withinPortal shadow="md" offset={8} radius="md"> <Menu width={220} position="bottom-end" withinPortal shadow="md" offset={8} radius="md">
<Menu.Target> <Menu.Target>
<UnstyledButton <UnstyledButton
style={{ style={{
height: 36, height: 36,
borderRadius: 999, borderRadius: 999,
border: `1px solid ${EDR.border}`, border: "1px solid var(--mantine-color-edr-border-0)",
backgroundColor: "#fff", backgroundColor: "var(--mantine-color-white)",
padding: "0 10px 0 4px", padding: "0 10px 0 4px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@@ -261,13 +230,12 @@ export function AppLayout({
<Avatar radius="xl" size={28} color="edr-green.5"> <Avatar radius="xl" size={28} color="edr-green.5">
<Text fw={700} fz={12} c="white">{initials}</Text> <Text fw={700} fz={12} c="white">{initials}</Text>
</Avatar> </Avatar>
<ChevronDown size={15} color={EDR.muted} strokeWidth={1.8} /> <ChevronDown size={15} color="var(--mantine-color-edr-muted-0)" strokeWidth={1.8} />
</UnstyledButton> </UnstyledButton>
</Menu.Target> </Menu.Target>
<Menu.Dropdown> <Menu.Dropdown>
<Box px="sm" py="xs"> <Box px="sm" py="xs">
<Text size="sm" fw={600} truncate style={{ color: EDR.text }}>{userName}</Text> <Text size="sm" fw={600} truncate c="edr-text">{userName}</Text>
{userEmail && <Text size="xs" c="dimmed" truncate>{userEmail}</Text>} {userEmail && <Text size="xs" c="dimmed" truncate>{userEmail}</Text>}
</Box> </Box>
<Divider /> <Divider />
@@ -287,49 +255,33 @@ export function AppLayout({
<AppShell.Navbar <AppShell.Navbar
withBorder={false} withBorder={false}
style={{ style={{
backgroundColor: "#ffffff", backgroundColor: "var(--mantine-color-white)",
borderRight: `1px solid ${EDR.border}`, borderRight: "1px solid var(--mantine-color-edr-border-0)",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
}} }}
> >
{/* Brand */} {/* Brand */}
<Box <Box className="h-[60px] shrink-0 flex items-center px-[18px]">
style={{
height: 60,
flexShrink: 0,
display: "flex",
alignItems: "center",
padding: "0 18px",
}}
>
<Group gap={11} wrap="nowrap"> <Group gap={11} wrap="nowrap">
<img <img
src="/assets/edr-logo.png" src="/assets/edr-logo.png"
alt="EDR" alt="EDR"
style={{ width: 40, height: 40, objectFit: "contain", flexShrink: 0 }} className="size-10 object-contain shrink-0"
/> />
<Box> <Box>
<Text <Text
fw={800}
style={{ style={{
fontFamily: '"Inter", sans-serif',
fontWeight: 800,
fontSize: 19, fontSize: 19,
letterSpacing: "0.03em", letterSpacing: "0.03em",
color: EDR.primary, color: "var(--mantine-color-edr-green-5)",
lineHeight: 1.15, lineHeight: 1.15,
}} }}
> >
EDR FREIGHT EDR FREIGHT
</Text> </Text>
<Text <Text fz={10.5} fw={500} c="edr-muted" style={{ lineHeight: 1.2 }}>
style={{
fontSize: 10.5,
fontWeight: 500,
color: EDR.muted,
lineHeight: 1.2,
}}
>
Ethio–Djibouti Railway Ethio–Djibouti Railway
</Text> </Text>
</Box> </Box>
@@ -350,17 +302,13 @@ export function AppLayout({
item.section && item.section !== prevSection ? ( item.section && item.section !== prevSection ? (
<Text <Text
key={`section-${item.section}`} key={`section-${item.section}`}
size="xs" fz={11}
tt="uppercase" tt="uppercase"
px="sm" px="sm"
mt={i === 0 ? 4 : "md"} mt={i === 0 ? 4 : "md"}
mb={4} mb={4}
style={{ c="edr-muted"
fontWeight: 600, style={{ fontWeight: 600, letterSpacing: "0.08em" }}
letterSpacing: "0.08em",
color: EDR.muted,
fontSize: 11,
}}
> >
{item.section} {item.section}
</Text> </Text>
@@ -421,42 +369,38 @@ export function AppLayout({
marginBottom: 10, marginBottom: 10,
}} }}
> >
{/* Train image fills the full card */}
<img <img
src="/assets/train-edr.jpg" src="/assets/train-edr.jpg"
alt="" alt=""
style={{ style={{
position: "absolute", position: "absolute",
bottom:"-16px", bottom: "-16px",
left:0, left: 0,
right:"-70px", right: "-70px",
width: "120%", width: "120%",
objectFit: "cover", objectFit: "cover",
}} }}
/> />
{/* Diagonal green overlay: lower-left → upper-right cut */}
<Box <Box
style={{ style={{
position: "absolute", position: "absolute",
inset: 0, inset: 0,
top:"-75%", top: "-75%",
background: "linear-gradient(165deg, #006149 40%, #0DC9A4 70%, #0DC9A402 80%)", background: "linear-gradient(165deg, #006149 40%, #0DC9A4 70%, #0DC9A402 80%)",
clipPath: "polygon(0 0, 100% 0, 100% 58%, 0 72%)", clipPath: "polygon(0 0, 100% 0, 100% 58%, 0 72%)",
}} }}
/> />
<Box
{/* Text sits on top of the green overlay */} style={{ position: "relative", zIndex: 1, padding: "16px 16px 0" }}
<Box style={{ position: "relative", zIndex: 1, padding: "16px 16px 0" }} className="max-w-[180px]"> className="max-w-[180px]"
<Text style={{ fontSize: 15, fontWeight: 800, color: "#fff", lineHeight: 1.3, marginBottom: 4 }}> >
<Text fw={800} style={{ fontSize: 15, color: "#fff", lineHeight: 1.3, marginBottom: 4 }}>
Moving Africa Forward Moving Africa Forward
</Text> </Text>
<Text style={{ fontSize: 11, color: "rgba(255,255,255,0.7)", lineHeight: 1.5 }}> <Text style={{ fontSize: 11, color: "rgba(255,255,255,0.7)", lineHeight: 1.5 }}>
Reliable. Efficient. Connected. Reliable. Efficient. Connected.
</Text> </Text>
</Box> </Box>
{/* Learn More — visible on the image area */}
<Box <Box
style={{ style={{
position: "absolute", position: "absolute",
@@ -466,22 +410,24 @@ export function AppLayout({
display: "inline-flex", display: "inline-flex",
alignItems: "center", alignItems: "center",
gap: 5, gap: 5,
backgroundColor: "#fff", backgroundColor: "var(--mantine-color-white)",
borderRadius: 8, borderRadius: 8,
padding: "6px 12px", padding: "6px 12px",
cursor: "pointer", cursor: "pointer",
}} }}
> >
<Text style={{ fontSize: 12, fontWeight: 600, color: EDR.primaryDark }}>Learn More</Text> <Text fw={600} style={{ fontSize: 12, color: "var(--mantine-color-edr-green-7)" }}>
<span style={{ fontSize: 12, color: EDR.primaryDark }}>→</span> Learn More
</Text>
<span style={{ fontSize: 12, color: "var(--mantine-color-edr-green-7)" }}>→</span>
</Box> </Box>
</Box> </Box>
{/* Profile */} {/* Profile footer */}
<Box <Box
style={{ style={{
borderRadius: 12, borderRadius: 12,
border: `1px solid ${EDR.border}`, border: "1px solid var(--mantine-color-edr-border-0)",
padding: "10px", padding: "10px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@@ -489,25 +435,20 @@ export function AppLayout({
cursor: "pointer", cursor: "pointer",
}} }}
> >
<Avatar <Avatar radius="xl" size={38} color="edr-green.5" style={{ flexShrink: 0 }}>
radius="xl"
size={38}
color="edr-green.5"
style={{ flexShrink: 0 }}
>
<Text fw={600} fz={13} c="white">{initials}</Text> <Text fw={600} fz={13} c="white">{initials}</Text>
</Avatar> </Avatar>
<Box style={{ minWidth: 0, flex: 1 }}> <Box style={{ minWidth: 0, flex: 1 }}>
<Text size="sm" fw={600} truncate style={{ color: EDR.text, lineHeight: 1.3 }}> <Text size="sm" fw={600} truncate c="edr-text" style={{ lineHeight: 1.3 }}>
{userName} {userName}
</Text> </Text>
{userEmail && ( {userEmail && (
<Text size="xs" truncate style={{ color: EDR.muted, lineHeight: 1.3 }}> <Text size="xs" truncate c="edr-muted" style={{ lineHeight: 1.3 }}>
{userEmail} {userEmail}
</Text> </Text>
)} )}
</Box> </Box>
<ChevronDown size={16} color={EDR.muted} style={{ flexShrink: 0 }} /> <ChevronDown size={16} color="var(--mantine-color-edr-muted-0)" style={{ flexShrink: 0 }} />
</Box> </Box>
</Box> </Box>
</AppShell.Navbar> </AppShell.Navbar>
@@ -515,7 +456,7 @@ export function AppLayout({
{/* ── Main ── */} {/* ── Main ── */}
<AppShell.Main <AppShell.Main
style={{ style={{
backgroundColor: EDR.bg, backgroundColor: "var(--mantine-color-edr-bg-0)",
backgroundImage: backgroundImage:
"radial-gradient(58% 42% at 100% 0%, rgba(14,163,113,0.16) 0%, rgba(14,163,113,0.06) 38%, rgba(14,163,113,0) 72%)", "radial-gradient(58% 42% at 100% 0%, rgba(14,163,113,0.16) 0%, rgba(14,163,113,0.06) 38%, rgba(14,163,113,0) 72%)",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",