Skip to content

feat: align UX with crossplane-headlamp-plugin design system - #31

Open
GenosseOtt wants to merge 1 commit into
mainfrom
feat/align-ux-crossplane
Open

feat: align UX with crossplane-headlamp-plugin design system#31
GenosseOtt wants to merge 1 commit into
mainfrom
feat/align-ux-crossplane

Conversation

@GenosseOtt

Copy link
Copy Markdown
Contributor

Summary

  • Status color tokens: add STATUS_COLORS and CHIP geometry constants to theme.ts, matching the crossplane-headlamp-plugin palette (#2e7d32 green, #c62828 red, #e65100 amber, #616161 grey)
  • Chips: chips.tsx now imports from tokens instead of hardcoded hex strings; unknown/null condition now renders a grey "Unknown" chip instead of a bare dash
  • Table chrome: OverviewPage table headers get a solid #fafafa background, 2px solid #e0e0e0 bottom border, and #f0f0f0 row separators — matching the crossplane plugin exactly
  • Page title: replaced raw <h1> with Headlamp-standard SectionBox (headerStyle: 'main') so the title typography, spacing and breadcrumb integration match every other plugin in the UI

Test plan

  • Build passes (npm run build)
  • Overview page title renders with standard Headlamp chrome (same as crossplane plugin pages)
  • Status chips use the darker, higher-contrast palette
  • Table headers have visible background and bold bottom border

- Add STATUS_COLORS and CHIP geometry tokens to theme.ts (single source
  of truth matching the crossplane plugin's color palette)
- Update chips.tsx to use tokens; condition chip unknown state now shows
  a grey "Unknown" chip instead of a bare dash
- Align OverviewPage table chrome: solid #fafafa th background, 2px
  header border, #f0f0f0 row borders, 8px/12px cell padding
- Replace raw <h1> with Headlamp-standard SectionBox (headerStyle: main)
  so the page title matches every other plugin in the UI

Signed-off-by: Johannes Ott <johannes.ott@sap.com>
@GenosseOtt
GenosseOtt requested a review from Lasserich as a code owner August 11, 2026 09:40
@github-actions

Copy link
Copy Markdown
Contributor

E2E Screenshots

Artifact: e2e-screenshots

  • overview-components.png
  • overview.png

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant