complete MUI migration

src/App.css

@@ -53,7 +53,7 @@ td {
   padding-top: 12px;
   padding-bottom: 12px;
   text-align: left;
-  background-color: #4eaf47;
+  border-color: #4eaf47;
   color: white;
 }
 

src/App.js

@@ -9,11 +9,11 @@ import { loadUser } from "./actions/authActions";
 
 import "./App.css";
 
-import { ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme } from "@mui/material/styles";
+import { ThemeProvider, StyledEngineProvider, createTheme } from "@mui/material/styles";
 
 import Content from "./components/Content";
 
-const theme = createTheme(adaptV4Theme({
+const theme = createTheme({
   palette: {
     primary: {
       main: "#4EAF47",
@@ -26,7 +26,7 @@ const theme = createTheme(adaptV4Theme({
       compile: "#e27136",
     },
   },
-}));
+});
 
 class App extends Component {
   componentDidMount() {

src/components/Breadcrumbs.js

@@ -30,7 +30,7 @@ class Breadcrumbs extends Component {
       this.props.content && this.props.content.length > 0 ?
         <MaterialUIBreadcrumbs separator="›" style={{marginBottom: '20px'}}>
           <Link to={'/'} style={{textDecoration: 'none'}}>
-            <FontAwesomeIcon className={clsx(this.props.classes.home, this.props.classes.hover)} icon={faHome} size="xs"/>
+            <FontAwesomeIcon className={clsx(this.props.classes.home, this.props.classes.hover)} icon={faHome}  size="xs"/>
           </Link>
           {this.props.content.splice(0, this.props.content.length-1).map((content, i) => (
             <Link to={content.link} style={{textDecoration: 'none'}} key={i}>

src/components/CodeEditor/Compile.js

@@ -189,7 +189,7 @@ class Compile extends Component {
               className={`compileBlocks ${this.props.classes.iconButton}`}
               onClick={() => this.compile()}
               size="large">
-              <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
+              <FontAwesomeIcon icon={faClipboardCheck} size="xs"  />
             </IconButton>
           </Tooltip>
         ) : (
@@ -201,6 +201,7 @@ class Compile extends Component {
           >
             <FontAwesomeIcon
               icon={faClipboardCheck}
+              
               style={{ marginRight: "5px" }}
             />{" "}
             Kompilieren
@@ -301,6 +302,7 @@ class Compile extends Component {
               >
                 <FontAwesomeIcon
                   icon={faClipboardCheck}
+                  
                   style={{ marginRight: "5px" }}
                 />{" "}
                 Starte Übertragung

src/components/CodeEditor/SaveIcon.js

@@ -17,6 +17,7 @@ const SaveIcon = ({ loading }) => (
         <FontAwesomeIcon
           style={{ position: "absolute" }}
           icon={faCircleNotch}
+          
           spin={true}
           size="2x"
           color="grey"
@@ -30,6 +31,7 @@ const SaveIcon = ({ loading }) => (
           transform: "translate(-50%,-50%)",
         }}
         icon={faSave}
+        
         color={loading ? "grey" : "green"}
         size={loading ? "1x" : "lg"}
       />

src/components/Home.js

@@ -161,7 +161,7 @@ class Home extends Component {
                 }}
                 onClick={() => this.onChange()}
                 size="large">
-                <FontAwesomeIcon icon={faCode} size="xs" />
+                <FontAwesomeIcon icon={faCode}  size="xs" />
               </IconButton>
             </Tooltip>
 

src/components/Navbar.js

@@ -214,11 +214,11 @@ class Navbar extends Component {
           </div>
           <List>
             {[
-                 {
+              {
-                  text: Blockly.Msg.navbar_blockly,
+                text: Blockly.Msg.navbar_blockly,
-                  icon: faPuzzlePiece,
+                icon: faPuzzlePiece,
-                  link: "/",
+                link: "/",
-                },
+              },
               {
                 text: Blockly.Msg.navbar_tutorials,
                 icon: faChalkboardTeacher,
@@ -329,9 +329,9 @@ class Navbar extends Component {
                       onClick={
                         item.function
                           ? () => {
-                              item.function();
+                            item.function();
-                              this.toggleDrawer();
+                            this.toggleDrawer();
-                            }
+                          }
                           : this.toggleDrawer
                       }
                     >

src/components/Snackbar.js

@@ -70,7 +70,7 @@ class Snackbar extends Component {
           className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success}
           action={
             <IconButton onClick={this.onClose} style={{color: 'inherit'}} size="large">
-              <FontAwesomeIcon icon={faTimes} size="xs"/>
+              <FontAwesomeIcon icon={faTimes} size="xs" />
             </IconButton>
           }
           message={this.props.message}

src/components/Tutorial/Assessment.js

@@ -116,7 +116,7 @@ class Assessment extends Component {
                 }}
                 onClick={() => this.onChange()}
                 size="large">
-                <FontAwesomeIcon icon={faCode} size="xs" />
+                <FontAwesomeIcon icon={faCode}  size="xs" />
               </IconButton>
             </Tooltip>
             <BlocklyWindow

src/components/Tutorial/Builder/BlocklyExample.js

@@ -139,7 +139,6 @@ class BlocklyExample extends Component {
               <Switch
                 checked={this.state.checked}
                 onChange={(e) => this.onChange(e.target.checked)}
-                color="primary"
               />
             }
           />

src/components/Tutorial/Builder/Builder.js

@@ -407,7 +407,7 @@ class Builder extends Component {
           <FormControlLabel
             style={{ color: "black" }}
             value="new"
-            control={<Radio color="primary" />}
+            control={<Radio />}
             label={Blockly.Msg.builder_createNew}
             labelPlacement="end"
           />
@@ -417,7 +417,7 @@ class Builder extends Component {
                 style={{ color: "black" }}
                 disabled={this.props.index === 0}
                 value="change"
-                control={<Radio color="primary" />}
+                control={<Radio />}
                 label={Blockly.Msg.builder_changeExisting}
                 labelPlacement="end"
               />
@@ -425,7 +425,7 @@ class Builder extends Component {
                 style={{ color: "black" }}
                 disabled={this.props.index === 0}
                 value="delete"
-                control={<Radio color="primary" />}
+                control={<Radio />}
                 label={Blockly.Msg.builder_deleteExisting}
                 labelPlacement="end"
               />

src/components/Tutorial/Builder/Media.js

@@ -97,7 +97,6 @@ class Media extends Component {
             <Switch
               checked={this.state.checked}
               onChange={(e) => this.onChangeSwitch(e.target.checked)}
-              color="primary"
             />
           }
         />
@@ -106,13 +105,13 @@ class Media extends Component {
             <RadioGroup row value={this.state.radioValue} onChange={(e) => {this.onChangeRadio(e.target.value);}}>
               <FormControlLabel style={{color: 'black'}}
                 value="picture"
-                control={<Radio color="primary" />}
+                control={<Radio />}
                 label="Bild"
                 labelPlacement="end"
               />
               <FormControlLabel style={{color: 'black'}}
                 value="youtube"
-                control={<Radio color="primary" />}
+                control={<Radio />}
                 label="Youtube-Video"
                 labelPlacement="end"
               />

src/components/Tutorial/Builder/Public.js

@@ -63,7 +63,6 @@ class Public extends Component {
               <Checkbox
                 checked={this.props.value}
                 onChange={this.handleChange}
-                color="primary"
                 name="checkedA"
                 inputProps={{ "aria-label": "secondary checkbox" }}
               />

src/components/Tutorial/Builder/Requirements.js

@@ -41,7 +41,6 @@ class Requirements extends Component {
                   checked={this.props.value.filter(id => id === tutorial._id).length > 0}
                   onChange={(e) => this.onChange(e)}
                   name="requirements"
-                  color="primary"
                 />
               }
               label={tutorial.title}

src/components/Tutorial/Builder/Review.js

@@ -64,7 +64,6 @@ class Review extends Component {
               <Checkbox
                 checked={this.props.value}
                 onChange={this.handleChange}
-                color="primary"
                 name="checkedA"
                 inputProps={{ "aria-label": "secondary checkbox" }}
               />

src/components/Tutorial/Builder/Step.js

@@ -86,7 +86,7 @@ class Step extends Component {
                 style={index === 0 ? {} : { marginBottom: "5px" }}
                 onClick={() => this.props.addStep(index + 1)}
                 size="large">
-                <FontAwesomeIcon icon={faPlus} size="xs" />
+                <FontAwesomeIcon icon={faPlus}  size="xs" />
               </IconButton>
             </Tooltip>
             {index !== 0 ? (
@@ -101,7 +101,7 @@ class Step extends Component {
                     style={{ marginBottom: "5px" }}
                     onClick={() => this.props.changeStepIndex(index, index - 1)}
                     size="large">
-                    <FontAwesomeIcon icon={faAngleDoubleUp} size="xs" />
+                    <FontAwesomeIcon icon={faAngleDoubleUp}  size="xs" />
                   </IconButton>
                 </Tooltip>
                 <Tooltip
@@ -114,7 +114,7 @@ class Step extends Component {
                     style={{ marginBottom: "5px" }}
                     onClick={() => this.props.changeStepIndex(index, index + 1)}
                     size="large">
-                    <FontAwesomeIcon icon={faAngleDoubleDown} size="xs" />
+                    <FontAwesomeIcon icon={faAngleDoubleDown}  size="xs" />
                   </IconButton>
                 </Tooltip>
                 <Tooltip title={`Schritt ${index + 1} löschen`} arrow>
@@ -126,7 +126,7 @@ class Step extends Component {
                     )}
                     onClick={() => this.props.removeStep(index)}
                     size="large">
-                    <FontAwesomeIcon icon={faTrash} size="xs" />
+                    <FontAwesomeIcon icon={faTrash}  size="xs" />
                   </IconButton>
                 </Tooltip>
               </div>

src/components/Tutorial/Builder/StepType.js

@@ -23,14 +23,14 @@ class StepType extends Component {
       <RadioGroup row value={this.props.value === 'task' ? 'task' : 'instruction'} onChange={(e) => this.onChange(e.target.value)}>
         <FormControlLabel style={{color: 'black'}}
           value="instruction"
-          control={<Radio color="primary" />}
+          control={<Radio />}
           label="Anleitung"
           labelPlacement="end"
         />
         <FormControlLabel style={{color: 'black'}}
           disabled={this.props.index === 0}
           value="task"
-          control={<Radio color="primary" />}
+          control={<Radio />}
           label="Aufgabe"
           labelPlacement="end"
         />

src/components/Tutorial/Hardware.js

@@ -98,7 +98,7 @@ class Hardware extends Component {
                       aria-label="Vollbild"
                       onClick={() => this.handleClickOpen(hardwareInfo)}
                       size="large">
-                      <FontAwesomeIcon icon={faExpandAlt} size="xs" />
+                      <FontAwesomeIcon icon={faExpandAlt}  size="xs" />
                     </IconButton>
                   }
                 />

src/components/Tutorial/HintTutorialExists.js

@@ -78,7 +78,6 @@ class HintTutorialExists extends Component {
               checked={this.state.checked}
               onChange={(e) => this.onChange(e)}
               name="dialog"
-              color="primary"
             />
           }
           label={Blockly.Msg.labels_donotshowagain}

src/components/Tutorial/Requirement.js

@@ -166,6 +166,7 @@ class Requirement extends Component {
                             icon={
                               tutorialStatus === "Success" ? faCheck : faTimes
                             }
+                            
                           />
                         ) : (
                           <Typography

src/components/Tutorial/SolutionCheck.js

@@ -63,7 +63,7 @@ class SolutionCheck extends Component {
             style={{ width: "40px", height: "40px", marginRight: "5px" }}
             onClick={() => this.check()}
             size="large">
-            <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
+            <FontAwesomeIcon icon={faClipboardCheck}  size="xs" />
           </IconButton>
         </Tooltip>
 

src/components/Tutorial/StepperHorizontal.js

@@ -127,6 +127,7 @@ class StepperHorizontal extends Component {
                   <FontAwesomeIcon
                     className={this.props.classes.icon}
                     icon={tutorialStatus === "Success" ? faCheck : faTimes}
+                    
                   />
                 </div>
               ) : null}

src/components/Tutorial/TutorialHome.js

@@ -287,6 +287,7 @@ class TutorialHome extends Component {
                             icon={
                               tutorialStatus === "Success" ? faCheck : faTimes
                             }
+                            
                           />
                         ) : (
                           <Typography
@@ -380,7 +381,7 @@ class TutorialHome extends Component {
                                 });
                               }}
                               size="large">
-                              <FontAwesomeIcon icon={faShareAlt} size="xs" />
+                              <FontAwesomeIcon icon={faShareAlt} size="xs"  />
                             </IconButton>
                           </Tooltip>
                           <Tooltip
@@ -391,7 +392,7 @@ class TutorialHome extends Component {
                               className={`publicTutorial ${this.props.classes.button}`}
                               disabled={!tutorial.public}
                               size="large">
-                              <FontAwesomeIcon icon={faEye} size="xs" />
+                              <FontAwesomeIcon icon={faEye} size="xs"  />
                             </IconButton>
                           </Tooltip>
                           {tutorial.review ? (

src/components/User/Account.js

@@ -42,7 +42,7 @@ export class Account extends Component {
             <ListItem>
               <Tooltip title='Nutzername'>
                 <ListItemIcon>
-                  <FontAwesomeIcon icon={faUser} />
+                  <FontAwesomeIcon icon={faUser}  />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary={`Name: ${user.name}`} />
@@ -50,14 +50,14 @@ export class Account extends Component {
             <ListItem>
               <Tooltip title='Email'>
                 <ListItemIcon>
-                  <FontAwesomeIcon icon={faAt} />
+                  <FontAwesomeIcon icon={faAt}  />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary={`Email: ${user.email}`} />
             </ListItem>
             <ListItem>
               <ListItemIcon>
-                <FontAwesomeIcon icon={faUserTag} />
+                <FontAwesomeIcon icon={faUserTag}  />
               </ListItemIcon>
               <ListItemText primary={`Userrolle: ${user.blocklyRole}`} />
             </ListItem>
@@ -98,7 +98,7 @@ export class Account extends Component {
                       <ListItem>
                         <Tooltip title='Modell'>
                           <ListItemIcon>
-                            <FontAwesomeIcon icon={faBox} />
+                            <FontAwesomeIcon icon={faBox}  />
                           </ListItemIcon>
                         </Tooltip>
                         <div>
@@ -109,7 +109,7 @@ export class Account extends Component {
                       <ListItem>
                         <Tooltip title='Standort'>
                           <ListItemIcon>
-                            <FontAwesomeIcon icon={faMapMarkerAlt} />
+                            <FontAwesomeIcon icon={faMapMarkerAlt}  />
                           </ListItemIcon>
                         </Tooltip>
                         <div>
@@ -120,7 +120,7 @@ export class Account extends Component {
                       <ListItem>
                         <Tooltip title='Sensoren'>
                           <ListItemIcon>
-                            <FontAwesomeIcon icon={faCloudSunRain} />
+                            <FontAwesomeIcon icon={faCloudSunRain}  />
                           </ListItemIcon>
                         </Tooltip>
                         <div>

src/components/User/Login.js

@@ -165,6 +165,7 @@ export class Login extends Component {
                       <FontAwesomeIcon
                         size="xs"
                         icon={this.state.showPassword ? faEyeSlash : faEye}
+                        
                       />
                     </IconButton>
                   </InputAdornment>

src/components/Workspace/Compile.js

@@ -189,7 +189,7 @@ class Compile extends Component {
               className={`compileBlocks ${this.props.classes.iconButton}`}
               onClick={() => this.compile()}
               size="large">
-              <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
+              <FontAwesomeIcon icon={faClipboardCheck} size="xs"  />
             </IconButton>
           </Tooltip>
         ) : (
@@ -202,6 +202,7 @@ class Compile extends Component {
             <FontAwesomeIcon
               icon={faClipboardCheck}
               style={{ marginRight: "5px" }}
+              
             />{" "}
             Kompilieren
           </Button>
@@ -302,6 +303,7 @@ class Compile extends Component {
                 <FontAwesomeIcon
                   icon={faClipboardCheck}
                   style={{ marginRight: "5px" }}
+                  
                 />{" "}
                 Starte Übertragung
               </Button>

src/components/Workspace/DeleteProject.js

@@ -62,7 +62,7 @@ class DeleteProject extends Component {
             className={this.props.classes.buttonTrash}
             onClick={() => this.props.deleteProject(this.props.projectType, this.props.project._id)}
             size="large">
-            <FontAwesomeIcon icon={faTrashAlt} size="xs" />
+            <FontAwesomeIcon icon={faTrashAlt} size="xs"  />
           </IconButton>
         </Tooltip>
 

src/components/Workspace/DownloadProject.js

@@ -47,7 +47,7 @@ class DownloadProject extends Component {
             className={`saveBlocks ${this.props.classes.button}`}
             onClick={() => this.downloadXmlFile()}
             size="large">
-            <FontAwesomeIcon icon={faFileDownload} size="xs" />
+            <FontAwesomeIcon icon={faFileDownload} size="xs"  />
           </IconButton>
         </Tooltip>
       </div>

src/components/Workspace/ResetWorkspace.js

@@ -49,11 +49,11 @@ class ResetWorkspace extends Component {
   }
 
   toggleDialog = () => {
-    this.setState({ open: !this.state});
+    this.setState({ open: !this.state });
   }
 
   openDialog = () => {
-    this.setState({open: true});
+    this.setState({ open: true });
   }
 
   resetWorkspace = () => {
@@ -82,7 +82,7 @@ class ResetWorkspace extends Component {
             className={this.props.classes.button}
             onClick={() => this.openDialog()}
             size="large">
-            <FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
+            <FontAwesomeIcon icon={faShare} size="xs" flip='horizontal'  />
           </IconButton>
         </Tooltip>
 
@@ -92,7 +92,7 @@ class ResetWorkspace extends Component {
           type={this.state.type}
           key={this.state.key}
         />
-         <Dialog
+        <Dialog
           open={this.state.open}
           title={Blockly.Msg.resetDialog_headline}
           content={Blockly.Msg.resetDialog_text}
@@ -101,8 +101,8 @@ class ResetWorkspace extends Component {
           button={Blockly.Msg.button_cancel}
         > <div style={{ marginTop: '10px' }}>
 
-        <Button variant='contained' color='primary' onClick={() => { this.resetWorkspace(); this.toggleDialog(); }}>Zurücksetzen</Button>
+            <Button variant='contained' color='primary' onClick={() => { this.resetWorkspace(); this.toggleDialog(); }}>Zurücksetzen</Button>
-      </div></Dialog>
+          </div></Dialog>
       </div>
     );
   };

src/components/Workspace/WorkspaceName.js

@@ -152,6 +152,7 @@ class WorkspaceName extends Component {
             <div style={{ width: "40px", display: "flex" }}>
               <FontAwesomeIcon
                 icon={faPen}
+                
                 style={{ height: "18px", width: "18px", margin: "auto" }}
               />
             </div>