From 1d1824879586728f946130429e79668db9ee47bc Mon Sep 17 00:00:00 2001 From: natib21 Date: Tue, 14 Jul 2026 07:20:01 +0000 Subject: [PATCH] ui --- apps/edr-freight-web/backoffice/index.css | 22 +++++++++++++++++++ .../src/shared/hooks/useDarkMode.ts | 14 +++++++----- .../src/user-management/Applayout.tsx | 8 +++++-- apps/edr-freight-web/portal/index.css | 5 +++++ packages/ui-common/src/styles/index.css | 2 +- 5 files changed, 43 insertions(+), 8 deletions(-) diff --git a/apps/edr-freight-web/backoffice/index.css b/apps/edr-freight-web/backoffice/index.css index 132d7d926..f9042e3ce 100644 --- a/apps/edr-freight-web/backoffice/index.css +++ b/apps/edr-freight-web/backoffice/index.css @@ -1,6 +1,12 @@ @import "tailwindcss"; @import "@edr/ui-common/theme.css" layer(theme); +/* The app toggles dark mode by setting the `dark` class on (see + main.tsx / FreightDashboardLayout). Without this, Tailwind v4 compiles + `dark:` utilities to `@media (prefers-color-scheme: dark)` and they follow + the OS setting instead of the in-app toggle. */ +@custom-variant dark (&:where(.dark, .dark *)); + /* Bridge the central Mantine theme into Tailwind. freightMantineTheme (createTheme) is the single source of truth; these just alias its generated CSS variables so `bg-edr-*`, `text-edr-*`, `border-edr-*` utilities resolve @@ -17,6 +23,22 @@ --color-edr-soft: var(--mantine-color-edr-soft-6); --color-edr-ink: var(--mantine-color-edr-ink-6); --color-edr-accent: var(--mantine-color-edr-accent-6); + + /* Numeric `primary-*` scale used throughout the vendored IAM UI + (src/user-management, src/shared, …). Aliased to the edr-green Mantine + tuple (freight-brand.ts) so bg-primary-50 … text-primary-900 resolve to + brand shades; without these the utilities are simply not generated. */ + --color-primary-50: var(--mantine-color-edr-green-0); + --color-primary-100: var(--mantine-color-edr-green-1); + --color-primary-200: var(--mantine-color-edr-green-2); + --color-primary-300: var(--mantine-color-edr-green-3); + --color-primary-400: var(--mantine-color-edr-green-4); + --color-primary-500: var(--mantine-color-edr-green-5); + --color-primary-600: var(--mantine-color-edr-green-6); + --color-primary-700: var(--mantine-color-edr-green-7); + --color-primary-800: var(--mantine-color-edr-green-8); + --color-primary-900: var(--mantine-color-edr-green-9); + --color-primary-950: #022c22; } :root { diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useDarkMode.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useDarkMode.ts index 8cbc4470a..273064cec 100644 --- a/apps/edr-freight-web/backoffice/src/shared/hooks/useDarkMode.ts +++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useDarkMode.ts @@ -1,11 +1,15 @@ import { useEffect, useState } from "react"; +// Same storage key/values as main.tsx and FreightDashboardLayout so the +// vendored IAM UI toggle and the host dashboard toggle stay in sync. +const THEME_STORAGE_KEY = "edr-theme"; + export const useDarkMode = () => { const [isDarkMode, setIsDarkMode] = useState(() => { // Initialize from localStorage or system preference - const savedTheme = localStorage.getItem("darkMode"); - if (savedTheme) { - return savedTheme === "true"; + const savedTheme = localStorage.getItem(THEME_STORAGE_KEY); + if (savedTheme === "dark" || savedTheme === "light") { + return savedTheme === "dark"; } return window.matchMedia("(prefers-color-scheme: dark)").matches; }); @@ -14,10 +18,10 @@ export const useDarkMode = () => { // Apply dark mode class on mount and when isDarkMode changes if (isDarkMode) { document.documentElement.classList.add("dark"); - localStorage.setItem("darkMode", "true"); + localStorage.setItem(THEME_STORAGE_KEY, "dark"); } else { document.documentElement.classList.remove("dark"); - localStorage.setItem("darkMode", "false"); + localStorage.setItem(THEME_STORAGE_KEY, "light"); } }, [isDarkMode]); diff --git a/apps/edr-freight-web/backoffice/src/user-management/Applayout.tsx b/apps/edr-freight-web/backoffice/src/user-management/Applayout.tsx index 0362232e2..0951337e4 100644 --- a/apps/edr-freight-web/backoffice/src/user-management/Applayout.tsx +++ b/apps/edr-freight-web/backoffice/src/user-management/Applayout.tsx @@ -14,16 +14,20 @@ export const AppLayout = () => { const userRoles = user?.roles?.map((role) => role.key) || []; const isSuperAdmin = userRoles.includes("super_admin"); + // html/body/#root are `overflow: hidden` (index.css) — the host chrome + // scrolls inside FreightDashboardLayout. This subtree renders its own + // full-page layout instead, so it must be its own scroll container or + // nothing scrolls. Top/AppMenuTabs are `fixed`, unaffected by the scroller. if (isAuthPage) { return ( -
+
); } return ( -
+
diff --git a/apps/edr-freight-web/portal/index.css b/apps/edr-freight-web/portal/index.css index aa14f97fe..856c46262 100644 --- a/apps/edr-freight-web/portal/index.css +++ b/apps/edr-freight-web/portal/index.css @@ -1,6 +1,11 @@ @import "tailwindcss"; @import "@edr/ui-common/theme.css" layer(theme); +/* Dark mode is toggled via the `dark` class on . Without this, Tailwind + v4 compiles `dark:` utilities to `@media (prefers-color-scheme: dark)` and + they follow the OS setting instead of the in-app toggle. */ +@custom-variant dark (&:where(.dark, .dark *)); + /* Bridge the central Mantine theme into Tailwind. Mantine (createTheme) is the single source of truth; these just alias its generated CSS variables so `bg-edr-*`, `text-edr-*`, `border-edr-*` utilities resolve to the same tokens. */ diff --git a/packages/ui-common/src/styles/index.css b/packages/ui-common/src/styles/index.css index 8b5d67a02..0ce8702a9 100644 --- a/packages/ui-common/src/styles/index.css +++ b/packages/ui-common/src/styles/index.css @@ -1,4 +1,4 @@ @import "tailwindcss"; @import "tw-animate-css"; @import "./theme.css"; -@custom-variant dark (&: where(.dark, .dark *)); +@custom-variant dark (&:where(.dark, .dark *));