MUI

__backend-tests__/chronosMethods.test.js

@@ -1,4 +1,4 @@
-const { EcoTwoTone } = require('@material-ui/icons');
+const { EcoTwoTone } = require('@mui/icons-material');
 const Chronos = require('../chronos_npm_package/chronos.js');
 const helpers = require('../chronos_npm_package/controllers/utilities.js');
 const hpropagate = require('hpropagate');

app/charts/RouteChart.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 import React, { useContext } from 'react';
 import Graph from 'react-graph-vis';
 import { CommsContext } from '../context/CommsContext';

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -1,11 +1,11 @@
 
 import React, { useContext, useRef } from "react";
 import { useNavigate } from 'react-router-dom';
-import { Card,CardHeader,IconButton,CardContent,Typography } from "@material-ui/core";
+import { Card,CardHeader,IconButton,CardContent,Typography } from "@mui/material";
 import { DashboardContext } from "../../context/DashboardContext";
 import { ApplicationContext } from "../../context/ApplicationContext";
-import HighlightOffIcon from '@material-ui/icons/HighlightOff';
-import UpdateIcon from '@material-ui/icons/Update';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import UpdateIcon from '@mui/icons-material/Update';
 import './styles.scss'
 
 type ClickEvent = React.MouseEvent<HTMLElement>;
@@ -84,7 +84,7 @@ const ApplicationsCard = (props) => {
               className={classes.iconbutton}
               aria-label="Delete"
               onClick={event => confirmDelete(event, i)}
-            >
+              size="large">
               <HighlightOffIcon
                 className={classes.btnStyle}
                 id="deleteIcon"
@@ -109,7 +109,7 @@ const ApplicationsCard = (props) => {
         </div>
       </Card>
     </div>
-  )
+  );
 }
 
 export default ApplicationsCard

app/components/AwsEC2Graphs.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import AwsChart from '../charts/AwsChart';
 import { AwsContext } from '../context/AwsContext';
