Skip to content

Update static page components for MUI v7 compatibility #2657

Description

@SAUMILDHANKAR

This issue written with ChatGPT models' help

Overview

We want to upgrade the StaticPages* folders to MUI v7 so our code base is up to date, visually consistent, and compatible with the latest MUI ecosystem.

Details

⚠️ Important workflow note:
This work should be done on a dedicated feature branch (e.g. feature/mui-v7-upgrade) and must not be merged directly into develop or main until all related UI refactor and validation issues in the epic are complete.

The static page directories contain multiple MUI-dependent components and shared layout patterns that may be impacted by breaking changes introduced during the MUI v5 → v7 migration. Although these are considered “static” pages, they still rely heavily on MUI components such as Typography, Containers, Buttons, layout utilities, spacing systems, and custom styling overrides.

Since the project is upgrading MUI incrementally folder-by-folder, the StaticPages* directories should be treated as a dedicated migration sub-issue under the larger MUI v7 upgrade effort.

This work should focus on identifying and refactoring all MUI usage within the following folders so that the codebase is compatible with MUI v7 and related package updates:

  • components/StaticPages/
  • components/StaticPagesHI/
  • components/StaticPagesMCK/
  • components/StaticPagesSB/

This migration may require:

  • Updating deprecated or renamed MUI imports
  • Refactoring components affected by breaking API or prop changes
  • Updating Typography variants or styling behavior if variant mappings changed
  • Reviewing Containers, spacing, padding, margins, responsive layouts, and alignment behavior
  • Reviewing sx, theme overrides, CSS, SCSS, and layout consistency across static pages
  • Ensuring Buttons, links, and navigation-related UI elements still render correctly
  • Verifying responsive behavior across desktop and mobile layouts
  • Verifying RTL / i18n compatibility if applicable
  • Resolving TypeScript typing issues introduced by newer MUI definitions if encountered
  • Performing manual QA to identify visual regressions, layout inconsistencies, or spacing issues
  • Please consider adding critical tests and validations (optional)
  • Optional refactoring is allowed if it improves maintainability or compatibility during migration
  • Note: As of May 9, 2026, typescript feature branch isn't merged yet, so some of the jsx files written in this issue could have become tsx by the time developer is assigned so please keep that in mind.

Known files and folders in scope include (non-exhaustive):

  • components/StaticPages/About.jsx

  • components/StaticPages/Contact.jsx

  • components/StaticPages/Donate.jsx

  • components/StaticPages/Faq.jsx

  • components/StaticPages/PageWrapper.jsx

  • components/StaticPages/assets/

  • components/StaticPages/css/

  • components/StaticPages/scss/

  • components/StaticPagesHI/About.jsx

  • components/StaticPagesHI/Donate.jsx

  • components/StaticPagesHI/Faq.jsx

  • components/StaticPagesHI/Components/Page/

  • components/StaticPagesHI/Content/

  • components/StaticPagesHI/assets/

  • components/StaticPagesHI/css/

  • components/StaticPagesHI/scss/

  • components/StaticPagesMCK/About.jsx

  • components/StaticPagesMCK/Donate.jsx

  • components/StaticPagesMCK/Faq.jsx

  • components/StaticPagesMCK/assets/

  • components/StaticPagesMCK/css/

  • components/StaticPagesMCK/scss/

  • components/StaticPagesSB/

Particular attention should be given to:

  • Typography components and variant mappings
  • Shared layout wrappers and page containers
  • Custom spacing and responsive styling behavior
  • SCSS/CSS overrides interacting with MUI components
  • Any duplicated layout or styling logic across static page folders

Because MUI v7 introduces breaking changes across core components and styling behavior, developers should review the migration documentation while working through this folder migration.

Action Items

[PLEASE ADD ACTION ITEMS (Dev lead/developer will add)]

Resources

Metadata

Metadata

Assignees

No one assigned

    Fields

    No fields configured for Feature.

    Projects

    Status
    Prioritized Backlog

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions