migrateMUI next: Restructure component definitions

package.json

@@ -10,12 +10,17 @@
     "@blockly/plugin-typed-variable-modal": "^4.0.5",
     "@blockly/workspace-backpack": "^2.0.12",
     "@blockly/zoom-to-fit": "^2.0.14",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.19",
     "@material-ui/core": "^4.12.4",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@monaco-editor/react": "^4.3.1",
+    "@mui/lab": "^5.0.0-alpha.110",
+    "@mui/material": "^5.10.16",
+    "@mui/styles": "^5.10.16",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^7.2.1",
@@ -36,7 +41,7 @@
     "react-rating-stars-component": "^2.2.0",
     "react-redux": "^7.2.9",
     "react-router-dom": "^5.3.3",
-    "react-scripts": "^5.0.0",
+    "react-scripts": "^5.0.1",
     "react-share": "^4.4.0",
     "react-spinners": "^0.13.3",
     "reactour": "^1.18.7",

src/App.js

@@ -9,11 +9,11 @@ import { loadUser } from "./actions/authActions";
 
 import "./App.css";
 
-import { ThemeProvider, createTheme } from "@material-ui/core/styles";
+import { ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme } from "@mui/material/styles";
 
 import Content from "./components/Content";
 
-const theme = createTheme({
+const theme = createTheme(adaptV4Theme({
   palette: {
     primary: {
       main: "#4EAF47",
@@ -26,7 +26,7 @@ const theme = createTheme({
       compile: "#e27136",
     },
   },
-});
+}));
 
 class App extends Component {
   componentDidMount() {
@@ -36,6 +36,7 @@ class App extends Component {
   render() {
     const customHistory = createBrowserHistory();
     return (
+      <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
           <Provider store={store}>
             <Router history={customHistory}>
@@ -43,6 +44,7 @@ class App extends Component {
             </Router>
           </Provider>
         </ThemeProvider>
+      </StyledEngineProvider>
     );
   }
 }

src/components/Alert.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 
-import { withStyles } from "@material-ui/core/styles";
-import { alpha } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
+import { alpha } from "@mui/material/styles";
 
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 
 const styles = (theme) => ({
   alert: {

src/components/Blockly/BlocklyComponent.jsx

@@ -27,7 +27,7 @@ import Blockly from "blockly/core";
 import "blockly/blocks";
 import Toolbox from "./toolbox/Toolbox";
 
-import { Card } from "@material-ui/core";
+import { Card } from "@mui/material";
 import {
   ScrollOptions,
   ScrollBlockDragger,

src/components/Breadcrumbs.js

@@ -3,9 +3,9 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import clsx from 'clsx';
 
-import { withStyles } from '@material-ui/core/styles';
-import MaterialUIBreadcrumbs from '@material-ui/core/Breadcrumbs';
-import Typography from '@material-ui/core/Typography';
+import withStyles from '@mui/styles/withStyles';
+import MaterialUIBreadcrumbs from '@mui/material/Breadcrumbs';
+import Typography from '@mui/material/Typography';
 
 import { faHome } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

src/components/CodeEditor/CodeEditor.js

@@ -2,11 +2,11 @@ import React from "react";
 import { useState, useRef } from "react";
 import { default as MonacoEditor } from "@monaco-editor/react";
 import { withRouter } from "react-router-dom";
-import { Button, Grid } from "@material-ui/core";
+import { Button, Grid } from "@mui/material";
 import Blockly from "blockly/core";
-import Divider from "@material-ui/core/Divider";
+import Divider from "@mui/material/Divider";
 import { saveAs } from "file-saver";
-import Drawer from "@material-ui/core/Drawer";
+import Drawer from "@mui/material/Drawer";
 import Sidebar from "./Sidebar";
 import Dialog from "../Dialog";
 import SaveIcon from "./SaveIcon";

src/components/CodeEditor/Compile.js

@@ -5,19 +5,19 @@ import { workspaceName } from "../../actions/workspaceActions";
 
 import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
 
-import { withStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
-import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
-import Divider from "@material-ui/core/Divider";
+import withStyles from '@mui/styles/withStyles';
+import Button from "@mui/material/Button";
+import Backdrop from "@mui/material/Backdrop";
+import CircularProgress from "@mui/material/CircularProgress";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import Divider from "@mui/material/Divider";
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly/core";
 import Copy from "../copy.svg";
 
-import MuiDrawer from "@material-ui/core/Drawer";
+import MuiDrawer from "@mui/material/Drawer";
 import Dialog from "../Dialog";
 
 const styles = (theme) => ({
@@ -188,7 +188,7 @@ class Compile extends Component {
             <IconButton
               className={`compileBlocks ${this.props.classes.iconButton}`}
               onClick={() => this.compile()}
-            >
+              size="large">
               <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
             </IconButton>
           </Tooltip>

src/components/CodeEditor/SaveIcon.js

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleNotch, faSave } from "@fortawesome/free-solid-svg-icons";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 import React from "react";
 
 const SaveIcon = ({ loading }) => (

src/components/CodeEditor/SerialMonitor.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 
 const SerialMonitor = () => {
   const [serialPortContent, setSerialPortContent] = useState([]);

src/components/CodeEditor/Sidebar.js

@@ -1,13 +1,13 @@
 import React from "react";
 import Blockly from "blockly";
 import { useSelector } from "react-redux";
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import Typography from "@material-ui/core/Typography";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import Typography from "@mui/material/Typography";
 import { LibraryVersions } from "../../data/versions.js";
 import { useMonaco } from "@monaco-editor/react";
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
 import SerialMonitor from "./SerialMonitor.js";
 import axios from "axios";
 

src/components/CodeViewer.js

@@ -2,15 +2,17 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
-import withWidth from "@material-ui/core/withWidth";
-import { withStyles } from "@material-ui/core/styles";
-import MuiAccordion from "@material-ui/core/Accordion";
-import MuiAccordionSummary from "@material-ui/core/AccordionSummary";
-import MuiAccordionDetails from "@material-ui/core/AccordionDetails";
-import { Card } from "@material-ui/core";
+import withStyles from '@mui/styles/withStyles';
+import MuiAccordion from "@mui/material/Accordion";
+import MuiAccordionSummary from "@mui/material/AccordionSummary";
+import MuiAccordionDetails from "@mui/material/AccordionDetails";
+import { Card } from "@mui/material";
 import * as Blockly from "blockly";
 import { default as MonacoEditor } from "@monaco-editor/react";
 
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
+
 const Accordion = withStyles((theme) => ({
   root: {
     border: `1px solid ${theme.palette.secondary.main}`,

src/components/DeviceSelection.js

@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import Dialog from "./Dialog";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
 import * as Blockly from "blockly";
-import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
+import { IconButton, Grid, Avatar, Typography } from "@mui/material";
 import { setBoard } from "../actions/boardAction";
 
 const styles = (theme) => ({
@@ -67,7 +67,7 @@ class DeviceSeclection extends Component {
         <div>
           <Grid container spacing={2} style={{ textAlign: "center" }}>
             <Grid item xs={6}>
-              <IconButton onClick={(e) => this.onclick(e, "mcu")}>
+              <IconButton onClick={(e) => this.onclick(e, "mcu")} size="large">
                 <Avatar
                   alt="Sensebox MCU"
                   src="/media/hardware/senseboxmcu.png"
@@ -95,7 +95,7 @@ class DeviceSeclection extends Component {
               <p>Sensebox ESP</p>
             </Grid> */}
             <Grid item xs={6}>
-              <IconButton onClick={(e) => this.onclick(e, "mini")}>
+              <IconButton onClick={(e) => this.onclick(e, "mini")} size="large">
                 <Avatar
                   alt="Sensebox Mini"
                   src="/media/hardware/senseboxmcumini.png"

src/components/Dialog.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 
-import Button from '@material-ui/core/Button';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
-import MaterialUIDialog from '@material-ui/core/Dialog';
+import Button from '@mui/material/Button';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import MaterialUIDialog from '@mui/material/Dialog';
 
 class Dialog extends Component {
 

src/components/Faq.js

@@ -4,15 +4,15 @@ import Breadcrumbs from "./Breadcrumbs";
 
 import { withRouter } from "react-router-dom";
 
-import Button from "@material-ui/core/Button";
-import Typography from "@material-ui/core/Typography";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 import * as Blockly from "blockly";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
-import Container from "@material-ui/core/Container";
-import ExpansionPanel from "@material-ui/core/ExpansionPanel";
-import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
-import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import Container from "@mui/material/Container";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { FaqQuestions } from "../data/faq";
@@ -47,16 +47,16 @@ class Faq extends Component {
             <h1>FAQ</h1>
             {FaqQuestions().map((object, i) => {
               return (
-                <ExpansionPanel
+                <Accordion
                   expanded={panel === `panel${i}`}
                   onChange={() => this.handleChange(`panel${i}`)}
                 >
-                  <ExpansionPanelSummary
+                  <AccordionSummary
                     expandIcon={<FontAwesomeIcon icon={faChevronDown} />}
                   >
                     <Typography variant="h6">{object.question}</Typography>
-                  </ExpansionPanelSummary>
-                  <ExpansionPanelDetails>
+                  </AccordionSummary>
+                  <AccordionDetails>
                     <Typography>
                       <ReactMarkdown
                         className="news"
@@ -65,8 +65,8 @@ class Faq extends Component {
                         rehypePlugins={[rehypeRaw]}
                       ></ReactMarkdown>
                     </Typography>
-                  </ExpansionPanelDetails>
-                </ExpansionPanel>
+                  </AccordionDetails>
+                </Accordion>
               );
             })}
             {this.props.button ? (

src/components/Footer.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import { Link } from 'react-router-dom';
 
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 class Footer extends Component {
   render() {

src/components/Home.js

@@ -14,10 +14,10 @@ import TrashcanButtons from "./Workspace/TrashcanButtons";
 // import HintTutorialExists from "./Tutorial/HintTutorialExists";
 import DeviceSelection from "./DeviceSelection";
 
-import Grid from "@material-ui/core/Grid";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
-import { withStyles } from "@material-ui/core/styles";
+import Grid from "@mui/material/Grid";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import withStyles from '@mui/styles/withStyles';
 
 import { faCode } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -160,7 +160,7 @@ class Home extends Component {
                   zIndex: 21,
                 }}
                 onClick={() => this.onChange()}
-              >
+                size="large">
                 <FontAwesomeIcon icon={faCode} size="xs" />
               </IconButton>
             </Tooltip>

src/components/Impressum.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { withRouter } from "react-router-dom";
-import Container from "@material-ui/core/Container";
+import Container from "@mui/material/Container";
 class Impressum extends Component {
   render() {
     return (

src/components/MaxBlocks.js

@@ -5,8 +5,8 @@ import { workspaceChange } from '../actions/workspaceActions';
 
 import * as Blockly from 'blockly/core';
 
-import TextField from '@material-ui/core/TextField';
-import Button from '@material-ui/core/Button';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
 
 class MaxBlocks extends Component {
 
@@ -28,12 +28,12 @@ class MaxBlocks extends Component {
     return (
       <div style={{display: 'inline', marginLeft: '10px'}}>
         <TextField
+          variant="standard"
           style={{width: '50px', marginRight: '5px'}}
           name="max"
           type="number"
           onChange={this.onChange}
-          value={this.state.max}
-        />
+          value={this.state.max} />
         <Button style={{marginRight: '10px', color: 'white'}} variant="contained" color="primary" onClick={this.setMaxBlocks}>
           Maximale Blöcke
         </Button>

src/components/Navbar.js

@@ -8,20 +8,20 @@ import senseboxLogo from "./sensebox_logo.svg";
 
 import { withRouter } from "react-router-dom";
 
-import { withStyles } from "@material-ui/core/styles";
-import Drawer from "@material-ui/core/Drawer";
-import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
-import List from "@material-ui/core/List";
-import Typography from "@material-ui/core/Typography";
-import Divider from "@material-ui/core/Divider";
-import IconButton from "@material-ui/core/IconButton";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemText from "@material-ui/core/ListItemText";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import withStyles from '@mui/styles/withStyles';
+import Drawer from "@mui/material/Drawer";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import List from "@mui/material/List";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import ListItem from "@mui/material/ListItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import LinearProgress from "@mui/material/LinearProgress";
 import Tour from "reactour";
-import { Badge } from "@material-ui/core";
+import { Badge } from "@mui/material";
 import { home, assessment } from "./Tour";
 import {
   faBars,
@@ -40,7 +40,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 
 const styles = (theme) => ({
   drawerWidth: {
@@ -116,7 +116,7 @@ class Navbar extends Component {
               onClick={this.toggleDrawer}
               style={{ margin: "0 10px" }}
               className="MenuButton"
-            >
+              size="large">
               <FontAwesomeIcon icon={faBars} />
             </IconButton>
             <Link to={"/"} style={{ textDecoration: "none", color: "inherit" }}>
@@ -150,7 +150,7 @@ class Navbar extends Component {
                     this.openTour();
                   }}
                   style={{ margin: "0 30px 0 auto" }}
-                >
+                  size="large">
                   <FontAwesomeIcon icon={faQuestionCircle} />
                 </IconButton>
               </Tooltip>
@@ -164,7 +164,7 @@ class Navbar extends Component {
                     this.openTour();
                   }}
                   style={{ margin: "0 30px 0 auto" }}
-                >
+                  size="large">
                   <FontAwesomeIcon icon={faQuestionCircle} />
                 </IconButton>
               </Tooltip>

src/components/News.js

@@ -4,11 +4,11 @@ import Breadcrumbs from './Breadcrumbs';
 
 import { withRouter } from 'react-router-dom';
 
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import * as Blockly from 'blockly'
 import ReactMarkdown from 'react-markdown';
-import Container from '@material-ui/core/Container';
+import Container from '@mui/material/Container';
 
 const news = `
 

src/components/NotFound.js

@@ -4,8 +4,8 @@ import Breadcrumbs from './Breadcrumbs';
 
 import { withRouter } from 'react-router-dom';
 
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import * as Blockly from 'blockly'
 
 class NotFound extends Component {

src/components/Privacy.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
-import Container from '@material-ui/core/Container';
+import Container from '@mui/material/Container';
 class Privay extends Component {
     render() {
         return (

src/components/Project/Project.js

@@ -10,8 +10,8 @@ import { withRouter } from 'react-router-dom';
 import Home from '../Home';
 import Breadcrumbs from '../Breadcrumbs';
 
-import Backdrop from '@material-ui/core/Backdrop';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Backdrop from '@mui/material/Backdrop';
+import CircularProgress from '@mui/material/CircularProgress';
 
 
 class Project extends Component {

src/components/Project/ProjectHome.js

@@ -11,13 +11,13 @@ import BlocklyWindow from "../Blockly/BlocklyWindow";
 import Snackbar from "../Snackbar";
 import WorkspaceFunc from "../Workspace/WorkspaceFunc";
 
-import { withStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
-import Divider from "@material-ui/core/Divider";
-import Typography from "@material-ui/core/Typography";
-import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@material-ui/core/CircularProgress";
+import withStyles from '@mui/styles/withStyles';
+import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
+import Divider from "@mui/material/Divider";
+import Typography from "@mui/material/Typography";
+import Backdrop from "@mui/material/Backdrop";
+import CircularProgress from "@mui/material/CircularProgress";
 import DeviceSelection from "../DeviceSelection";
 
 const styles = (theme) => ({

src/components/SensorInfo.js

@@ -1,9 +1,9 @@
 import React from "react";
-import Box from "@material-ui/core/Box";
-import Tab from "@material-ui/core/Tab";
-import TabContext from "@material-ui/lab/TabContext";
-import TabList from "@material-ui/lab/TabList";
-import TabPanel from "@material-ui/lab/TabPanel";
+import Box from "@mui/material/Box";
+import Tab from "@mui/material/Tab";
+import TabContext from "@mui/lab/TabContext";
+import TabList from "@mui/lab/TabList";
+import TabPanel from "@mui/lab/TabPanel";
 import store from "../store";
 import ReactMarkdown from "react-markdown";
 import * as Blockly from "blockly";

src/components/Settings/DeviceSelector.js

@@ -5,12 +5,12 @@ import { setBoard } from '../../actions/boardAction';
 
 import * as Blockly from 'blockly/core';
 
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import Typography from '@material-ui/core/Typography';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+import FormHelperText from '@mui/material/FormHelperText';
 
 class DeviceSelector extends Component {
 
@@ -22,18 +22,18 @@ class DeviceSelector extends Component {
 
 
   render(){
-    return(
+    return (
       <div>
         <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_board}</Typography>
         <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_board_text}</FormHelperText>
-        <FormControl>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_board}</InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.selectedBoard}
-            onChange={(e) => this.props.setBoard(e.target.value)}
-          >
+            onChange={(e) => this.props.setBoard(e.target.value)}>
             <MenuItem value="mcu">senseBox MCU</MenuItem>
             <MenuItem value="mini">senseBox MCU mini</MenuItem>
           </Select>

src/components/Settings/LanguageSelector.js

@@ -5,12 +5,12 @@ import { setLanguage } from '../../actions/generalActions';
 
 import * as Blockly from 'blockly/core';
 
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import Typography from '@material-ui/core/Typography';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+import FormHelperText from '@mui/material/FormHelperText';
 
 class LanguageSelector extends Component {
 
@@ -25,18 +25,18 @@ class LanguageSelector extends Component {
   }
 
   render(){
-    return(
+    return (
       <div>
         <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_language}</Typography>
         <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_language_text}</FormHelperText>
-        <FormControl>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_language}</InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.language}
-            onChange={this.handleChange}
-          >
+            onChange={this.handleChange}>
             <MenuItem value={'de_DE'}>{Blockly.Msg.settings_language_de}</MenuItem>
             <MenuItem value={'en_US'}>{Blockly.Msg.settings_language_en}</MenuItem>
           </Select>

src/components/Settings/OtaSelector.js

@@ -5,12 +5,12 @@ import { setPlatform } from "../../actions/generalActions";
 
 import * as Blockly from "blockly/core";
 
-import InputLabel from "@material-ui/core/InputLabel";
-import MenuItem from "@material-ui/core/MenuItem";
-import FormControl from "@material-ui/core/FormControl";
-import Select from "@material-ui/core/Select";
-import Typography from "@material-ui/core/Typography";
-import FormHelperText from "@material-ui/core/FormHelperText";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
+import Typography from "@mui/material/Typography";
+import FormHelperText from "@mui/material/FormHelperText";
 
 class OtaSelector extends Component {
   componentDidMount() {
@@ -33,16 +33,16 @@ class OtaSelector extends Component {
             https://sensebox.de/app
           </a>
         </FormHelperText>
-        <FormControl>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">
             {Blockly.Msg.settings_statistics}
           </InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.platform}
-            onChange={(e) => this.props.setPlatform(e.target.value)}
-          >
+            onChange={(e) => this.props.setPlatform(e.target.value)}>
             <MenuItem value={true}>{Blockly.Msg.settings_ota_on}</MenuItem>
             <MenuItem value={false}>{Blockly.Msg.settings_ota_off}</MenuItem>
           </Select>

src/components/Settings/RenderSelector.js

@@ -5,12 +5,12 @@ import { setRenderer } from '../../actions/generalActions';
 
 import * as Blockly from 'blockly/core'
 
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import Typography from '@material-ui/core/Typography';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+import FormHelperText from '@mui/material/FormHelperText';
 
 
 class RenderSelector extends Component {
@@ -26,14 +26,14 @@ class RenderSelector extends Component {
       <div>
         <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_renderer}</Typography>
         <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_renderer_text}</FormHelperText>
-        <FormControl>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_renderer}</InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.renderer}
-            onChange={(e) => this.props.setRenderer(e.target.value)}
-          >
+            onChange={(e) => this.props.setRenderer(e.target.value)}>
             <MenuItem value={'geras'}>Geras</MenuItem>
             <MenuItem value={'zelos'}>Zelos</MenuItem>
           </Select>

src/components/Settings/Settings.js

@@ -14,8 +14,8 @@ import OtaSelector from "./OtaSelector";
 import SoundsSelector from "./SoundsSelector";
 import DeviceSelector from "./DeviceSelector";
 
-import Button from "@material-ui/core/Button";
-import Paper from "@material-ui/core/Paper";
+import Button from "@mui/material/Button";
+import Paper from "@mui/material/Paper";
 
 class Settings extends Component {
   componentDidMount() {

src/components/Settings/SoundsSelector.js

@@ -5,12 +5,12 @@ import { setSounds } from "../../actions/generalActions";
 
 import * as Blockly from "blockly/core";
 
-import InputLabel from "@material-ui/core/InputLabel";
-import MenuItem from "@material-ui/core/MenuItem";
-import FormControl from "@material-ui/core/FormControl";
-import Select from "@material-ui/core/Select";
-import Typography from "@material-ui/core/Typography";
-import FormHelperText from "@material-ui/core/FormHelperText";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
+import Typography from "@mui/material/Typography";
+import FormHelperText from "@mui/material/FormHelperText";
 
 class SoundsSelector extends Component {
   componentDidMount() {
@@ -30,16 +30,16 @@ class SoundsSelector extends Component {
         >
           {Blockly.Msg.settings_sounds_text}
         </FormHelperText>
-        <FormControl>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">
             {Blockly.Msg.settings_sounds}
           </InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.sounds}
-            onChange={(e) => this.props.setSounds(e.target.value)}
-          >
+            onChange={(e) => this.props.setSounds(e.target.value)}>
             <MenuItem value={false}>{Blockly.Msg.settings_ota_off}</MenuItem>
             <MenuItem value={true}>{Blockly.Msg.settings_ota_on}</MenuItem>
           </Select>

src/components/Settings/StatsSelector.js

@@ -5,12 +5,12 @@ import { setStatistics } from '../../actions/generalActions';
 
 import * as Blockly from 'blockly/core'
 
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import Typography from '@material-ui/core/Typography';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+import FormHelperText from '@mui/material/FormHelperText';
 
 class StatsSelector extends Component {
 
@@ -25,14 +25,14 @@ class StatsSelector extends Component {
       <div>
         <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_statistics}</Typography>
         <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_statistics_text}</FormHelperText>
-        <FormControl>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_statistics}</InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.statistics}
-            onChange={(e) => this.props.setStatistics(e.target.value)}
-          >
+            onChange={(e) => this.props.setStatistics(e.target.value)}>
             <MenuItem value={true}>{Blockly.Msg.settings_statistics_on}</MenuItem>
             <MenuItem value={false}>{Blockly.Msg.settings_statistics_off}</MenuItem>
           </Select>

src/components/Snackbar.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 
-import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
-import MaterialUISnackbar from '@material-ui/core/Snackbar';
-import SnackbarContent from '@material-ui/core/SnackbarContent';
+import withStyles from '@mui/styles/withStyles';
+import IconButton from '@mui/material/IconButton';
+import MaterialUISnackbar from '@mui/material/Snackbar';
+import SnackbarContent from '@mui/material/SnackbarContent';
 
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -69,7 +69,7 @@ class Snackbar extends Component {
           style={{flexWrap: 'nowrap'}}
           className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success}
           action={
-            <IconButton onClick={this.onClose} style={{color: 'inherit'}}>
+            <IconButton onClick={this.onClose} style={{color: 'inherit'}} size="large">
               <FontAwesomeIcon icon={faTimes} size="xs"/>
             </IconButton>
           }

src/components/TooltipViewer.js

@@ -1,19 +1,21 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import withWidth from "@material-ui/core/withWidth";
-import { Button, Card } from "@material-ui/core";
+import { Button, Card } from "@mui/material";
 import * as Blockly from "blockly";
-import CardContent from "@material-ui/core/CardContent";
-import Typography from "@material-ui/core/Typography";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
 import ReactMarkdown from "react-markdown";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import Slide from "@material-ui/core/Slide";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import Slide from "@mui/material/Slide";
 import SensorInfo from "./SensorInfo";
 import store from "../store";
 
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
+
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />;
 });

src/components/Tutorial/Assessment.js

@@ -6,22 +6,26 @@ import { workspaceName } from "../../actions/workspaceActions";
 import BlocklyWindow from "../Blockly/BlocklyWindow";
 import WorkspaceFunc from "../Workspace/WorkspaceFunc";
 
-import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
-import Grid from "@material-ui/core/Grid";
-import Card from "@material-ui/core/Card";
-import Typography from "@material-ui/core/Typography";
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import Typography from "@mui/material/Typography";
 import * as Blockly from "blockly";
 import { initialXml } from "../Blockly/initialXml";
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from "@mui/material/IconButton";
 import CodeViewer from "../CodeViewer";
 import TooltipViewer from "../TooltipViewer";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 import ReactMarkdown from "react-markdown";
 import { faCode } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
 import remarkGfm from "remark-gfm";
 import remarkGemoji from "remark-gemoji";
+import { isWidthDown } from "@material-ui/core";
+
+
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
 
 const styles = (theme) => ({
   codeOn: {
@@ -98,8 +102,7 @@ class Assessment extends Component {
               }
             >
               <IconButton
-                className={`showCode ${
-                  this.state.codeOn
+                className={`showCode ${this.state.codeOn
                     ? this.props.classes.codeOn
                     : this.props.classes.codeOff
                   }`}
@@ -112,7 +115,7 @@ class Assessment extends Component {
                   zIndex: 21,
                 }}
                 onClick={() => this.onChange()}
-              >
+                size="large">
                 <FontAwesomeIcon icon={faCode} size="xs" />
               </IconButton>
             </Tooltip>

src/components/Tutorial/Builder/BlocklyExample.js

@@ -15,13 +15,13 @@ import * as Blockly from "blockly/core";
 import { initialXml } from "../../Blockly//initialXml.js";
 import BlocklyWindow from "../../Blockly/BlocklyWindow";
 
-import { withStyles } from "@material-ui/core/styles";
-import Switch from "@material-ui/core/Switch";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormHelperText from "@material-ui/core/FormHelperText";
-import FormLabel from "@material-ui/core/FormLabel";
-import Button from "@material-ui/core/Button";
-import Grid from "@material-ui/core/Grid";
+import withStyles from '@mui/styles/withStyles';
+import Switch from "@mui/material/Switch";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormHelperText from "@mui/material/FormHelperText";
+import FormLabel from "@mui/material/FormLabel";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
 
 const styles = (theme) => ({
   errorColor: {

src/components/Tutorial/Builder/Builder.js

@@ -33,19 +33,19 @@ import Snackbar from "../../Snackbar";
 import Public from "./Public";
 import Review from "./Review";
 
-import { withStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
-import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import Divider from "@material-ui/core/Divider";
-import FormHelperText from "@material-ui/core/FormHelperText";
-import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import InputLabel from "@material-ui/core/InputLabel";
-import MenuItem from "@material-ui/core/MenuItem";
-import FormControl from "@material-ui/core/FormControl";
-import Select from "@material-ui/core/Select";
+import withStyles from '@mui/styles/withStyles';
+import Button from "@mui/material/Button";
+import Backdrop from "@mui/material/Backdrop";
+import CircularProgress from "@mui/material/CircularProgress";
+import Divider from "@mui/material/Divider";
+import FormHelperText from "@mui/material/FormHelperText";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
 import * as Blockly from "blockly";
 
 const styles = (theme) => ({
@@ -470,12 +470,12 @@ class Builder extends Component {
           <FormControl variant="outlined" style={{ width: "100%" }}>
             <InputLabel id="select-outlined-label">Tutorial</InputLabel>
             <Select
+              variant="standard"
               color="primary"
               labelId="select-outlined-label"
               value={this.props.id}
               onChange={(e) => this.onChangeId(e.target.value)}
-              label="Tutorial"
-            >
+              label="Tutorial">
               {filteredTutorials.map((tutorial) => (
                 <MenuItem value={tutorial._id}>
                   {tutorial.title}{" "}

src/components/Tutorial/Builder/Difficulty.js

@@ -9,13 +9,13 @@ import {
   deleteError,
 } from "../../../actions/tutorialBuilderActions";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
 import ReactStars from "react-rating-stars-component";
 import * as Blockly from "blockly";
-import FormGroup from "@material-ui/core/FormGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormControl from "@material-ui/core/FormControl";
-import FormLabel from "@material-ui/core/FormLabel";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
 
 const styles = (theme) => ({
   multiline: {
@@ -55,7 +55,7 @@ class Difficulty extends Component {
 
   render() {
     return (
-      <FormControl component="fieldset">
+      <FormControl variant="standard" component="fieldset">
         <FormLabel component="legend">
           {Blockly.Msg.builder_difficulty}
         </FormLabel>

src/components/Tutorial/Builder/Hardware.js

@@ -9,14 +9,17 @@ import {
 
 import hardware from "../../../data/hardware.json";
 
-import { withStyles } from "@material-ui/core/styles";
-import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
-import ImageList from "@material-ui/core/ImageList";
-import ImageListItem from "@material-ui/core/ImageListItem";
-import ImageListItemBar from "@material-ui/core/ImageListItemBar";
-import FormHelperText from "@material-ui/core/FormHelperText";
-import FormLabel from "@material-ui/core/FormLabel";
+import withStyles from '@mui/styles/withStyles';
+import ImageList from "@mui/material/ImageList";
+import ImageListItem from "@mui/material/ImageListItem";
+import ImageListItemBar from "@mui/material/ImageListItemBar";
+import FormHelperText from "@mui/material/FormHelperText";
+import FormLabel from "@mui/material/FormLabel";
 import * as Blockly from "blockly";
+import { isWidthDown } from "@material-ui/core";
+
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
 
 const styles = (theme) => ({
   multiImageListItem: {

src/components/Tutorial/Builder/Id.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { tutorialId, setError, deleteError } from '../../../actions/tutorialBuilderActions';
 
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import withStyles from '@mui/styles/withStyles';
+import Button from '@mui/material/Button';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
 
 import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

src/components/Tutorial/Builder/MarkdownEditor.js

@@ -8,7 +8,7 @@ import {
   deleteError,
 } from "../../../actions/tutorialBuilderActions";
 
-import FormControl from "@material-ui/core/FormControl";
+import FormControl from "@mui/material/FormControl";
 import MarkdownIt from "markdown-it";
 import Editor from "react-markdown-editor-lite";
 import "react-markdown-editor-lite/lib/index.css";

src/components/Tutorial/Builder/Media.js

@@ -5,13 +5,13 @@ import { changeContent, deleteProperty, setError, deleteError } from '../../../a
 
 import Textfield from './Textfield';
 
-import { withStyles } from '@material-ui/core/styles';
-import Switch from '@material-ui/core/Switch';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import Button from '@material-ui/core/Button';
+import withStyles from '@mui/styles/withStyles';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import Button from '@mui/material/Button';
 
 const styles = (theme) => ({
   errorColor: {

src/components/Tutorial/Builder/Public.js

@@ -9,14 +9,14 @@ import {
   deleteError,
 } from "../../../actions/tutorialBuilderActions";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
 
 import * as Blockly from "blockly";
-import Checkbox from "@material-ui/core/Checkbox";
-import FormGroup from "@material-ui/core/FormGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormControl from "@material-ui/core/FormControl";
-import FormLabel from "@material-ui/core/FormLabel";
+import Checkbox from "@mui/material/Checkbox";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
 
 const styles = (theme) => ({
   multiline: {
@@ -52,7 +52,7 @@ class Public extends Component {
 
   render() {
     return (
-      <FormControl component="fieldset">
+      <FormControl variant="standard" component="fieldset">
         <FormLabel component="legend">
           {Blockly.Msg.builder_public_head}
         </FormLabel>

src/components/Tutorial/Builder/Requirements.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { changeContent } from '../../../actions/tutorialBuilderActions';
 
-import FormGroup from '@material-ui/core/FormGroup';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormLabel from '@material-ui/core/FormLabel';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import FormControl from '@material-ui/core/FormControl';
+import FormGroup from '@mui/material/FormGroup';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormLabel from '@mui/material/FormLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
 import * as Blockly from 'blockly'
 class Requirements extends Component {
 
@@ -26,7 +26,9 @@ class Requirements extends Component {
 
   render() {
     return (
-      <FormControl style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
+      <FormControl
+        variant="standard"
+        style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
         <FormLabel style={{ color: 'black' }}>{Blockly.Msg.builder_requirements_head}</FormLabel>
         <FormHelperText style={{ marginTop: '5px' }}>{Blockly.Msg.builder_requirements_order}</FormHelperText>
         <FormGroup>

src/components/Tutorial/Builder/Review.js

@@ -9,14 +9,14 @@ import {
   deleteError,
 } from "../../../actions/tutorialBuilderActions";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
 
 import * as Blockly from "blockly";
-import Checkbox from "@material-ui/core/Checkbox";
-import FormGroup from "@material-ui/core/FormGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormControl from "@material-ui/core/FormControl";
-import FormLabel from "@material-ui/core/FormLabel";
+import Checkbox from "@mui/material/Checkbox";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
 
 const styles = (theme) => ({
   multiline: {
@@ -52,7 +52,7 @@ class Review extends Component {
 
   render() {
     return (
-      <FormControl component="fieldset">
+      <FormControl variant="standard" component="fieldset">
         <FormLabel component="legend">
           {Blockly.Msg.builder_review_head}
         </FormLabel>

src/components/Tutorial/Builder/Step.js

@@ -15,10 +15,10 @@ import BlocklyExample from "./BlocklyExample";
 import Requirements from "./Requirements";
 import Hardware from "./Hardware";
 
-import { withStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
+import withStyles from '@mui/styles/withStyles';
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 
 import {
   faPlus,
@@ -85,7 +85,7 @@ class Step extends Component {
                 className={this.props.classes.button}
                 style={index === 0 ? {} : { marginBottom: "5px" }}
                 onClick={() => this.props.addStep(index + 1)}
-              >
+                size="large">
                 <FontAwesomeIcon icon={faPlus} size="xs" />
               </IconButton>
             </Tooltip>
@@ -100,7 +100,7 @@ class Step extends Component {
                     className={this.props.classes.button}
                     style={{ marginBottom: "5px" }}
                     onClick={() => this.props.changeStepIndex(index, index - 1)}
-                  >
+                    size="large">
                     <FontAwesomeIcon icon={faAngleDoubleUp} size="xs" />
                   </IconButton>
                 </Tooltip>
@@ -113,7 +113,7 @@ class Step extends Component {
                     className={this.props.classes.button}
                     style={{ marginBottom: "5px" }}
                     onClick={() => this.props.changeStepIndex(index, index + 1)}
-                  >
+                    size="large">
                     <FontAwesomeIcon icon={faAngleDoubleDown} size="xs" />
                   </IconButton>
                 </Tooltip>
@@ -125,7 +125,7 @@ class Step extends Component {
                       this.props.classes.delete
                     )}
                     onClick={() => this.props.removeStep(index)}
-                  >
+                    size="large">
                     <FontAwesomeIcon icon={faTrash} size="xs" />
                   </IconButton>
                 </Tooltip>

src/components/Tutorial/Builder/StepType.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { changeContent, deleteProperty, deleteError } from '../../../actions/tutorialBuilderActions';
 
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 class StepType extends Component {
 

src/components/Tutorial/Builder/Textfield.js

@@ -9,11 +9,11 @@ import {
   deleteError,
 } from "../../../actions/tutorialBuilderActions";
 
-import { withStyles } from "@material-ui/core/styles";
-import OutlinedInput from "@material-ui/core/OutlinedInput";
-import InputLabel from "@material-ui/core/InputLabel";
-import FormControl from "@material-ui/core/FormControl";
-import FormHelperText from "@material-ui/core/FormHelperText";
+import withStyles from '@mui/styles/withStyles';
+import OutlinedInput from "@mui/material/OutlinedInput";
+import InputLabel from "@mui/material/InputLabel";
+import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
 
 const styles = (theme) => ({
   multiline: {

src/components/Tutorial/Hardware.js

@@ -4,18 +4,22 @@ import Dialog from "../Dialog";
 
 import hardware from "../../data/hardware.json";
 
-import { withStyles } from "@material-ui/core/styles";
-import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
-import Link from "@material-ui/core/Link";
-import Typography from "@material-ui/core/Typography";
-import IconButton from "@material-ui/core/IconButton";
-import ImageList from "@material-ui/core/ImageList";
-import ImageListItem from "@material-ui/core/ImageListItem";
-import ImageListItemBar from "@material-ui/core/ImageListItemBar";
+import withStyles from '@mui/styles/withStyles';
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import ImageList from "@mui/material/ImageList";
+import ImageListItem from "@mui/material/ImageListItem";
+import ImageListItemBar from "@mui/material/ImageListItemBar";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
 import * as Blockly from "blockly";
+import { isWidthDown } from "@material-ui/core";
+
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
+
 const styles = (theme) => ({
   expand: {
     "&:hover": {
@@ -93,7 +97,7 @@ class Hardware extends Component {
                       className={this.props.classes.expand}
                       aria-label="Vollbild"
                       onClick={() => this.handleClickOpen(hardwareInfo)}
-                    >
+                      size="large">
                       <FontAwesomeIcon icon={faExpandAlt} size="xs" />
                     </IconButton>
                   }
@@ -124,7 +128,7 @@ class Hardware extends Component {
               target="_blank"
               href={this.state.hardwareInfo.url}
               color="primary"
-            >
+              underline="hover">
               {Blockly.Msg.tutorials_hardware_here}
             </Link>
             .

src/components/Tutorial/HintTutorialExists.js

@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import Dialog from "../Dialog";
 
-import { withStyles } from "@material-ui/core/styles";
-import Checkbox from "@material-ui/core/Checkbox";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import withStyles from '@mui/styles/withStyles';
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
 import * as Blockly from "blockly";
 import ReactMarkdown from "react-markdown";
 

src/components/Tutorial/Instruction.js

@@ -4,8 +4,8 @@ import Hardware from "./Hardware";
 import Requirement from "./Requirement";
 import BlocklyWindow from "../Blockly/BlocklyWindow";
 
-import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkGemoji from "remark-gemoji";

src/components/Tutorial/Requirement.js

@@ -4,11 +4,11 @@ import { connect } from "react-redux";
 
 import clsx from "clsx";
 import { withRouter, Link } from "react-router-dom";
-import { alpha } from "@material-ui/core/styles";
-import { withStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
-import List from "@material-ui/core/List";
-import Tooltip from "@material-ui/core/Tooltip";
+import { alpha } from "@mui/material/styles";
+import withStyles from '@mui/styles/withStyles';
+import Typography from "@mui/material/Typography";
+import List from "@mui/material/List";
+import Tooltip from "@mui/material/Tooltip";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";

src/components/Tutorial/SolutionCheck.js

@@ -10,10 +10,10 @@ import Dialog from "../Dialog";
 
 import { checkXml } from "../../helpers/compareXml";
 
-import { withStyles } from "@material-ui/core/styles";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
-import Button from "@material-ui/core/Button";
+import withStyles from '@mui/styles/withStyles';
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import Button from "@mui/material/Button";
 
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -62,7 +62,7 @@ class SolutionCheck extends Component {
             className={`solutionCheck ${this.props.classes.compile}`}
             style={{ width: "40px", height: "40px", marginRight: "5px" }}
             onClick={() => this.check()}
-          >
+            size="large">
             <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
           </IconButton>
         </Tooltip>

src/components/Tutorial/StepperHorizontal.js

@@ -7,12 +7,12 @@ import { withRouter } from "react-router-dom";
 import clsx from "clsx";
 
 // import tutorials from '../../data/tutorials';
-import { alpha } from "@material-ui/core/styles";
+import { alpha } from "@mui/material/styles";
 
-import { withStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
-import Tooltip from "@material-ui/core/Tooltip";
-import Button from "@material-ui/core/Button";
+import withStyles from '@mui/styles/withStyles';
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+import Button from "@mui/material/Button";
 
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

src/components/Tutorial/StepperVertical.js

@@ -6,12 +6,12 @@ import { tutorialStep } from "../../actions/tutorialActions";
 import { withRouter } from "react-router-dom";
 
 import clsx from "clsx";
-import { alpha } from "@material-ui/core/styles";
-import { withStyles } from "@material-ui/core/styles";
-import Stepper from "@material-ui/core/Stepper";
-import Step from "@material-ui/core/Step";
-import StepLabel from "@material-ui/core/StepLabel";
-import Tooltip from "@material-ui/core/Tooltip";
+import { alpha } from "@mui/material/styles";
+import withStyles from '@mui/styles/withStyles';
+import Stepper from "@mui/material/Stepper";
+import Step from "@mui/material/Step";
+import StepLabel from "@mui/material/StepLabel";
+import Tooltip from "@mui/material/Tooltip";
 
 const styles = (theme) => ({
   verticalStepper: {

src/components/Tutorial/Tutorial.js

@@ -21,8 +21,8 @@ import NotFound from "../NotFound";
 import * as Blockly from "blockly";
 import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
 
-import Card from "@material-ui/core/Card";
-import Button from "@material-ui/core/Button";
+import Card from "@mui/material/Card";
+import Button from "@mui/material/Button";
 
 class Tutorial extends Component {
   componentDidMount() {

src/components/Tutorial/TutorialHome.js

@@ -17,11 +17,11 @@ import clsx from "clsx";
 import Breadcrumbs from "../Breadcrumbs";
 
 import { Link } from "react-router-dom";
-import { alpha } from "@material-ui/core/styles";
-import { withStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
-import Typography from "@material-ui/core/Typography";
+import { alpha } from "@mui/material/styles";
+import withStyles from '@mui/styles/withStyles';
+import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
 
 import {
   faCheck,
@@ -33,10 +33,10 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly";
 import ReactStars from "react-rating-stars-component";
-import Tooltip from "@material-ui/core/Tooltip";
-import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
 import Snackbar from "../Snackbar";
-import Divider from "@material-ui/core/Divider";
+import Divider from "@mui/material/Divider";
 import DeviceSelection from "../DeviceSelection";
 
 const styles = (theme) => ({
@@ -379,7 +379,7 @@ class TutorialHome extends Component {
                                   type: "success",
                                 });
                               }}
-                            >
+                              size="large">
                               <FontAwesomeIcon icon={faShareAlt} size="xs" />
                             </IconButton>
                           </Tooltip>
@@ -390,7 +390,7 @@ class TutorialHome extends Component {
                             <IconButton
                               className={`publicTutorial ${this.props.classes.button}`}
                               disabled={!tutorial.public}
-                            >
+                              size="large">
                               <FontAwesomeIcon icon={faEye} size="xs" />
                             </IconButton>
                           </Tooltip>
@@ -402,7 +402,7 @@ class TutorialHome extends Component {
                               <IconButton
                                 className={`publicTutorial ${this.props.classes.button}`}
                                 disabled={!tutorial.review}
-                              >
+                                size="large">
                                 <FontAwesomeIcon icon={faUserCheck} size="xs" />
                               </IconButton>
                             </Tooltip>

src/components/User/Account.js

@@ -5,16 +5,16 @@ import { connect } from 'react-redux';
 import Breadcrumbs from '../Breadcrumbs';
 import Alert from '../Alert';
 
-import Grid from '@material-ui/core/Grid';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import Divider from '@material-ui/core/Divider';
-import Paper from '@material-ui/core/Paper';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
+import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Divider from '@mui/material/Divider';
+import Paper from '@mui/material/Paper';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
 
 import { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox, faUserTag } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -30,7 +30,12 @@ export class Account extends Component {
 
         <h1>Account</h1>
         <Alert>
-          Alle Angaben stammen von <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> und können dort verwaltet werden.
+          Alle Angaben stammen von <Link
+          color='primary'
+          rel="noreferrer"
+          target="_blank"
+          href={'https://opensensemap.org/'}
+          underline="hover">openSenseMap</Link> und können dort verwaltet werden.
         </Alert>
         <Paper style={{ width: 'max-content', maxWidth: '100%' }}>
           <List>
@@ -62,7 +67,12 @@ export class Account extends Component {
         <div style={{ marginBottom: '8px' }}>
           {this.props.user.boxes.length < 1 ?
             <Typography>
-              Du hast noch keine senseBox registriert. Besuche <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> um eine senseBox zu registrieren.
+              Du hast noch keine senseBox registriert. Besuche <Link
+              color='primary'
+              rel="noreferrer"
+              target="_blank"
+              href={'https://opensensemap.org/'}
+              underline="hover">openSenseMap</Link> um eine senseBox zu registrieren.
             </Typography>
             : <Typography style={{ fontWeight: 'bold', fontSize: '1.1rem' }}>
               Du hast {this.props.user.boxes.length} {this.props.user.boxes.length === 1 ? 'senseBox' : 'senseBoxen'} registriert:
@@ -73,7 +83,13 @@ export class Account extends Component {
             var sensors = box.sensors.map(sensor => sensor.title);
             return (
               <Grid item xs={12} sm={6} md={4} xl={3} key={i}>
-                <Link rel="noreferrer" target="_blank" href={`https://opensensemap.org/explore/${box._id}`} color="primary" style={{ textDecoration: 'none', color: 'inherit' }}>
+                <Link
+                  rel="noreferrer"
+                  target="_blank"
+                  href={`https://opensensemap.org/explore/${box._id}`}
+                  color="primary"
+                  style={{ textDecoration: 'none', color: 'inherit' }}
+                  underline="hover">
                   <Paper>
                     <List>
                       <ListItem>
@@ -116,7 +132,7 @@ export class Account extends Component {
                   </Paper>
                 </Link>
               </Grid>
-            )
+            );
           })}
         </Grid>
       </div>

src/components/User/Login.js

@@ -10,15 +10,15 @@ import Snackbar from "../Snackbar";
 import Alert from "../Alert";
 import Breadcrumbs from "../Breadcrumbs";
 
-import Button from "@material-ui/core/Button";
-import IconButton from "@material-ui/core/IconButton";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-import TextField from "@material-ui/core/TextField";
-import Divider from "@material-ui/core/Divider";
-import InputAdornment from "@material-ui/core/InputAdornment";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import Link from "@material-ui/core/Link";
+import TextField from "@mui/material/TextField";
+import Divider from "@mui/material/Divider";
+import InputAdornment from "@mui/material/InputAdornment";
+import CircularProgress from "@mui/material/CircularProgress";
+import Link from "@mui/material/Link";
 import * as Blockly from "blockly";
 
 export class Login extends Component {
@@ -125,7 +125,7 @@ export class Login extends Component {
               rel="noreferrer"
               target="_blank"
               href={"https://opensensemap.org/"}
-            >
+              underline="hover">
               openSenseMap
             </Link>{" "}
             {Blockly.Msg.login_osem_account_02}.
@@ -138,6 +138,7 @@ export class Login extends Component {
           />
           <form onSubmit={this.onSubmit}>
             <TextField
+              variant="standard"
               style={{ marginBottom: "10px" }}
               // variant='outlined'
               type="text"
@@ -145,9 +146,9 @@ export class Login extends Component {
               name="email"
               value={this.state.email}
               onChange={this.onChange}
-              fullWidth={true}
-            />
+              fullWidth={true} />
             <TextField
+              variant="standard"
               // variant='outlined'
               type={this.state.showPassword ? "text" : "password"}
               label={Blockly.Msg.labels_password}
@@ -160,7 +161,7 @@ export class Login extends Component {
                       onClick={this.handleClickShowPassword}
                       onMouseDown={this.handleMouseDownPassword}
                       edge="end"
-                    >
+                      size="large">
                       <FontAwesomeIcon
                         size="xs"
                         icon={this.state.showPassword ? faEyeSlash : faEye}
@@ -170,8 +171,7 @@ export class Login extends Component {
                 ),
               }}
               onChange={this.onChange}
-              fullWidth={true}
-            />
+              fullWidth={true} />
             <p>
               <Button
                 color="primary"
@@ -195,7 +195,7 @@ export class Login extends Component {
               target="_blank"
               href={"https://opensensemap.org/"}
               color="primary"
-            >
+              underline="hover">
               {Blockly.Msg.login_lostpassword}
             </Link>
           </p>
@@ -212,7 +212,7 @@ export class Login extends Component {
               rel="noreferrer"
               target="_blank"
               href={"https://opensensemap.org/"}
-            >
+              underline="hover">
               openSenseMap
             </Link>
             .

src/components/Workspace/Compile.js

@@ -5,19 +5,19 @@ import { workspaceName } from "../../actions/workspaceActions";
 
 import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
 
-import { withStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
-import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
-import Divider from "@material-ui/core/Divider";
+import withStyles from '@mui/styles/withStyles';
+import Button from "@mui/material/Button";
+import Backdrop from "@mui/material/Backdrop";
+import CircularProgress from "@mui/material/CircularProgress";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import Divider from "@mui/material/Divider";
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly/core";
 import Copy from "../copy.svg";
 
-import MuiDrawer from "@material-ui/core/Drawer";
+import MuiDrawer from "@mui/material/Drawer";
 import Dialog from "../Dialog";
 
 const styles = (theme) => ({
@@ -188,7 +188,7 @@ class Compile extends Component {
             <IconButton
               className={`compileBlocks ${this.props.classes.iconButton}`}
               onClick={() => this.compile()}
-            >
+              size="large">
               <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
             </IconButton>
           </Tooltip>

src/components/Workspace/CopyCode.js

@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { workspaceName } from "../../actions/workspaceActions";
 
-import { withStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
+import withStyles from '@mui/styles/withStyles';
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 
 import { faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -68,7 +68,7 @@ class CopyCode extends Component {
             <IconButton
               className={`copyCode ${this.props.classes.iconButton}`}
               onClick={() => this.copyCode()}
-            >
+              size="large">
               <FontAwesomeIcon icon={faCopy} size="xs" />
             </IconButton>
           </Tooltip>

src/components/Workspace/DeleteProject.js

@@ -7,9 +7,9 @@ import { withRouter } from 'react-router-dom';
 
 import Snackbar from '../Snackbar';
 
-import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -61,7 +61,7 @@ class DeleteProject extends Component {
           <IconButton
             className={this.props.classes.buttonTrash}
             onClick={() => this.props.deleteProject(this.props.projectType, this.props.project._id)}
-          >
+            size="large">
             <FontAwesomeIcon icon={faTrashAlt} size="xs" />
           </IconButton>
         </Tooltip>

src/components/Workspace/DownloadProject.js

@@ -6,9 +6,9 @@ import { saveAs } from 'file-saver';
 
 import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
 
-import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 
 import { faFileDownload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -46,7 +46,7 @@ class DownloadProject extends Component {
           <IconButton
             className={`saveBlocks ${this.props.classes.button}`}
             onClick={() => this.downloadXmlFile()}
-          >
+            size="large">
             <FontAwesomeIcon icon={faFileDownload} size="xs" />
           </IconButton>
         </Tooltip>

src/components/Workspace/OpenProject.js

@@ -8,8 +8,8 @@ import * as Blockly from 'blockly/core';
 import Snackbar from '../Snackbar';
 import Dialog from '../Dialog';
 
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from '@mui/material/Tooltip';
 
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

src/components/Workspace/ResetWorkspace.js

@@ -10,14 +10,14 @@ import { initialXml } from '../Blockly/initialXml.js';
 
 import Snackbar from '../Snackbar';
 
-import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 
 import { faShare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Dialog from '../Dialog';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 const styles = (theme) => ({
   button: {
@@ -81,7 +81,7 @@ class ResetWorkspace extends Component {
           <IconButton
             className={this.props.classes.button}
             onClick={() => this.openDialog()}
-          >
+            size="large">
             <FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
           </IconButton>
         </Tooltip>

src/components/Workspace/SaveProject.js

@@ -9,13 +9,13 @@ import { withRouter } from 'react-router-dom';
 import Snackbar from '../Snackbar';
 import Dialog from '../Dialog';
 
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import TextField from '@material-ui/core/TextField';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
+import withStyles from '@mui/styles/withStyles';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import TextField from '@mui/material/TextField';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -133,7 +133,7 @@ class SaveProject extends Component {
           <IconButton
             className={this.props.classes.button}
             onClick={this.props.user.blocklyRole !== 'user' && (!this.props.project || this.props.user.email === this.props.project.creator) ? (e) => this.toggleMenu(e) : this.state.projectType === 'project' ? () => this.props.updateProject(this.state.projectType, this.props.project._id) : () => { this.setState({ projectType: 'project' }, () => this.saveProject()) }}
-          >
+            size="large">
             <FontAwesomeIcon icon={faSave} size="xs" />
           </IconButton>
         </Tooltip>
@@ -178,7 +178,15 @@ class SaveProject extends Component {
           button={'Abbrechen'}
         >
           <div style={{ marginTop: '10px' }}>
-            <TextField autoFocus fullWidth multiline placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} />
+            <TextField
+              variant="standard"
+              autoFocus
+              fullWidth
+              multiline
+              placeholder={'Projektbeschreibung'}
+              value={this.state.description}
+              onChange={this.setDescription}
+              style={{ marginBottom: '10px' }} />
             <Button disabled={!this.state.description} variant='contained' color='primary' onClick={() => { this.workspaceDescription(); this.toggleDialog(); }}>Eingabe</Button>
           </div>
         </Dialog>

src/components/Workspace/Screenshot.js

@@ -8,9 +8,9 @@ import { saveAs } from "file-saver";
 
 import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
 
-import { withStyles } from "@material-ui/core/styles";
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
+import withStyles from '@mui/styles/withStyles';
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 
 import { faCamera } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -82,7 +82,7 @@ class Screenshot extends Component {
           <IconButton
             className={this.props.classes.button}
             onClick={() => this.getSvg()}
-          >
+            size="large">
             <FontAwesomeIcon icon={faCamera} size="xs" />
           </IconButton>
         </Tooltip>

src/components/Workspace/ShareProject.js

@@ -16,11 +16,11 @@ import Snackbar from "../Snackbar";
 import GridLoader from "react-spinners/GridLoader";
 import { EmailShareButton, FacebookShareButton, TwitterShareButton, WhatsappShareButton} from "react-share";
 import { EmailIcon, FacebookIcon, TwitterIcon, WhatsappIcon} from "react-share";
-import { withStyles } from "@material-ui/core/styles";
-import IconButton from "@material-ui/core/IconButton";
-import Button from '@material-ui/core/Button';
-import Tooltip from "@material-ui/core/Tooltip";
-import Typography from "@material-ui/core/Typography";
+import withStyles from '@mui/styles/withStyles';
+import IconButton from "@mui/material/IconButton";
+import Button from '@mui/material/Button';
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
 
 import { faShareAlt, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -164,7 +164,7 @@ class WorkspaceFunc extends Component {
           <IconButton
             className={`shareBlocks ${this.props.classes.iconButton}`}
             onClick={() => this.shareBlocks()}
-          >
+            size="large">
             <FontAwesomeIcon icon={faShareAlt} size="xs" />
           </IconButton>
         </Tooltip>
@@ -217,7 +217,7 @@ class WorkspaceFunc extends Component {
                           type: "success",
                         });
                       }}
-                    >
+                      size="large">
                       <FontAwesomeIcon icon={faCopy} size="xs" />
                     </IconButton>
                   </Tooltip>

src/components/Workspace/TrashcanButtons.js

@@ -4,9 +4,9 @@ import { connect } from 'react-redux';
 
 import * as Blockly from 'blockly/core';
 
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import withStyles from '@mui/styles/withStyles';
 
 import { faTimes, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -56,15 +56,14 @@ class TrashcanButtons extends Component {
   }
 
   render() {
-    return (
-      this.state.closeTrashFlyout ?
+    return this.state.closeTrashFlyout ?
       <div>
         <Tooltip title={Blockly.Msg.tooltip_trashcan_hide}>
           <IconButton
             className={this.props.classes.closeTrash}
             style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }}
             onClick={() => this.closeTrashcan()}
-            >
+            size="large">
             <FontAwesomeIcon icon={faTimes} size="xs" />
           </IconButton>
         </Tooltip>
@@ -73,13 +72,12 @@ class TrashcanButtons extends Component {
             className={this.props.classes.deleteTrash}
             style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }}
             onClick={() => this.clearTrashcan()}
-            >
+            size="large">
             <FontAwesomeIcon icon={faTrash} size="xs" />
           </IconButton>
         </Tooltip>
       </div>
-        : null
-    );
+      : null;
   };
 }
 

src/components/Workspace/WorkspaceName.js

@@ -7,16 +7,19 @@ import { setDescription, updateProject } from "../../actions/projectActions";
 import Snackbar from "../Snackbar";
 import Dialog from "../Dialog";
 
-import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
-import { withStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
-import Tooltip from "@material-ui/core/Tooltip";
-import TextField from "@material-ui/core/TextField";
-import Typography from "@material-ui/core/Typography";
+import withStyles from '@mui/styles/withStyles';
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
 
 import { faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly/core";
+import { isWidthDown } from "@material-ui/core";
+
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
 
 const styles = (theme) => ({
   workspaceName: {
@@ -186,31 +189,31 @@ class WorkspaceName extends Component {
               this.state.projectType === "gallery" ? (
               <div>
                 <TextField
+                  variant="standard"
                   autoFocus
                   placeholder={
                     this.state.saveXml ? "Dateiname" : "Projekttitel"
                   }
                   value={this.state.name}
                   onChange={this.setFileName}
-                  style={{ marginBottom: "10px" }}
-                />
+                  style={{ marginBottom: "10px" }} />
                 <TextField
+                  variant="standard"
                   fullWidth
                   multiline
                   placeholder={"Projektbeschreibung"}
                   value={this.state.description}
                   onChange={this.setDescription}
-                  style={{ marginBottom: "10px" }}
-                />
+                  style={{ marginBottom: "10px" }} />
               </div>
             ) : (
               <TextField
+                variant="standard"
                 autoFocus
                 placeholder={this.state.saveXml ? "Dateiname" : "Projekttitel"}
                 value={this.state.name}
                 onChange={this.setFileName}
-                style={{ marginRight: "10px" }}
-              />
+                style={{ marginRight: "10px" }} />
             )}
             <Button
               disabled={!this.state.name}

src/components/Workspace/WorkspaceStats.js

@@ -4,13 +4,12 @@ import { connect } from "react-redux";
 
 import * as Blockly from "blockly/core";
 
-import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
-import { withStyles } from "@material-ui/core/styles";
-import Tooltip from "@material-ui/core/Tooltip";
-import IconButton from "@material-ui/core/IconButton";
-import Chip from "@material-ui/core/Chip";
-import Avatar from "@material-ui/core/Avatar";
-import Popover from "@material-ui/core/Popover";
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
+import Chip from "@mui/material/Chip";
+import Avatar from "@mui/material/Avatar";
+import Popover from "@mui/material/Popover";
 
 import {
   faPuzzlePiece,
@@ -21,6 +20,10 @@ import {
   faEllipsisH,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { isWidthDown } from "@material-ui/core";
+
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
 
 const styles = (theme) => ({
   stats: {
@@ -174,7 +177,7 @@ class WorkspaceStats extends Component {
           <IconButton
             className={this.props.classes.menu}
             onClick={(event) => this.handleClick(event)}
-          >
+            size="large">
             <FontAwesomeIcon icon={faEllipsisH} size="xs" />
           </IconButton>
         </Tooltip>