Merge pull request #626 from hack4impact-uiuc/upgrade-to-mui-6

Upgrade to mui 6

apps/frontend/declaration.d.ts

@@ -1,6 +1,7 @@
+import { PaletteColorOptions, PaletteOptions } from '@mui/material/styles';
 declare module 'react-map-gl-geocoder';
 declare module 'mic-recorder-to-mp3';
 
 interface Window {
     webkitAudioContext: typeof AudioContext
-}
+}

apps/frontend/package.json

@@ -15,10 +15,8 @@
   },
   "dependencies": {
     "@3dp4me/types": "workspace:*",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "@material/tabs": "^2.3.0",
+    "@mui/icons-material": "^6.4.5",
+    "@mui/material": "^6.4.5",
     "@sweetalert/with-react": "^0.1.1",
     "@tanstack/react-query": "^5.17.19",
     "@vis.gl/react-google-maps": "^1.4.2",
@@ -57,7 +55,6 @@
     "@babel/core": "^7.23.3",
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
-    "@material-ui/styles": "^4.11.5",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.0.1",

apps/frontend/src/AppContent.tsx

@@ -1,4 +1,5 @@
 import { Language } from '@3dp4me/types'
+import { createTheme, StyledEngineProvider, ThemeOptions, ThemeProvider } from '@mui/material'
 import React, { useContext, useEffect } from 'react'
 import { trackPromise } from 'react-promise-tracker'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
@@ -19,14 +20,38 @@ import PatientDetail from './pages/PatientDetail/PatientDetail'
 import Patients from './pages/Patients/Patients'
 import { ReducerActionType } from './store/Reducer'
 import { Context } from './store/Store'
-import { CognitoAttribute, Routes } from './utils/constants'
+import { CognitoAttribute, LANGUAGES, Routes } from './utils/constants'
 import { isLanguageValid } from './utils/language'
 
 interface AppContentProps {
     username: string
     userEmail: string
 }
 
+const theme: ThemeOptions = {
+    palette: {
+        primary: {
+            main: '#3f51b5',
+        },
+        secondary: {
+            main: '#dedffb',
+        },
+    },
+    typography: {
+        fontFamily: '"Roboto", sans-serif',
+    },
+}
+
+const arTheme = createTheme({
+    ...theme,
+    direction: 'rtl',
+})
+
+const enTheme = createTheme({
+    ...theme,
+    direction: 'ltr',
+})
+
 const AppContent = ({ username, userEmail }: AppContentProps) => {
     const errorWrap = useErrorWrap()
     const [state, dispatch] = useContext(Context)
@@ -78,38 +103,42 @@ const AppContent = ({ username, userEmail }: AppContentProps) => {
             <LoadingIndicator />
             <Router>
                 <QueryParamProvider ReactRouterRoute={Route}>
-                    <Navbar username={username} userEmail={userEmail} />
+                    <StyledEngineProvider injectFirst>
+                        <ThemeProvider theme={selectedLang === LANGUAGES.AR ? arTheme : enTheme}>
+                            <Navbar username={username} userEmail={userEmail} />
 
-                    {/* Global error popup */}
-                    <ErrorModal
-                        message={state.error}
-                        isOpen={!!state.isErrorVisible}
-                        onClose={handleErrorModalClose}
-                    />
+                            {/* Global error popup */}
+                            <ErrorModal
+                                message={state.error}
+                                isOpen={!!state.isErrorVisible}
+                                onClose={handleErrorModalClose}
+                            />
 
-                    {/* Routes */}
-                    <div className={contentClassNames}>
-                        <Switch>
-                            <Route exact path={Routes.DASHBOARD}>
-                                <Dashboard />
-                            </Route>
-                            <Route exact path={Routes.ACCOUNT}>
-                                <AccountManagement />
-                            </Route>
-                            <Route exact path={Routes.PATIENTS}>
-                                <Patients />
-                            </Route>
-                            <Route exact path={Routes.DASHBOARD_MANAGEMENT}>
-                                <DashboardManagement />
-                            </Route>
-                            <Route exact path={`${Routes.PATIENT_2FA}/:patientId`}>
-                                <Patient2FA />
-                            </Route>
-                            <Route exact path={`${Routes.PATIENT_DETAIL}/:patientId`}>
-                                <PatientDetail />
-                            </Route>
-                        </Switch>
-                    </div>
+                            {/* Routes */}
+                            <div className={contentClassNames}>
+                                <Switch>
+                                    <Route exact path={Routes.DASHBOARD}>
+                                        <Dashboard />
+                                    </Route>
+                                    <Route exact path={Routes.ACCOUNT}>
+                                        <AccountManagement />
+                                    </Route>
+                                    <Route exact path={Routes.PATIENTS}>
+                                        <Patients />
+                                    </Route>
+                                    <Route exact path={Routes.DASHBOARD_MANAGEMENT}>
+                                        <DashboardManagement />
+                                    </Route>
+                                    <Route exact path={`${Routes.PATIENT_2FA}/:patientId`}>
+                                        <Patient2FA />
+                                    </Route>
+                                    <Route exact path={`${Routes.PATIENT_DETAIL}/:patientId`}>
+                                        <PatientDetail />
+                                    </Route>
+                                </Switch>
+                            </div>
+                        </ThemeProvider>
+                    </StyledEngineProvider>
                 </QueryParamProvider>
             </Router>
         </div>

apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx

@@ -1,41 +1,69 @@
 import { Language } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import FormControl from '@material-ui/core/FormControl'
-import Menu from '@material-ui/core/Menu'
-import MenuItem from '@material-ui/core/MenuItem'
-import Select from '@material-ui/core/Select'
-import React, { ChangeEvent, useContext } from 'react'
+import { PopoverVirtualElement, styled } from '@mui/material'
+import Button from '@mui/material/Button'
+import FormControl from '@mui/material/FormControl'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Select, { SelectChangeEvent } from '@mui/material/Select'
+import React, { useContext } from 'react'
 
 import { saveLanguagePreference, signOut } from '../../aws/aws-helper'
 import { useTranslations } from '../../hooks/useTranslations'
 import { ReducerActionType } from '../../store/Reducer'
 import { Context } from '../../store/Store'
 import { isLanguageValid } from '../../utils/language'
-import { useStyles } from './AccountDropdown.styles'
 
 export interface AccountDropdownProps {
-    anchorEl: Element | ((element: Element) => Element) | null | undefined
     handleClose: () => void
     username: string
     userEmail: string
+    anchorEl:
+        | Element
+        | (() => Element)
+        | PopoverVirtualElement
+        | (() => PopoverVirtualElement)
+        | null
+        | undefined
 }
 
+const MenuWrapper = styled('div')({
+    margin: '10px',
+    width: 'fit-content',
+    display: 'block',
+})
+
+const AccountEmail = styled('p')({
+    color: 'grey',
+    lineHeight: '0px',
+})
+
+const LanguageSelector = styled(Select<Language>)({
+    height: 50,
+})
+
+const SignoutButton = styled(Button)({
+    height: '38px',
+    fontSize: '1em',
+    fontWeight: 'bold',
+    backgroundColor: '#ca0909',
+    color: 'white',
+    marginTop: '10px',
+    width: '100%',
+    '&:hover': {
+        background: '#ca0909',
+    },
+})
+
 const AccountDropdown = ({
-    anchorEl,
     handleClose,
     username = '',
     userEmail = '',
+    anchorEl,
 }: AccountDropdownProps) => {
-    const styles = useStyles()
     const dispatch = useContext(Context)[1]
     const [translations, selectedLang] = useTranslations()
 
-    const handleLanguageSelect = (
-        e: ChangeEvent<{
-            name?: string | undefined
-            value: unknown
-        }>
-    ) => {
+    const handleLanguageSelect = (e: SelectChangeEvent<Language>) => {
         if (typeof e.target.value !== 'string') return
         if (!isLanguageValid(e.target.value)) return
 
@@ -50,35 +78,30 @@ const AccountDropdown = ({
         <div>
             <Menu
                 id="account-dropdown-menu"
-                anchorEl={anchorEl}
-                getContentAnchorEl={null}
                 anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                 keepMounted
                 open={Boolean(anchorEl)}
                 onClose={handleClose}
+                anchorEl={anchorEl}
             >
-                <div className={styles.menuWrapper}>
+                <MenuWrapper>
                     <p>{username}</p>
-                    <p className={styles.accountEmail}>{userEmail}</p>
+                    <AccountEmail>{userEmail}</AccountEmail>
                     <p>{translations.components.navbar.dropdown.language}</p>
                     <FormControl fullWidth variant="outlined">
-                        <Select
-                            value={selectedLang}
-                            onChange={handleLanguageSelect}
-                            className={styles.languageSelector}
-                        >
+                        <LanguageSelector value={selectedLang} onChange={handleLanguageSelect}>
                             <MenuItem value={Language.EN}>
                                 {translations.components.navbar.dropdown.EN}
                             </MenuItem>
                             <MenuItem value={Language.AR}>
                                 {translations.components.navbar.dropdown.AR}
                             </MenuItem>
-                        </Select>
+                        </LanguageSelector>
                     </FormControl>
-                    <Button onClick={signOut} className={styles.signOutButton}>
+                    <SignoutButton onClick={signOut}>
                         {translations.components.login.signOut}
-                    </Button>
-                </div>
+                    </SignoutButton>
+                </MenuWrapper>
             </Menu>
         </div>
     )

apps/frontend/src/components/AddRoleModal/AddRoleModal.tsx

@@ -1,8 +1,8 @@
 import './AddRoleModal.scss'
 
 import { Language, Role } from '@3dp4me/types'
-import Button from '@material-ui/core/Button'
-import Modal from '@material-ui/core/Modal'
+import Button from '@mui/material/Button'
+import Modal from '@mui/material/Modal'
 import { useState } from 'react'
 import { trackPromise } from 'react-promise-tracker'
 

apps/frontend/src/components/AudioRecorder/AudioRecorder.tsx

@@ -3,12 +3,12 @@
 
 import translations from '../../translations.json';
 import MicRecorder from 'mic-recorder-to-mp3';
-import AddIcon from '@material-ui/icons/Add';
-import PlayArrowIcon from '@material-ui/icons/PlayArrow';
-import CloseIcon from '@material-ui/icons/Close';
-import Button from '@material-ui/core/Button';
-import Modal from '@material-ui/core/Modal';
-import Typography from '@material-ui/core/Typography';
+import AddIcon from '@mui/icons-material/Add';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import CloseIcon from '@mui/icons-material/Close';
+import Button from '@mui/material/Button';
+import Modal from '@mui/material/Modal';
+import Typography from '@mui/material/Typography';
 import React from 'react';
 import './AudioRecorder.scss';
 import { downloadBlobWithoutSaving } from '../../api/api';

apps/frontend/src/components/BottomBar/BottomBar.tsx

@@ -1,11 +1,11 @@
 import './BottomBar.scss'
 
 import { StepPathToField, StepStatus } from '@3dp4me/types'
-import AppBar from '@material-ui/core/AppBar'
-import Button from '@material-ui/core/Button'
-import MenuItem from '@material-ui/core/MenuItem'
-import Select from '@material-ui/core/Select'
-import Toolbar from '@material-ui/core/Toolbar'
+import AppBar from '@mui/material/AppBar'
+import Button from '@mui/material/Button'
+import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
+import Toolbar from '@mui/material/Toolbar'
 import React, { MouseEventHandler } from 'react'
 
 import check from '../../assets/check.svg'