feat: migrate to Material 3 and move app chrome into the sidebar by rsdmike · Pull Request #3633 · device-management-toolkit/sample-web-ui

rsdmike · 2026-10-12T22:53:27Z

Replaces the M2 theme with the M3 azure palette through mat.theme() and system tokens, and drops _variables.scss. Component styles use --mat-sys-* tokens and override mixins, the M2-only color attributes become utility classes or token overrides, and typography classes move to mat-font-*.

Adds a dark mode. The app follows the OS color scheme until the user picks one with the new toggle, and the choice is kept in localStorage.

Removes the top toolbar. The product name, the Console or MPS/RPS versions, and the theme, language, account and about controls now sit in a footer at the bottom of the sidebar. The sidebar uses a surface color in place of the dark panel, with inset nav items. The "Hi" greeting is gone.

Tables and paginators take the color of the card they sit in, with quieter headers and dividers. The dashboard gets a welcome heading as its only h1, filled stat tiles, and outlined action and documentation cards.

Includes i18n strings for all languages, and specs for the theme service and the nav footer.

PR Checklist

Unit Tests have been added for new changes
API tests have been updated if applicable
All commented code has been removed
If you've added a dependency, you've ensured license is compatible with Apache 2.0 and clearly outlined the added dependency.

What are you changing?

Anything the reviewer should know when reviewing this PR?

