Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-26 18:42:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui

Browse Source
This commit is contained in:
natib21
2026-07-14 07:20:01 +00:00
parent 5117cdd357
commit 1d18248795
5 changed files with 43 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/edr-freight-web/backoffice/index.css
View File

@@ -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 <html> (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 {

14
apps/edr-freight-web/backoffice/src/shared/hooks/useDarkMode.ts
View File

@@ -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]);

8
apps/edr-freight-web/backoffice/src/user-management/Applayout.tsx
View File

@@ -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 (
<div className="min-h-screen w-full bg-gray-50">
<div className="h-dvh w-full overflow-y-auto bg-gray-50">
<Outlet />
</div>
);
}
return (
<div className="w-full flex flex-col min-h-screen bg-background text-foreground">
<div className="w-full h-dvh overflow-y-auto flex flex-col bg-background text-foreground">
<Top onToggleSidebar={toggleSidebar} showRecordManagementShortcut={!isSuperAdmin} />
<AppMenuTabs />
<div className="px-2 pb-2 pt-8 sm:px-4 sm:pb-4 sm:pt-10 flex-1">

5
apps/edr-freight-web/portal/index.css
View File

@@ -1,6 +1,11 @@
@import "tailwindcss";
@import "@edr/ui-common/theme.css" layer(theme);
/* Dark mode is toggled via the `dark` class on <html>. 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. */

2
packages/ui-common/src/styles/index.css
View File

@@ -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 *));