cameleer/cameleer-server
1
0
Fork 0
Code Issues 42 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: UI consistency — shared CSS, design system colors, no inline styles
All checks were successful
CI / cleanup-branch (push) Has been skipped
Details
CI / build (push) Successful in 1m22s
Details
CI / docker (push) Successful in 1m9s
Details
CI / deploy-feature (push) Has been skipped
Details
CI / deploy (push) Successful in 36s
Details

Browse Source 
Phase 1: Extract 6 shared CSS modules (table-section, log-panel,
rate-colors, refresh-indicator, chart-card, section-card) eliminating
~135 duplicate class definitions across 11 files.

Phase 2: Replace all hardcoded hex colors in CSS modules with design
system variables. Strip ~55 hex fallbacks from var() patterns. Fix 4
undefined variable names (--accent, --bg-base, --surface, --bg-surface-raised).

Phase 3: Replace ~45 hardcoded hex values in ProcessDiagram SVG
components with var() CSS custom properties. Fix Dashboard.tsx color prop.

Phase 4: Create CSS modules for AdminLayout, DatabaseAdminPage,
OidcCallback (previously 100% inline). Extract shared PageLoader
component (replaces 3 copy-pasted spinner patterns). Move AppsTab
static inline styles to CSS classes. Extract LayoutShell StarredList styles.

58 files changed, net -219 lines.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-09 14:55:54 +02:00
parent bfed8174ca
commit ff62a34d89
58 changed files with 770 additions and 989 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/components/ProcessDiagram/Minimap.tsx
View File

@@ -147,12 +147,12 @@ function nodeColor(
): { fill: string; opacity: number } {
if (!overlay) return { fill: colorForType(node.type), opacity: 0.7 };
const state = node.id ? overlay.get(node.id) : undefined;
if (state?.status === 'COMPLETED') return { fill: '#3D7C47', opacity: 0.85 };
if (state?.status === 'FAILED') return { fill: '#C0392B', opacity: 0.85 };
if (state?.status === 'COMPLETED') return { fill: 'var(--success)', opacity: 0.85 };
if (state?.status === 'FAILED') return { fill: 'var(--error)', opacity: 0.85 };
// ENDPOINT is always traversed when overlay is active (route entry point)
if (node.type === 'ENDPOINT' && overlay.size > 0) return { fill: '#3D7C47', opacity: 0.85 };
if (node.type === 'ENDPOINT' && overlay.size > 0) return { fill: 'var(--success)', opacity: 0.85 };
// Skipped (overlay active but node not executed)
return { fill: '#9CA3AF', opacity: 0.35 };
return { fill: 'var(--text-muted)', opacity: 0.35 };
}
function renderMinimapNodes(