Merge pull request #1831 from RafaelTaranto/chore/update-mui

LAM-1396 chore: update mui

new-lamassu-admin/package.json

@@ -5,10 +5,12 @@
   "type": "module",
   "dependencies": {
     "@apollo/client": "^3.13.7",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@lamassu/coins": "v1.6.1",
-    "@material-ui/core": "4.12.4",
+    "@mui/icons-material": "^5.17.1",
-    "@material-ui/icons": "4.11.2",
+    "@mui/material": "^5.17.1",
-    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@mui/styles": "^5.17.1",
     "@simplewebauthn/browser": "^3.0.0",
     "apollo-upload-client": "^18.0.0",
     "bignumber.js": "9.0.0",
@@ -31,7 +33,7 @@
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "17.0.2",
     "react-dropzone": "^11.4.2",
-    "react-material-ui-carousel": "^2.3.11",
+    "react-material-ui-carousel": "^3.4.2",
     "react-number-format": "^4.4.1",
     "react-otp-input": "3.1.1",
     "react-router-dom": "5.1.2",

new-lamassu-admin/src/App.jsx

@@ -1,13 +1,9 @@
 import { useQuery, gql } from "@apollo/client";
-import CssBaseline from '@material-ui/core/CssBaseline'
+import CssBaseline from '@mui/material/CssBaseline'
-import Grid from '@material-ui/core/Grid'
+import Grid from '@mui/material/Grid'
-import Slide from '@material-ui/core/Slide'
+import Slide from '@mui/material/Slide'
-import {
+import { StylesProvider, jssPreset, makeStyles } from '@mui/styles';
-  StylesProvider,
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
-  jssPreset,
-  MuiThemeProvider,
-  makeStyles
-} from '@material-ui/core/styles'
 import { create } from 'jss'
 import extendJss from 'jss-plugin-extend'
 import React, { useContext, useState } from 'react'
@@ -153,15 +149,17 @@ const App = () => {
       <Router>
         <ApolloProvider>
           <StylesProvider jss={jss}>
-            <MuiThemeProvider theme={theme}>
+            <StyledEngineProvider injectFirst>
-              <CssBaseline />
+              <ThemeProvider theme={theme}>
-              <Main />
+                <CssBaseline />
-            </MuiThemeProvider>
+                <Main />
+              </ThemeProvider>
+            </StyledEngineProvider>
           </StylesProvider>
         </ApolloProvider>
       </Router>
     </AppContext.Provider>
-  )
+  );
 }
 
 export default App

new-lamassu-admin/src/components/Carousel.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import React, { memo } from 'react'
 import ReactCarousel from 'react-material-ui-carousel'
 import LeftArrow from 'src/styling/icons/arrow/carousel-left-arrow.svg?react'

new-lamassu-admin/src/components/Chip.jsx

@@ -1,5 +1,5 @@
-import Chip from '@material-ui/core/Chip'
+import Chip from '@mui/material/Chip'
-import { withStyles } from '@material-ui/core/styles'
+import { withStyles } from '@mui/styles'
 import React, { memo } from 'react'
 
 import {

new-lamassu-admin/src/components/CollapsibleCard.jsx

@@ -1,5 +1,5 @@
-import Grid from '@material-ui/core/Grid'
+import Grid from '@mui/material/Grid'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'

new-lamassu-admin/src/components/ConfirmDialog.jsx

@@ -1,10 +1,8 @@
-import {
+import Dialog from '@mui/material/Dialog'
-  Dialog,
+import DialogActions from '@mui/material/DialogActions'
-  DialogActions,
+import DialogContent from '@mui/material/DialogContent'
-  DialogContent,
+import InputLabel from '@mui/material/InputLabel'
-  makeStyles,
+import { makeStyles } from '@mui/styles'
-  InputLabel
-} from '@material-ui/core'
 import React, { memo, useState } from 'react'
 import { H4, P } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'

new-lamassu-admin/src/components/DeleteDialog.jsx

@@ -1,9 +1,7 @@
-import {
+import Dialog from '@mui/material/Dialog'
-  Dialog,
+import DialogActions from '@mui/material/DialogActions'
-  DialogActions,
+import DialogContent from '@mui/material/DialogContent'
-  DialogContent,
+import { makeStyles } from '@mui/styles'
-  makeStyles
-} from '@material-ui/core'
 import React from 'react'
 import { H4, P } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'

new-lamassu-admin/src/components/ErrorMessage.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import ErrorIcon from 'src/styling/icons/warning-icon/tomato.svg?react'

new-lamassu-admin/src/components/ImagePopper.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, ClickAwayListener } from '@material-ui/core'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
 import Popper from 'src/components/Popper'

new-lamassu-admin/src/components/InfoMessage.jsx

@@ -1,4 +1,5 @@
-import { Box, makeStyles } from '@material-ui/core'
+import Box from '@mui/material/Box'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import { Label1 } from 'src/components/typography'
 import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'

new-lamassu-admin/src/components/InformativeDialog.jsx

