feat(spa): distinct sidebar icons and per-category color accents #418

Merged

Claude-Run merged 1 commit from feat/MAPPS-359-sidebar-icons-category-colors into main

2026-07-04 04:07:35 +02:00

Claude-Run commented

2026-07-04 04:05:30 +02:00

Member

Icons: six rows shared DocumentIcon (Timesheets, Timesheet Approvals, Contracts, Rate Cards, Audit Log, SLA Management), two shared UsersIcon (Contacts, Team), and two shared CurrencyIcon (Invoices, Payments), so the rail read as blocks of identical glyphs. Add seven Heroicons-outline components (DocumentCheck, Scale, Tag, CreditCard, UserGroup, ClipboardDocumentList, ShieldCheck) so all 22 rows now render a unique icon.

Colors: promote the per-nav-area SectionColor palette (originally private to the Settings landings, MAPPS-257) into crate::modules::theme::sections so the sidebar categories and the Settings group cards share ONE source of truth. A domain's hue is now identical in the nav rail and its Settings cards (Service Desk = Blue, Contracts & Billing = Amber, Admin = Violet, ...), extended with four hues (Indigo, Cyan, Teal, Fuchsia) so all nine categories are distinct. Each NavSection provides its hue to child NavItems via context; Dashboard sits outside any category and keeps the neutral subtle icon.

Consistency: the top-bar Appearance/theme button used a fixed dark-chrome palette (text-gray-400 hover:text-white hover:bg-gray-700) that ignored the base mode; switch it to the shared surface/content tokens so it matches the other top-bar action buttons.

Tests: distinct_icons asserts the formerly-colliding icon families now render distinct SVG paths (keyed on exported *_PATH consts); category_colors_are_distinct_and_dual_mode asserts every category has a distinct hue with both light and dark classes; sections.rs tests enforce a light + dark variant for every hue.

#MAPPS-359

Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com

Give every sidebar destination its own icon and tint each top-level category with a distinct accent hue, applied to the row icon and the section header rather than flooding the row (Google Cloud console style). Icons: six rows shared DocumentIcon (Timesheets, Timesheet Approvals, Contracts, Rate Cards, Audit Log, SLA Management), two shared UsersIcon (Contacts, Team), and two shared CurrencyIcon (Invoices, Payments), so the rail read as blocks of identical glyphs. Add seven Heroicons-outline components (DocumentCheck, Scale, Tag, CreditCard, UserGroup, ClipboardDocumentList, ShieldCheck) so all 22 rows now render a unique icon. Colors: promote the per-nav-area SectionColor palette (originally private to the Settings landings, MAPPS-257) into crate::modules::theme::sections so the sidebar categories and the Settings group cards share ONE source of truth. A domain's hue is now identical in the nav rail and its Settings cards (Service Desk = Blue, Contracts & Billing = Amber, Admin = Violet, ...), extended with four hues (Indigo, Cyan, Teal, Fuchsia) so all nine categories are distinct. Each NavSection provides its hue to child NavItems via context; Dashboard sits outside any category and keeps the neutral subtle icon. Consistency: the top-bar Appearance/theme button used a fixed dark-chrome palette (text-gray-400 hover:text-white hover:bg-gray-700) that ignored the base mode; switch it to the shared surface/content tokens so it matches the other top-bar action buttons. Tests: distinct_icons asserts the formerly-colliding icon families now render distinct SVG paths (keyed on exported *_PATH consts); category_colors_are_distinct_and_dual_mode asserts every category has a distinct hue with both light and dark classes; sections.rs tests enforce a light + dark variant for every hue. #MAPPS-359 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Claude-Run added 1 commit

2026-07-04 04:05:30 +02:00

feat(spa): distinct sidebar icons and per-category color accents

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

Details

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

Details

4ef5a18c64

Give every sidebar destination its own icon and tint each top-level category with a distinct accent hue, applied to the row icon and the section header rather than flooding the row (Google Cloud console style).

Icons: six rows shared DocumentIcon (Timesheets, Timesheet Approvals, Contracts, Rate Cards, Audit Log, SLA Management), two shared UsersIcon (Contacts, Team), and two shared CurrencyIcon (Invoices, Payments), so the rail read as blocks of identical glyphs. Add seven Heroicons-outline components (DocumentCheck, Scale, Tag, CreditCard, UserGroup, ClipboardDocumentList, ShieldCheck) so all 22 rows now render a unique icon.

Colors: promote the per-nav-area SectionColor palette (originally private to the Settings landings, MAPPS-257) into crate::modules::theme::sections so the sidebar categories and the Settings group cards share ONE source of truth. A domain's hue is now identical in the nav rail and its Settings cards (Service Desk = Blue, Contracts & Billing = Amber, Admin = Violet, ...), extended with four hues (Indigo, Cyan, Teal, Fuchsia) so all nine categories are distinct. Each NavSection provides its hue to child NavItems via context; Dashboard sits outside any category and keeps the neutral subtle icon.

Consistency: the top-bar Appearance/theme button used a fixed dark-chrome palette (text-gray-400 hover:text-white hover:bg-gray-700) that ignored the base mode; switch it to the shared surface/content tokens so it matches the other top-bar action buttons.

Tests: distinct_icons asserts the formerly-colliding icon families now render distinct SVG paths (keyed on exported *_PATH consts); category_colors_are_distinct_and_dual_mode asserts every category has a distinct hue with both light and dark classes; sections.rs tests enforce a light + dark variant for every hue.

#MAPPS-359

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>