Fixed most of the muiV5 / react 18 version problems

frontend/src/components/Header.jsx

@@ -688,7 +688,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 										{/*
 										<PolymerIcon style={{marginRight: "5px"}} />
 										*/}
-										<Typography style={{marginTop: 0, marginRight: 8, }}>Workflows</Typography>
+										<Typography style={{marginTop: 5, marginRight: 8, }}>Workflows</Typography>
 									</div> 
 								</Link>
       	 			</ListItem>
@@ -698,24 +698,17 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 											{/*
 											<AppsIcon style={{marginRight: "5px"}} />
 											*/}
-											<Typography style={{marginTop: 0, marginRight: 5,  }}>Apps</Typography>
+											<Typography style={{marginTop: 5, marginRight: 5,  }}>Apps</Typography>
 										</div>
 								</Link>
       	 			</ListItem>
-							{/*
-							<ListItem style={{textAlign: "center"}}>
-								<Link to="/dashboard" style={hrefStyle}>
-										<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer"}}>Dashboard</div> 
-								</Link>
-      	 			</ListItem>
-							*/}
       	 			<ListItem style={listItemStyle}>
 								<Link to="/docs" style={hrefStyle}>
 										<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer", display: "flex"}}>
 											{/*
 											<DescriptionIcon style={{marginRight: "5px"}} />
 											*/}
-											<Typography style={{marginTop: 0,}}>Docs</Typography>
+											<Typography style={{marginTop: 5,}}>Docs</Typography>
 										</div>
 								</Link>
       	 			</ListItem>
@@ -796,8 +789,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 						:
 							<span style={{paddingTop: 12, }}>
 								<Select
-
-									disableUnderline
+									disableunderline
 									SelectDisplayProps={{
 										style: {
 											maxWidth: 50,

frontend/src/components/OrgHeader.jsx

@@ -2,13 +2,16 @@ import React, { useEffect } from "react";
 import theme from '../theme.jsx';
 import { makeStyles } from "@mui/styles";
 
-import Tooltip from "@material-ui/core/Tooltip";
-import Grid from "@material-ui/core/Grid";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import Typography from "@material-ui/core/Typography";
+import {
+	Tooltip,
+	Grid, 
+	Button, 
+	TextField,
+	Typography, 
+	IconButton,
+} from "@mui/material";
+
 import { useAlert } from "react-alert";
-import IconButton from "@material-ui/core/IconButton";
 
 import {
 	ExpandLess as ExpandLessIcon,
@@ -98,6 +101,7 @@ const OrgHeader = (props) => {
   //console.log("USER: ", userdata)
   const orgSaveButton = (
     <Tooltip title="Save any unsaved data" placement="bottom">
+	  <div>
       <Button
         style={{ width: 150, height: 55, flex: 1 }}
         variant="contained"
@@ -119,6 +123,7 @@ const OrgHeader = (props) => {
       >
         <SaveIcon />
       </Button>
+	  </div>
     </Tooltip>
   );
 

frontend/src/components/OrgHeaderexpanded.jsx

@@ -201,6 +201,7 @@ const OrgHeaderexpanded = (props) => {
 
   const orgSaveButton = (
     <Tooltip title="Save any unsaved data" placement="bottom">
+	  <div>
       <Button
         style={{ width: 150, height: 55, flex: 1 }}
         variant="contained"
@@ -237,6 +238,7 @@ const OrgHeaderexpanded = (props) => {
       >
         <SaveIcon />
       </Button>
+	  </div>
     </Tooltip>
   );
 

frontend/src/components/ScrollToTop.jsx

@@ -9,7 +9,7 @@ function ScrollToTop({ getUserNotifications, curpath, setCurpath, history }) {
   useEffect(() => {
 		// Custom handler for certain scroll mechanics
 		//
-		console.log("OLD: ", curpath, "NeW: ", window.location.pathname)
+		//console.log("OLD: ", curpath, "NeW: ", window.location.pathname)
 		if (curpath === window.location.pathname && curpath === "/usecases") {
 		} else {