@@ -1,4 +1,6 @@
-import { Dialog, DialogContent, makeStyles } from '@material-ui/core'
+import Dialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import { makeStyles } from '@mui/styles'
 import React, { memo } from 'react'
 import { H1 } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'

new-lamassu-admin/src/components/LogsDownloaderPopper.jsx

@@ -1,5 +1,6 @@
 import { useLazyQuery } from "@apollo/client";
-import { makeStyles, ClickAwayListener } from '@material-ui/core'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { format, set } from 'date-fns/fp'
 import FileSaver from 'file-saver'

new-lamassu-admin/src/components/Modal.jsx

@@ -1,4 +1,6 @@
-import { makeStyles, Modal as MaterialModal, Paper } from '@material-ui/core'
+import MaterialModal from '@mui/material/Modal'
+import Paper from '@mui/material/Paper'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import { H1, H4 } from 'src/components/typography'

new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx

@@ -1,5 +1,5 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState, useEffect } from 'react'
 import ActionButton from 'src/components/buttons/ActionButton'

new-lamassu-admin/src/components/NotificationCenter/NotificationRow.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import prettyMs from 'pretty-ms'
 import * as R from 'ramda'

new-lamassu-admin/src/components/Popper.jsx

@@ -1,4 +1,6 @@
-import { makeStyles, Popper as MaterialPopper, Paper } from '@material-ui/core'
+import MaterialPopper from '@mui/material/Popper'
+import Paper from '@mui/material/Paper'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -120,34 +122,42 @@ const Popover = ({
     right: ['left']
   }
 
-  const modifiers = R.mergeDeepLeft(props.modifiers, {
+  const modifiers = [
-    flip: {
+    {
+      name: 'flip',
       enabled: R.defaultTo(false, props.flip),
-      allowedAutoPlacements: flipPlacements[props.placement],
+      options: {
-      boundary: 'clippingParents'
+        allowedAutoPlacements: flipPlacements[props.placement]
+      }
     },
-    preventOverflow: {
+    {
-      enabled: R.defaultTo(true, props.preventOverflow),
+      name: 'preventOverflow',
-      boundariesElement: 'scrollParent'
-    },
-    offset: {
       enabled: true,
-      offset: '0, 10'
+      options: {
+        rootBoundary: 'scrollParent'
+      }
     },
-    arrow: {
+    {
+      name: 'offset',
+      enabled: true,
+      options: {
+        offset: [0, 10]
+      }
+    },
+    {
+      name: 'arrow',
       enabled: R.defaultTo(true, props.showArrow),
-      element: arrowRef
+      options: {
+        element: arrowRef
+      }
     },
-    computeStyle: {
+    {
-      gpuAcceleration: false
+      name: 'computeStyles',
+      options: {
+        gpuAcceleration: false
+      }
     }
-  })
+  ]
-
-  if (props.preventOverflow === false) {
-    modifiers.hide = {
-      enabled: false
-    }
-  }
 
   return (
     <>

new-lamassu-admin/src/components/SearchBox.jsx

@@ -1,7 +1,7 @@
-import InputBase from '@material-ui/core/InputBase'
+import InputBase from '@mui/material/InputBase'
-import Paper from '@material-ui/core/Paper'
+import Paper from '@mui/material/Paper'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
-import MAutocomplete from '@material-ui/lab/Autocomplete'
+import MAutocomplete from '@mui/material/Autocomplete'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
 import { P } from 'src/components/typography'
@@ -39,18 +39,20 @@ const SearchBox = memo(
         value={filters}
         options={options}
         getOptionLabel={it => it.label || it.value}
-        renderOption={it => (
+        renderOption={(props, it) => (
-          <div className={classes.item}>
+          <li {...props}>
-            <P className={classes.itemLabel}>{it.label || it.value}</P>
+            <div className={classes.item}>
-            <P className={classes.itemType}>{it.type}</P>
+              <P className={classes.itemLabel}>{it.label || it.value}</P>
-          </div>
+              <P className={classes.itemType}>{it.type}</P>
+            </div>
+          </li>
         )}
         autoHighlight
         disableClearable
         clearOnEscape
         multiple
         filterSelectedOptions
-        getOptionSelected={(option, value) => option.type === value.type}
+        isOptionEqualToValue={(option, value) => option.type === value.type}
         PaperComponent={({ children }) => (
           <Paper elevation={0} className={classes.popup}>
             <div className={classes.separator} />

new-lamassu-admin/src/components/SearchFilter.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import Chip from 'src/components/Chip'
 import { P, Label3 } from 'src/components/typography'

new-lamassu-admin/src/components/Stage.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo } from 'react'

new-lamassu-admin/src/components/Status.jsx

@@ -1,5 +1,5 @@
-import Chip from '@material-ui/core/Chip'
+import Chip from '@mui/material/Chip'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 
 import {

new-lamassu-admin/src/components/Stepper.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo } from 'react'

new-lamassu-admin/src/components/Subtitle.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/TableLabel.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 

new-lamassu-admin/src/components/Title.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import React, { memo } from 'react'
 
 import { spacer } from 'src/styling/variables'

new-lamassu-admin/src/components/Tooltip.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, ClickAwayListener } from '@material-ui/core'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState, memo } from 'react'
 import Popper from 'src/components/Popper'

new-lamassu-admin/src/components/Uptime.jsx

@@ -1,5 +1,5 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
-import Chip from '@material-ui/core/Chip'
+import Chip from '@mui/material/Chip'
 import * as R from 'ramda'
 import React from 'react'
 

new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { useFormikContext, Form, Formik, Field as FormikField } from 'formik'
 import * as R from 'ramda'
@@ -86,7 +86,8 @@ const BooleanPropertiesTable = memo(
                   ) : (
                     <IconButton
                       className={classes.transparentButton}
-                      onClick={() => setEditing(true)}>
+                      onClick={() => setEditing(true)}
+                      size="large">
                       {disabled ? <EditIconDisabled /> : <EditIcon />}
                     </IconButton>
                   )}
@@ -121,11 +122,11 @@ const BooleanPropertiesTable = memo(
                   </TableBody>
                 </Table>
               </Form>
-            )
+            );
           }}
         </Formik>
       </div>
-    )
+    );
   }
 )
 

