[Human App Frontend] Bump MUI to v9

[KirillKirill]

Issue tracking

Closes #3960

Context behind the change

update MUI library to the latest version

How has this been tested?

locally comparing the branch with prod

Release plan

regular

Potential risks; What to monitor; Rollback plan

not found

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
human-app	Ready	Preview, Comment	Jul 10, 2026 2:24pm

4 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
faucet-frontend	Ignored	Preview	Jul 10, 2026 2:24pm
faucet-server	Ignored	Preview	Jul 10, 2026 2:24pm
human-dashboard-frontend	Skipped		Jul 10, 2026 2:24pm
staking-dashboard	Skipped		Jul 10, 2026 2:24pm

[Copilot]

Pull request overview

Updates the Human App frontend to use Material UI v9 and migrates a large set of UI components to the newer MUI APIs (notably slotProps, more sx usage, and Grid/layout prop changes), alongside dependency cleanup.

Changes:

• Bump @mui/material to ^9.2.0 and update lockfile entries accordingly.
• Migrate many components from legacy props (color, InputProps, inline styles, etc.) to sx/slotProps patterns.
• UI/layout refactors across pages (Stack/Grid usage, spacing tokens) and removal of mui-image packages.

Reviewed changes

Copilot reviewed 91 out of 92 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
yarn.lock	Updates dependency graph for MUI v9 and related transitive packages; removes mui-image entries.
packages/apps/human-app/frontend/tsconfig.json	TS config tweak related to path aliasing.
packages/apps/human-app/frontend/src/shared/styles/typography.ts	Moves Inter font family configuration into theme typography.
packages/apps/human-app/frontend/src/shared/styles/theme.ts	Adjusts theme component defaults to align with new typography setup.
packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts	Same as theme.ts for dark theme defaults.
packages/apps/human-app/frontend/src/shared/components/ui/text-header-with-icon.tsx	Updates MUI Grid import style.
packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu/sorting.tsx	Converts color usage to sx and minor handler reshaping.
packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu/filtering.tsx	Converts color/padding usage to sx tokens.
packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-cell.tsx	Updates TableCell type import path for newer MUI exports.
packages/apps/human-app/frontend/src/shared/components/ui/table-button.tsx	Reorders props; no functional change intended.
packages/apps/human-app/frontend/src/shared/components/ui/success-label.tsx	Moves gap into sx.
packages/apps/human-app/frontend/src/shared/components/ui/profile/profile-list-item.tsx	Consolidates props into sx (color, spacing).
packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card.tsx	Grid/layout API migration; adds support for non-string title.
packages/apps/human-app/frontend/src/shared/components/ui/optional-text.tsx	Moves width into sx.
packages/apps/human-app/frontend/src/shared/components/ui/modal/global-modal.tsx	Migrates PaperProps to slotProps.paper.
packages/apps/human-app/frontend/src/shared/components/ui/empty-placeholder.tsx	Replaces color prop with sx.
packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx	Replaces color prop with sx.
packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha-form.tsx	Replaces color prop with sx.
packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx	Migrates adornment config to slotProps; updates key handling.
packages/apps/human-app/frontend/src/shared/components/data-entry/input.tsx	Migrates helper text and masking to slotProps.
packages/apps/human-app/frontend/src/shared/components/data-entry/checkbox.tsx	Converts layout props to sx.
packages/apps/human-app/frontend/src/router/components/layout/unprotected/navbar.tsx	Moves position into sx.
packages/apps/human-app/frontend/src/router/components/layout/unprotected/layout.tsx	Converts layout from Grid to Stack and normalizes spacing tokens.
packages/apps/human-app/frontend/src/router/components/layout/protected/top-menu-items-list.tsx	Refactors spacing/first-item indentation behavior into CSS selectors.
packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx	Layout refactor and removal of inline styles in favor of Box + sx.
packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx	Converts Stack/Grid spacing to sx tokens.
packages/apps/human-app/frontend/src/router/components/layout/protected/layout.tsx	Converts main container layout from Grid to Stack/Box.
packages/apps/human-app/frontend/src/router/components/layout/protected/drawer-navigation.tsx	Minor Drawer prop ordering + sx normalization.
packages/apps/human-app/frontend/src/router/components/layout/protected/bottom-menu-items-list.tsx	Converts layout props to sx.
packages/apps/human-app/frontend/src/router/components/footer.tsx	Normalizes responsive layout/spacing and Link styling with sx.
packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link.page.tsx	Normalizes spacing (gap) into sx.
packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link-success.page.tsx	Converts fontWeight/color to sx for Typography components.
packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password.page.tsx	Normalizes spacing (gap) into sx.
packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password-success.page.tsx	Normalizes spacing (gap) into sx.
packages/apps/human-app/frontend/src/modules/worker/profile/views/profile.page.tsx	Removes UI-config loading + staking info render; keeps layout changes.
packages/apps/human-app/frontend/src/modules/worker/profile/components/wallet-connect-done.tsx	Migrates adornments to slotProps and normalizes Stack spacing.
packages/apps/human-app/frontend/src/modules/worker/profile/components/staking-info.tsx	Converts layout + color usage to sx.
packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-data.tsx	Converts Stack gap + Typography color to sx.
packages/apps/human-app/frontend/src/modules/worker/profile/components/modal-states.tsx	Converts Box/Typerography system props to sx.
packages/apps/human-app/frontend/src/modules/worker/profile/components/identity-verification-control.tsx	Converts Stack spacing/alignment to sx.
packages/apps/human-app/frontend/src/modules/worker/profile/components/edit-api-key-modal.tsx	Consolidates layout props into sx and normalizes Typography styling.
packages/apps/human-app/frontend/src/modules/worker/profile/components/delete-api-key-modal.tsx	Consolidates layout props into sx.
packages/apps/human-app/frontend/src/modules/worker/profile/components/api-key-data.tsx	Converts Stack spacing/alignment to sx.
packages/apps/human-app/frontend/src/modules/worker/profile/components/add-api-key-modal.tsx	Consolidates layout props into sx.
packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration.page.tsx	Migrates Grid sizing and Stack spacing to new patterns.
packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration-form.tsx	Converts spacing/alignment props into sx.
packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-reward-amount-sort-mobile.tsx	Converts Typography color prop to sx.
packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx	Migrates Grid sizing API and normalizes spacing tokens.
packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx	Converts Stack layout props into sx.
packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-expires-at-sort-mobile.tsx	Converts Typography color prop to sx.
packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/status-chip.tsx	Converts Typography color prop to sx.
packages/apps/human-app/frontend/src/modules/worker/jobs/jobs.page.tsx	Migrates container layout and spacing tokens.
packages/apps/human-app/frontend/src/modules/worker/jobs/components/sorting.tsx	Normalizes Typography styling and preserves click behavior.
packages/apps/human-app/frontend/src/modules/worker/jobs/components/reward-amount.tsx	Replaces Typography color prop with sx.
packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-modal.tsx	Consolidates layout props into sx and normalizes Typography styling.
packages/apps/human-app/frontend/src/modules/worker/jobs/components/escrow-address-search-form.tsx	Migrates startAdornment to slotProps.
packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/components/mobile/available-jobs-reward-amount-sort-mobile.tsx	Converts Typography color prop to sx.
packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/components/mobile/available-jobs-list-mobile.tsx	Migrates container layout and spacing tokens; normalizes Grid sizing.
packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/available-jobs-filter-modal.tsx	Converts Stack layout props into sx.
packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/jobs-discovery.page.tsx	Simplifies layout (Grid -> Stack) and Paper elevation handling.
packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table.tsx	Normalizes Stack direction usage.
packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table-item-mobile.tsx	Migrates layout and spacing tokens; replaces Grid with Stack.
packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/hcaptcha-labeling.page.tsx	Removes useIsMobile and shifts to responsive sx spacing tokens.
packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/enable-labeler.page.tsx	Removes useIsMobile and shifts to responsive sx spacing tokens.
packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/components/user-stats-drawer.tsx	Converts system props to sx usage.
packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/components/user-stats-details.tsx	Consolidates spacing/alignment props into sx.
packages/apps/human-app/frontend/src/modules/worker/email-verification/components/resend-verification-email-form.tsx	Normalizes spacing and Typography styling to sx.
packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-success-message.tsx	Normalizes spacing to sx.
packages/apps/human-app/frontend/src/modules/signup/worker/views/sign-up-worker.page.tsx	Normalizes spacing + Typography styling to sx.
packages/apps/human-app/frontend/src/modules/signup/operator/views/edit-existing-keys-success.page.tsx	Normalizes spacing to sx.
packages/apps/human-app/frontend/src/modules/signup/operator/views/add-stake.page.tsx	Converts Typography color prop to sx.
packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/stake-form.tsx	Normalizes gap/flex values; moves gap into sx.
packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/buttons.tsx	Normalizes gap/flex values and button prop ordering.
packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys.tsx	Normalizes spacing and Typography width usage via sx.
packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys-form.tsx	Replaces inline style wrapper with Stack + sx.
packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/edit-existing-keys-form.tsx	Converts helper/error Typography color to sx.
packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/add-keys-form.tsx	Replaces inline style wrapper with Stack + sx; adjusts Grid spacing.
packages/apps/human-app/frontend/src/modules/signin/worker/sign-in-form.tsx	Converts React Router <Link> usage to MUI Link with component={Link} + sx.
packages/apps/human-app/frontend/src/modules/operator/profile/profile.page.tsx	Removes useIsMobile dependency and uses responsive Grid sizing API.
packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-stats.tsx	Converts padding/color/Stack layout props into sx.
packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-info.tsx	Reorders Typography props and normalizes Stack direction usage.
packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx	Moves Box width to sx.
packages/apps/human-app/frontend/src/modules/homepage/components/worker-sign-up.tsx	Removes useIsMobile and adopts responsive Grid sizing + slotProps for ListItemText.
packages/apps/human-app/frontend/src/modules/homepage/components/welcome.tsx	Removes useIsMobile and converts to responsive spacing + sx padding.
packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-up.tsx	Removes useIsMobile and adopts responsive Grid sizing + slotProps for ListItemText.
packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-in.tsx	Adds snackbar helper changes (currently includes a debug log).
packages/apps/human-app/frontend/src/modules/homepage/components/logo-section.tsx	Normalizes layout/styling into sx and adds responsive alignment.
packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx	Migrates Grid sizing props and spacing tokens.
packages/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx	Consolidates Grid/Box/Typography system props into sx.
packages/apps/human-app/frontend/src/main.tsx	Removes broad font imports in favor of explicit weight CSS imports.
packages/apps/human-app/frontend/package.json	Bumps @mui/material to v9 and removes mui-image deps.
docker-setup/Makefile	Comment placement cleanup (no functional change).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[dnechay]

MUI-realted part LGTM
Let's please either clean all stake-related stuff here or move it to separate PR