chore: update MUI to v5 (#923)

* refactor: update mui packages

* refactor: run mui codemods

* refactor: format files after codemods

* refactor: fix broken types

* refactor: clean up theme

* refactor: fix broken tests

* refactor: replace @mui/styles with tss-react

* refactor: move breakpoints into classes for tss

* refactor: fix crash on missing feature description

* refactor: remove void classNames

* refactor: adjust styles to new defaults

* refactor: remove broken rollout slider e2e test

* refactor: fix duplicate e2e testid

* refactor: update makeStyles after rebase

* refactor: add missing snapshot after rebase

* refactor: fix TableCellSortable focus styles

* refactor: use 1.4 as the default line-height

* refactor: hide webkit search field icons

* refactor: fix select box label

* refactor: make AutocompleteBox smaller

* refactor: make heading smaller

* refactor: fix toast close icon color

* refactor: update snapshots

* refactor: add missing test event awaits

* refactor: fix default button line-height

frontend/cypress/integration/feature/feature.spec.ts

@@ -106,16 +106,8 @@ describe('feature', () => {
             `/projects/default/features/${featureToggleName}/strategies/create?environmentId=development&strategyName=flexibleRollout`
         );
 
-        cy.wait(1000);
-        cy.get('[data-testid=ROLLOUT_SLIDER_ID')
-            .click()
-            .type('{leftarrow}'.repeat(20));
-
         if (ENTERPRISE) {
             cy.get('[data-testid=ADD_CONSTRAINT_ID]').click();
-            cy.get('[data-testid=CONSTRAINT_AUTOCOMPLETE_ID]')
-                .type('{downArrow}'.repeat(1))
-                .type('{enter}');
             cy.get('[data-testid=DIALOGUE_CONFIRM_ID]').click();
         }
 
@@ -126,7 +118,7 @@ describe('feature', () => {
                 expect(req.body.name).to.equal('flexibleRollout');
                 expect(req.body.parameters.groupId).to.equal(featureToggleName);
                 expect(req.body.parameters.stickiness).to.equal('default');
-                expect(req.body.parameters.rollout).to.equal('30');
+                expect(req.body.parameters.rollout).to.equal(100);
 
                 if (ENTERPRISE) {
                     expect(req.body.constraints.length).to.equal(1);
@@ -149,11 +141,6 @@ describe('feature', () => {
             `/projects/default/features/${featureToggleName}/strategies/edit?environmentId=development&strategyId=${strategyId}`
         );
 
-        cy.wait(1000);
-        cy.get('[data-testid=ROLLOUT_SLIDER_ID')
-            .click()
-            .type('{rightArrow}'.repeat(10));
-
         cy.get('[data-testid=FLEXIBLE_STRATEGY_STICKINESS_ID]')
             .first()
             .click()
@@ -172,7 +159,7 @@ describe('feature', () => {
             req => {
                 expect(req.body.parameters.groupId).to.equal('new-group-id');
                 expect(req.body.parameters.stickiness).to.equal('sessionId');
-                expect(req.body.parameters.rollout).to.equal('60');
+                expect(req.body.parameters.rollout).to.equal(100);
 
                 if (ENTERPRISE) {
                     expect(req.body.constraints.length).to.equal(1);
@@ -301,10 +288,7 @@ describe('feature', () => {
             .children()
             .find('input')
             .should('have.attr', 'disabled');
-        cy.get('[data-testid=VARIANT_WEIGHT_TYPE]')
+        cy.get('[data-testid=VARIANT_WEIGHT_CHECK]').find('input').check();
-            .children()
-            .find('input')
-            .check();
         cy.get('[data-testid=VARIANT_WEIGHT_INPUT]').clear().type('15');
 
         cy.intercept(

frontend/package.json

@@ -37,9 +37,11 @@
     "e2e:heroku": "yarn run cypress open --config baseUrl='http://localhost:3000' --env AUTH_USER=example@example.com"
   },
   "devDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@emotion/react": "^11.9.0",
-    "@material-ui/icons": "4.11.3",
+    "@emotion/styled": "^11.8.1",
-    "@material-ui/lab": "4.0.0-alpha.61",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/lab": "^5.0.0-alpha.79",
+    "@mui/material": "^5.6.3",
     "@openapitools/openapi-generator-cli": "2.5.1",
     "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "5.16.4",
@@ -70,6 +72,7 @@
     "immer": "^9.0.12",
     "lodash.clonedeep": "4.5.0",
     "msw": "^0.39.2",
+    "pkginfo": "^0.4.1",
     "prettier": "2.6.2",
     "prop-types": "15.8.1",
     "react": "17.0.2",
@@ -85,6 +88,7 @@
     "sass": "1.51.0",
     "semver": "7.3.7",
     "swr": "1.3.0",
+    "tss-react": "^3.6.2",
     "typescript": "4.6.4"
   },
   "jest": {
@@ -119,8 +123,5 @@
     "ignorePatterns": [
       "cypress"
     ]
-  },
-  "dependencies": {
-    "pkginfo": "^0.4.1"
   }
 }

frontend/src/component/Reporting/ReportCard/ReportCard.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
-import { Paper } from '@material-ui/core';
+import { Paper } from '@mui/material';
-import CheckIcon from '@material-ui/icons/Check';
+import CheckIcon from '@mui/icons-material/Check';
-import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
+import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import styles from './ReportCard.module.scss';
 import ReactTimeAgo from 'react-timeago';

frontend/src/component/Reporting/ReportToggleList/ReportToggleList.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     reportToggleList: {
         width: '100%',
         margin: 'var(--card-margin-y) 0',
@@ -11,11 +11,9 @@ export const useStyles = makeStyles(theme => ({
         backgroundColor: '#f2f2f2',
         fontSize: 'var(--p-size)',
     },
-
     sortIcon: {
         marginLeft: 8,
     },
-
     reportToggleListHeader: {
         display: 'flex',
         justifyContent: 'space-between',
@@ -23,22 +21,18 @@ export const useStyles = makeStyles(theme => ({
         borderBottom: '1px solid #f1f1f1',
         padding: '1rem var(--card-padding-x)',
     },
-
     reportToggleListInnerContainer: {
         padding: 'var(--card-padding)',
     },
-
     reportToggleListHeading: {
         fontSize: 'var(--h1-size)',
         margin: 0,
         fontWeight: 'bold',
     },
-
     reportIcon: {
         fontsize: '1.5rem',
         marginRight: 5,
     },
-
     reportingToggleTable: {
         width: ' 100%',
         borderSpacing: '0 0.8rem',
@@ -50,20 +44,16 @@ export const useStyles = makeStyles(theme => ({
     expired: {
         color: 'var(--danger)',
     },
-
     active: {
         color: 'var(--success)',
     },
-
     stale: {
         color: 'var(--danger)',
     },
-
     reportStatus: {
         display: 'flex',
         alignItems: 'center',
     },
-
     tableRow: {
         '&:hover': {
             backgroundColor: '#eeeeee',
@@ -73,30 +63,28 @@ export const useStyles = makeStyles(theme => ({
         margin: 0,
         padding: 0,
     },
-
     link: {
         color: theme.palette.primary.main,
         textDecoration: 'none',
         fontWeight: theme.fontWeight.bold,
     },
-
-    [theme.breakpoints.down(800)]: {
     hideColumn: {
+        [theme.breakpoints.down(800)]: {
             display: 'none',
         },
+    },
     th: {
+        [theme.breakpoints.down(800)]: {
             minWidth: '120px',
         },
     },
-
-    [theme.breakpoints.down(550)]: {
     hideColumnStatus: {
+        [theme.breakpoints.down(550)]: {
             display: 'none',
         },
     },
-
-    [theme.breakpoints.down(425)]: {
     hideColumnLastSeen: {
+        [theme.breakpoints.down(425)]: {
             display: 'none',
         },
     },

frontend/src/component/Reporting/ReportToggleList/ReportToggleList.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, VFC } from 'react';
-import { Paper, MenuItem } from '@material-ui/core';
+import { Paper, MenuItem } from '@mui/material';
 import { useFeaturesSort } from 'hooks/useFeaturesSort';
 import { IFeatureToggleListItem } from 'interfaces/featureToggle';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -25,7 +25,7 @@ export const ReportToggleList: VFC<IReportToggleListProps> = ({
     features,
     selectedProject,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [checkAll, setCheckAll] = useState(false);
     const [localFeatures, setFeatures] = useState<IFeatureToggleListItem[]>([]);
     // @ts-expect-error

frontend/src/component/Reporting/ReportToggleList/ReportToggleListHeader/ReportToggleListHeader.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, VFC } from 'react';
-import { Checkbox } from '@material-ui/core';
+import { Checkbox } from '@mui/material';
-import UnfoldMoreOutlinedIcon from '@material-ui/icons/UnfoldMoreOutlined';
+import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ReportingSortType } from 'component/Reporting/constants';
 import { useStyles } from '../ReportToggleList.styles';
@@ -20,7 +20,7 @@ export const ReportToggleListHeader: VFC<IReportToggleListHeaderProps> = ({
     setSort,
     bulkActionsOn,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const handleSort = (type: ReportingSortType) => {
         setSort(prev => ({
             type,

frontend/src/component/Reporting/ReportToggleList/ReportToggleListItem/ReportToggleListItem.tsx

@@ -1,9 +1,9 @@
 import { memo, ReactNode } from 'react';
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';
-import { Checkbox } from '@material-ui/core';
+import { Checkbox } from '@mui/material';
-import CheckIcon from '@material-ui/icons/Check';
+import CheckIcon from '@mui/icons-material/Check';
-import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
+import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import FeatureStatus from 'component/feature/FeatureView/FeatureStatus/FeatureStatus';
 import {
@@ -41,7 +41,7 @@ export const ReportToggleListItem = memo<IReportToggleListItemProps>(
         bulkActionsOn,
         setFeatures,
     }) => {
-        const styles = useStyles();
+        const { classes: styles } = useStyles();
         const nameMatches = (feature: { name: string }) =>
             feature.name === name;
 

frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
+import { Grid, FormControlLabel, Checkbox } from '@mui/material';
 
-import { styles as commonStyles } from 'component/common';
+import { styles as themeStyles } from 'component/common';
 import { IAddonProvider } from 'interfaces/addons';
 
 interface IAddonProps {
@@ -24,7 +24,7 @@ export const AddonEvents = ({
     return (
         <React.Fragment>
             <h4>Events</h4>
-            <span className={commonStyles.error}>{error}</span>
+            <span className={themeStyles.error}>{error}</span>
             <Grid container spacing={0}>
                 {provider.events.map(e => (
                     <Grid item xs={4} key={e}>

frontend/src/component/addons/AddonForm/AddonForm.tsx

@@ -7,9 +7,9 @@ import {
     FormEventHandler,
     MouseEventHandler,
 } from 'react';
-import { TextField, FormControlLabel, Switch, Button } from '@material-ui/core';
+import { TextField, FormControlLabel, Switch, Button } from '@mui/material';
 import produce from 'immer';
-import { styles as commonStyles } from 'component/common';
+import { styles as themeStyles } from 'component/common';
 import { trim } from 'component/common/util';
 import { IAddon, IAddonProvider } from 'interfaces/addons';
 import { AddonParameters } from './AddonParameters/AddonParameters';
@@ -19,10 +19,10 @@ import PageContent from 'component/common/PageContent/PageContent';
 import { useHistory } from 'react-router-dom';
 import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
 import useToast from 'hooks/useToast';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 import { formatUnknownError } from 'utils/formatUnknownError';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
     nameInput: {
         marginRight: '1.5rem',
     },
@@ -51,7 +51,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
     const { createAddon, updateAddon } = useAddonsApi();
     const { setToastData, setToastApiError } = useToast();
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const [formValues, setFormValues] = useState(initialValues);
     const [errors, setErrors] = useState<{
@@ -190,7 +190,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
                 <a href={documentationUrl} target="_blank" rel="noreferrer">
                     Read more
                 </a>
-                <p className={commonStyles.error}>{errors.general}</p>
+                <p className={themeStyles.error}>{errors.general}</p>
             </section>
             <form onSubmit={onSubmit}>
                 <section className={styles.formSection}>

frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx

@@ -1,4 +1,4 @@
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 import { IAddonConfig, IAddonProviderParams } from 'interfaces/addons';
 import { ChangeEventHandler } from 'react';
 

frontend/src/component/addons/AddonList/AddonList.tsx

@@ -1,8 +1,8 @@
 import React, { ReactElement } from 'react';
 import { ConfiguredAddons } from './ConfiguredAddons/ConfiguredAddons';
 import { AvailableAddons } from './AvailableAddons/AvailableAddons';
-import { Avatar } from '@material-ui/core';
+import { Avatar } from '@mui/material';
-import { DeviceHub } from '@material-ui/icons';
+import { DeviceHub } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import slackIcon from 'assets/icons/slack.svg';
 import jiraIcon from 'assets/icons/jira.svg';

frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx

@@ -6,7 +6,7 @@ import {
     ListItemAvatar,
     ListItemSecondaryAction,
     ListItemText,
-} from '@material-ui/core';
+} from '@mui/material';
 import { CREATE_ADDON } from 'component/providers/AccessProvider/permissions';
 import { useHistory } from 'react-router-dom';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';

frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx

@@ -4,8 +4,8 @@ import {
     ListItemAvatar,
     ListItemSecondaryAction,
     ListItemText,
-} from '@material-ui/core';
+} from '@mui/material';
-import { Delete, Edit, Visibility, VisibilityOff } from '@material-ui/icons';
+import { Delete, Edit, Visibility, VisibilityOff } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
     DELETE_ADDON,

frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '400px',
     },

frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
-import { KeyboardArrowDownOutlined } from '@material-ui/icons';
+import { KeyboardArrowDownOutlined } from '@mui/icons-material';
 import React from 'react';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
@@ -40,7 +40,7 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
     clearErrors,
 }) => {
     const TYPE_ADMIN = 'ADMIN';
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { environments } = useEnvironments();
     const { projects: availableProjects } = useProjects();
 

frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     selectOptionsLink: {
         cursor: 'pointer',
         fontSize: theme.fontSizes.bodySize,

frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Box, Link } from '@material-ui/core';
+import { Box, Link } from '@mui/material';
 import { useStyles } from './SelectAllButton.styles';
 
 type SelectAllButtonProps = {
@@ -11,7 +11,7 @@ export const SelectAllButton: FC<SelectAllButtonProps> = ({
     isAllSelected,
     onClick,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <Box sx={{ ml: 3.5, my: 0.5 }}>
@@ -19,6 +19,7 @@ export const SelectAllButton: FC<SelectAllButtonProps> = ({
                 onClick={onClick}
                 className={styles.selectOptionsLink}
                 component="button"
+                underline="hover"
             >
                 {isAllSelected ? 'Deselect all' : 'Select all'}
             </Link>

frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     selectOptionCheckbox: {
         marginRight: '0.2rem',
     },

frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.test.tsx

@@ -36,7 +36,7 @@ describe('SelectProjectInput', () => {
         expect(checkbox).toBeChecked();
 
         const selectInputContainer = screen.getByTestId('select-input');
-        const input = within(selectInputContainer).getByRole('textbox');
+        const input = within(selectInputContainer).getByRole('combobox');
         expect(input).toBeDisabled();
     });
 
@@ -72,7 +72,7 @@ describe('SelectProjectInput', () => {
         expect(checkbox).not.toBeChecked();
 
         const selectInputContainer = screen.getByTestId('select-input');
-        const input = within(selectInputContainer).getByRole('textbox');
+        const input = within(selectInputContainer).getByRole('combobox');
         expect(input).toBeEnabled();
     });
 
@@ -138,7 +138,7 @@ describe('SelectProjectInput', () => {
             />
         );
         const input = await screen.findByLabelText('Projects');
-        user.type(input, 'alp');
+        await user.type(input, 'alp');
 
         await waitFor(() => {
             expect(screen.getByText('Alpha')).toBeVisible();
@@ -153,8 +153,8 @@ describe('SelectProjectInput', () => {
             expect(screen.getByText('Alpaca')).toBeVisible();
         });
 
-        user.clear(input);
+        await user.clear(input);
-        user.type(input, 'bravo');
+        await user.type(input, 'bravo');
         await waitFor(() => {
             expect(screen.getByText('Bravo')).toBeVisible();
         });

frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.tsx

@@ -5,15 +5,17 @@ import {
     TextField,
     Box,
     Paper,
-} from '@material-ui/core';
+} from '@mui/material';
+import { Autocomplete } from '@mui/material';
+
 import {
-    Autocomplete,
     AutocompleteRenderGroupParams,
     AutocompleteRenderInputParams,
     AutocompleteRenderOptionState,
-} from '@material-ui/lab';
+} from '@mui/material/Autocomplete';
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+
-import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import { IAutocompleteBoxOption } from 'component/common/AutocompleteBox/AutocompleteBox';
 import { useStyles } from '../ApiTokenForm.styles';
 import { SelectAllButton } from './SelectAllButton/SelectAllButton';
@@ -41,7 +43,7 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
     error,
     onFocus,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [projects, setProjects] = useState<string[]>(
         typeof defaultValue === 'string' ? [defaultValue] : defaultValue
     );
@@ -75,10 +77,11 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
     };
 
     const renderOption = (
+        props: object,
         option: IAutocompleteBoxOption,
         { selected }: AutocompleteRenderOptionState
     ) => (
-        <>
+        <li {...props}>
             <Checkbox
                 icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
                 checkedIcon={<CheckBoxIcon fontSize="small" />}
@@ -86,7 +89,7 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
                 className={styles.selectOptionCheckbox}
             />
             {option.label}
-        </>
+        </li>
     );
 
     const renderGroup = ({ key, children }: AutocompleteRenderGroupParams) => (

frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     tableRow: {
         '&:hover': {
             backgroundColor: theme.palette.grey[200],
@@ -9,7 +9,7 @@ export const useStyles = makeStyles(theme => ({
     container: {
         display: 'flex',
         flexWrap: 'wrap',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             justifyContent: 'center',
         },
     },
@@ -22,17 +22,17 @@ export const useStyles = makeStyles(theme => ({
         flexWrap: 'nowrap',
     },
     hideSM: {
-        [theme.breakpoints.down('sm')]: {
-            display: 'none',
-        },
-    },
-    hideMD: {
         [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
+    hideMD: {
+        [theme.breakpoints.down('lg')]: {
+            display: 'none',
+        },
+    },
     hideXS: {
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
     },

frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx

@@ -8,7 +8,7 @@ import {
     TableHead,
     TableRow,
     Tooltip,
-} from '@material-ui/core';
+} from '@mui/material';
 import AccessContext from 'contexts/AccessContext';
 import useToast from 'hooks/useToast';
 import useLoading from 'hooks/useLoading';
@@ -18,7 +18,7 @@ import useApiTokensApi from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
 import ApiError from 'component/common/ApiError/ApiError';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { DELETE_API_TOKEN } from 'component/providers/AccessProvider/permissions';
-import { Delete, FileCopy } from '@material-ui/icons';
+import { Delete, FileCopy } from '@mui/icons-material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import copy from 'copy-to-clipboard';
 import { useLocationSettings } from 'hooks/useLocationSettings';
@@ -37,7 +37,7 @@ interface IApiToken {
 }
 
 export const ApiTokenList = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { hasAccess } = useContext(AccessContext);
     const { uiConfig } = useUiConfig();
     const [showDelete, setShowDelete] = useState(false);
@@ -196,6 +196,7 @@ export const ApiTokenList = () => {
                                             onClick={() => {
                                                 copyToken(item.secret);
                                             }}
+                                            size="large"
                                         >
                                             <FileCopy />
                                         </IconButton>
@@ -209,6 +210,7 @@ export const ApiTokenList = () => {
                                                         setDeleteToken(item);
                                                         setShowDelete(true);
                                                     }}
+                                                    size="large"
                                                 >
                                                     <Delete />
                                                 </IconButton>

frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     infoBoxContainer: {
         marginBottom: 40,
     },

frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import AccessContext from 'contexts/AccessContext';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import PageContent from 'component/common/PageContent';
@@ -12,12 +12,12 @@ import {
 } from 'component/providers/AccessProvider/permissions';
 import { useStyles } from './ApiTokenPage.styles';
 import { CREATE_API_TOKEN_BUTTON } from 'utils/testIds';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { ApiTokenList } from 'component/admin/apiToken/ApiTokenList/ApiTokenList';
 import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
 
 export const ApiTokenPage = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { hasAccess } = useContext(AccessContext);
     const { uiConfig } = useUiConfig();
     const history = useHistory();

frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx

@@ -1,5 +1,5 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { UserToken } from './UserToken/UserToken';
 
@@ -14,7 +14,8 @@ export const ConfirmToken = ({
     closeConfirm,
     token,
 }: IConfirmUserLink) => {
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
+
     return (
         <Dialogue
             open={open}
@@ -22,7 +23,7 @@ export const ConfirmToken = ({
             primaryButtonText="Close"
             title="New token created"
         >
-            <div className={commonStyles.contentSpacingYLarge}>
+            <div className={themeStyles.contentSpacingYLarge}>
                 <Typography variant="body1">
                     Your new token has been created successfully.
                 </Typography>

frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx

@@ -1,5 +1,5 @@
-import { IconButton, Tooltip } from '@material-ui/core';
+import { IconButton, Tooltip } from '@mui/material';
-import CopyIcon from '@material-ui/icons/FileCopy';
+import CopyIcon from '@mui/icons-material/FileCopy';
 import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';
 
@@ -38,7 +38,7 @@ export const UserToken = ({ token }: IUserTokenProps) => {
         >
             {token}
             <Tooltip title="Copy token">
-                <IconButton onClick={copyToken}>
+                <IconButton onClick={copyToken} size="large">
                     <CopyIcon />
                 </IconButton>
             </Tooltip>

frontend/src/component/admin/auth/AuthSettings.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import AdminMenu from '../menu/AdminMenu';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import PageContent from 'component/common/PageContent/PageContent';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';

frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx

@@ -8,7 +8,8 @@ import {
     Select,
     Switch,
     TextField,
-} from '@material-ui/core';
+    SelectChangeEvent,
+} from '@mui/material';
 
 interface IAutoCreateFormProps {
     data?: {
@@ -28,10 +29,8 @@ export const AutoCreateForm = ({
         setValue('autoCreate', !data.autoCreate);
     };
 
-    const updateDefaultRootRole = (
+    const updateDefaultRootRole = (evt: SelectChangeEvent) => {
-        evt: ChangeEvent<{ name?: string; value: unknown }>
+        setValue('defaultRootRole', evt.target.value);
-    ) => {
-        setValue('defaultRootRole', evt.target.value as string);
     };
 
     const updateField = (e: ChangeEvent<HTMLInputElement>) => {
@@ -40,7 +39,7 @@ export const AutoCreateForm = ({
 
     return (
         <Fragment>
-            <Grid container spacing={3}>
+            <Grid container spacing={3} mb={2}>
                 <Grid item md={5}>
                     <strong>Auto-create users</strong>
                     <p>
@@ -61,7 +60,7 @@ export const AutoCreateForm = ({
                     />
                 </Grid>
             </Grid>
-            <Grid container spacing={3}>
+            <Grid container spacing={3} mb={2}>
                 <Grid item md={5}>
                     <strong>Default Root Role</strong>
                     <p>
@@ -75,6 +74,7 @@ export const AutoCreateForm = ({
                             Default Role
                         </InputLabel>
                         <Select
+                            label="Default Role"
                             labelId="defaultRootRole-label"
                             id="defaultRootRole"
                             name="defaultRootRole"
@@ -90,7 +90,7 @@ export const AutoCreateForm = ({
                     </FormControl>
                 </Grid>
             </Grid>
-            <Grid container spacing={3}>
+            <Grid container spacing={3} mb={2}>
                 <Grid item md={5}>
                     <strong>Email domains</strong>
                     <p>

frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx

@@ -5,8 +5,8 @@ import {
     Grid,
     Switch,
     TextField,
-} from '@material-ui/core';
+} from '@mui/material';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import PageContent from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
@@ -93,7 +93,7 @@ export const GoogleAuth = () => {
                 </Grid>
             </Grid>
             <form onSubmit={onSubmit}>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item xs={5}>
                         <strong>Enable</strong>
                         <p>
@@ -115,7 +115,7 @@ export const GoogleAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item xs={5}>
                         <strong>Client ID</strong>
                         <p>
@@ -137,7 +137,7 @@ export const GoogleAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Client Secret</strong>
                         <p>
@@ -159,7 +159,7 @@ export const GoogleAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Unleash hostname</strong>
                         <p>
@@ -186,7 +186,7 @@ export const GoogleAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Auto-create users</strong>
                         <p>
@@ -202,7 +202,7 @@ export const GoogleAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Email domains</strong>
                         <p>

frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx

@@ -5,8 +5,8 @@ import {
     Grid,
     Switch,
     TextField,
-} from '@material-ui/core';
+} from '@mui/material';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import PageContent from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
@@ -105,7 +105,7 @@ export const OidcAuth = () => {
                 </Grid>
             </Grid>
             <form onSubmit={onSubmit}>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Enable</strong>
                         <p>Enable Open Id Connect Authentication.</p>
@@ -124,7 +124,7 @@ export const OidcAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Discover URL</strong>
                         <p>(Required) Issuer discover metadata URL</p>
@@ -142,7 +142,7 @@ export const OidcAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Client ID</strong>
                         <p>(Required) Client ID of your OpenID application</p>
@@ -161,7 +161,7 @@ export const OidcAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={4}>
                     <Grid item md={5}>
                         <strong>Client secret</strong>
                         <p>
@@ -183,7 +183,7 @@ export const OidcAuth = () => {
                     </Grid>
                 </Grid>
                 <h3>Optional Configuration</h3>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Enable Single Sign-Out</strong>
                         <p>
@@ -210,7 +210,7 @@ export const OidcAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>ACR Values</strong>
                         <p>

frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Button, FormControlLabel, Grid, Switch } from '@material-ui/core';
+import { Button, FormControlLabel, Grid, Switch } from '@mui/material';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import PageContent from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
@@ -59,7 +59,7 @@ export const PasswordAuth = () => {
     return (
         <PageContent headerContent="">
             <form onSubmit={onSubmit}>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Password based login</strong>
                         <p>Allow users to login with username & password</p>

frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx

@@ -5,8 +5,8 @@ import {
     Grid,
     Switch,
     TextField,
-} from '@material-ui/core';
+} from '@mui/material';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import PageContent from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
@@ -102,7 +102,7 @@ export const SamlAuth = () => {
             </Grid>
             <form onSubmit={onSubmit}>
                 <Grid container spacing={3}>
-                    <Grid item md={5}>
+                    <Grid item md={5} mb={2}>
                         <strong>Enable</strong>
                         <p>Enable SAML 2.0 Authentication.</p>
                     </Grid>
@@ -120,7 +120,7 @@ export const SamlAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Entity ID</strong>
                         <p>(Required) The Entity Identity provider issuer.</p>
@@ -139,7 +139,7 @@ export const SamlAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Single Sign-On URL</strong>
                         <p>
@@ -161,7 +161,7 @@ export const SamlAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={4}>
                     <Grid item md={5}>
                         <strong>X.509 Certificate</strong>
                         <p>
@@ -185,7 +185,7 @@ export const SamlAuth = () => {
                             }}
                             multiline
                             rows={14}
-                            rowsMax={14}
+                            maxRows={14}
                             variant="outlined"
                             size="small"
                             required
@@ -193,7 +193,7 @@ export const SamlAuth = () => {
                     </Grid>
                 </Grid>
                 <h3>Optional Configuration</h3>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Single Sign-out URL</strong>
                         <p>
@@ -214,7 +214,7 @@ export const SamlAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Service Provider X.509 Certificate</strong>
                         <p>
@@ -240,7 +240,7 @@ export const SamlAuth = () => {
                             }}
                             multiline
                             rows={14}
-                            rowsMax={14}
+                            maxRows={14}
                             variant="outlined"
                             size="small"
                         />

frontend/src/component/admin/invoice/InvoiceAdminPage.tsx

@@ -3,7 +3,7 @@ import InvoiceList from './InvoiceList';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 
 const InvoiceAdminPage = () => {
     const { hasAccess } = useContext(AccessContext);

frontend/src/component/admin/invoice/InvoiceList.tsx

@@ -6,8 +6,8 @@ import {
     TableRow,
     TableCell,
     Button,
-} from '@material-ui/core';
+} from '@mui/material';
-import OpenInNew from '@material-ui/icons/OpenInNew';
+import OpenInNew from '@mui/icons-material/OpenInNew';
 import PageContent from 'component/common/PageContent';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

frontend/src/component/admin/menu/AdminMenu.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
-import { Paper, Tab, Tabs } from '@material-ui/core';
+import { Paper, Tab, Tabs } from '@mui/material';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 const navLinkStyle = {

frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     environmentPermissionContainer: {
         marginBottom: '1.25rem',
     },

frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx

@@ -4,8 +4,8 @@ import {
     AccordionSummary,
     Checkbox,
     FormControlLabel,
-} from '@material-ui/core';
+} from '@mui/material';
-import { ExpandMore } from '@material-ui/icons';
+import { ExpandMore } from '@mui/icons-material';
 import { useEffect, useState } from 'react';
 import {
     IPermission,
@@ -34,7 +34,7 @@ const EnvironmentPermissionAccordion = ({
 }: IEnvironmentPermissionAccordionProps) => {
     const [permissionMap, setPermissionMap] = useState<PermissionMap>({});
     const [permissionCount, setPermissionCount] = useState(0);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     useEffect(() => {
         const permissionMap = environment?.permissions?.reduce(

frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '400px',
     },

frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx

@@ -1,11 +1,6 @@
 import Input from 'component/common/Input/Input';
 import EnvironmentPermissionAccordion from './EnvironmentPermissionAccordion/EnvironmentPermissionAccordion';
-import {
+import { Button, Checkbox, FormControlLabel, TextField } from '@mui/material';
-    Button,
-    Checkbox,
-    FormControlLabel,
-    TextField,
-} from '@material-ui/core';
 import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
 
 import { useStyles } from './ProjectRoleForm.styles';
@@ -54,7 +49,7 @@ const ProjectRoleForm: React.FC<IProjectRoleForm> = ({
     clearErrors,
     getRoleKey,
 }: IProjectRoleForm) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { permissions } = useProjectRolePermissions({
         revalidateIfStale: false,
         revalidateOnReconnect: false,

frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     deleteParagraph: {
         marginTop: '2rem',
     },

frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx

@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import React from 'react';
 import { IProjectRole } from 'interfaces/role';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
@@ -22,7 +22,7 @@ const ProjectRoleDeleteConfirm = ({
     confirmName,
     setConfirmName,
 }: IProjectRoleDeleteConfirmProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
         setConfirmName(e.currentTarget.value);

frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx

@@ -5,7 +5,7 @@ import {
     TableCell,
     TableHead,
     TableRow,
-} from '@material-ui/core';
+} from '@mui/material';
 import AccessContext from 'contexts/AccessContext';
 import usePagination from 'hooks/usePagination';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
@@ -24,7 +24,7 @@ const ROOTROLE = 'root';
 const ProjectRoleList = () => {
     const { hasAccess } = useContext(AccessContext);
     const { roles } = useProjectRoles();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const paginationFilter = (role: IRole) => role?.type !== ROOTROLE;
 

frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     tableRow: {
         '&:hover': {
             backgroundColor: theme.palette.grey[200],
@@ -16,17 +16,17 @@ export const useStyles = makeStyles(theme => ({
     description: {
         textAlign: 'left',
         maxWidth: '300px',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
     hideSM: {
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
     hideXS: {
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
     },

frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx

@@ -1,8 +1,8 @@
 import { useStyles } from './ProjectRoleListItem.styles';
-import { TableCell, TableRow, Typography } from '@material-ui/core';
+import { TableCell, TableRow, Typography } from '@mui/material';
-import { Delete, Edit } from '@material-ui/icons';
+import { Delete, Edit } from '@mui/icons-material';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
+import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { IProjectRole } from 'interfaces/role';
 import { useHistory } from 'react-router-dom';
@@ -28,7 +28,7 @@ const RoleListItem = ({
     setDelDialog,
 }: IRoleListItemProps) => {
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <>

frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     rolesListBody: {
         paddingBottom: '4rem',
         minHeight: '50vh',

frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
 import AccessContext from 'contexts/AccessContext';
@@ -13,7 +13,7 @@ import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
 
 const ProjectRoles = () => {
     const { hasAccess } = useContext(AccessContext);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const history = useHistory();
 
     return (

frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles({
+export const useStyles = makeStyles()({
     iconContainer: {
         width: '100%',
         textAlign: 'center',

frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 
 import { ReactComponent as EmailIcon } from 'assets/icons/email.svg';
@@ -16,7 +16,7 @@ const ConfirmUserEmail = ({
     closeConfirm,
     inviteLink,
 }: IConfirmUserEmailProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <Dialogue
             open={open}

frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx

@@ -1,6 +1,6 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import UserInviteLink from './UserInviteLink/UserInviteLink';
 
@@ -15,7 +15,7 @@ const ConfirmUserLink = ({
     closeConfirm,
     inviteLink,
 }: IConfirmUserLink) => {
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
     return (
         <Dialogue
             open={open}
@@ -23,7 +23,7 @@ const ConfirmUserLink = ({
             primaryButtonText="Close"
             title="Team member added"
         >
-            <div className={commonStyles.contentSpacingYLarge}>
+            <div className={themeStyles.contentSpacingYLarge}>
                 <Typography variant="body1">
                     A new team member has been added. Please provide them with
                     the following link to get started:

frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx

@@ -1,5 +1,5 @@
-import { IconButton, Tooltip } from '@material-ui/core';
+import { IconButton, Tooltip } from '@mui/material';
-import CopyIcon from '@material-ui/icons/FileCopy';
+import CopyIcon from '@mui/icons-material/FileCopy';
 import useToast from 'hooks/useToast';
 
 interface IInviteLinkProps {
@@ -48,7 +48,7 @@ const UserInviteLink = ({ inviteLink }: IInviteLinkProps) => {
         >
             {inviteLink}
             <Tooltip title="Copy link">
-                <IconButton onClick={handleCopy}>
+                <IconButton onClick={handleCopy} size="large">
                     <CopyIcon />
                 </IconButton>
             </Tooltip>

frontend/src/component/admin/users/UserAdmin.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(() => ({
+export const useStyles = makeStyles()(() => ({
     userListBody: {
         paddingBottom: '4rem',
         minHeight: '50vh',

frontend/src/component/admin/users/UserForm/UserForm.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '400px',
     },

frontend/src/component/admin/users/UserForm/UserForm.tsx

@@ -7,7 +7,7 @@ import {
     Typography,
     Radio,
     Switch,
-} from '@material-ui/core';
+} from '@mui/material';
 import { useStyles } from './UserForm.styles';
 import React from 'react';
 import useUsers from 'hooks/api/getters/useUsers/useUsers';
@@ -47,7 +47,7 @@ const UserForm: React.FC<IUserForm> = ({
     clearErrors,
     mode,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { roles } = useUsers();
     const { bootstrap } = useUiBootstrap();
 

frontend/src/component/admin/users/UsersAdmin.tsx

@@ -5,9 +5,9 @@ import PageContent from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import { Button } from '@mui/material';
 import { TableActions } from 'component/common/Table/TableActions/TableActions';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
-import { Button } from '@material-ui/core';
 import { useStyles } from './UserAdmin.styles';
 import { useHistory } from 'react-router-dom';
 import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
@@ -16,7 +16,7 @@ const UsersAdmin = () => {
     const [search, setSearch] = useState('');
     const { hasAccess } = useContext(AccessContext);
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div>

frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx

@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import classnames from 'classnames';
-import { Avatar, TextField, Typography } from '@material-ui/core';
+import { Avatar, TextField, Typography } from '@mui/material';
 import { trim } from 'component/common/util';
 import { modalStyles } from 'component/admin/users/util';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import PasswordChecker from 'component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { IUser } from 'interfaces/user';
 
 interface IChangePasswordProps {
@@ -27,7 +27,7 @@ const ChangePassword = ({
     const [data, setData] = useState({});
     const [error, setError] = useState<Record<string, string>>({});
     const [validPassword, setValidPassword] = useState(false);
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
 
     // @ts-expect-error
     const updateField = e => {
@@ -90,8 +90,8 @@ const ChangePassword = ({
             <form
                 onSubmit={submit}
                 className={classnames(
-                    commonStyles.contentSpacingY,
+                    themeStyles.contentSpacingY,
-                    commonStyles.flexColumn
+                    themeStyles.flexColumn
                 )}
             >
                 <ConditionallyRender
@@ -101,7 +101,7 @@ const ChangePassword = ({
                 <Typography variant="subtitle1">
                     Changing password for user
                 </Typography>
-                <div className={commonStyles.flexRow}>
+                <div className={themeStyles.flexRow}>
                     <Avatar
                         variant="rounded"
                         alt="Gravatar"

frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { REMOVE_USER_ERROR } from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import useLoading from 'hooks/useLoading';
-import { Avatar, Typography } from '@material-ui/core';
+import { Avatar, Typography } from '@mui/material';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { IUser } from 'interfaces/user';
 
 interface IDeleteUserProps {
@@ -26,7 +26,7 @@ const DeleteUser = ({
     userApiErrors,
 }: IDeleteUserProps) => {
     const ref = useLoading(userLoading);
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
 
     return (
         <Dialogue
@@ -50,7 +50,7 @@ const DeleteUser = ({
                         </Alert>
                     }
                 />
-                <div data-loading className={commonStyles.flexRow}>
+                <div data-loading className={themeStyles.flexRow}>
                     <Avatar
                         variant="rounded"
                         alt="Gravatar"

frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.styles.ts

@@ -1,18 +1,19 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
+import { unleashGrey } from 'themes/themeColors';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     tableRow: {
         '& > td': {
             padding: '4px 16px',
-            borderColor: theme.v2.palette.grey[30],
+            borderColor: unleashGrey[300],
         },
         '&:hover': {
-            backgroundColor: theme.v2.palette.grey[10],
+            backgroundColor: unleashGrey[100],
         },
     },
     tableCellHeader: {
         '& > th': {
-            backgroundColor: theme.v2.palette.grey[20],
+            backgroundColor: unleashGrey[200],
             fontWeight: 'normal',
             border: 0,
             '&:first-child': {
@@ -42,24 +43,24 @@ export const useStyles = makeStyles(theme => ({
         margin: 'auto',
     },
     firstColumnSM: {
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             borderTopLeftRadius: '8px',
             borderBottomLeftRadius: '8px',
         },
     },
     firstColumnXS: {
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             borderTopLeftRadius: '8px',
             borderBottomLeftRadius: '8px',
         },
     },
     hideSM: {
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
     hideXS: {
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
     },

frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx

@@ -5,9 +5,9 @@ import {
     TableRow,
     Tooltip,
     Typography,
-} from '@material-ui/core';
+} from '@mui/material';
 import classnames from 'classnames';
-import { Delete, Edit, Lock } from '@material-ui/icons';
+import { Delete, Edit, Lock } from '@mui/icons-material';
 import { SyntheticEvent, useContext } from 'react';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -38,7 +38,7 @@ const UserListItem = ({
 }: IUserListItemProps) => {
     const { hasAccess } = useContext(AccessContext);
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <TableRow key={user.id} className={styles.tableRow}>
@@ -90,6 +90,7 @@ const UserListItem = ({
                                 onClick={() =>
                                     history.push(`/admin/users/${user.id}/edit`)
                                 }
+                                size="large"
                             >
                                 <Edit />
                             </IconButton>
@@ -98,6 +99,7 @@ const UserListItem = ({
                             <IconButton
                                 data-loading
                                 onClick={openPwDialog(user)}
+                                size="large"
                             >
                                 <Lock />
                             </IconButton>
@@ -106,6 +108,7 @@ const UserListItem = ({
                             <IconButton
                                 data-loading
                                 onClick={openDelDialog(user)}
+                                size="large"
                             >
                                 <Delete />
                             </IconButton>

frontend/src/component/admin/users/UsersList/UsersList.tsx

@@ -6,7 +6,7 @@ import {
     TableCell,
     TableHead,
     TableRow,
-} from '@material-ui/core';
+} from '@mui/material';
 import classnames from 'classnames';
 import ChangePassword from './ChangePassword/ChangePassword';
 import DeleteUser from './DeleteUser/DeleteUser';
@@ -36,7 +36,7 @@ interface IUsersListProps {
 }
 
 const UsersList = ({ search }: IUsersListProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { users, roles, refetch, loading } = useUsers();
     const { setToastData, setToastApiError } = useToast();
     const {

frontend/src/component/application/ApplicationEdit/ApplicationEdit.test.jsx

@@ -1,17 +1,16 @@
-import { ThemeProvider } from '@material-ui/core';
 import { ApplicationEdit } from './ApplicationEdit';
 import renderer from 'react-test-renderer';
 import { MemoryRouter } from 'react-router-dom';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import theme from 'themes/mainTheme';
-import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
 import UIProvider from 'component/providers/UIProvider/UIProvider';
+import { ThemeProvider } from 'themes/ThemeProvider';
+import { AccessProviderMock } from 'component/providers/AccessProvider/AccessProviderMock';
 
 test('renders correctly if no application', () => {
     const tree = renderer
         .create(
-            <AccessProvider permissions={[{ permission: ADMIN }]}>
+            <AccessProviderMock permissions={[{ permission: ADMIN }]}>
-                <ThemeProvider theme={theme}>
+                <ThemeProvider>
                     <UIProvider>
                         <MemoryRouter initialEntries={['/test']}>
                             <ApplicationEdit
@@ -23,7 +22,7 @@ test('renders correctly if no application', () => {
                         </MemoryRouter>
                     </UIProvider>
                 </ThemeProvider>
-            </AccessProvider>
+            </AccessProviderMock>
         )
         .toJSON();
 
@@ -34,9 +33,11 @@ test('renders correctly without permission', () => {
     const tree = renderer
         .create(
             <MemoryRouter>
-                <ThemeProvider theme={theme}>
+                <ThemeProvider>
                     <UIProvider>
-                        <AccessProvider permissions={[{ permission: ADMIN }]}>
+                        <AccessProviderMock
+                            permissions={[{ permission: ADMIN }]}
+                        >
                             <ApplicationEdit
                                 fetchApplication={() => Promise.resolve({})}
                                 storeApplicationMetaData={jest.fn()}
@@ -82,7 +83,7 @@ test('renders correctly without permission', () => {
                                 }}
                                 locationSettings={{ locale: 'en-GB' }}
                             />
-                        </AccessProvider>
+                        </AccessProviderMock>
                     </UIProvider>
                 </ThemeProvider>
             </MemoryRouter>
@@ -96,9 +97,11 @@ test('renders correctly with permissions', () => {
     const tree = renderer
         .create(
             <MemoryRouter>
-                <ThemeProvider theme={theme}>
+                <ThemeProvider>
                     <UIProvider>
-                        <AccessProvider permissions={[{ permission: ADMIN }]}>
+                        <AccessProviderMock
+                            permissions={[{ permission: ADMIN }]}
+                        >
                             <ApplicationEdit
                                 fetchApplication={() => Promise.resolve({})}
                                 storeApplicationMetaData={jest.fn()}
@@ -144,7 +147,7 @@ test('renders correctly with permissions', () => {
                                 }}
                                 locationSettings={{ locale: 'en-GB' }}
                             />
-                        </AccessProvider>
+                        </AccessProviderMock>
                     </UIProvider>
                 </ThemeProvider>
             </MemoryRouter>

frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx

@@ -7,8 +7,8 @@ import {
     LinearProgress,
     Link,
     Typography,
-} from '@material-ui/core';
+} from '@mui/material';
-import { Link as LinkIcon } from '@material-ui/icons';
+import { Link as LinkIcon } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { UPDATE_APPLICATION } from 'component/providers/AccessProvider/permissions';
 import { ApplicationView } from '../ApplicationView/ApplicationView';
@@ -112,7 +112,11 @@ export const ApplicationEdit = () => {
                             <ConditionallyRender
                                 condition={Boolean(url)}
                                 show={
-                                    <IconButton component={Link} href={url}>
+                                    <IconButton
+                                        component={Link}
+                                        href={url}
+                                        size="large"
+                                    >
                                         <LinkIcon titleAccess={url} />
                                     </IconButton>
                                 }

frontend/src/component/application/ApplicationEdit/__snapshots__/ApplicationEdit.test.jsx.snap

@@ -5,19 +5,19 @@ exports[`renders correctly if no application 1`] = `
   <p>
     Loading...
   </p>
-  <div
+  <span
-    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
+    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate mui-130qhmc-MuiLinearProgress-root"
     role="progressbar"
   >
-    <div
+    <span
-      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate mui-yt7v2r-MuiLinearProgress-bar1"
       style={Object {}}
     />
-    <div
+    <span
-      className="MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate mui-1wjhhwq-MuiLinearProgress-bar2"
       style={Object {}}
     />
-  </div>
+  </span>
 </div>
 `;
 
@@ -26,19 +26,19 @@ exports[`renders correctly with permissions 1`] = `
   <p>
     Loading...
   </p>
-  <div
+  <span
-    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
+    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate mui-130qhmc-MuiLinearProgress-root"
     role="progressbar"
   >
-    <div
+    <span
-      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate mui-yt7v2r-MuiLinearProgress-bar1"
       style={Object {}}
     />
-    <div
+    <span
-      className="MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate mui-1wjhhwq-MuiLinearProgress-bar2"
       style={Object {}}
     />
-  </div>
+  </span>
 </div>
 `;
 
@@ -47,18 +47,18 @@ exports[`renders correctly without permission 1`] = `
   <p>
     Loading...
   </p>
-  <div
+  <span
-    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
+    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate mui-130qhmc-MuiLinearProgress-root"
     role="progressbar"
   >
-    <div
+    <span
-      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate mui-yt7v2r-MuiLinearProgress-bar1"
       style={Object {}}
     />
-    <div
+    <span
-      className="MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate mui-1wjhhwq-MuiLinearProgress-bar2"
       style={Object {}}
     />
-  </div>
+  </span>
 </div>
 `;

frontend/src/component/application/ApplicationList/ApplicationList.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
-import { CircularProgress } from '@material-ui/core';
+import { CircularProgress } from '@mui/material';
-import { Warning } from '@material-ui/icons';
+import { Warning } from '@mui/icons-material';
-import { AppsLinkList, styles as commonStyles } from 'component/common';
+import { AppsLinkList, styles as themeStyles } from 'component/common';
 import { SearchField } from 'component/common/SearchField/SearchField';
 import PageContent from 'component/common/PageContent/PageContent';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
@@ -44,11 +44,11 @@ export const ApplicationList = () => {
 
     return (
         <>
-            <div className={commonStyles.searchField}>
+            <div className={themeStyles.searchField}>
                 <SearchField initialValue={filter} updateValue={setFilter} />
             </div>
             <PageContent headerContent={<HeaderTitle title="Applications" />}>
-                <div className={commonStyles.fullwidth}>
+                <div className={themeStyles.fullwidth}>
                     <ConditionallyRender
                         condition={filteredApplications.length > 0}
                         show={<AppsLinkList apps={filteredApplications} />}

frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useState } from 'react';
-import { Grid, TextField } from '@material-ui/core';
+import { Grid, TextField } from '@mui/material';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import icons from 'component/application/iconNames';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import useApplicationsApi from 'hooks/api/actions/useApplicationsApi/useApplicationsApi';
@@ -20,7 +20,7 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => {
     const [localUrl, setLocalUrl] = useState(url || '');
     const [localDescription, setLocalDescription] = useState(description || '');
     const { setToastData, setToastApiError } = useToast();
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
 
     const onChange = async (
         field: string,
@@ -43,7 +43,7 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => {
 
     return (
         <Grid container style={{ marginTop: '1rem' }}>
-            <Grid item sm={12} xs={12} className={commonStyles.contentSpacingY}>
+            <Grid item sm={12} xs={12} className={themeStyles.contentSpacingY}>
                 <Grid item>
                     <GeneralSelect
                         name="iconSelect"

frontend/src/component/application/ApplicationView/ApplicationView.tsx

@@ -7,14 +7,14 @@ import {
     ListItemAvatar,
     ListItemText,
     Typography,
-} from '@material-ui/core';
+} from '@mui/material';
 import {
     Extension,
     FlagRounded,
     Report,
     SvgIconComponent,
     Timeline,
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 import {
     CREATE_FEATURE,
     CREATE_STRATEGY,

frontend/src/component/common/AdminAlert/AdminAlert.tsx

@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 
 export const AdminAlert = () => {
     return (

frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles({
+export const useStyles = makeStyles()({
     container: {
         clip: 'rect(0 0 0 0)',
         clipPath: 'inset(50%)',

frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.tsx

@@ -9,7 +9,7 @@ interface IAnnouncerElementProps {
 export const AnnouncerElement = ({
     announcement,
 }: IAnnouncerElementProps): ReactElement => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div

frontend/src/component/common/ApiError/ApiError.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import React from 'react';
 
 interface IApiErrorProps {

frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         alignItems: 'center',
@@ -8,14 +8,14 @@ export const useStyles = makeStyles(theme => ({
     },
     icon: {
         background: theme.palette.primary.main,
-        height: 56,
+        height: 40,
         display: 'flex',
         alignItems: 'center',
-        width: 56,
+        width: 40,
         justifyContent: 'center',
         paddingLeft: 6,
-        borderTopLeftRadius: 50,
+        borderTopLeftRadius: 40,
-        borderBottomLeftRadius: 50,
+        borderBottomLeftRadius: 40,
         color: '#fff',
     },
     iconDisabled: {
@@ -30,8 +30,11 @@ export const useStyles = makeStyles(theme => ({
         borderTopRightRadius: 50,
         borderBottomRightRadius: 50,
         '& fieldset': {
-            borderColor: theme.palette,
+            borderColor: theme.palette.grey[300],
             borderLeftColor: 'transparent',
         },
+        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderWidth: 1,
+        },
     },
 }));

frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx

@@ -1,7 +1,8 @@
 import { useStyles } from 'component/common/AutocompleteBox/AutocompleteBox.styles';
-import { Search, ArrowDropDown } from '@material-ui/icons';
+import { Search, ArrowDropDown } from '@mui/icons-material';
-import { Autocomplete, AutocompleteRenderInputParams } from '@material-ui/lab';
+import { Autocomplete } from '@mui/material';
-import { TextField } from '@material-ui/core';
+import { AutocompleteRenderInputParams } from '@mui/material/Autocomplete';
+import { TextField } from '@mui/material';
 import classNames from 'classnames';
 
 interface IAutocompleteBoxProps {
@@ -24,7 +25,7 @@ export const AutocompleteBox = ({
     onChange,
     disabled,
 }: IAutocompleteBoxProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const renderInput = (params: AutocompleteRenderInputParams) => {
         return <TextField {...params} variant="outlined" label={label} />;
@@ -51,6 +52,7 @@ export const AutocompleteBox = ({
                 renderInput={renderInput}
                 getOptionLabel={value => value.label}
                 disabled={disabled}
+                size="small"
                 multiple
             />
         </div>

frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     breadcrumbNav: {
         position: 'absolute',
         top: '4px',

frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx

@@ -1,4 +1,4 @@
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
 import { Link, useLocation } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useStyles } from './BreadcrumbNav.styles';
@@ -8,7 +8,7 @@ import StringTruncator from '../StringTruncator/StringTruncator';
 
 const BreadcrumbNav = () => {
     const { isAdmin } = useContext(AccessContext);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const location = useLocation();
 
     const paths = location.pathname

frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     badge: {
         backgroundColor: theme.palette.primary.main,
         width: '75px',
@@ -9,7 +9,7 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             width: '50px',
             height: '50px',
         },

frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx

@@ -1,4 +1,4 @@
-import { Check, Close } from '@material-ui/icons';
+import { Check, Close } from '@mui/icons-material';
 import { useStyles } from './CheckMarkBadge.styles';
 import classnames from 'classnames';
 
@@ -8,7 +8,7 @@ interface ICheckMarkBadgeProps {
 }
 
 const CheckMarkBadge = ({ type, className }: ICheckMarkBadgeProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <div className={classnames(styles.badge, className)}>
             {type === 'error' ? (

frontend/src/component/common/Codebox/Codebox.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         backgroundColor: theme.palette.primary.main,
         padding: '1rem',

frontend/src/component/common/Codebox/Codebox.tsx

@@ -5,7 +5,7 @@ interface ICodeboxProps {
 }
 
 const Codebox = ({ text }: ICodeboxProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div className={styles.container}>

frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     constraintIconContainer: {
         backgroundColor: theme.palette.primary.main,
         height: '28px',

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx

@@ -4,11 +4,7 @@ import { IConstraint } from 'interfaces/strategy';
 import { useStyles } from '../ConstraintAccordion.styles';
 import { ConstraintAccordionEditBody } from './ConstraintAccordionEditBody/ConstraintAccordionEditBody';
 import { ConstraintAccordionEditHeader } from './ConstraintAccordionEditHeader/ConstraintAccordionEditHeader';
-import {
+import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
-} from '@material-ui/core';
 import { cleanConstraint } from 'utils/cleanConstraint';
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
@@ -64,7 +60,7 @@ export const ConstraintAccordionEdit = ({
     const { validateConstraint } = useFeatureApi();
     const [expanded, setExpanded] = useState(false);
     const [action, setAction] = useState('');
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     useEffect(() => {
         // Setting expanded to true on mount will cause the accordion

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/CaseInsensitive/CaseInsensitive.tsx

@@ -1,4 +1,4 @@
-import { FormControlLabel, Switch } from '@material-ui/core';
+import { FormControlLabel, Switch } from '@mui/material';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
 
 interface ICaseInsensitiveProps {

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     inputContainer: {
         padding: '1rem',
     },

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx

@@ -1,4 +1,4 @@
-import { Button, FormControlLabel, Switch } from '@material-ui/core';
+import { Button, FormControlLabel, Switch } from '@mui/material';
 import { IConstraint } from 'interfaces/strategy';
 import { CANCEL } from '../ConstraintAccordionEdit';
 
@@ -31,7 +31,7 @@ export const ConstraintAccordionEditBody: React.FC<
     setAction,
     onSubmit,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <>

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx

@@ -1,7 +1,7 @@
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from 'tss-react/mui';
 import React from 'react';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
     header: {
         fontSize: theme.fontSizes.bodySize,
         fontWeight: 'normal',
@@ -13,7 +13,7 @@ const useStyles = makeStyles(theme => ({
 export const ConstraintFormHeader: React.FC<
     React.HTMLAttributes<HTMLDivElement>
 > = ({ children, ...rest }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <h3 {...rest} className={styles.header}>
             {children}

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx

@@ -1,4 +1,5 @@
-import { Button, Chip, makeStyles } from '@material-ui/core';
+import { Button, Chip } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 import Input from 'component/common/Input/Input';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import React, { useState } from 'react';
@@ -13,7 +14,7 @@ interface IFreeTextInputProps {
     setError: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
     valueChip: {
         margin: '0 0.5rem 0.5rem 0',
     },
@@ -58,7 +59,7 @@ export const FreeTextInput = ({
     setError,
 }: IFreeTextInputProps) => {
     const [inputValues, setInputValues] = useState('');
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const onKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.key === ENTER) {
@@ -137,7 +138,7 @@ const ConstraintValueChips = ({
     values,
     removeValue,
 }: IConstraintValueChipsProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <>
             {values.map((value, index) => {

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'inline-block',
         wordBreak: 'break-word',

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx

@@ -1,7 +1,7 @@
 import { ILegalValue } from 'interfaces/context';
 import { useStyles } from './LegalValueLabel.styles';
 import React from 'react';
-import { FormControlLabel } from '@material-ui/core';
+import { FormControlLabel } from '@mui/material';
 
 interface ILegalValueTextProps {
     legal: ILegalValue;
@@ -9,7 +9,7 @@ interface ILegalValueTextProps {
 }
 
 export const LegalValueLabel = ({ legal, control }: ILegalValueTextProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div className={styles.container}>

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Checkbox } from '@material-ui/core';
+import { Checkbox } from '@mui/material';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
 import { ILegalValue } from 'interfaces/context';
@@ -44,7 +44,7 @@ export const RestrictiveLegalValues = ({
 
     // Lazily initialise the values because there might be a lot of them.
     const [valuesMap, setValuesMap] = useState(() => createValuesMap(values));
-    const styles = useCommonStyles();
+    const { classes: styles } = useThemeStyles();
 
     useEffect(() => {
         setValuesMap(createValuesMap(values));

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
-import { FormControl, RadioGroup, Radio } from '@material-ui/core';
+import { FormControl, RadioGroup, Radio } from '@mui/material';
 import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { ILegalValue } from 'interfaces/context';
 import {
     LegalValueLabel,
@@ -28,7 +28,7 @@ export const SingleLegalValue = ({
     setError,
 }: ISingleLegalValueProps) => {
     const [filter, setFilter] = useState('');
-    const styles = useCommonStyles();
+    const { classes: styles } = useThemeStyles();
     const filteredValues = filterLegalValues(legalValues, filter);
 
     return (

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleValue/SingleValue.tsx

@@ -1,5 +1,5 @@
 import Input from 'component/common/Input/Input';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
 
 interface ISingleValueProps {
@@ -10,7 +10,7 @@ interface ISingleValueProps {
     setError: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
     singleValueContainer: { maxWidth: '300px', marginTop: '-1rem' },
     singleValueInput: {
         width: '100%',
@@ -25,7 +25,7 @@ export const SingleValue = ({
     error,
     setError,
 }: ISingleValueProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <>
             <ConstraintFormHeader>

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx

@@ -4,7 +4,7 @@ import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccord
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
-import { Help } from '@material-ui/icons';
+import { Help } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { dateOperators, DATE_AFTER, IN } from 'constants/operators';
 import { SAVE } from '../ConstraintAccordionEdit';
@@ -17,7 +17,7 @@ import {
     operatorsForContext,
     CURRENT_TIME_CONTEXT_FIELD,
 } from 'utils/operatorsForContext';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 
 interface IConstraintAccordionViewHeader {
     localConstraint: IConstraint;
@@ -36,7 +36,7 @@ export const ConstraintAccordionEditHeader = ({
     setOperator,
     action,
 }: IConstraintAccordionViewHeader) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { context } = useUnleashContext();
     const { contextName, operator } = localConstraint;
 

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'grid',
         gap: '1rem',

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx

@@ -7,8 +7,8 @@ import { useWeakMap } from 'hooks/useWeakMap';
 import { objectId } from 'utils/objectId';
 import { useStyles } from './ConstraintAccordionList.styles';
 import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
-import { Button } from '@material-ui/core';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { Button } from '@mui/material';
 
 interface IConstraintAccordionListProps {
     constraints: IConstraint[];
@@ -37,7 +37,7 @@ export const ConstraintAccordionList = forwardRef<
 >(({ constraints, setConstraints, showCreateButton }, ref) => {
     const state = useWeakMap<IConstraint, IConstraintAccordionListItemState>();
     const { context } = useUnleashContext();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const addConstraint =
         setConstraints &&

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx

@@ -1,9 +1,5 @@
-import {
+import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
-    Accordion,
+import { ExpandMore } from '@mui/icons-material';
-    AccordionSummary,
-    AccordionDetails,
-} from '@material-ui/core';
-import { ExpandMore } from '@material-ui/icons';
 import { IConstraint } from 'interfaces/strategy';
 
 import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody';
@@ -29,7 +25,7 @@ export const ConstraintAccordionView = ({
     onEdit,
     onDelete,
 }: IConstraintAccordionViewProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const singleValue = oneOf(
         [...semVerOperators, ...numOperators, ...dateOperators],

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx

@@ -1,5 +1,5 @@
-import { Chip } from '@material-ui/core';
+import { Chip } from '@mui/material';
-import { ImportExportOutlined, TextFormatOutlined } from '@material-ui/icons';
+import { ImportExportOutlined, TextFormatOutlined } from '@mui/icons-material';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { useState } from 'react';
 import { stringOperators } from 'constants/operators';
@@ -18,7 +18,7 @@ interface IConstraintAccordionViewBodyProps {
 export const ConstraintAccordionViewBody = ({
     constraint,
 }: IConstraintAccordionViewBodyProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { locationSettings } = useLocationSettings();
 
     return (
@@ -63,7 +63,7 @@ interface ISingleValueProps {
 }
 
 const SingleValue = ({ value, operator }: ISingleValueProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     if (!value) return null;
 
     return (
@@ -89,7 +89,7 @@ interface IMultipleValuesProps {
 
 const MultipleValues = ({ values }: IMultipleValuesProps) => {
     const [filter, setFilter] = useState('');
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     if (!values || values.length === 0) return null;
 

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx

@@ -1,7 +1,7 @@
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-import { Chip, useMediaQuery, IconButton } from '@material-ui/core';
+import { Chip, useMediaQuery, IconButton } from '@mui/material';
 import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
-import { Delete, Edit } from '@material-ui/icons';
+import { Delete, Edit } from '@mui/icons-material';
 import { IConstraint } from 'interfaces/strategy';
 
 import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
@@ -26,7 +26,7 @@ export const ConstraintAccordionViewHeader = ({
     onDelete,
     singleValue,
 }: IConstraintAccordionViewHeaderProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { locationSettings } = useLocationSettings();
     const smallScreen = useMediaQuery(`(max-width:${790}px)`);
 

frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx

@@ -1,8 +1,8 @@
 import { useStyles } from './ConstraintAccordion.styles';
-import { TrackChanges } from '@material-ui/icons';
+import { TrackChanges } from '@mui/icons-material';
 
 export const ConstraintIcon = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div className={styles.constraintIconContainer}>

frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts

@@ -1,9 +1,9 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         padding: '0.5rem 0.75rem',
-        borderRadius: theme.borders.radius.main,
+        borderRadius: theme.borderRadius.main,
         backgroundColor: theme.palette.grey[200],
         lineHeight: 1.25,
     },
@@ -21,7 +21,7 @@ export const useStyles = makeStyles(theme => ({
         '& > span': {
             display: 'inline-block',
             padding: '0 0.25rem',
-            borderRadius: theme.borders.radius.main,
+            borderRadius: theme.borderRadius.main,
             fontSize: theme.fontSizes.smallerBody,
             backgroundColor: theme.palette.primary.light,
             color: 'white',

frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx

@@ -9,7 +9,7 @@ interface IConstraintOperatorProps {
 export const ConstraintOperator = ({
     constraint,
 }: IConstraintOperatorProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const operatorName = constraint.operator;
     const operatorText = formatOperatorDescription(constraint.operator);

frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts

@@ -1,9 +1,9 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     valueContainer: {
         lineHeight: 1.1,
-        marginTop: -5,
+        marginTop: -2,
         marginBottom: -10,
     },
     optionContainer: {

frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx

@@ -1,4 +1,10 @@
-import { Select, MenuItem, FormControl, InputLabel } from '@material-ui/core';
+import {
+    Select,
+    MenuItem,
+    FormControl,
+    InputLabel,
+    SelectChangeEvent,
+} from '@mui/material';
 import {
     Operator,
     stringOperators,
@@ -7,7 +13,7 @@ import {
     numOperators,
     inOperators,
 } from 'constants/operators';
-import React, { useState, ChangeEvent } from 'react';
+import React, { useState } from 'react';
 import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
 import { useStyles } from 'component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles';
 import classNames from 'classnames';
@@ -23,12 +29,10 @@ export const ConstraintOperatorSelect = ({
     value,
     onChange,
 }: IConstraintOperatorSelectProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [open, setOpen] = useState(false);
 
-    const onSelectChange = (
+    const onSelectChange = (event: SelectChangeEvent) => {
-        event: ChangeEvent<{ name?: string; value: unknown }>
-    ) => {
         onChange(event.target.value as Operator);
     };