new-lamassu-admin/src/components/buttons/ActionButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/buttons/AddButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react'

new-lamassu-admin/src/components/buttons/Button.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/buttons/DeleteButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 import DeleteIcon from 'src/styling/icons/button/cancel/zodiac.svg?react'

new-lamassu-admin/src/components/buttons/FeatureButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/buttons/IDButton.jsx

@@ -1,5 +1,5 @@
-import { ClickAwayListener } from '@material-ui/core'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { useState, memo } from 'react'
 import Popover from 'src/components/Popper'

new-lamassu-admin/src/components/buttons/IconButton.jsx

@@ -1,14 +1,13 @@
-import { makeStyles, IconButton as IconB } from '@material-ui/core'
+import IconB from '@mui/material/IconButton'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 
 import { comet } from 'src/styling/variables'
 
 const styles = {
-  label: ({ size }) => ({
+  root: ({ size }) => ({
     width: size,
-    height: size
+    height: size,
-  }),
-  root: {
     '& svg': {
       flex: 1
     },
@@ -24,7 +23,7 @@ const styles = {
     '&:hover path': {
       stroke: comet
     }
-  }
+  })
 }
 
 const useStyles = makeStyles(styles)
@@ -35,7 +34,7 @@ const IconButton = ({ size, children, onClick, ...props }) => {
     <IconB
       {...props}
       size="small"
-      classes={{ root: classes.root, label: classes.label }}
+      classes={{ root: classes.root }}
       disableRipple
       onClick={onClick}>
       {children}

new-lamassu-admin/src/components/buttons/Link.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/buttons/Link.styles.js

@@ -1,4 +1,4 @@
-import { alpha } from '@material-ui/core/styles/colorManipulator'
+import { alpha } from '@mui/material/styles'
 
 import typographyStyles from 'src/components/typography/styles'
 import {

new-lamassu-admin/src/components/buttons/SubpageButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
 import { H4 } from 'src/components/typography'

new-lamassu-admin/src/components/buttons/SupportLinkButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import InverseLinkIcon from 'src/styling/icons/action/external link/white.svg?react'
 import LinkIcon from 'src/styling/icons/action/external link/zodiac.svg?react'

new-lamassu-admin/src/components/date-range-picker/Calendar.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import {
   add,
   differenceInMonths,

new-lamassu-admin/src/components/date-range-picker/DateRangePicker.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { compareAsc, differenceInDays, set } from 'date-fns/fp'
 import * as R from 'ramda'

new-lamassu-admin/src/components/date-range-picker/Tile.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 

new-lamassu-admin/src/components/editableProperty/EditableProperty.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import React, { useState, memo } from 'react'
 import { H4, P } from 'src/components/typography'
 import EditIconDisabled from 'src/styling/icons/action/edit/disabled.svg?react'

new-lamassu-admin/src/components/editableTable/Header.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useContext } from 'react'

new-lamassu-admin/src/components/editableTable/Row.jsx

@@ -1,4 +1,5 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
+import Switch from '@mui/material/Switch'
 import classnames from 'classnames'
 import { Field, useFormikContext } from 'formik'
 import * as R from 'ramda'
@@ -13,7 +14,6 @@ import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 import StripesSvg from 'src/styling/icons/stripes.svg?react'
 
 import { Link, IconButton } from 'src/components/buttons'
-import { Switch } from 'src/components/inputs'
 
 import TableCtx from './Context'
 import styles from './Row.styles'
@@ -77,7 +77,8 @@ const ActionCol = ({ disabled, editing }) => {
           <IconButton
             disabled={disableEdit}
             className={classes.editButton}
-            onClick={() => onEdit && onEdit(values.id)}>
+            onClick={() => onEdit && onEdit(values.id)}
+            size="large">
             {disableEdit ? <DisabledEditIcon /> : <EditIcon />}
           </IconButton>
         </Td>
@@ -88,7 +89,8 @@ const ActionCol = ({ disabled, editing }) => {
             disabled={disabled}
             onClick={() => {
               setDeleteDialog(true)
-            }}>
+            }}
+            size="large">
             {disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
           </IconButton>
           <DeleteDialog
@@ -114,7 +116,7 @@ const ActionCol = ({ disabled, editing }) => {
         </Td>
       )}
     </>
-  )
+  );
 }
 
 const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {

new-lamassu-admin/src/components/editableTable/Table.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import { Form, Formik } from 'formik'
 import * as R from 'ramda'
 import React, { useState, useEffect } from 'react'

new-lamassu-admin/src/components/fake-table/Table.jsx

@@ -1,6 +1,6 @@
-import Card from '@material-ui/core/Card'
+import Card from '@mui/material/Card'
-import CardContent from '@material-ui/core/CardContent'
+import CardContent from '@mui/material/CardContent'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 

new-lamassu-admin/src/components/inputs/base/Autocomplete.jsx

@@ -1,5 +1,5 @@
-import { Box } from '@material-ui/core'
+import Box from '@mui/material/Box'
-import MAutocomplete from '@material-ui/lab/Autocomplete'
+import MAutocomplete from '@mui/material/Autocomplete'
 import sort from 'match-sorter'
 import * as R from 'ramda'
 import React from 'react'
@@ -84,7 +84,7 @@ const Autocomplete = ({
       disableClearable
       ChipProps={{ onDelete: null }}
       clearOnEscape
-      getOptionSelected={R.eqProps(valueProp)}
+      isOptionEqualToValue={R.eqProps(valueProp)}
       {...props}
       renderInput={params => {
         return (
@@ -100,9 +100,9 @@ const Autocomplete = ({
           />
         )
       }}
-      renderOption={props => {
+      renderOption={(iprops, props) => {
         if (!props.warning && !props.warningMessage)
-          return R.path([labelProp])(props)
+          return <li {...iprops}>{R.path([labelProp])(props)}</li>
 
         const warningColors = {
           clean: spring4,
@@ -114,23 +114,25 @@ const Autocomplete = ({
           <Box
             width={18}
             height={18}
-            borderRadius={6}
+            borderRadius="6px"
             bgcolor={warningColors[props.warning]}
           />
         )
 
         return (
-          <Box
+          <li {...iprops}>
-            width="100%"
+            <Box
-            display="flex"
+              width="100%"
-            flexDirection="row"
+              display="flex"
-            justifyContent="space-between"
+              flexDirection="row"
-            alignItems="center">
+              justifyContent="space-between"
-            <Box>{R.path([labelProp])(props)}</Box>
+              alignItems="center">
-            <HoverableTooltip parentElements={hoverableElement} width={250}>
+              <Box>{R.path([labelProp])(props)}</Box>
-              <P>{props.warningMessage}</P>
+              <HoverableTooltip parentElements={hoverableElement} width={250}>
-            </HoverableTooltip>
+                <P>{props.warningMessage}</P>
-          </Box>
+              </HoverableTooltip>
+            </Box>
+          </li>
         )
       }}
     />

new-lamassu-admin/src/components/inputs/base/Checkbox.jsx

@@ -1,7 +1,7 @@
-import Checkbox from '@material-ui/core/Checkbox'
+import Checkbox from '@mui/material/Checkbox'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
-import CheckBoxIcon from '@material-ui/icons/CheckBox'
+import CheckBoxIcon from '@mui/icons-material/CheckBox'
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'
 import React from 'react'
 import { Label2, Info3 } from 'src/components/typography'
 import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
@@ -16,7 +16,7 @@ import {
 const useStyles = makeStyles({
   root: {
     color: secondaryColor,
-    '&$checked': {
+    '&.Mui-checked': {
       color: secondaryColor
     }
   },

new-lamassu-admin/src/components/inputs/base/CodeInput.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import OtpInput from 'react-otp-input'

new-lamassu-admin/src/components/inputs/base/Dropdown.jsx

@@ -1,15 +1,16 @@
-import FormControl from '@material-ui/core/FormControl'
+import FormControl from '@mui/material/FormControl'
-import InputLabel from '@material-ui/core/InputLabel'
+import InputLabel from '@mui/material/InputLabel'
-import MenuItem from '@material-ui/core/MenuItem'
+import MenuItem from '@mui/material/MenuItem'
-import Select from '@material-ui/core/Select'
+import Select from '@mui/material/Select'
 import classnames from 'classnames'
 import React from 'react'
 
 const Dropdown = ({ label, name, options, onChange, value, className }) => {
   return (
-    <FormControl className={classnames(className)}>
+    <FormControl variant="standard" className={classnames(className)}>
       <InputLabel>{label}</InputLabel>
       <Select
+        variant="standard"
         autoWidth={true}
         labelId={label}
         id={name}
@@ -22,7 +23,7 @@ const Dropdown = ({ label, name, options, onChange, value, className }) => {
         ))}
       </Select>
     </FormControl>
-  )
+  );
 }
 
 export default Dropdown

new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx

@@ -1,14 +1,12 @@
-import {
+import Radio from '@mui/material/Radio'
-  Radio,
+import MRadioGroup from '@mui/material/RadioGroup'
-  RadioGroup as MRadioGroup,
+import FormControlLabel from '@mui/material/FormControlLabel'
-  FormControlLabel,
+import { makeStyles } from '@mui/styles'
-  makeStyles
-} from '@material-ui/core'
 import classnames from 'classnames'
 import React from 'react'
 import { Label1 } from 'src/components/typography'
 
-import { offColor } from 'src/styling/variables'
+import { offColor, secondaryColor } from 'src/styling/variables'
 const styles = {
   label: {
     height: 16,
@@ -20,6 +18,9 @@ const styles = {
     marginTop: -8,
     marginLeft: 32,
     color: offColor
+  },
+  radio: {
+    color: secondaryColor
   }
 }
 
@@ -50,7 +51,7 @@ const RadioGroup = ({
               <FormControlLabel
                 disabled={option.disabled}
                 value={option.code}
-                control={<Radio className={radioClassName} />}
+                control={<Radio className={classnames(classes.radio, radioClassName)} />}
                 label={option.display}
                 className={classnames(labelClassName)}
               />

new-lamassu-admin/src/components/inputs/base/Select.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { useSelect } from 'downshift'
 import * as R from 'ramda'

new-lamassu-admin/src/components/inputs/base/Switch.jsx

@@ -1,80 +0,0 @@
-import Switch from '@material-ui/core/Switch'
-import { makeStyles } from '@material-ui/core/styles'
-import React, { memo } from 'react'
-
-import {
-  secondaryColor,
-  offColor,
-  disabledColor,
-  disabledColor2
-} from '../../../styling/variables'
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    width: 32,
-    height: 20,
-    padding: 0,
-    margin: theme.spacing(1)
-  },
-  switchBase: {
-    padding: 2,
-    '&$disabled': {
-      color: disabledColor2,
-      '& + $track': {
-        backgroundColor: disabledColor,
-        opacity: 1
-      }
-    },
-    '&$checked': {
-      transform: 'translateX(58%)',
-      color: theme.palette.common.white,
-      '&$disabled': {
-        color: disabledColor2
-      },
-      '& + $track': {
-        backgroundColor: secondaryColor,
-        opacity: 1,
-        border: 'none'
-      }
-    },
-    '&$focusVisible $thumb': {
-      border: '6px solid #fff',
-      boxShadow: '0 0 4px 0 rgba(0,0,0,0.24)'
-    }
-  },
-  thumb: {
-    width: 16,
-    height: 16
-  },
-  track: {
-    borderRadius: 17,
-    border: 'none',
-    backgroundColor: offColor,
-    opacity: 1,
-    transition: theme.transitions.create(['background-color', 'border'])
-  },
-  disabled: {},
-  checked: {},
-  focusVisible: {}
-}))
-
-const SwitchInput = memo(({ ...props }) => {
-  const classes = useStyles()
-  return (
-    <Switch
-      focusVisibleClassName={classes.focusVisible}
-      disableRipple
-      classes={{
-        root: classes.root,
-        switchBase: classes.switchBase,
-        thumb: classes.thumb,
-        track: classes.track,
-        checked: classes.checked,
-        disabled: classes.disabled
-      }}
-      {...props}
-    />
-  )
-})
-
-export default SwitchInput

new-lamassu-admin/src/components/inputs/base/TextInput.jsx

@@ -1,5 +1,5 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
-import TextField from '@material-ui/core/TextField'
+import TextField from '@mui/material/TextField'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo } from 'react'
@@ -35,6 +35,7 @@ const TextInput = memo(
 
     return (
       <TextField
+        variant="standard"
         id={name}
         onChange={onChange}
         onBlur={onBlur}
@@ -50,9 +51,8 @@ const TextInput = memo(
           },
           ...InputProps
         }}
-        {...props}
+        {...props} />
-      />
+    );
-    )
   }
 )
 

new-lamassu-admin/src/components/inputs/base/ToggleButtonGroup.jsx

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
-import { ToggleButtonGroup as MUIToggleButtonGroup } from '@material-ui/lab'
+import MUIToggleButtonGroup from '@mui/material/ToggleButtonGroup'
-import ToggleButton from '@material-ui/lab/ToggleButton'
+import ToggleButton from '@mui/material/ToggleButton'
 import React from 'react'
 import { H4, P } from 'src/components/typography'
 

new-lamassu-admin/src/components/inputs/base/index.js

@@ -5,7 +5,6 @@ import Dropdown from './Dropdown'
 import NumberInput from './NumberInput'
 import RadioGroup from './RadioGroup'
 import SecretInput from './SecretInput'
-import Switch from './Switch'
 import TextInput from './TextInput'
 import ToggleButtonGroup from './ToggleButtonGroup'
 export {
@@ -13,7 +12,6 @@ export {
   CodeInput,
   TextInput,
   NumberInput,
-  Switch,
   SecretInput,
   RadioGroup,
   Autocomplete,

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import Chip from 'src/components/Chip'

new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import classNames from 'classnames'
 import React, { memo, useState } from 'react'
 import { CashOut } from 'src/components/inputs/cashbox/Cashbox'

new-lamassu-admin/src/components/inputs/index.js

@@ -3,7 +3,6 @@ import Checkbox from './base/Checkbox'
 import CodeInput from './base/CodeInput'
 import RadioGroup from './base/RadioGroup'
 import Select from './base/Select'
-import Switch from './base/Switch'
 import TextInput from './base/TextInput'
 import { CashIn, CashOut } from './cashbox/Cashbox'
 
@@ -12,7 +11,6 @@ export {
   TextInput,
   Checkbox,
   CodeInput,
-  Switch,
   Select,
   RadioGroup,
   CashIn,

new-lamassu-admin/src/components/layout/Header.jsx

@@ -1,7 +1,7 @@
 import { useQuery, gql } from "@apollo/client";
-import ClickAwayListener from '@material-ui/core/ClickAwayListener'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
-import Popper from '@material-ui/core/Popper'
+import Popper from '@mui/material/Popper'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo, useState, useEffect, useRef } from 'react'
@@ -175,17 +175,22 @@ const Header = memo(({ tree, user }) => {
                   className={classes.popper}
                   disablePortal={false}
                   placement="bottom-end"
-                  modifiers={{
+                  modifiers={[
-                    offset: {
+                    {
+                      name: 'offset',
                       enabled: true,
-                      offset: '100vw'
+                      options: {
+                        offset: ['100vw', '100vw']
+                      }
                     },
-                    preventOverflow: {
+                    {
+                      name: 'preventOverflow',
                       enabled: true,
-                      boundariesElement: 'viewport',
+                      options: {
-                      padding: 0
+                        rootBoundary: 'viewport',
+                      },
                     }
-                  }}>
+                  ]}>
                   <NotificationCenter
                     popperRef={popperRef}
                     buttonCoords={notifButtonCoords}

new-lamassu-admin/src/components/layout/Section.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import Subtitle from 'src/components/Subtitle'

new-lamassu-admin/src/components/layout/Sidebar.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import { P } from 'src/components/typography'

new-lamassu-admin/src/components/layout/TitleSection.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, Box } from '@material-ui/core'
+import Box from '@mui/material/Box'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React from 'react'

new-lamassu-admin/src/components/machineActions/DiagnosticsModal.jsx

@@ -1,5 +1,5 @@
 import { useLazyQuery, useQuery, gql } from "@apollo/client";
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import { subMinutes } from 'date-fns'
 import FileSaver from 'file-saver'
 import React, { useState, useEffect } from 'react'

new-lamassu-admin/src/components/machineActions/MachineActions.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useLazyQuery, gql } from "@apollo/client";
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import React, { memo, useState } from 'react'
 import { ConfirmDialog } from 'src/components/ConfirmDialog'
 import ActionButton from 'src/components/buttons/ActionButton'

new-lamassu-admin/src/components/single-row-table/SingleRowTable.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import {
@@ -33,7 +33,7 @@ const SingleRowTable = ({
         <THead>
           <Th className={classes.head}>
             {title}
-            <IconButton onClick={onEdit} className={classes.button}>
+            <IconButton onClick={onEdit} className={classes.button} size="large">
               <EditIcon />
             </IconButton>
           </Th>
@@ -62,7 +62,7 @@ const SingleRowTable = ({
         </TBody>
       </Table>
     </>
-  )
+  );
 }
 
 export default SingleRowTable

new-lamassu-admin/src/components/table/EmptyTable.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import classNames from 'classnames'
 import React, { memo } from 'react'
 import { H4 } from 'src/components/typography'

new-lamassu-admin/src/components/table/Table.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/table/TableCell.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/table/TableHeader.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/table/TableRow.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/tables/DataTable.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, Box } from '@material-ui/core'
+import Box from '@mui/material/Box'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useState, useEffect } from 'react'

new-lamassu-admin/src/components/typography/index.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 

new-lamassu-admin/src/components/typography/styles.js

@@ -48,7 +48,7 @@ export default {
     fontWeight: 700
   },
   p: {
-    extend: base,
+    ...base,
     fontSize: fontSize4,
     fontFamily: fontSecondary,
     fontWeight: 500

new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx

@@ -1,6 +1,9 @@
 import { useMutation, useQuery, gql } from "@apollo/client";
-import { Dialog, DialogContent, SvgIcon, IconButton } from '@material-ui/core'
+import Dialog from '@mui/material/Dialog'
-import { makeStyles } from '@material-ui/core/styles'
+import DialogContent from '@mui/material/DialogContent'
+import SvgIcon from '@mui/material/SvgIcon'
+import IconButton from '@mui/material/IconButton'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { Form, Formik, FastField } from 'formik'
 import {QRCodeSVG as QRCode} from 'qrcode.react'
@@ -252,7 +255,7 @@ const AddMachine = memo(({ close, onPaired }) => {
           <div className={classes.wrapper}>
             <div className={classes.headerDiv}>
               <Title>Add Machine</Title>
-              <IconButton disableRipple={true} onClick={close}>
+              <IconButton onClick={close} size="large">
                 <SvgIcon color="error">
                   <CloseIcon />
                 </SvgIcon>
@@ -279,7 +282,7 @@ const AddMachine = memo(({ close, onPaired }) => {
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 })
 
 export default AddMachine

new-lamassu-admin/src/pages/Analytics/Analytics.jsx

@@ -1,6 +1,6 @@
 import { useQuery, gql } from "@apollo/client";
-import { Box } from '@material-ui/core'
+import Box from '@mui/material/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { endOfToday } from 'date-fns'
 import { subDays, format, add, startOfWeek } from 'date-fns/fp'

new-lamassu-admin/src/pages/Analytics/components/LegendEntry.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import { P } from 'src/components/typography'
 

new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.jsx

@@ -1,5 +1,5 @@
-import { Paper } from '@material-ui/core'
+import Paper from '@mui/material/Paper'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { memo } from 'react'
 import { Info2, Label3, P } from 'src/components/typography'

new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.jsx

@@ -1,5 +1,5 @@
-import { Box } from '@material-ui/core'
+import Box from '@mui/material/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import { getTimezoneOffset } from 'date-fns-tz'
 import * as R from 'ramda'
 import React, { useState } from 'react'

new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.jsx

@@ -1,9 +1,10 @@
-import { Box } from '@material-ui/core'
+import Switch from '@mui/material/Switch'
-import { makeStyles } from '@material-ui/core/styles'
+import Box from '@mui/material/Box'
+import { makeStyles } from '@mui/styles'
 import React, { useState } from 'react'
 import { H2 } from 'src/components/typography'
 
-import { Select, Switch } from 'src/components/inputs'
+import { Select } from 'src/components/inputs'
 import { primaryColor } from 'src/styling/variables'
 
 import styles from '../../Analytics.styles'

new-lamassu-admin/src/pages/Analytics/components/wrappers/TopMachinesWrapper.jsx

@@ -1,5 +1,5 @@
-import { Box } from '@material-ui/core'
+import Box from '@mui/material/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { H2 } from 'src/components/typography'

new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx

@@ -1,9 +1,10 @@
-import { Box } from '@material-ui/core'
+import Box from '@mui/material/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import Switch from '@mui/material/Switch'
+import { makeStyles } from '@mui/styles'
 import React, { useState } from 'react'
 import { H2 } from 'src/components/typography'
 
-import { Select, Switch } from 'src/components/inputs'
+import { Select } from 'src/components/inputs'
 import { neon, java } from 'src/styling/variables'
 
 import styles from '../../Analytics.styles'

new-lamassu-admin/src/pages/Authentication/Input2FAState.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useLazyQuery, gql } from "@apollo/client";
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import { Form, Formik } from 'formik'
 import React, { useContext, useState } from 'react'
 import { useHistory } from 'react-router-dom'

new-lamassu-admin/src/pages/Authentication/InputFIDOState.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useLazyQuery, gql } from "@apollo/client";
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import { startAssertion } from '@simplewebauthn/browser'
 import { Field, Form, Formik } from 'formik'
 import React, { useState, useContext } from 'react'

new-lamassu-admin/src/pages/Authentication/Login.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, Grid } from '@material-ui/core'
+import Grid from '@mui/material/Grid'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 
 import LoginCard from './LoginCard'
@@ -15,13 +16,13 @@ const Login = () => {
       spacing={0}
       direction="column"
       alignItems="center"
-      justify="center"
+      justifyContent="center"
       className={classes.welcomeBackground}>
       <Grid>
         <LoginCard />
       </Grid>
     </Grid>
-  )
+  );
 }
 
 export default Login

new-lamassu-admin/src/pages/Authentication/LoginCard.jsx

@@ -1,5 +1,5 @@
-import Paper from '@material-ui/core/Paper'
+import Paper from '@mui/material/Paper'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import React, { useReducer } from 'react'
 import { H5 } from 'src/components/typography'
 import Logo from 'src/styling/icons/menu/logo.svg?react'

new-lamassu-admin/src/pages/Authentication/LoginState.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useLazyQuery, gql } from "@apollo/client";
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import { startAssertion } from '@simplewebauthn/browser'
 import { Field, Form, Formik } from 'formik'
 import React, { useContext } from 'react'

new-lamassu-admin/src/pages/Authentication/Register.jsx

@@ -1,6 +1,7 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles, Grid } from '@material-ui/core'
+import Grid from '@mui/material/Grid'
-import Paper from '@material-ui/core/Paper'
+import { makeStyles } from '@mui/styles'
+import Paper from '@mui/material/Paper'
 import { Field, Form, Formik } from 'formik'
 import React, { useReducer } from 'react'
 import { useLocation, useHistory } from 'react-router-dom'
@@ -131,7 +132,7 @@ const Register = () => {
       spacing={0}
       direction="column"
       alignItems="center"
-      justify="center"
+      justifyContent="center"
       className={classes.welcomeBackground}>
       <Grid>
         <div>
@@ -214,7 +215,7 @@ const Register = () => {
         </div>
       </Grid>
     </Grid>
-  )
+  );
 }
 
 export default Register

new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx

@@ -1,6 +1,7 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles, Grid } from '@material-ui/core'
+import Grid from '@mui/material/Grid'
-import Paper from '@material-ui/core/Paper'
+import { makeStyles } from '@mui/styles'
+import Paper from '@mui/material/Paper'
 import { Form, Formik } from 'formik'
 import { QRCodeSVG as QRCode } from 'qrcode.react'
 import React, { useReducer, useState } from 'react'
@@ -121,7 +122,7 @@ const Reset2FA = () => {
       spacing={0}
       direction="column"
       alignItems="center"
-      justify="center"
+      justifyContent="center"
       className={classes.welcomeBackground}>
       <Grid>
         <div>
@@ -205,7 +206,7 @@ const Reset2FA = () => {
         </div>
       </Grid>
     </Grid>
-  )
+  );
 }
 
 export default Reset2FA

new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx

@@ -1,6 +1,7 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles, Grid } from '@material-ui/core'
+import Grid from '@mui/material/Grid'
-import Paper from '@material-ui/core/Paper'
+import { makeStyles } from '@mui/styles'
+import Paper from '@mui/material/Paper'
 import { Field, Form, Formik } from 'formik'
 import React, { useState } from 'react'
 import { useLocation, useHistory } from 'react-router-dom'