-import { CircularProgress } from '@material-ui/core';
-import zIndex from '@material-ui/core/styles/zIndex';
+import { CircularProgress } from '@mui/material';
+// import zIndex from '@mui/styles/zIndex';
 
 const AwsEC2Graphs: React.FC = React.memo(props => {
   const { awsData, setAwsData, isLoading, setLoadingState } = useContext(AwsContext);

app/components/ClusterTable.tsx

@@ -7,8 +7,8 @@ import {
   TableHead,
   TableRow,
   Paper,
-} from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+} from '@mui/material';
+import { makeStyles } from '@mui/styles/';
 import { AwsContext } from '../context/AwsContext';
 
 const useStyles = makeStyles({

app/components/Copyright.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Typography, Link } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Typography, Link } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import '../stylesheets/Applications.scss';
 
 export interface CopyrightProps {}

app/components/DashboardIcons/DashboardIcons.tsx

@@ -1,10 +1,10 @@
 import { CommsContext } from "../../context/CommsContext"
 import { DashboardContext } from "../../context/DashboardContext"
-import DashboardIcon from '@material-ui/icons/Dashboard';
-import NotificationsIcon from '@material-ui/icons/Notifications';
-import Badge from '@material-ui/core/Badge';
-import PersonIcon from '@material-ui/icons/Person';
-import { Button } from '@material-ui/core';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import Badge from '@mui/material/Badge';
+import PersonIcon from '@mui/icons-material/Person';
+import { Button } from '@mui/material';
 import React, { useContext,useState } from "react"
 import './styles.scss'
 

app/components/Occupied/Occupied.tsx

@@ -7,10 +7,10 @@
 import React, { useContext, useEffect, useState } from 'react';
 
 // MATERIAL UI METHODS
-import { Modal, Button } from '@material-ui/core';
+import { Modal, Button } from '@mui/material';
 
 // MATERIAL UI ICONS
-import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone';
+import AddCircleOutlineTwoToneIcon from '@mui/icons-material/AddCircleOutlineTwoTone';
 
 // // MODALS
 // import AddModal from '../modals/AddModal';

app/components/Occupied/helpers/muiHelper.ts

@@ -1,11 +1,11 @@
 
-import { makeStyles } from '@material-ui/core/styles';
-import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@mui/styles';
+// import { BaseCSSProperties } from '@mui/system';
 
  // Conditional Rendering of UI Modals for Light and Dark Mode
 // Theme, StyleProps
 
-export const useStylesDark = makeStyles<BaseCSSProperties>(theme => ({
+export const useStylesDark = makeStyles(theme => ({
   // ALL CARDS
   paper: {
     display: 'flex',
@@ -59,7 +59,7 @@ export const useStylesDark = makeStyles<BaseCSSProperties>(theme => ({
   },
 }));
 
-export const useStylesLight = makeStyles<BaseCSSProperties>(theme => ({
+export const useStylesLight = makeStyles(theme => ({
   // ALL CARDS
   paper: {
     display: 'flex',

app/components/TransferColumns.tsx

@@ -6,7 +6,7 @@ import { EventContext } from '../context/EventContext';
 import { DataGrid } from '@material-ui/data-grid';
 import * as DashboardContext from '../context/DashboardContext';
 import lightAndDark from './Styling';
-import { Button, TextField } from '@material-ui/core';
+import { Button, TextField } from '@mui/material';
 import SearchBar from './SearchBar/SearchBar';
 
 

app/components/WindowBar/WindowBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-// import Close from '@material-ui/icons/Close';
-// import Maximize from '@material-ui/icons/CheckBoxOutlineBlankSharp';
-// import Minimize from '@material-ui/icons/RemoveSharp';
+// import Close from '@mui/icons-material/Close';
+// import Maximize from '@mui/icons-material/CheckBoxOutlineBlankSharp';
+// import Minimize from '@mui/icons-material/RemoveSharp';
 import './styles.scss'; 
 
 // const { ipcRenderer } = window.require('electron');

app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { ApplicationContext } from '../../context/ApplicationContext';
 import { DashboardContext } from '../../context/DashboardContext';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { AwsContext } from '../../context/AwsContext';
 import './styles.scss';
 import { useLocation } from 'react-router-dom';

app/containers/DockerHealthContainer.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useContext } from 'react';
 import { HealthContext } from '../context/HealthContext';
 import { QueryContext } from '../context/QueryContext';
 import GrafanaEventChart from '../charts/GrafanaEventChart/GrafanaEventChart';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import { useParams } from 'react-router-dom';
 import { stringToColour as colourGenerator } from './GraphsContainer/helpers';
 

app/containers/EventContainer.tsx

@@ -4,7 +4,7 @@ import { EventContext } from '../context/EventContext';
 import { HealthContext } from '../context/HealthContext';
 import { QueryContext } from '../context/QueryContext';
 import EventChart from '../charts/EventChart';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import GrafanaEventChart from '../charts/GrafanaEventChart/GrafanaEventChart';
 import { stringToColour as colourGenerator } from './GraphsContainer/helpers';
 

app/containers/ModifyMetricsContainer/ModifyMetricsContainer.tsx

@@ -4,7 +4,7 @@ import { ApplicationContext } from '../../context/ApplicationContext';
 import * as DashboardContext from '../../context/DashboardContext';
 import lightAndDark from '../../components/Styling';
 import './styles.scss';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 const { ipcRenderer } = window.require('electron');
 
 const MetricsContainer: React.FC = React.memo(props => {

app/containers/SidebarContainer/SidebarContainer.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 
-import ListIcon from '@material-ui/icons/List';
-import InfoIcon from '@material-ui/icons/Info';
-import ContactSupportIcon from '@material-ui/icons/ContactSupport';
-import SettingsIcon from '@material-ui/icons/Settings';
+import ListIcon from '@mui/icons-material/List';
+import InfoIcon from '@mui/icons-material/Info';
+import ContactSupportIcon from '@mui/icons-material/ContactSupport';
+import SettingsIcon from '@mui/icons-material/Settings';
 
 import './styles.scss';
 import { ApplicationContext } from '../../context/ApplicationContext';

app/index.tsx

@@ -1,25 +1,41 @@
 import React from 'react';
+// import { adaptV4Theme } from '@mui/styles';
+import { createTheme, adaptV4Theme } from '@mui/material/styles'
 import ReactDOM from 'react-dom';
 
 // REACT 18 Syntax below
 // import { createRoot } from 'react-dom/client';
 
 import './index.scss';
-import { createTheme, ThemeProvider } from '@material-ui/core/';
+import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material';
 import App from './App';
 import WindowBar from './components/WindowBar/WindowBar';
 
-const theme = createTheme({
+// declare module '@mui/styles/defaultTheme' {
+//   // eslint-disable-next-line @typescript-eslint/no-empty-interface
+//   interface DefaultTheme extends Theme {}
+// }
+
+
+const theme = createTheme(adaptV4Theme({
+  // v4 theme
   typography: {
     fontFamily: ['Roboto', 'sans-serif'].join(','),
   },
-});
+}));
+// const theme = createTheme(adaptV4Theme({
+//   typography: {
+//     fontFamily: ['Roboto', 'sans-serif'].join(','),
+//   },
+// }));
 
 // React 17 Syntax below
 ReactDOM.render(
-  <ThemeProvider theme={theme}>
-    <WindowBar />
-    <App />
-  </ThemeProvider>,
+  <StyledEngineProvider injectFirst>
+    <ThemeProvider theme={theme}>
+      <WindowBar />
+      <App />
+    </ThemeProvider>
+  </StyledEngineProvider>,
   document.getElementById('app')
 );

app/modals/EnvModal/EnvModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Button, Typography } from '@material-ui/core';
+import { Button, Typography } from '@mui/material';
 import './EnvModal.scss';
-import { CloudQueue, Computer } from '@material-ui/icons';
+import { CloudQueue, Computer } from '@mui/icons-material';
 import { TModalSetter } from '../../components/Occupied/types/Occupied';
 
 const EnvModal: React.FC<TModalSetter> = React.memo(

app/modals/UserModal/UserModal.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { useContext, useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import PersonIcon from '@material-ui/icons/Person';
+import PersonIcon from '@mui/icons-material/Person';
 import { DashboardContext } from '../../context/DashboardContext';
 import { guestUser } from '../../context/helpers';
 import './UserModal.scss';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import { TModalSetter } from '../../components/Occupied/types/Occupied';
 
 const { ipcRenderer } = window.require('electron');