refactor: UI consistency — shared CSS, design system colors, no inline styles
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:
@@ -23,7 +23,7 @@ export function DiagramEdge({ edge, offsetY = 0, traversed }: DiagramEdgeProps)
|
||||
<path
|
||||
d={d}
|
||||
fill="none"
|
||||
stroke={traversed === true ? '#3D7C47' : '#9CA3AF'}
|
||||
stroke={traversed === true ? 'var(--success)' : 'var(--text-muted)'}
|
||||
strokeWidth={traversed === true ? 1.5 : traversed === false ? 1 : 1.5}
|
||||
strokeDasharray={traversed === false ? '4,3' : undefined}
|
||||
markerEnd={traversed === true ? 'url(#arrowhead-green)' : traversed === false ? undefined : 'url(#arrowhead)'}
|
||||
@@ -32,7 +32,7 @@ export function DiagramEdge({ edge, offsetY = 0, traversed }: DiagramEdgeProps)
|
||||
<text
|
||||
x={(pts[0][0] + pts[pts.length - 1][0]) / 2}
|
||||
y={(pts[0][1] + pts[pts.length - 1][1]) / 2 + offsetY - 6}
|
||||
fill="#9C9184"
|
||||
fill="var(--text-muted)"
|
||||
fontSize={9}
|
||||
textAnchor="middle"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user