diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/iamConfig.ts b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/iamConfig.ts index 2faa65bd7..923efad0e 100644 --- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/iamConfig.ts +++ b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/iamConfig.ts @@ -1,36 +1,208 @@ import type { DesignConfig } from "@tria-plc/iamui"; +import { + FREIGHT_BRAND, + FREIGHT_BRAND_DARK, + FREIGHT_BRAND_LIGHT, + freightBrand, +} from "@/theme/freight-brand"; + export const iamConfig: DesignConfig = { brand: { appName: "EDR Freight Backoffice", logoUrl: "/assets/logo.svg", }, colors: { - primary: "#1d7754", + primary: FREIGHT_BRAND, primaryForeground: "#ffffff", - secondary: "#ebb53d", - background: "#f6f8f4", - foreground: "#12261c", - border: "#d7e1da", - muted: "#eaf1ec", - mutedForeground: "#557164", + secondary: "#f4f7fb", + background: "#f7f9fb", + foreground: "#0f172a", + border: "#eef1f4", + muted: "#f1f5f9", + mutedForeground: "#64748b", card: "#ffffff", - danger: "#c93d2b", + sidebar: "#ffffff", + danger: "#ef4444", }, typography: { - fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif", - headingFontFamily: "Inter, ui-sans-serif, system-ui, sans-serif", + fontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif", + headingFontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif", + baseFontSize: "15px", + fontWeight: "500", }, shape: { - radius: "0.875rem", + radius: "1rem", + }, + shadows: { + card: "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)", + dropdown: "0 12px 30px rgba(15, 23, 42, 0.12)", + modal: "0 20px 45px rgba(15, 23, 42, 0.2)", + }, + components: { + buttonDefaultVariant: "filled", + inputDefaultSize: "sm", + inputRadius: "md", + modalRadius: "lg", + tableHighlightOnHover: true, }, layout: { userManagementView: "classic", showTopBar: true, - sidebarBrandLabel: "User Management", - sidebarBrandSublabel: "EDR Freight", + sidebarWidth: "280px", + sidebarCollapsedWidth: "80px", + headerHeight: "80px", + contentMaxWidth: "none", + sidebarBackground: "#ffffff", + sidebarColor: "#475569", + sidebarMutedColor: "#94a3b8", + sidebarActiveBackground: + "linear-gradient(135deg, rgba(45, 191, 149, 0.14) 0%, rgba(27, 158, 122, 0.06) 100%)", + sidebarActiveColor: FREIGHT_BRAND, + sidebarHoverBackground: "#f5f7fa", + sidebarBorder: "#eef1f4", + sidebarRail: `linear-gradient(180deg, ${FREIGHT_BRAND_LIGHT} 0%, ${FREIGHT_BRAND} 100%)`, + sidebarBrandLabel: "EDR Freight", + sidebarBrandSublabel: "Backoffice Console", + menuBackground: "#ffffff", + menuActiveColor: FREIGHT_BRAND, + menuActiveBorderColor: FREIGHT_BRAND, + menuColor: "#64748b", + menuHoverColor: "#0f172a", + modalAccentColor: `linear-gradient(135deg, ${FREIGHT_BRAND_LIGHT} 0%, ${FREIGHT_BRAND} 100%)`, + modalHeaderBackground: "#ffffff", + modalHeaderEditBackground: "#ffffff", + modalIconBackground: freightBrand.mutedBg, + modalIconColor: FREIGHT_BRAND, + modalTitleColor: "#0f172a", + modalFocusColor: FREIGHT_BRAND, + modalSurface: "#ffffff", }, appearance: { colorScheme: "light", + slots: { + root: { + styles: { + background: "#f7f9fb", + color: "#0f172a", + fontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif", + }, + }, + shell: { + styles: { + background: "#f7f9fb", + }, + }, + content: { + styles: { + background: "#f7f9fb", + }, + }, + page: { + styles: { + background: "#ffffff", + border: "1px solid #eef1f4", + borderRadius: "24px", + boxShadow: + "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)", + }, + }, + card: { + styles: { + background: "#ffffff", + border: "1px solid #eef1f4", + borderRadius: "20px", + boxShadow: + "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)", + }, + }, + sidebar: { + styles: { + background: "#ffffff", + border: "1px solid #eef1f4", + borderRadius: "16px", + boxShadow: + "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)", + }, + }, + "sidebar-brand": { + styles: { + minHeight: "80px", + borderBottom: "1px solid #f1f5f9", + }, + }, + topbar: { + styles: { + background: "#ffffff", + border: "1px solid #eef1f4", + borderRadius: "16px", + boxShadow: + "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)", + }, + }, + "topbar-panel": { + styles: { + background: "#f7f9fb", + border: "1px solid #eef1f4", + borderRadius: "12px", + }, + }, + "topbar-user-summary": { + styles: { + borderRadius: "14px", + }, + }, + table: { + styles: { + background: "#ffffff", + border: "1px solid #eef1f4", + borderRadius: "20px", + overflow: "hidden", + }, + }, + "table-header": { + styles: { + background: "#f8fafc", + }, + }, + modal: { + styles: { + borderRadius: "24px", + overflow: "hidden", + }, + }, + "modal-header": { + styles: { + background: "#ffffff", + borderBottom: "1px solid #eef1f4", + }, + }, + }, + customCss: ` + [data-um-app="user-management"] { + --um-page-gap: 20px; + } + + [data-um-app="user-management"] h1, + [data-um-app="user-management"] h2, + [data-um-app="user-management"] h3, + [data-um-app="user-management"] h4, + [data-um-app="user-management"] h5, + [data-um-app="user-management"] h6 { + letter-spacing: -0.02em; + color: #0f172a; + } + + [data-um-app="user-management"] [data-um-slot="sidebar-item"][aria-current="page"] { + box-shadow: inset 3px 0 0 ${FREIGHT_BRAND}; + } + + [data-um-app="user-management"] button, + [data-um-app="user-management"] input, + [data-um-app="user-management"] select, + [data-um-app="user-management"] textarea { + font-family: 'Outfit', var(--font-sans), system-ui, sans-serif; + } + `, }, };