From bf9520ece4b3ea3198ff4614a8e29921b4c156e6 Mon Sep 17 00:00:00 2001 From: natib21 Date: Tue, 14 Jul 2026 07:45:33 +0000 Subject: [PATCH] fix ui --- apps/edr-freight-web/backoffice/index.css | 11 ++++++----- .../backoffice/src/layout/components/TenantConfig.ts | 11 +++++++++-- .../backoffice/src/pages/DashboardPage.tsx | 2 +- .../dashboard/components/ActivityTimeline.tsx | 6 +++--- .../components/dashboard/components/HeaderBar.tsx | 2 +- .../components/dashboard/components/OrgTable.tsx | 2 +- .../components/dashboard/components/StatCard.tsx | 2 +- 7 files changed, 22 insertions(+), 14 deletions(-) diff --git a/apps/edr-freight-web/backoffice/index.css b/apps/edr-freight-web/backoffice/index.css index b0fa222de..fa9eb3e3d 100644 --- a/apps/edr-freight-web/backoffice/index.css +++ b/apps/edr-freight-web/backoffice/index.css @@ -41,11 +41,12 @@ --color-primary-950: #022c22; } -/* Main brand color for the vendored IAM UI (user-management). The shadcn - `primary` token drives bg-primary / text-primary / border-primary (1600+ - usages there). Un-layered, so it wins over the layer(theme) defaults from - @edr/ui-common (light: oklch green, dark: #0d5c2c). Same value in both - modes so the brand doesn't shift when toggling. */ +/* Main brand color. NOTE: at runtime TenantConfig.applyTenantTheme() sets + --primary (and --ring/--accent/…) as INLINE styles on from the + per-hostname tenant config, which beats any stylesheet — change the color + there (localhost → #0EA371). This block is the pre-mount fallback and fixes + --primary-foreground (the layered dark default is dark-on-dark). Same value + in both modes so the brand doesn't shift when toggling. */ :root, .dark { --primary: #0EA371; diff --git a/apps/edr-freight-web/backoffice/src/layout/components/TenantConfig.ts b/apps/edr-freight-web/backoffice/src/layout/components/TenantConfig.ts index 956c29603..758e2a75a 100644 --- a/apps/edr-freight-web/backoffice/src/layout/components/TenantConfig.ts +++ b/apps/edr-freight-web/backoffice/src/layout/components/TenantConfig.ts @@ -119,7 +119,7 @@ const tenantConfigs: Record = { appName: "Smart Office", organizationName: "Addis Ababa City Administration", logo: "", - primaryColor: "#115005", + primaryColor: "#0EA371", moduleConfig: { dms: true, performance: true, @@ -543,7 +543,14 @@ export const applyTenantTheme = (config: TenantConfig) => { root.style.setProperty("--primary", primary); root.style.setProperty("--ring", primary); root.style.setProperty("--sidebar-primary", primary); - root.style.setProperty("--accent", primary); + // Accent is a subtle hover/highlight background (dropdown items, menus) that + // must stay readable under --accent-foreground text in BOTH color schemes. + // Full-strength brand color here produced dark-pill-with-dark-text hovers, + // so use a translucent tint of the brand color instead. + root.style.setProperty( + "--accent", + `color-mix(in oklab, ${primary} 15%, transparent)`, + ); root.style.setProperty("--chart-1", primary); if (config.organizationName) { diff --git a/apps/edr-freight-web/backoffice/src/pages/DashboardPage.tsx b/apps/edr-freight-web/backoffice/src/pages/DashboardPage.tsx index 5e0be323b..701400310 100644 --- a/apps/edr-freight-web/backoffice/src/pages/DashboardPage.tsx +++ b/apps/edr-freight-web/backoffice/src/pages/DashboardPage.tsx @@ -140,7 +140,7 @@ const DashboardPage = () => { diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/ActivityTimeline.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/ActivityTimeline.tsx index d080049c9..2b4162126 100644 --- a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/ActivityTimeline.tsx +++ b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/ActivityTimeline.tsx @@ -17,11 +17,11 @@ export const ActivityTimeline = ({ activities }: ActivityTimelineProps) => { return (
-
+
    {activities.map((activity) => (
  • -
    +
    {formatDistanceToNow(new Date(activity.timestamp), { addSuffix: true, @@ -32,7 +32,7 @@ export const ActivityTimeline = ({ activities }: ActivityTimelineProps) => {
    By{" "} - + {activity.user}
    diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/HeaderBar.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/HeaderBar.tsx index a46d80c36..8af75c427 100644 --- a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/HeaderBar.tsx +++ b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/HeaderBar.tsx @@ -7,7 +7,7 @@ export const HeaderBar = () => {

    {tenantConfig.appName} Dashboard

    -
    diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/OrgTable.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/OrgTable.tsx index 663b63a23..8ee37bbc2 100644 --- a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/OrgTable.tsx +++ b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/OrgTable.tsx @@ -38,7 +38,7 @@ export const OrgTable = ({ organizations }: OrgTableProps) => { {organizations.map((org, index) => ( {org.name?.en || "N/A"} diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/StatCard.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/StatCard.tsx index 4431a8b3e..d07f6cb6f 100644 --- a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/StatCard.tsx +++ b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/StatCard.tsx @@ -34,7 +34,7 @@ export const StatCard: React.FC = ({ onClick={onClick} className={cn( "p-4 rounded-xl shadow-sm transition-colors", - variant === "primary" ? "bg-purple-600 text-white" : "bg-white dark:bg-gray-800 dark:border-gray-700", + variant === "primary" ? "bg-primary text-white" : "bg-white dark:bg-gray-800 dark:border-gray-700", onClick && "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" )} >