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.
Problem
Raw MUI components are used throughout the codebase instead of VerifyWise design system wrappers, creating visual inconsistency.
Raw
<TextField>— ~65 instances across 20+ filesHeaviest offenders:
Should use:
<Field>(components/Inputs/Field/)Raw
<Button>— ~175 instances across 34 filesHeaviest offenders (excluding StyleGuide demo pages):
Should use:
<CustomizableButton>(components/button/customizable-button/)Raw
<Avatar>— 13 instances across 10 filesShould 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.