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/CodeEditor/Compile.js

@@ -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/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/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/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/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/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

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

@@ -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/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 = () => {

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>