@@ -96,7 +97,7 @@ const ResetPassword = () => {
       spacing={0}
       direction="column"
       alignItems="center"
-      justify="center"
+      justifyContent="center"
       className={classes.welcomeBackground}>
       <Grid>
         <div>
@@ -164,7 +165,7 @@ const ResetPassword = () => {
         </div>
       </Grid>
     </Grid>
-  )
+  );
 }
 
 export default ResetPassword

new-lamassu-admin/src/pages/Authentication/Setup2FAState.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useLazyQuery, gql } from "@apollo/client";
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import { Form, Formik } from 'formik'
 import { QRCodeSVG as QRCode } from 'qrcode.react'
 import React, { useContext, useState } from 'react'

new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx

@@ -1,6 +1,10 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { Box, Dialog, DialogContent, DialogActions } from '@material-ui/core'
+import Box from '@mui/material/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import Dialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Switch from '@mui/material/Switch'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'
@@ -11,7 +15,6 @@ import ReverseSettingsIcon from 'src/styling/icons/circle buttons/settings/white
 import SettingsIcon from 'src/styling/icons/circle buttons/settings/zodiac.svg?react'
 
 import { Link, Button, IconButton, SupportLinkButton } from 'src/components/buttons'
-import { Switch } from 'src/components/inputs'
 import { fromNamespace, toNamespace } from 'src/utils/config'
 
 import styles from './Blacklist.styles'