If the there are associated PRs in other repositories, please link them here (i.e. device-management-toolkit/repo#365 )

Copilot

🟡 Changes recommended

The login-page footer requirement is unimplemented, and several new icon-only navigation controls lack accessible names.

3 open findings

What changed in this PR

Migrates the UI to Material 3, adds persisted theme and palette selection, and consolidates application controls into the sidebar footer.

Changes:

Introduces M3 system-token theming, dark mode, and selectable palettes.
Reworks navigation, dashboard, tables, dialogs, and action styling.
Adds localized labels and tests for theming and sidebar behavior.

File	Description
`src/styles/theme.scss`	Defines M3 themes, tokens, typography, and utilities.
`src/styles/styles.scss`	Applies M3 list error styling.
`src/styles/_variables.scss`	Removes legacy M2 palettes.
`src/index.html`	Applies stored theme before first paint.
`src/assets/i18n/sv.json`	Adds Swedish UI translations.
`src/assets/i18n/ru.json`	Adds Russian UI translations.
`src/assets/i18n/nl.json`	Adds Dutch UI translations.
`src/assets/i18n/ja.json`	Adds Japanese UI translations.
`src/assets/i18n/it.json`	Adds Italian UI translations.
`src/assets/i18n/he.json`	Adds Hebrew UI translations.
`src/assets/i18n/fr.json`	Adds French UI translations.
`src/assets/i18n/fi.json`	Adds Finnish UI translations.
`src/assets/i18n/es.json`	Adds Spanish UI translations.
`src/assets/i18n/en.json`	Adds English UI strings.
`src/assets/i18n/de.json`	Adds German UI translations.
`src/assets/i18n/ar.json`	Adds Arabic UI translations.
`src/app/wireless/wireless.component.ts`	Removes obsolete card imports.
`src/app/wireless/wireless.component.html`	Restyles the wireless list.
`src/app/wireless/wireless-detail/wireless-detail.component.html`	Migrates wireless form colors.
`src/app/theme.service.ts`	Adds persisted theme and palette management.
`src/app/theme.service.spec.ts`	Tests theme persistence and switching.
`src/app/shared/wifi-disabled-alert/wifi-disabled-alert.component.html`	Removes legacy typography class.
`src/app/shared/static-cira-warning/static-cira-warning.component.html`	Removes legacy typography class.
`src/app/shared/random-pass-alert/random-pass-alert.component.scss`	Removes obsolete link coloring.
`src/app/shared/random-pass-alert/random-pass-alert.component.html`	Removes legacy typography class.
`src/app/shared/power-up-alert/power-up-alert.component.html`	Removes legacy typography class.
`src/app/shared/no-cira-warning/no-cira-warning.component.scss`	Uses M3 surface tokens.
`src/app/shared/no-cira-warning/no-cira-warning.component.html`	Migrates warning styling.
`src/app/shared/network-change-alert/network-change-alert.component.html`	Removes legacy typography class.
`src/app/shared/config/snackBarDefault.ts`	Migrates snackbar shadow classes.
`src/app/shared/are-you-sure/are-you-sure.component.html`	Removes legacy typography class.
`src/app/shared/add-device-enterprise/add-device-enterprise.component.html`	Migrates submit-button styling.
`src/app/proxy-configs/proxy-configs.component.ts`	Removes obsolete card imports.
`src/app/proxy-configs/proxy-configs.component.html`	Restyles the proxy list.
`src/app/proxy-configs/proxy-config-detail/proxy-config-detail.component.scss`	Adds M3 error icon overrides.
`src/app/proxy-configs/proxy-config-detail/proxy-config-detail.component.html`	Migrates form colors.
`src/app/profiles/profiles.component.ts`	Removes obsolete card imports.
`src/app/profiles/profiles.component.html`	Restyles the profiles list.
`src/app/profiles/profile-detail/profile-detail.component.scss`	Migrates surfaces and drag styles.
`src/app/profiles/profile-detail/profile-detail.component.html`	Migrates form colors.
`src/app/profiles/export-dialog/export-dialog.component.html`	Removes legacy button color.
`src/app/login/login.component.html`	Migrates login controls to M3.
`src/app/ieee8021x/ieee8021x.component.ts`	Removes obsolete card imports.
`src/app/ieee8021x/ieee8021x.component.html`	Restyles the 802.1x list.
`src/app/ieee8021x/ieee8021x-detail/ieee8021x-detail.component.html`	Migrates form colors.
`src/app/event-channel/event-channel.component.html`	Restyles event status and table.
`src/app/download-rpc/download-rpc.component.scss`	Adds M3 preview-chip overrides.
`src/app/download-rpc/download-rpc.component.html`	Migrates warning and action colors.
`src/app/domains/domains.component.ts`	Removes obsolete card imports.
`src/app/domains/domains.component.html`	Restyles the domains list.
`src/app/domains/domain-detail/domain-detail.component.html`	Migrates domain form colors.
`src/app/devices/tls/tls.component.html`	Migrates typography utilities.
`src/app/devices/sol/sol.component.html`	Migrates SOL button styling.
`src/app/devices/remote-platform-erase/remote-platform-erase.component.spec.ts`	Updates M3 color assertions.
`src/app/devices/remote-platform-erase/remote-platform-erase.component.html`	Migrates destructive and status colors.
`src/app/devices/network-settings/network-settings.component.scss`	Uses M3 surface and status tokens.
`src/app/devices/network-settings/network-settings.component.html`	Migrates network UI typography and colors.
`src/app/devices/kvm/kvm.component.scss`	Uses M3 surface text color.
`src/app/devices/kvm/kvm.component.html`	Migrates KVM action styling.
`src/app/devices/ider/ider.component.spec.ts`	Updates button selector.
`src/app/devices/ider/ider.component.html`	Migrates IDER actions and colors.
`src/app/devices/ider-status/ider-status.component.html`	Migrates status typography and colors.
`src/app/devices/hardware-information/hardware-information.component.html`	Migrates information typography.
`src/app/devices/general/general.component.html`	Migrates typography and warning color.
`src/app/devices/explorer/explorer.component.html`	Removes legacy heading classes.
`src/app/devices/event-log/event-log.component.ts`	Replaces card with toolbar dependency.
`src/app/devices/event-log/event-log.component.html`	Restyles the event log table.
`src/app/devices/devices.component.ts`	Reorders and sizes action columns.
`src/app/devices/devices.component.spec.ts`	Tests filters and action sizing.
`src/app/devices/devices.component.scss`	Styles filters, actions, and chips.
`src/app/devices/device-user-consent-dialog/device-user-consent-dialog.component.html`	Removes legacy submit styling.
`src/app/devices/device-toolbar/pba-boot-dialog/pba-boot-dialog.component.spec.ts`	Updates button selectors.
`src/app/devices/device-toolbar/pba-boot-dialog/pba-boot-dialog.component.html`	Migrates dialog styling.
`src/app/devices/device-toolbar/http-boot-dialog/http-boot-dialog.component.spec.ts`	Updates button selectors.
`src/app/devices/device-toolbar/http-boot-dialog/http-boot-dialog.component.html`	Migrates dialog styling.
`src/app/devices/device-toolbar/device-toolbar.component.html`	Migrates toolbar colors and typography.
`src/app/devices/device-enable-kvm/device-enable-kvm.component.html`	Migrates confirmation button styling.
`src/app/devices/device-enable-ider/device-enable-ider.component.html`	Migrates confirmation button styling.
`src/app/devices/device-detail/device-detail.component.scss`	Uses M3 selected-item surface.
`src/app/devices/device-detail/device-detail.component.html`	Adds dark-compatible warning color.
`src/app/devices/device-cert-dialog/device-cert-dialog.component.html`	Migrates certificate action colors.
`src/app/devices/certificates/add-cert-dialog/add-cert-dialog.component.html`	Migrates certificate dialog styling.
`src/app/devices/audit-log/audit-log.component.ts`	Replaces card with toolbar dependency.
`src/app/devices/audit-log/audit-log.component.html`	Restyles the audit log table.
`src/app/dashboard/dashboard.component.ts`	Removes unused divider dependency.
`src/app/dashboard/dashboard.component.spec.ts`	Tests dashboard heading hierarchy.
`src/app/dashboard/dashboard.component.scss`	Implements the M3 dashboard layout.
`src/app/dashboard/dashboard.component.html`	Reworks dashboard cards and headings.
`src/app/core/toolbar/toolbar.component.spec.ts`	Removes obsolete toolbar tests.
`src/app/core/toolbar/toolbar.component.scss`	Removes obsolete toolbar styles.
`src/app/core/toolbar/toolbar.component.html`	Removes the top toolbar.
`src/app/core/navbar/navbar.component.ts`	Updates navbar Material imports.
`src/app/core/navbar/navbar.component.spec.ts`	Tests navigation grouping and RPC action.
`src/app/core/navbar/navbar.component.scss`	Restyles sidebar navigation.
`src/app/core/navbar/navbar.component.html`	Reorders and groups navigation links.
`src/app/core/nav-footer/nav-footer.component.ts`	Adds footer controls and theme integration.
`src/app/core/nav-footer/nav-footer.component.spec.ts`	Tests footer behavior and theme menus.
`src/app/core/nav-footer/nav-footer.component.scss`	Styles footer information and controls.
`src/app/core/nav-footer/nav-footer.component.html`	Defines footer menus and version display.
`src/app/core/about/about.component.scss`	Removes obsolete fixed colors.
`src/app/core/about/about.component.html`	Migrates dialog typography and warning color.
`src/app/configs/configs.component.ts`	Removes obsolete card imports.
`src/app/configs/configs.component.html`	Restyles the CIRA configuration list.
`src/app/configs/config-detail/config-detail.component.html`	Migrates configuration form colors.
`src/app/app.component.ts`	Replaces toolbar with nav footer.
`src/app/app.component.spec.ts`	Tests authenticated sidebar layout.
`src/app/app.component.scss`	Pins the footer below scrolling navigation.
`src/app/app.component.html`	Moves application chrome into the sidebar.
`CLAUDE.md`	Documents the nav-footer architecture.
`angular.json`	Removes legacy styles and changes CSS optimization.

🧠 Review effort: Balanced

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Replace the M2 theme with the M3 azure palette through mat.theme() and system tokens, and drop _variables.scss. Component styles use --mat-sys-* tokens and override mixins, the M2-only color attributes become utility classes or token overrides, and typography classes move to mat-font-*. Add a dark mode. The app follows the OS color scheme until the user picks one with the new toggle, and the choice is kept in localStorage. Remove the top toolbar. The product name, the Console or MPS/RPS versions, and the theme, language, account and about controls now sit in a footer at the bottom of the sidebar. The sidebar uses a surface color in place of the dark panel, with inset nav items. On the login page the same footer sits in the bottom corner without the account menu. The "Hi" greeting is gone. Tables and paginators take the color of the card they sit in, with quieter headers and dividers. The dashboard gets a welcome heading as its only h1, filled stat tiles, and outlined action and documentation cards. Includes i18n strings for all languages, and specs for the theme service and the nav footer.

# [3.70.0](v3.69.3...v3.70.0) (2026-10-13) ### Features * migrate to Material 3 and move app chrome into the sidebar ([#3633](#3633)) ([c86ef34](c86ef34))

RosieAMT · 2026-10-13T17:45:50Z

🎉 This PR is included in version 3.70.0 🎉

The release is available on:

GitHub release
v3.70.0

Your semantic-release bot 📦🚀

# [3.70.0](v3.69.3...v3.70.0) (2026-10-13) ### Features * add call-to-action empty states to the list pages ([#3634](#3634)) ([bb1549a](bb1549a)) * migrate to Material 3 and move app chrome into the sidebar ([#3633](#3633)) ([c86ef34](c86ef34))

RosieAMT · 2026-10-13T20:26:45Z

🎉 This PR is included in version 3.70.0 🎉

The release is available on:

GitHub release
v3.70.0

Your semantic-release bot 📦🚀

Copilot AI balanced review requested due to automatic review settings October 12, 2026 22:53

Copilot started reviewing on behalf of rsdmike October 12, 2026 22:54

View session

Copilot AI reviewed Oct 12, 2026

View reviewed changes

Comment thread src/app/app.component.html

Comment thread src/app/core/nav-footer/nav-footer.component.html

Comment thread src/app/core/navbar/navbar.component.html

rsdmike added this pull request to stack #3635 October 12, 2026 23:03

madhavilosetty-intel previously approved these changes Oct 13, 2026

View reviewed changes

rsdmike dismissed madhavilosetty-intel’s stale review via 4b2810c October 13, 2026 15:29

rsdmike force-pushed the feat/material-3 branch 3 times, most recently from 0f02f20 to e073c8a Compare October 13, 2026 15:45

Base automatically changed from build/upgrade-angular-22 to main October 13, 2026 17:27

rsdmike force-pushed the feat/material-3 branch from e073c8a to 516b293 Compare October 13, 2026 17:28

graikhel-intel approved these changes Oct 13, 2026

View reviewed changes

rsdmike merged commit c86ef34 into main Oct 13, 2026
10 checks passed

rsdmike deleted the feat/material-3 branch October 13, 2026 17:34

RosieAMT pushed a commit that referenced this pull request Oct 13, 2026

chore(release): 3.70.0 [skip ci]

d29e0e7

# [3.70.0](v3.69.3...v3.70.0) (2026-10-13) ### Features * migrate to Material 3 and move app chrome into the sidebar ([#3633](#3633)) ([c86ef34](c86ef34))

RosieAMT added the released label Oct 13, 2026

graikhel-intel linked an issue Oct 22, 2026 that may be closed by this pull request

Upgrade sample-web-ui from Angular 21 to Angular 22 #3589

Closed

5 tasks done

Navigation Menu

Repository navigation

feat: migrate to Material 3 and move app chrome into the sidebar - #3633

feat: migrate to Material 3 and move app chrome into the sidebar#3633
rsdmike merged 1 commit into
mainfrom
feat/material-3

rsdmike commented Oct 12, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RosieAMT commented Oct 13, 2026

Uh oh!

RosieAMT commented Oct 13, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

rsdmike commented Oct 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

What are you changing?

Anything the reviewer should know when reviewing this PR?

If the there are associated PRs in other repositories, please link them here (i.e. device-management-toolkit/repo#365 )

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RosieAMT commented Oct 13, 2026

Uh oh!

RosieAMT commented Oct 13, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

rsdmike commented Oct 12, 2026 •

edited

Loading