complete MUI migration

2022-12-05 12:01:51 +01:00 · 2022-12-05 12:01:51 +01:00 · ae61d2b11b
commit ae61d2b11b
parent 8716649be7
30 changed files with 59 additions and 54 deletions
--- a/src/App.css
+++ b/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;
 }

--- a/src/App.js
+++ b/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() {
--- a/src/components/Breadcrumbs.js
+++ b/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}>
--- a/src/components/CodeEditor/Compile.js
+++ b/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
--- a/src/components/CodeEditor/SaveIcon.js
+++ b/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"}
      />
--- a/src/components/Home.js
+++ b/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>

--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@ -214,11 +214,11 @@ class Navbar extends Component {
          </div>
          <List>
            {[
-                 {
-                  text: Blockly.Msg.navbar_blockly,
-                  icon: faPuzzlePiece,
-                  link: "/",
-                },
+              {
+                text: Blockly.Msg.navbar_blockly,
+                icon: faPuzzlePiece,
+                link: "/",
+              },
              {
                text: Blockly.Msg.navbar_tutorials,
                icon: faChalkboardTeacher,
@ -329,9 +329,9 @@ class Navbar extends Component {
                      onClick={
                        item.function
                          ? () => {
-                              item.function();
-                              this.toggleDrawer();
-                            }
+                            item.function();
+                            this.toggleDrawer();
+                          }
                          : this.toggleDrawer
                      }
                    >
--- a/src/components/Snackbar.js
+++ b/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}
--- a/src/components/Tutorial/Assessment.js
+++ b/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
--- a/src/components/Tutorial/Builder/BlocklyExample.js
+++ b/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"
              />
            }
          />
--- a/src/components/Tutorial/Builder/Builder.js
+++ b/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"
              />
--- a/src/components/Tutorial/Builder/Media.js
+++ b/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"
              />
--- a/src/components/Tutorial/Builder/Public.js
+++ b/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" }}
              />
--- a/src/components/Tutorial/Builder/Requirements.js
+++ b/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}
--- a/src/components/Tutorial/Builder/Review.js
+++ b/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" }}
              />
--- a/src/components/Tutorial/Builder/Step.js
+++ b/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>
--- a/src/components/Tutorial/Builder/StepType.js
+++ b/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"
        />
--- a/src/components/Tutorial/Hardware.js
+++ b/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>
                  }
                />
--- a/src/components/Tutorial/HintTutorialExists.js
+++ b/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}
--- a/src/components/Tutorial/Requirement.js
+++ b/src/components/Tutorial/Requirement.js
@ -166,6 +166,7 @@ class Requirement extends Component {
                            icon={
                              tutorialStatus === "Success" ? faCheck : faTimes
                            }
+                            
                          />
                        ) : (
                          <Typography
--- a/src/components/Tutorial/SolutionCheck.js
+++ b/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>

--- a/src/components/Tutorial/StepperHorizontal.js
+++ b/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}
--- a/src/components/Tutorial/TutorialHome.js
+++ b/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 ? (
--- a/src/components/User/Account.js
+++ b/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>
--- a/src/components/User/Login.js
+++ b/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>
--- a/src/components/Workspace/Compile.js
+++ b/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>
--- a/src/components/Workspace/DeleteProject.js
+++ b/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>

--- a/src/components/Workspace/DownloadProject.js
+++ b/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>
--- a/src/components/Workspace/ResetWorkspace.js
+++ b/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}
@ -100,9 +100,9 @@ class ResetWorkspace extends Component {
          onClick={() => { this.toggleDialog(); }}
          button={Blockly.Msg.button_cancel}
        > <div style={{ marginTop: '10px' }}>
-       
-        <Button variant='contained' color='primary' onClick={() => { this.resetWorkspace(); this.toggleDialog(); }}>Zurücksetzen</Button>
-      </div></Dialog>
+
+            <Button variant='contained' color='primary' onClick={() => { this.resetWorkspace(); this.toggleDialog(); }}>Zurücksetzen</Button>
+          </div></Dialog>
      </div>
    );
  };
--- a/src/components/Workspace/WorkspaceName.js
+++ b/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>