Skip to content

Replace raw MUI components with VerifyWise design system wrappers #3542

@gorkem-bwl

Description

@gorkem-bwl

Problem

Raw MUI components are used throughout the codebase instead of VerifyWise design system wrappers, creating visual inconsistency.

Raw <TextField> — ~65 instances across 20+ files

Heaviest offenders:

  • EvalsDashboard/CreateScorerModal.tsx — 9 instances
  • EvalsDashboard/DatasetEditorPage.tsx — 6 instances
  • AITrustCenter/Overview/index.tsx — 6 instances
  • Modals/NewModelInventory/index.tsx — 4 instances
  • Forms/ProjectForm/index.tsx — 3 instances
  • AddNewRiskForm/RisksSection/index.tsx — 3 instances
  • FileManager/CreateFolderModal/index.tsx — 2 instances
  • 20+ additional files with 1-2 instances each

Should use: <Field> (components/Inputs/Field/)

Raw <Button> — ~175 instances across 34 files

Heaviest offenders (excluding StyleGuide demo pages):

  • Plugins/PluginManagement/index.tsx — 6 instances
  • EvalsDashboard/NewExperimentModal.tsx — 6 instances
  • EvalsDashboard/BuiltInDatasetsPage.tsx — 6 instances
  • Modals/Controlpane/NewControlPane.tsx — 6 instances
  • ProjectView/ProjectFrameworks/index.tsx — 5 instances
  • EvalsDashboard/DatasetEditorPage.tsx — 5 instances
  • TablePagination/index.tsx — 4 instances
  • Drawer/EUAIActQuestionDrawerDialog/index.tsx — 4 instances
  • Drawer/ClauseDrawerDialog/index.tsx — 4 instances

Should use: <CustomizableButton> (components/button/customizable-button/)

Raw <Avatar> — 13 instances across 10 files

  • Uploader/index.tsx — 3 instances
  • Sidebar/SidebarFooter.tsx — 2 instances
  • AdvisorChat/CustomMessage.tsx — 1 instance
  • ModelInventoryHistory/HistorySidebar.tsx — 1 instance
  • VendorLogo/index.tsx — 1 instance
  • ProjectView/Activity/index.tsx — 1 instance
  • SettingsPage/Profile/index.tsx — 1 instance

Should use: <VWAvatar> (components/Avatar/VWAvatar/)

Impact

Raw components skip the design system's consistent sizing (34px button height, 40px input height), border styling (#d0d5dd, 4px radius), and theme color tokens. Some inputs are taller, some buttons have different hover states, and avatars render with inconsistent fallback colors.

Solution

Migrate all raw MUI components to their VerifyWise wrapper equivalents. StyleGuide pages intentionally demonstrate raw MUI and can be excluded. Some raw <Button> usage in TablePagination and Drawers may need wrapper API extensions first.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions