Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-26 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(user-management): move CSS overrides into the component and update app metadata commit

Browse Source
This commit is contained in:
mengstabketemaw
2026-06-23 14:25:35 +03:00
parent f876d57219
commit ba4cb63423
3 changed files with 60 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
apps/backoffice/src/app/features/user-management/UserManagementPage.tsx
View File

@@ -4,7 +4,56 @@ import { useNavigate } from 'react-router-dom';
import { UserManagementApp } from '@tria-plc/iamui'; import { UserManagementApp } from '@tria-plc/iamui';
import type { DesignConfig, UserManagementSessionOptions } from '@tria-plc/iamui'; import type { DesignConfig, UserManagementSessionOptions } from '@tria-plc/iamui';
import '@tria-plc/iamui/style.css'; import '@tria-plc/iamui/style.css';
import './um-overrides.css';
const UM_OVERRIDES = `
.um-theme-light {
--background: #ffffff !important;
--foreground: #1f2937 !important;
--card: #ffffff !important;
--card-foreground: #1f2937 !important;
--popover: #ffffff !important;
--popover-foreground: #1f2937 !important;
--secondary: #f1f5f9 !important;
--secondary-foreground: #1e293b !important;
--muted: #f1f5f9 !important;
--muted-foreground: #64748b !important;
--accent: var(--primary) !important;
--accent-foreground: var(--primary-foreground) !important;
--border: #e2e8f0 !important;
--input: #e2e8f0 !important;
--sidebar: #ffffff !important;
--sidebar-foreground: #1e293b !important;
--sidebar-accent: #f1f5f9 !important;
--sidebar-accent-foreground: #1e293b !important;
--sidebar-border: #e2e8f0 !important;
--sidebar-ring: var(--primary) !important;
--color-amber-50: #eff6ff !important;
--color-amber-100: #dbeafe !important;
--color-yellow-50: #eff6ff !important;
--color-yellow-100: #dbeafe !important;
}
[class*="bg-[#f7efe8]"] { background-color: #f1f5f9 !important; }
[class*="bg-[#f2ece8]"] { background-color: #f1f5f9 !important; }
[class*="hover:bg-[#f7efe8]"]:hover { background-color: #f1f5f9 !important; }
[class*="hover:bg-[#f2ece8]"]:hover { background-color: #f1f5f9 !important; }
[class*="border-[#e6d8cc]"] { border-color: #e2e8f0 !important; }
[class*="bg-[#fffdfa]"] { background-color: #ffffff !important; }
[class*="bg-[#fcf7f3]"] { background-color: #f8fafc !important; }
[class*="bg-[#fffaf6]"] { background-color: #f8fafc !important; }
[class*="text-[#432319]"] { color: #1e293b !important; }
[class*="text-[#7a6a61]"] { color: #64748b !important; }
[class*="text-[#6b4a3d]"] { color: #475569 !important; }
.um-theme-light [class*="dark:border-gray-900"],
.um-theme-light [class*="dark:border-gray-800"],
.um-theme-light [class*="dark:border-gray-700"],
.um-theme-light [class*="dark:border-gray-600"],
.um-theme-light [class*="dark:border-slate-800"],
.um-theme-light [class*="dark:border-slate-700"] {
border-color: #e2e8f0 !important;
}
`;
const UM_CONFIG: DesignConfig = { const UM_CONFIG: DesignConfig = {
brand: { brand: {
@@ -85,6 +134,10 @@ export default function UserManagementPage() {
useEffect(() => { useEffect(() => {
if (!containerRef.current) return; if (!containerRef.current) return;
const style = document.createElement('style');
style.textContent = UM_OVERRIDES;
document.head.appendChild(style);
const token = localStorage.getItem('ema-backoffice-auth-token') ?? ''; const token = localStorage.getItem('ema-backoffice-auth-token') ?? '';
const refreshToken = localStorage.getItem('ema-backoffice-refresh-token') ?? undefined; const refreshToken = localStorage.getItem('ema-backoffice-refresh-token') ?? undefined;
@@ -105,6 +158,7 @@ export default function UserManagementPage() {
rootRef.current.unmount(); rootRef.current.unmount();
rootRef.current = null; rootRef.current = null;
} }
style.remove();
}; };
}, []); }, []);

22
apps/backoffice/src/app/features/user-management/um-overrides.css
View File

@@ -1,22 +0,0 @@
.um-theme-light {
--background: #ffffff;
--foreground: #1f2937;
--card: #ffffff;
--card-foreground: #1f2937;
--popover: #ffffff;
--popover-foreground: #1f2937;
--secondary: #f1f5f9;
--secondary-foreground: #1e293b;
--muted: #f1f5f9;
--muted-foreground: #64748b;
--accent: var(--primary);
--accent-foreground: var(--primary-foreground);
--border: #e2e8f0;
--input: #e2e8f0;
--sidebar: #ffffff;
--sidebar-foreground: #1e293b;
--sidebar-accent: #f1f5f9;
--sidebar-accent-foreground: #1e293b;
--sidebar-border: #e2e8f0;
--sidebar-ring: var(--primary);
}

5
apps/backoffice/src/main.tsx
View File

@@ -7,6 +7,11 @@ import './styles.css';
import './app/i18n/config'; import './app/i18n/config';
import { App } from './app/app'; import { App } from './app/app';
document.title = 'EMA Backoffice';
const _favicon = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
if (_favicon) _favicon.href = '/ema-logo.png';
window.__USER_MANAGEMENT_BRANDING__ = { window.__USER_MANAGEMENT_BRANDING__ = {
appName: 'Ethiopian Maritime Licence', appName: 'Ethiopian Maritime Licence',
organizationName: 'Ethiopian Maritime Authority', organizationName: 'Ethiopian Maritime Authority',