new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import { Form, Formik, Field } from 'formik'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -64,7 +64,8 @@ const BlacklistAdvanced = ({
       view: it => (
         <IconButton
           className={classes.deleteButton}
-          onClick={() => setSelectedMessage(it)}>
+          onClick={() => setSelectedMessage(it)}
+          size="large">
           <EditIcon />
         </IconButton>
       )
@@ -81,7 +82,8 @@ const BlacklistAdvanced = ({
           disabled={
             !R.isNil(R.path(['allowToggle'], it)) &&
             !R.path(['allowToggle'], it)
-          }>
+          }
+          size="large">
           {R.path(['allowToggle'], it) ? (
             <DeleteIcon />
           ) : (

new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx

@@ -1,5 +1,5 @@
-import { Box } from '@material-ui/core'
+import Box from '@mui/material/Box'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import { Formik, Form, Field } from 'formik'
 import * as R from 'ramda'
 import React from 'react'

new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { DeleteDialog } from 'src/components/DeleteDialog'
@@ -49,7 +49,8 @@ const BlacklistTable = ({
           onClick={() => {
             setDeleteDialog(true)
             setToBeDeleted(it)
-          }}>
+          }}
+          size="large">
           <DeleteIcon />
         </IconButton>
       )

new-lamassu-admin/src/pages/Cashout/Cashout.jsx

@@ -1,5 +1,6 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/styles'
+import Switch from '@mui/material/Switch'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'
@@ -8,7 +9,6 @@ import { P, Label2 } from 'src/components/typography'
 
 import { SupportLinkButton } from 'src/components/buttons'
 import { NamespacedTable as EditableTable } from 'src/components/editableTable'
-import { Switch } from 'src/components/inputs'
 import { EmptyTable } from 'src/components/table'
 import { fromNamespace, toNamespace } from 'src/utils/config'
 

new-lamassu-admin/src/pages/Cashout/WizardSplash.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import { H1, P, Info2 } from 'src/components/typography'
 import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react'

new-lamassu-admin/src/pages/Cashout/WizardStep.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import { Formik, Form, Field } from 'formik'
 import React from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'

new-lamassu-admin/src/pages/Commissions/Commissions.jsx

@@ -1,5 +1,5 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'