feat(backoffice): integrate IAM user management with host auth adapter and freight theming

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",
+    secondary: "#f4f7fb",
-    background: "#f6f8f4",
+    background: "#f7f9fb",
-    foreground: "#12261c",
+    foreground: "#0f172a",
-    border: "#d7e1da",
+    border: "#eef1f4",
-    muted: "#eaf1ec",
+    muted: "#f1f5f9",
-    mutedForeground: "#557164",
+    mutedForeground: "#64748b",
     card: "#ffffff",
-    danger: "#c93d2b",
+    sidebar: "#ffffff",
+    danger: "#ef4444",
   },
   typography: {
-    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
+    fontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
-    headingFontFamily: "Inter, ui-sans-serif, 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",
+    sidebarWidth: "280px",
-    sidebarBrandSublabel: "EDR Freight",
+    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;
+      }
+    `,
   },
 };