feat(settings): consistent card sizing and section color-coding #279

Merged

David merged 3 commits from feat/MAPPS-257-settings-card-consistency-color-coding into main

2026-06-26 02:18:46 +02:00

David commented

2026-06-18 07:29:16 +02:00

Owner

Make the Settings hub card index read as a focused, deliberate surface and tie each group to its left-nav area by color.

Constrain the index to ~80% of the max-w-7xl content box via an inner mx-auto w-full max-w-5xl wrapper so it no longer spans full-bleed.
Normalize card sizing: grid items-stretch plus h-full on each SettingsCard so every card in a group renders the same height and none dominates its row.
Add a prominent prop to SettingsGroup that gives content-heavy groups (Service & Asset Types, Billing & SLA, which carries SLA) fewer, wider columns and larger p-6 padding.
Introduce a SectionColor taxonomy mapping each group to its nav area: Service & Asset Types -> emerald, Billing & SLA -> amber, Tickets -> blue (the existing accent), Integrations -> violet, Personalization -> rose. Class names are enumerated literally per color in match arms (no runtime interpolation) with light and dark variants for contrast.
Each card gets a colored left-accent border whose hover stays in the same family instead of the previous hardcoded accent; each group heading is tinted in its group color. Color and prominence flow to cards through a GroupStyle context so call sites stay clean.

No server changes.

#MAPPS-257

Make the Settings hub card index read as a focused, deliberate surface and tie each group to its left-nav area by color. - Constrain the index to ~80% of the max-w-7xl content box via an inner mx-auto w-full max-w-5xl wrapper so it no longer spans full-bleed. - Normalize card sizing: grid items-stretch plus h-full on each SettingsCard so every card in a group renders the same height and none dominates its row. - Add a prominent prop to SettingsGroup that gives content-heavy groups (Service & Asset Types, Billing & SLA, which carries SLA) fewer, wider columns and larger p-6 padding. - Introduce a SectionColor taxonomy mapping each group to its nav area: Service & Asset Types -> emerald, Billing & SLA -> amber, Tickets -> blue (the existing accent), Integrations -> violet, Personalization -> rose. Class names are enumerated literally per color in match arms (no runtime interpolation) with light and dark variants for contrast. - Each card gets a colored left-accent border whose hover stays in the same family instead of the previous hardcoded accent; each group heading is tinted in its group color. Color and prominence flow to cards through a GroupStyle context so call sites stay clean. No server changes. #MAPPS-257

David added 1 commit

2026-06-18 07:29:16 +02:00

feat(settings): consistent card sizing and section color-coding

Check / clippy + fmt + tests (pull_request) Successful in 1m7s

Details

7b7b1d1b28

Make the Settings hub card index read as a focused, deliberate surface and tie each group to its left-nav area by color.

- Constrain the index to ~80% of the max-w-7xl content box via an inner mx-auto w-full max-w-5xl wrapper so it no longer spans full-bleed.
- Normalize card sizing: grid items-stretch plus h-full on each SettingsCard so every card in a group renders the same height and none dominates its row.
- Add a prominent prop to SettingsGroup that gives content-heavy groups (Service & Asset Types, Billing & SLA, which carries SLA) fewer, wider columns and larger p-6 padding.
- Introduce a SectionColor taxonomy mapping each group to its nav area: Service & Asset Types -> emerald, Billing & SLA -> amber, Tickets -> blue (the existing accent), Integrations -> violet, Personalization -> rose. Class names are enumerated literally per color in match arms (no runtime interpolation) with light and dark variants for contrast.
- Each card gets a colored left-accent border whose hover stays in the same family instead of the previous hardcoded accent; each group heading is tinted in its group color. Color and prominence flow to cards through a GroupStyle context so call sites stay clean.

No server changes.

#MAPPS-257

David added 1 commit

2026-06-19 11:12:35 +02:00

Merge branch 'main' into feat/MAPPS-257-settings-card-consistency-color-coding

Check / clippy + fmt + tests (pull_request) Successful in 2m1s

Details

62513bd5e3

David added 1 commit

2026-06-26 01:54:44 +02:00

Merge branch 'main' into feat/MAPPS-257-settings-card-consistency-color-coding

Check / fmt + clippy + tests (pull_request) Successful in 15m54s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

a9a14f4684

Reconcile the MAPPS-257 settings card styling with main's MAPPS-258 taxonomy rewrite (and the MAPPS-256 TV-view surface merged via #280). The PR was authored against the old hardcoded SettingsHomePage; main replaced that with a data-driven hub (SETTINGS_SURFACES / SettingsGroupKey, search, advanced toggle, group landing pages). Re-apply the PR's visual intent on top of main's structure rather than reverting either side:

- Keep the PR's `SectionColor` taxonomy and `GroupStyle` context, and the restyled `SettingsGroup` / `SettingsCard` (colored left-accent border, h-full, prominent padding, items-stretch grid).
- Tie color to the nav domain via a new `SettingsGroupKey::color()` (Personalization->rose, Service&Asset->emerald, Billing->amber, Tickets->blue, Integrations->violet) and `SettingsGroupKey::prominent()` (Service&Asset, Billing), so the color identity lives on the taxonomy that now owns the IA.
- Make `SettingsGroup.color` optional (neutral heading for the synthetic "Configuration" umbrella) and add an optional per-card `SettingsCard.color` override so mixed grids (the Configuration umbrella and search results) color each card by its own target domain, while single-domain groups and the group landing pages inherit one color from context.
- Wrap the index in the max-w-5xl focus container and route every card grid through a shared `group_grid_class(prominent)` helper.

No server changes. fmt, wasm check, clippy -D warnings, and the lib tests pass. The MAPPS-257 colors are emerald/amber/blue/violet/rose, all allowed by the MAPPS-259 theme-token guard (it flags only neutral gray/white).

#MAPPS-257