open device selection only once

package.json

@@ -10,15 +10,11 @@
     "@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",
     "@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",
@@ -39,13 +35,12 @@
     "react-rating-stars-component": "^2.2.0",
     "react-redux": "^7.2.9",
     "react-router-dom": "^5.3.3",
-    "react-scripts": "^5.0.1",
+    "react-scripts": "^5.0.0",
     "react-share": "^4.4.0",
     "react-spinners": "^0.13.3",
     "reactour": "^1.18.7",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
-    "rehype-raw": "^6.1.1",
     "remark-gemoji": "^7.0.1",
     "remark-gfm": "^3.0.1",
     "styled-components": "^4.4.1",

src/App.css

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

src/App.js

@@ -9,7 +9,7 @@ import { loadUser } from "./actions/authActions";
 
 import "./App.css";
 
-import { ThemeProvider, StyledEngineProvider, createTheme } from "@mui/material/styles";
+import { ThemeProvider, createTheme } from "@material-ui/core/styles";
 
 import Content from "./components/Content";
 
@@ -36,15 +36,13 @@ class App extends Component {
   render() {
     const customHistory = createBrowserHistory();
     return (
-      <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
-        <ThemeProvider theme={theme}>
+        <Provider store={store}>
-          <Provider store={store}>
+          <Router history={customHistory}>
-            <Router history={customHistory}>
+            <Content />
-              <Content />
+          </Router>
-            </Router>
+        </Provider>
-          </Provider>
+      </ThemeProvider>
-        </ThemeProvider>
-      </StyledEngineProvider>
     );
   }
 }

src/actions/arduinoActions.js

@@ -1,150 +0,0 @@
-import { GET_ARDUINO_EXAMPLES } from './types';
-
-import axios from 'axios';
-import { returnErrors, returnSuccess } from './messageActions';
-
-
-export const getArduinoExamples = () => (dispatch) => {
-  const config = {
-    success: res => {
-      var examples = res.data.arduinoExamples;
-      console.log(examples);
-      dispatch({
-        type: GET_ARDUINO_EXAMPLES,
-        payload: examples
-      });
-      dispatch(returnSuccess(res.data.message, res.status));
-    },
-    error: err => {
-      if (err.response) {
-        dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_PROJECTS_FAIL'));
-      }
-    }
-  };
-  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/arduino`, config)
-    .then(res => {
-      res.config.success(res);
-    })
-    .catch(err => {
-      err.config.error(err);
-    });
-};
-
-// export const updateProject = (type, id) => (dispatch, getState) => {
-//   var workspace = getState().workspace;
-//   var body = {
-//     xml: workspace.code.xml,
-//     title: workspace.name,
-//     board: getState().board.board,
-//   };
-//   var project = getState().project;
-//   if (type === 'gallery') {
-//     body.description = project.description;
-//   }
-//   const config = {
-//     success: res => {
-//       var project = res.data[type];
-//       var projects = getState().project.projects;
-//       var index = projects.findIndex(res => res._id === project._id);
-//       projects[index] = project;
-//       dispatch({
-//         type: GET_PROJECTS,
-//         payload: projects
-//       });
-//       if (type === 'project') {
-//         dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_UPDATE_SUCCESS'));
-//       } else {
-//         dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_UPDATE_SUCCESS'));
-//       }
-//     },
-//     error: err => {
-//       if (err.response) {
-//         if (type === 'project') {
-//           dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_UPDATE_FAIL'));
-//         } else {
-//           dispatch(returnErrors(err.response.data.message, err.response.status, 'GALLERY_UPDATE_FAIL'));
-//         }
-//       }
-//     }
-//   };
-//   axios.put(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, body, config)
-//     .then(res => {
-//       res.config.success(res);
-//     })
-//     .catch(err => {
-//       err.config.error(err);
-//     });
-// };
-
-// export const deleteProject = (type, id) => (dispatch, getState) => {
-//   const config = {
-//     success: res => {
-//       var projects = getState().project.projects;
-//       var index = projects.findIndex(res => res._id === id);
-//       projects.splice(index, 1)
-//       dispatch({
-//         type: GET_PROJECTS,
-//         payload: projects
-//       });
-//       if (type === 'project') {
-//         dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_DELETE_SUCCESS'));
-//       } else {
-//         dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_DELETE_SUCCESS'));
-//       }
-//     },
-//     error: err => {
-//       dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_DELETE_FAIL'));
-//     }
-//   };
-//   axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, config)
-//     .then(res => {
-//       res.config.success(res);
-//     })
-//     .catch(err => {
-//       if (err.response && err.response.status !== 401) {
-//         err.config.error(err);
-//       }
-//     });
-// };
-
-
-// export const shareProject = (title, type, id) => (dispatch, getState) => {
-//   var body = {
-//     title: title,
-//     board: getState().board.board
-//   };
-//   if (type === 'project') {
-//     body.projectId = id;
-//   } else {
-//     body.xml = getState().workspace.code.xml;
-//   }
-//   axios.post(`${process.env.REACT_APP_BLOCKLY_API}/share`, body)
-//     .then(res => {
-//       var shareContent = res.data.content;
-//       if (body.projectId) {
-//         var projects = getState().project.projects;
-//         var index = projects.findIndex(res => res._id === id);
-//         projects[index].shared = shareContent.expiresAt;
-//         dispatch({
-//           type: GET_PROJECTS,
-//           payload: projects
-//         });
-//       }
-//       dispatch(returnSuccess(res.data.message, shareContent._id, 'SHARE_SUCCESS'));
-//     })
-//     .catch(err => {
-//       if (err.response) {
-//         dispatch(returnErrors(err.response.data.message, err.response.status, 'SHARE_FAIL'));
-//       }
-//     });
-// };
-
-
-// export const resetProject = () => (dispatch) => {
-//   dispatch({
-//     type: GET_PROJECTS,
-//     payload: []
-//   });
-//   dispatch(setType(''));
-//   dispatch(setDescription(''));
-// };

src/actions/boardAction.js

@@ -0,0 +1,10 @@
+import {
+    BOARD,
+  } from "./types";
+
+export const setBoard = (board) => (dispatch) => {
+    dispatch({
+      type: BOARD,
+      payload: board,
+    });
+  };

src/actions/boardActions.js

@@ -1,15 +0,0 @@
-import {
-  BOARD,
-} from "./types";
-import mini_opacity from "../data/mini_opacity.png"
-import mcu_opacity from "../data/mcu_opacity.png"
-
-export const setBoard = (board) => (dispatch) => {
-  window.sessionStorage.setItem("board", board);
-  const root = document.querySelector(':root');
-  root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
-  dispatch({
-    type: BOARD,
-    payload: board,
-  });
-};

src/actions/projectActions.js

@@ -90,8 +90,7 @@ export const updateProject = (type, id) => (dispatch, getState) => {
   var workspace = getState().workspace;
   var body = {
     xml: workspace.code.xml,
-    title: workspace.name,
+    title: workspace.name
-    board: getState().board.board,
   };
   var project = getState().project;
   if (type === 'gallery') {
@@ -166,8 +165,7 @@ export const deleteProject = (type, id) => (dispatch, getState) => {
 
 export const shareProject = (title, type, id) => (dispatch, getState) => {
   var body = {
-    title: title,
+    title: title
-    board: getState().board.board
   };
   if (type === 'project') {
     body.projectId = id;

src/actions/sensorwikiActions.js

@@ -1,18 +0,0 @@
-import axios from 'axios'
-
-const fetchSensorWikiSuccess = sensors => ({
-    type: 'FETCH_SENSORWIKI_SUCCESS',
-    payload: { sensors }
-})
-
-export const fetchSensors =  () => {
-    return async dispatch => {
-        try {
-            let sensors = await axios.get('https://api.sensors.wiki/sensors/all')
-            dispatch(fetchSensorWikiSuccess(sensors.data))
-        }
-        catch(e){
-            console.log(e)
-        }
-    }
-}

src/actions/types.js

@@ -64,7 +64,5 @@ export const GET_PROJECTS = "GET_PROJECTS";
 export const PROJECT_TYPE = "PROJECT_TYPE";
 export const PROJECT_DESCRIPTION = "PROJECT_DESCRIPTION";
 
-export const GET_ARDUINO_EXAMPLES = "GET_ARDUINO_EXAMPLES";
-
 //board
 export const BOARD = "BOARD";

src/actions/workspaceActions.js

@@ -20,15 +20,9 @@ export const onChangeCode = () => (dispatch, getState) => {
   if (selectedBlock !== null) {
     code.helpurl = selectedBlock.helpUrl
     code.tooltip = selectedBlock.tooltip
-    if (selectedBlock.data) {
-      code.data = selectedBlock.data
-    } else {
-      code.data = null
-    }
   } else if (selectedBlock === null) {
     code.tooltip = Blockly.Msg.tooltip_hint
     code.helpurl = ''
-    code.data = null
   }
 
 

src/components/Alert.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import { alpha } from "@mui/material/styles";
+import { alpha } from "@material-ui/core/styles";
 
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/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 "@mui/material";
+import { Card } from "@material-ui/core";
 import {
   ScrollOptions,
   ScrollBlockDragger,

src/components/Blockly/blocks/sensebox-sensors.js

@@ -26,7 +26,6 @@ Blockly.Blocks["sensebox_sensor_temp_hum"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_temp_hum_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_temp_hum_helpurl);
-    this.data = {name: "hdc1080", connection: "I2C"};
   },
 };
 
@@ -52,7 +51,6 @@ Blockly.Blocks["sensebox_sensor_uv_light"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_uv_light_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_uv_light_helpurl);
-    this.data = {name: "veml6070"};
   },
 };
 
@@ -93,7 +91,6 @@ Blockly.Blocks["sensebox_sensor_bmx055_accelerometer"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_bmx055_accelerometer_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_bmx055_helpurl);
-    this.data = {name: "bmx055"};
   },
 };
 
@@ -125,7 +122,6 @@ Blockly.Blocks["sensebox_sensor_sds011"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_sds011_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_sds011_helpurl);
-    this.data = {name: "sds011"};
   },
 };
 
@@ -159,7 +155,6 @@ Blockly.Blocks["sensebox_sensor_pressure"] = {
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setTooltip(Blockly.Msg.senseBox_pressure_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_pressure_helpurl);
-    this.data = {name: "bmp280"};
     this.getField("NAME").setValidator(
       function (val) {
         this.updateShape_(val === "Altitude");
@@ -206,7 +201,6 @@ Blockly.Blocks["sensebox_sensor_bme680_bsec"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_bme_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_bme680_helpurl);
-    this.data = {name: "bme680"};
   },
 };
 
@@ -251,7 +245,6 @@ Blockly.Blocks["sensebox_sensor_ultrasonic_ranger"] = {
     this.setOutput(true, Types.NUMBER.typeName);
     this.setTooltip(Blockly.Msg.senseBox_ultrasonic_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_ultrasonic_helpurl);
-    this.data = {name: "hc-sr04"};
   },
   /**
    * Parse XML to restore the number of pins available.
@@ -389,7 +382,6 @@ Blockly.Blocks["sensebox_scd30"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_scd_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_scd_helpurl);
-    this.data = {name: "scd30"};
   },
   onchange: function (e) {
     var dropdown = this.getFieldValue("dropdown");
@@ -456,7 +448,6 @@ Blockly.Blocks["sensebox_sensor_truebner_smt50"] = {
     this.setOutput(true, Types.NUMBER.typeName);
     this.setTooltip(Blockly.Msg.senseBox_smt50_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_smt50_helpurl);
-    this.data = {name: "smt50"};
   },
 };
 
@@ -479,7 +470,6 @@ Blockly.Blocks["sensebox_sensor_watertemperature"] = {
       .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port");
     this.setOutput(true, Types.NUMBER.typeName);
     this.setTooltip(Blockly.Msg.senseBox_watertemperature_tip);
-    this.data = {name: "ds18b20"};
   },
 };
 
@@ -552,7 +542,6 @@ Blockly.Blocks["sensebox_sensor_dps310"] = {
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setTooltip(Blockly.Msg.senseBox_sensor_dps310_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_sensor_dps310_helpurl);
-    this.data = {name: "dps310"};
     this.getField("NAME").setValidator(
       function (val) {
         this.updateShape_(val === "Altitude");

src/components/Blockly/blocks/variables.js

@@ -9,10 +9,10 @@ Blockly.Blocks["variables_set_dynamic"] = {
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
     this.appendValueInput("VALUE")
-      .appendField(Blockly.Msg.variables_set, Blockly.Msg.variables_set)
+      .appendField("set", "set")
-      // .appendField("", "type")
+      .appendField("", "type")
       .appendField(new Blockly.FieldVariable("VAR"), "VAR")
-      .appendField(Blockly.Msg.variables_to);
+      .appendField("to");
   },
   onchange: function (e) {
     let variableID = this.getFieldValue("VAR");

src/components/Blockly/msg/de/ui.js

@@ -19,12 +19,10 @@ export const UI = {
   variable_DECIMAL: "Kommazahl (float)",
   variables_TEXT: "Text (string)",
   variables_ARRAY: "Array (array)",
-  variables_CHARACTER: "Buchstabe (char)",
+  variables_CHARACTER: "char (char)",
   variables_BOOLEAN: "Boolean (boolean)",
   variables_NULL: "void (void)",
   variables_UNDEF: "undefined",
-  variables_set: "Schreibe",
-  variables_to: "",
 
   /**
    * Tooltips
@@ -152,7 +150,6 @@ export const UI = {
   button_next: "nächster Schritt",
   button_tutorial_overview: "Tutorial Übersicht",
   button_login: "Anmelden",
-  button_createVariable: "Typisierte Variable erstellen",
 
   /**
    *
@@ -314,15 +311,5 @@ export const UI = {
   deviceselection_head: "Welches Board benutzt du?",
   deviceselection_keep_selection: "Speichere meine Auswahl fürs nächste Mal (Du kannst das Board später in den Einstellungen wechseln)",
   deviceselection_footnote: "Hier kommst du zur alten Blockly Version für den ",
-  deviceselection_footnote_02: "oder die",
+  deviceselection_footnote_02: "oder die"
-
-  /**
-   * Sensor Markdown Information
-   */
-  sensorinfo_info: "Informationen zum Sensor",
-  sensorinfo_description: "Beschreibung",
-  sensorinfo_measurable_phenos: "Messbare Phänomene",
-  sensorinfo_manufacturer: "Hersteller",
-  sensorinfo_lifetime: "Lebensdauer",
-  sensorinfo_explanation: "Diese Informationen wurden aus [sensors.wiki](https://sensors.wiki) entnommen. Für weitere Informationen besuchen Sie den Abschnitt über diesen Sensor "
 };

src/components/Blockly/msg/en/ui.js

@@ -15,16 +15,14 @@ export const UI = {
   toolbox_motors: "Motors",
   variable_NUMBER: "Number (int)",
   variable_SHORT_NUMBER: "char",
-  variable_LONG: "Big number (long)",
+  variable_LONG: " Zahl (long)",
   variable_DECIMAL: "Decimal (float)",
   variables_TEXT: "Text (string)",
   variables_ARRAY: "Array (array)",
-  variables_CHARACTER: "Character (char)",
+  variables_CHARACTER: "char (char)",
   variables_BOOLEAN: "Boolean (boolean)",
   variables_NULL: "void (void)",
   variables_UNDEF: "undefined",
-  variables_set: "set",
-  variables_to: "to",
 
   /**
    * Tooltips
@@ -147,7 +145,6 @@ export const UI = {
   button_next: "Next step",
   button_tutorial_overview: "Tutorial overview",
   button_login: "Login",
-  button_createVariable: "Create Typed Variable",
 
   /**
    *
@@ -303,21 +300,13 @@ export const UI = {
   codeeditor_compile_progress:
     "Your code will now be compiled and then downloaded to your computer",
 
-  /**
+      /**
-  * Device Selction
+   * Device Selction
-  * */ 
+   *  */
   deviceselection_head: "Which board are you using?",
   deviceselection_keep_selection: "Save my choice (You can change the board later in the settings)",
   deviceselection_footnote: "Here you can access the old blockly Version for the",
   deviceselection_footnote_02: "or the",
 
-  /**
+
-   * Sensor Markdown Information
-   * */
-  sensorinfo_info: "Informationen regarding the Sensor",
-  sensorinfo_description: "Description",
-  sensorinfo_measurable_phenos: "Measurable Phenomena",
-  sensorinfo_manufacturer: "Manufacturer",
-  sensorinfo_lifetime: "Lifetime",
-  sensorinfo_explanation: "This information was fetched from [sensors.wiki](https://sensors.wiki). For more information visit the section on this sensor ",
 };

src/components/Blockly/toolbox/Toolbox.js

@@ -16,6 +16,7 @@ class Toolbox extends React.Component {
       this.props.workspace,
       "callbackName",
       [
+        [`${Blockly.Msg.variable_SHORT_NUMBER}`, "char"],
         [`${Blockly.Msg.variable_NUMBER}`, "int"],
         [`${Blockly.Msg.variable_LONG}`, "long"],
         [`${Blockly.Msg.variable_DECIMAL}`, "float"],
@@ -32,7 +33,7 @@ class Toolbox extends React.Component {
 
     // Add your button and give it a callback name.
     const button = document.createElement("button");
-    button.setAttribute("text", Blockly.Msg.button_createVariable);
+    button.setAttribute("text", "Create Typed Variable");
     button.setAttribute("callbackKey", "callbackName");
 
     xmlList.push(button);
@@ -40,7 +41,6 @@ class Toolbox extends React.Component {
     // This gets all the variables that the user creates and adds them to the
     // flyout.
     const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
-    console.log(blockList);
     xmlList = xmlList.concat(blockList);
     return xmlList;
   }
@@ -611,6 +611,7 @@ class Toolbox extends React.Component {
           colour={getColour().procedures}
           custom="PROCEDURE"
         ></Category>
+        <sep></sep>
         <Category name={Blockly.Msg.toolbox_advanced} colour={getColour().io}>
           <Category
             name={Blockly.Msg.toolbox_serial}

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 '@mui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
-import MaterialUIBreadcrumbs from '@mui/material/Breadcrumbs';
+import MaterialUIBreadcrumbs from '@material-ui/core/Breadcrumbs';
-import Typography from '@mui/material/Typography';
+import Typography from '@material-ui/core/Typography';
 
 import { faHome } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -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/CodeEditor.js

@@ -2,16 +2,15 @@ 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 "@mui/material";
+import { Button, Grid } from "@material-ui/core";
 import Blockly from "blockly/core";
-import Divider from "@mui/material/Divider";
+import Divider from "@material-ui/core/Divider";
 import { saveAs } from "file-saver";
-import Drawer from "@mui/material/Drawer";
+import Drawer from "@material-ui/core/Drawer";
 import Sidebar from "./Sidebar";
 import Dialog from "../Dialog";
 import SaveIcon from "./SaveIcon";
 import store from "../../store";
-import DeviceSelection from "../DeviceSelection";
 
 const CodeEditor = (props) => {
   //const [filehandle, setFileHandle] = useState();
@@ -193,7 +192,6 @@ void loop() {
             }}
           />
         </Grid>
-        <DeviceSelection />
         <Grid item lg={4} md={4}>
           <Button
             style={{ padding: "1rem", margin: "1rem" }}

src/components/CodeEditor/Compile.js

@@ -5,19 +5,19 @@ import { workspaceName } from "../../actions/workspaceActions";
 
 import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
 
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Button from "@mui/material/Button";
+import Button from "@material-ui/core/Button";
-import Backdrop from "@mui/material/Backdrop";
+import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@mui/material/CircularProgress";
+import CircularProgress from "@material-ui/core/CircularProgress";
-import IconButton from "@mui/material/IconButton";
+import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
-import Divider from "@mui/material/Divider";
+import Divider from "@material-ui/core/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 "@mui/material/Drawer";
+import MuiDrawer from "@material-ui/core/Drawer";
 import Dialog from "../Dialog";
 
 const styles = (theme) => ({
@@ -188,8 +188,8 @@ class Compile extends Component {
             <IconButton
               className={`compileBlocks ${this.props.classes.iconButton}`}
               onClick={() => this.compile()}
-              size="large">
+            >
-              <FontAwesomeIcon icon={faClipboardCheck} size="xs"  />
+              <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
             </IconButton>
           </Tooltip>
         ) : (
@@ -201,7 +201,6 @@ class Compile extends Component {
           >
             <FontAwesomeIcon
               icon={faClipboardCheck}
-              
               style={{ marginRight: "5px" }}
             />{" "}
             Kompilieren
@@ -302,7 +301,6 @@ class Compile extends Component {
               >
                 <FontAwesomeIcon
                   icon={faClipboardCheck}
-                  
                   style={{ marginRight: "5px" }}
                 />{" "}
                 Starte Übertragung

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 "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
 import React from "react";
 
 const SaveIcon = ({ loading }) => (
@@ -17,7 +17,6 @@ const SaveIcon = ({ loading }) => (
         <FontAwesomeIcon
           style={{ position: "absolute" }}
           icon={faCircleNotch}
-          
           spin={true}
           size="2x"
           color="grey"
@@ -31,7 +30,6 @@ const SaveIcon = ({ loading }) => (
           transform: "translate(-50%,-50%)",
         }}
         icon={faSave}
-        
         color={loading ? "grey" : "green"}
         size={loading ? "1x" : "lg"}
       />

src/components/CodeEditor/SerialMonitor.js

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

src/components/CodeEditor/Sidebar.js

@@ -1,29 +1,26 @@
-import React, { useEffect } from "react";
+import React from "react";
 import Blockly from "blockly";
 import { useSelector } from "react-redux";
-import Accordion from "@mui/material/Accordion";
+import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/Typography";
 import { LibraryVersions } from "../../data/versions.js";
 import { useMonaco } from "@monaco-editor/react";
-import { Button } from "@mui/material";
+import { Button } from "@material-ui/core";
 import SerialMonitor from "./SerialMonitor.js";
 import axios from "axios";
-import { useDispatch } from "react-redux";
-import { getArduinoExamples } from "../../actions/arduinoActions";
-//import getArduinoExamples from "../../reducers/arduinoReducer"
 
 const Sidebar = () => {
-
+  //const [examples, setExamples] = React.useState([]);
-
-  const examples = useSelector((state) => state.arduino.examples);
   const user = useSelector((state) => state.auth.user);
-  const dispatch = useDispatch()
+  // useEffect(() => {
-
+  //   axios
-    useEffect(() => {
+  //     .get("https://coelho.opensensemap.org/items/blocklysamples")
-      dispatch(getArduinoExamples());
+  //     .then((res) => {
-    }, [dispatch]);
+  //       setExamples(res.data.data);
+  //     });
+  // }, []);
   const monaco = useMonaco();
   const loadCode = (code) => {
     monaco.editor.getModels()[0].setValue(code);
@@ -55,7 +52,7 @@ const Sidebar = () => {
           </AccordionDetails>
         </Accordion>
       ) : null}
-     <Accordion>
+      {/* <Accordion>
         <AccordionSummary
           expandIcon={""}
           aria-controls="panel1a-content"
@@ -74,13 +71,13 @@ const Sidebar = () => {
                   key={i}
                   onClick={() => loadCode(object.code)}
                 >
-                  {object.title}
+                  {object.name}
                 </Button>
               );
             })}
           </Typography>
         </AccordionDetails>
-      </Accordion> 
+      </Accordion> */}
       {user ? (
         <Accordion>
           <AccordionSummary

src/components/CodeViewer.js

@@ -2,17 +2,15 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
-import withStyles from '@mui/styles/withStyles';
+import withWidth from "@material-ui/core/withWidth";
-import MuiAccordion from "@mui/material/Accordion";
+import { withStyles } from "@material-ui/core/styles";
-import MuiAccordionSummary from "@mui/material/AccordionSummary";
+import MuiAccordion from "@material-ui/core/Accordion";
-import MuiAccordionDetails from "@mui/material/AccordionDetails";
+import MuiAccordionSummary from "@material-ui/core/AccordionSummary";
-import { Card } from "@mui/material";
+import MuiAccordionDetails from "@material-ui/core/AccordionDetails";
+import { Card } from "@material-ui/core";
 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/Content.js

@@ -15,22 +15,15 @@ import { setBoard } from './Blockly/helpers/board';
 class Content extends Component {
 
   componentDidMount() {
-    console.log(this.props.board);
-    setBoard(this.props.board)
     if (this.props.language === 'de_DE') {
       Blockly.setLocale(De);
     } else if (this.props.language === 'en_US') {
       Blockly.setLocale(En);
     }
-    
+    setBoard(this.props.board)
   }
 
   componentDidUpdate(props) {
-    console.log(props.board);
-    console.log(this.props.board);
-   // if (props.board !== this.props.board) {
-      setBoard(this.props.board);
-      
     if (props.language !== this.props.language) {
       if (this.props.language === 'de_DE') {
         Blockly.setLocale(De);
@@ -38,7 +31,7 @@ class Content extends Component {
         Blockly.setLocale(En);
       }
     }
-   
+    setBoard(this.props.board)
   }
 
   render() {

src/components/DeviceSelection.js

@@ -3,10 +3,12 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import Dialog from "./Dialog";
 
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
 import * as Blockly from "blockly";
-import { setBoard } from "../actions/boardActions";
+import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
-import { IconButton, Grid, Avatar, Typography } from "@mui/material";
+import { setBoard } from "../actions/boardAction";
+import mini_opacity from "../data/mini_opacity.png"
+import mcu_opacity from "../data/mcu_opacity.png"
 
 const styles = (theme) => ({
   link: {
@@ -27,29 +29,30 @@ class DeviceSeclection extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      open: props.selectedBoard ? false : true,
+      open: this.props.selectedBoard !== "" ? false : true,
-      selectedBoard: "",
+      selectedBoard : this.props.selectedBoard,
       saveSettings: false,
 
     };
   }
 
   toggleDialog = () => {
+    
     this.props.setBoard(this.state.selectedBoard)
+
   };
 
-  onChange = (e) => {
-    if (e.target.checked) {
-      this.setState({ saveSettings: true });
-    } else {
-      this.setState({ saveSettings: false });
-    }
-  };
 
   onclick = (e, value) => {
-    this.setState({ selectedBoard: value })
+    console.log(e, value)
+    const root = document.querySelector(':root');
+    root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity })`);
+    this.setState({selectedBoard: value})
     this.props.setBoard(value)
     this.setState({ open: !this.state });
+   
+
+   
   };
 
   render() {
@@ -62,24 +65,25 @@ class DeviceSeclection extends Component {
         title={Blockly.Msg.deviceselection_head}
         content={""}
         onClick={this.toggleDialog}
-        disabled={this.state.selectedBoard === ""}
+        disabled={this.state.selectedBoard===""}
       >
         <div>
-          <Grid container spacing={2} style={{ textAlign: "center" }}>
+          <Grid container spacing={2} style={{  textAlign : "center" }}>
             <Grid item xs={6}>
-              <IconButton onClick={(e) => this.onclick(e, "mcu")} size="large">
+            <IconButton onClick={(e) => this.onclick(e, "mcu")}>
-                <Avatar
+              <Avatar
-                  alt="Sensebox MCU"
+                alt="Sensebox MCU"
-                  src="/media/hardware/senseboxmcu.png"
+                src="/media/hardware/senseboxmcu.png"
-                  style={{
+                style={{
-                    border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
+                  border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
-                    width: "20vw",
+                  width:"20vw",
-                    height: "20vw"
+                  height: "20vw"
-                  }}
+               }}
-                />
+              />
               </IconButton>
               <p>senseBox MCU</p>
             </Grid>
+
             {/* <Grid item xs={4}>
             <IconButton onClick={(e) => this.onclick(e, "esp")}>
               <Avatar
@@ -89,22 +93,22 @@ class DeviceSeclection extends Component {
                   border: this.state.selectedBoard == "esp" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
                   width:"20vw",
                   height: "20vw"
-              }}
+               }}
               />
               </IconButton>
               <p>Sensebox ESP</p>
             </Grid> */}
             <Grid item xs={6}>
-              <IconButton onClick={(e) => this.onclick(e, "mini")} size="large">
+              <IconButton onClick={(e) => this.onclick(e, "mini")}>
-                <Avatar
+              <Avatar
-                  alt="Sensebox Mini"
+                alt="Sensebox Mini"
-                  src="/media/hardware/senseboxmcumini.png"
+                src="/media/hardware/senseboxmcumini.png"
-                  style={{
+                 style={{
-                    border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
+                  border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
-                    width: "20vw",
+                  width:"20vw",
-                    height: "20vw"
+                  height: "20vw"
-                  }}
+               }}
-                />
+              />
               </IconButton>
               <p>senseBox MCU:mini</p>
             </Grid>
@@ -129,5 +133,5 @@ const mapStateToProps = (state) => ({
 
 export default connect(
   mapStateToProps,
-  { setBoard }
+  {setBoard}
 )(withStyles(styles, { withTheme: true })(DeviceSeclection));

src/components/Dialog.js

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

src/components/Faq.js

@@ -4,15 +4,14 @@ import Breadcrumbs from "./Breadcrumbs";
 
 import { withRouter } from "react-router-dom";
 
-import Button from "@mui/material/Button";
+import Button from "@material-ui/core/Button";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/Typography";
 import * as Blockly from "blockly";
 import ReactMarkdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
+import Container from "@material-ui/core/Container";
-import Container from "@mui/material/Container";
+import ExpansionPanel from "@material-ui/core/ExpansionPanel";
-import Accordion from "@mui/material/Accordion";
+import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
-import AccordionSummary from "@mui/material/AccordionSummary";
+import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
-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,26 +46,25 @@ class Faq extends Component {
             <h1>FAQ</h1>
             {FaqQuestions().map((object, i) => {
               return (
-                <Accordion
+                <ExpansionPanel
                   expanded={panel === `panel${i}`}
                   onChange={() => this.handleChange(`panel${i}`)}
                 >
-                  <AccordionSummary
+                  <ExpansionPanelSummary
                     expandIcon={<FontAwesomeIcon icon={faChevronDown} />}
                   >
                     <Typography variant="h6">{object.question}</Typography>
-                  </AccordionSummary>
+                  </ExpansionPanelSummary>
-                  <AccordionDetails>
+                  <ExpansionPanelDetails>
                     <Typography>
                       <ReactMarkdown
                         className="news"
                         allowDangerousHtml="true"
                         children={object.answer}
-                        rehypePlugins={[rehypeRaw]}
                       ></ReactMarkdown>
                     </Typography>
-                  </AccordionDetails>
+                  </ExpansionPanelDetails>
-                </Accordion>
+                </ExpansionPanel>
               );
             })}
             {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 '@mui/material/Typography';
+import Typography from '@material-ui/core/Typography';
 
 class Footer extends Component {
   render() {

src/components/Home.js

@@ -2,10 +2,10 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { clearStats, workspaceName } from "../actions/workspaceActions";
-import { setBoard } from "../actions/boardActions";
+
 import * as Blockly from "blockly/core";
 import { createNameId } from "mnemonic-id";
-import * as BoardHelper from "./Blockly/helpers/board";
+
 import WorkspaceStats from "./Workspace/WorkspaceStats";
 import WorkspaceFunc from "./Workspace/WorkspaceFunc";
 import BlocklyWindow from "./Blockly/BlocklyWindow";
@@ -14,10 +14,10 @@ import TrashcanButtons from "./Workspace/TrashcanButtons";
 // import HintTutorialExists from "./Tutorial/HintTutorialExists";
 import DeviceSelection from "./DeviceSelection";
 
-import Grid from "@mui/material/Grid";
+import Grid from "@material-ui/core/Grid";
-import IconButton from "@mui/material/IconButton";
+import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
 
 import { faCode } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -66,10 +66,6 @@ class Home extends Component {
     this.setState({ stats: window.localStorage.getItem("stats") });
     if (!this.props.project) {
       this.props.workspaceName(createNameId());
-    } else {
-      console.log(this.props.project);
-      this.props.setBoard(this.props.project.board);
-      BoardHelper.setBoard(this.props.project.board);
     }
     if (this.props.message && this.props.message.id === "GET_SHARE_FAIL") {
       this.setState({
@@ -164,8 +160,8 @@ class Home extends Component {
                   zIndex: 21,
                 }}
                 onClick={() => this.onChange()}
-                size="large">
+              >
-                <FontAwesomeIcon icon={faCode}  size="xs" />
+                <FontAwesomeIcon icon={faCode} size="xs" />
               </IconButton>
             </Tooltip>
 
@@ -191,8 +187,8 @@ class Home extends Component {
             </Grid>
           ) : null}
         </Grid>
-        {!this.props.board ? <DeviceSelection /> : null}
+        
-        {/* <DeviceSelection /> */}
+        <DeviceSelection />
         {/* <HintTutorialExists /> */}
         {this.props.platform ? (
           <Dialog
@@ -225,7 +221,6 @@ class Home extends Component {
 }
 
 Home.propTypes = {
-  setBoard: PropTypes.func.isRequired,
   clearStats: PropTypes.func.isRequired,
   workspaceName: PropTypes.func.isRequired,
   message: PropTypes.object.isRequired,
@@ -237,9 +232,8 @@ const mapStateToProps = (state) => ({
   message: state.message,
   statistics: state.general.statistics,
   platform: state.general.platform,
-  board: state.board.board
 });
 
-export default connect(mapStateToProps, { clearStats, workspaceName, setBoard })(
+export default connect(mapStateToProps, { clearStats, workspaceName })(
   withStyles(styles, { withTheme: true })(Home)
 );

src/components/Impressum.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { withRouter } from "react-router-dom";
-import Container from "@mui/material/Container";
+import Container from "@material-ui/core/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 '@mui/material/TextField';
+import TextField from '@material-ui/core/TextField';
-import Button from '@mui/material/Button';
+import Button from '@material-ui/core/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 '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Drawer from "@mui/material/Drawer";
+import Drawer from "@material-ui/core/Drawer";
-import AppBar from "@mui/material/AppBar";
+import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@mui/material/Toolbar";
+import Toolbar from "@material-ui/core/Toolbar";
-import List from "@mui/material/List";
+import List from "@material-ui/core/List";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/Typography";
-import Divider from "@mui/material/Divider";
+import Divider from "@material-ui/core/Divider";
-import IconButton from "@mui/material/IconButton";
+import IconButton from "@material-ui/core/IconButton";
-import ListItem from "@mui/material/ListItem";
+import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
+import ListItemText from "@material-ui/core/ListItemText";
-import LinearProgress from "@mui/material/LinearProgress";
+import LinearProgress from "@material-ui/core/LinearProgress";
 import Tour from "reactour";
-import { Badge } from "@mui/material";
+import { Badge } from "@material-ui/core";
 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 "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/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" }}>
@@ -142,7 +142,7 @@ class Navbar extends Component {
               </Link>
             ) : null}
             {isHome ? (
-              <Tooltip title={'Start Tour'} arrow>
+              <Tooltip title={Blockly.Msg.tooltip_start_tour} arrow>
                 <IconButton
                   color="inherit"
                   className={`openTour ${this.props.classes.button}`}
@@ -150,13 +150,13 @@ class Navbar extends Component {
                     this.openTour();
                   }}
                   style={{ margin: "0 30px 0 auto" }}
-                  size="large">
+                >
                   <FontAwesomeIcon icon={faQuestionCircle} />
                 </IconButton>
               </Tooltip>
             ) : null}
             {isAssessment ? (
-              <Tooltip title={'Start tour'} arrow>
+              <Tooltip title={Blockly.Msg.tooltip_start_tour} arrow>
                 <IconButton
                   color="inherit"
                   className={`openTour ${this.props.classes.button}`}
@@ -164,7 +164,7 @@ class Navbar extends Component {
                     this.openTour();
                   }}
                   style={{ margin: "0 30px 0 auto" }}
-                  size="large">
+                >
                   <FontAwesomeIcon icon={faQuestionCircle} />
                 </IconButton>
               </Tooltip>
@@ -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,
@@ -267,7 +267,7 @@ class Navbar extends Component {
                         <FontAwesomeIcon icon={item.icon} />
                       </ListItemIcon>
                       {item.text === "Code Editor" ? (
-                        <Badge badgeContent={"Experimental"} color="primary" overlap="rectangular">
+                        <Badge badgeContent={"Experimental"} color="primary">
                           <ListItemText primary={item.text} />
                         </Badge>
                       ) : (
@@ -329,9 +329,9 @@ class Navbar extends Component {
                       onClick={
                         item.function
                           ? () => {
-                            item.function();
+                              item.function();
-                            this.toggleDrawer();
+                              this.toggleDrawer();
-                          }
+                            }
                           : this.toggleDrawer
                       }
                     >

src/components/News.js

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

src/components/NotFound.js

@@ -4,8 +4,8 @@ import Breadcrumbs from './Breadcrumbs';
 
 import { withRouter } from 'react-router-dom';
 
-import Button from '@mui/material/Button';
+import Button from '@material-ui/core/Button';
-import Typography from '@mui/material/Typography';
+import Typography from '@material-ui/core/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 '@mui/material/Container';
+import Container from '@material-ui/core/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 '@mui/material/Backdrop';
+import Backdrop from '@material-ui/core/Backdrop';
-import CircularProgress from '@mui/material/CircularProgress';
+import CircularProgress from '@material-ui/core/CircularProgress';
 
 
 class Project extends Component {

src/components/Project/ProjectHome.js

@@ -11,14 +11,13 @@ import BlocklyWindow from "../Blockly/BlocklyWindow";
 import Snackbar from "../Snackbar";
 import WorkspaceFunc from "../Workspace/WorkspaceFunc";
 
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Grid from "@mui/material/Grid";
+import Grid from "@material-ui/core/Grid";
-import Paper from "@mui/material/Paper";
+import Paper from "@material-ui/core/Paper";
-import Divider from "@mui/material/Divider";
+import Divider from "@material-ui/core/Divider";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/Typography";
-import Backdrop from "@mui/material/Backdrop";
+import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@mui/material/CircularProgress";
+import CircularProgress from "@material-ui/core/CircularProgress";
-import DeviceSelection from "../DeviceSelection";
 
 const styles = (theme) => ({
   link: {
@@ -61,8 +60,9 @@ class ProjectHome extends Component {
         this.setState({
           snackbar: true,
           key: Date.now(),
-          message: `Dein angefragtes ${type === "gallery" ? "Galerie-" : ""
+          message: `Dein angefragtes ${
-            }Projekt konnte nicht gefunden werden.`,
+            type === "gallery" ? "Galerie-" : ""
+          }Projekt konnte nicht gefunden werden.`,
           type: "error",
         });
       }
@@ -108,7 +108,6 @@ class ProjectHome extends Component {
         />
 
         <h1>{data}</h1>
-        <DeviceSelection />
         {this.props.progress ? (
           <Backdrop open invisible>
             <CircularProgress color="primary" />
@@ -128,8 +127,9 @@ class ProjectHome extends Component {
                         }}
                       >
                         <Link
-                          to={`/${data === "Projekte" ? "project" : "gallery"
+                          to={`/${
-                            }/${project._id}`}
+                            data === "Projekte" ? "project" : "gallery"
+                          }/${project._id}`}
                           style={{ textDecoration: "none", color: "inherit" }}
                         >
                           <h3 style={{ marginTop: 0 }}>{project.title}</h3>
@@ -153,7 +153,7 @@ class ProjectHome extends Component {
                           </Typography>
                         </Link>
                         {this.props.user &&
-                          this.props.user.email === project.creator ? (
+                        this.props.user.email === project.creator ? (
                           <div>
                             <Divider
                               style={{

src/components/SensorInfo.js

@@ -1,77 +0,0 @@
-import React from "react";
-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";
-
-
-export default function LabTabs() {
-    const [value, setValue] = React.useState('1');
-
-    const handleChange = (event, newValue) => {
-        setValue(newValue);
-    };
-
-    // get the description in the current language if no lang is give return english or the first one
-    function filterLanguage(options) {
-        var lang;
-        if (window.localStorage.getItem("locale")) {
-            lang = window.localStorage.getItem("locale").split("_")[0];
-        }
-        else {
-            lang = "en";
-        }
-        for (var i = 0; i < options.length; i++) {
-            if (options[i].languageCode === lang) {
-                return options[i].text;
-            }
-        }
-        return options[0].text;
-    }
-    var currentStore = store.getState();
-    // ALL SENSOR DATA FROM WIKI
-    var sensorData = currentStore.sensorwiki;
-    // NAME OF SELECTED BLOCK
-    var sensorName = currentStore.workspace.code.data.name;
-    // SEARCH ALL DATA FOR SELECTED BLOCK NAME
-    var sensorInfo = sensorData.find(function (element) {
-        return element.slug === sensorName;
-    });
-    if (sensorInfo) {
-        sensorInfo.markdown = "Coming soon...";
-
-        // GET DESCRIPTION OF SELECTED BLOCK
-        sensorInfo.details = `# ${sensorName.toUpperCase()}
-${Blockly.Msg.sensorinfo_explanation} [${sensorName.toUpperCase()}](https://sensors.wiki/sensor/detail/${sensorName})
-## ${Blockly.Msg.sensorinfo_description}
-${filterLanguage(sensorInfo.description.item)}
-## ${Blockly.Msg.sensorinfo_measurable_phenos}
-## ${Blockly.Msg.sensorinfo_manufacturer}
-${sensorInfo.manufacturer}
-## ${Blockly.Msg.sensorinfo_lifetime}
-${sensorInfo.lifePeriod}`
-    }
-
-    return (
-        <Box sx={{ width: '100%', typography: 'body1' }}>
-            <TabContext value={value}>
-                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                    <TabList onChange={handleChange}>
-                        <Tab label="Basic Information" value="1" />
-                        <Tab label="Details" value="2" />
-                    </TabList>
-                </Box>
-                <TabPanel value="1">
-                    {sensorInfo ? <ReactMarkdown>{sensorInfo.markdown}</ReactMarkdown> : "No data available"}
-                </TabPanel>
-                <TabPanel value="2">
-                    {sensorInfo ? <ReactMarkdown>{sensorInfo.details}</ReactMarkdown> : "No data available"}
-                </TabPanel>
-            </TabContext>
-        </Box>
-    );
-}

src/components/Settings/DeviceSelector.js

@@ -1,16 +1,16 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { setBoard } from '../../actions/boardActions';
+import { setBoard } from '../../actions/boardAction';
 
 import * as Blockly from 'blockly/core';
 
-import InputLabel from '@mui/material/InputLabel';
+import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
+import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@mui/material/FormControl';
+import FormControl from '@material-ui/core/FormControl';
-import Select from '@mui/material/Select';
+import Select from '@material-ui/core/Select';
-import Typography from '@mui/material/Typography';
+import Typography from '@material-ui/core/Typography';
-import FormHelperText from '@mui/material/FormHelperText';
+import FormHelperText from '@material-ui/core/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 variant="standard">
+        <FormControl>
           <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 '@mui/material/InputLabel';
+import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
+import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@mui/material/FormControl';
+import FormControl from '@material-ui/core/FormControl';
-import Select from '@mui/material/Select';
+import Select from '@material-ui/core/Select';
-import Typography from '@mui/material/Typography';
+import Typography from '@material-ui/core/Typography';
-import FormHelperText from '@mui/material/FormHelperText';
+import FormHelperText from '@material-ui/core/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 variant="standard">
+        <FormControl>
           <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 "@mui/material/InputLabel";
+import InputLabel from "@material-ui/core/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
+import MenuItem from "@material-ui/core/MenuItem";
-import FormControl from "@mui/material/FormControl";
+import FormControl from "@material-ui/core/FormControl";
-import Select from "@mui/material/Select";
+import Select from "@material-ui/core/Select";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/Typography";
-import FormHelperText from "@mui/material/FormHelperText";
+import FormHelperText from "@material-ui/core/FormHelperText";
 
 class OtaSelector extends Component {
   componentDidMount() {
@@ -33,16 +33,16 @@ class OtaSelector extends Component {
             https://sensebox.de/app
           </a>
         </FormHelperText>
-        <FormControl variant="standard">
+        <FormControl>
           <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 '@mui/material/InputLabel';
+import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
+import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@mui/material/FormControl';
+import FormControl from '@material-ui/core/FormControl';
-import Select from '@mui/material/Select';
+import Select from '@material-ui/core/Select';
-import Typography from '@mui/material/Typography';
+import Typography from '@material-ui/core/Typography';
-import FormHelperText from '@mui/material/FormHelperText';
+import FormHelperText from '@material-ui/core/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 variant="standard">
+        <FormControl>
           <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 "@mui/material/Button";
+import Button from "@material-ui/core/Button";
-import Paper from "@mui/material/Paper";
+import Paper from "@material-ui/core/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 "@mui/material/InputLabel";
+import InputLabel from "@material-ui/core/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
+import MenuItem from "@material-ui/core/MenuItem";
-import FormControl from "@mui/material/FormControl";
+import FormControl from "@material-ui/core/FormControl";
-import Select from "@mui/material/Select";
+import Select from "@material-ui/core/Select";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/Typography";
-import FormHelperText from "@mui/material/FormHelperText";
+import FormHelperText from "@material-ui/core/FormHelperText";
 
 class SoundsSelector extends Component {
   componentDidMount() {
@@ -30,16 +30,16 @@ class SoundsSelector extends Component {
         >
           {Blockly.Msg.settings_sounds_text}
         </FormHelperText>
-        <FormControl variant="standard">
+        <FormControl>
           <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 '@mui/material/InputLabel';
+import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
+import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@mui/material/FormControl';
+import FormControl from '@material-ui/core/FormControl';
-import Select from '@mui/material/Select';
+import Select from '@material-ui/core/Select';
-import Typography from '@mui/material/Typography';
+import Typography from '@material-ui/core/Typography';
-import FormHelperText from '@mui/material/FormHelperText';
+import FormHelperText from '@material-ui/core/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 variant="standard">
+        <FormControl>
           <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 '@mui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@mui/material/IconButton';
+import IconButton from '@material-ui/core/IconButton';
-import MaterialUISnackbar from '@mui/material/Snackbar';
+import MaterialUISnackbar from '@material-ui/core/Snackbar';
-import SnackbarContent from '@mui/material/SnackbarContent';
+import SnackbarContent from '@material-ui/core/SnackbarContent';
 
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -69,8 +69,8 @@ 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'}} size="large">
+            <IconButton onClick={this.onClose} style={{color: 'inherit'}}>
-              <FontAwesomeIcon icon={faTimes} size="xs" />
+              <FontAwesomeIcon icon={faTimes} size="xs"/>
             </IconButton>
           }
           message={this.props.message}

src/components/TooltipViewer.js

@@ -1,43 +1,17 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button, Card } from "@mui/material";
+
+import withWidth from "@material-ui/core/withWidth";
+
+import { Card } from "@material-ui/core";
 import * as Blockly from "blockly";
-import CardContent from "@mui/material/CardContent";
+import CardContent from "@material-ui/core/CardContent";
-import Typography from "@mui/material/Typography";
+
+import Typography from "@material-ui/core/Typography";
 import ReactMarkdown from "react-markdown";
-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} />;
-});
 
 class TooltipViewer extends Component {
-
-  constructor(props) {
-    super(props);
-    this.inputRef = React.createRef();
-    this.state = {
-      open: false,
-    };
-  }
-
-  toggleDialog = () => {
-    this.setState({ open: !this.state });
-  };
-
-  openDialog = () => {
-    this.setState({ open: true });
-  };
-
   render() {
     return (
       <Card
@@ -55,46 +29,14 @@ class TooltipViewer extends Component {
             {Blockly.Msg.tooltip_viewer}
           </Typography>
 
-          <Typography variant="body2" component="span">
+          <ReactMarkdown linkTarget="_blank">
-            <ReactMarkdown linkTarget="_blank">
+            {this.props.tooltip}
-              {this.props.tooltip}
+          </ReactMarkdown>
-            </ReactMarkdown>
+
-            {store.getState().workspace.code.data ? (
+          {this.props.helpurl !== "" ? (
-              <Button
+            <ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
-                label="Mehr"
+          ) : null}
-                variant="contained"
-                color="primary"
-                onClick={() => {
-                  this.openDialog();
-                }}
-              >
-                Sensor Informationen
-              </Button>
-            ) : (
-              <ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
-            )}
-          </Typography>
         </CardContent>
-        {store.getState().workspace.code.data ? (<Dialog
-          open={this.state.open}
-          TransitionComponent={Transition}
-          keepMounted
-          aria-describedby="alert-dialog-slide-description"
-          onClose={() => {
-            this.toggleDialog();
-          }}
-          maxWidth={"md"}
-          fullWidth={true}
-        >
-          <DialogContent>
-            <SensorInfo></SensorInfo>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={() => {
-              this.toggleDialog();
-            }}>Close</Button>
-          </DialogActions>
-        </Dialog>) : (null)}
       </Card>
     );
   }

src/components/Tutorial/Assessment.js

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

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 '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Switch from "@mui/material/Switch";
+import Switch from "@material-ui/core/Switch";
-import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormHelperText from "@mui/material/FormHelperText";
+import FormHelperText from "@material-ui/core/FormHelperText";
-import FormLabel from "@mui/material/FormLabel";
+import FormLabel from "@material-ui/core/FormLabel";
-import Button from "@mui/material/Button";
+import Button from "@material-ui/core/Button";
-import Grid from "@mui/material/Grid";
+import Grid from "@material-ui/core/Grid";
 
 const styles = (theme) => ({
   errorColor: {
@@ -139,6 +139,7 @@ class BlocklyExample extends Component {
               <Switch
                 checked={this.state.checked}
                 onChange={(e) => this.onChange(e.target.checked)}
+                color="primary"
               />
             }
           />

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 '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Button from "@mui/material/Button";
+import Button from "@material-ui/core/Button";
-import Backdrop from "@mui/material/Backdrop";
+import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@mui/material/CircularProgress";
+import CircularProgress from "@material-ui/core/CircularProgress";
-import Divider from "@mui/material/Divider";
+import Divider from "@material-ui/core/Divider";
-import FormHelperText from "@mui/material/FormHelperText";
+import FormHelperText from "@material-ui/core/FormHelperText";
-import Radio from "@mui/material/Radio";
+import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@mui/material/RadioGroup";
+import RadioGroup from "@material-ui/core/RadioGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
-import InputLabel from "@mui/material/InputLabel";
+import InputLabel from "@material-ui/core/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
+import MenuItem from "@material-ui/core/MenuItem";
-import FormControl from "@mui/material/FormControl";
+import FormControl from "@material-ui/core/FormControl";
-import Select from "@mui/material/Select";
+import Select from "@material-ui/core/Select";
 import * as Blockly from "blockly";
 
 const styles = (theme) => ({
@@ -407,7 +407,7 @@ class Builder extends Component {
           <FormControlLabel
             style={{ color: "black" }}
             value="new"
-            control={<Radio />}
+            control={<Radio color="primary" />}
             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 />}
+                control={<Radio color="primary" />}
                 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 />}
+                control={<Radio color="primary" />}
                 label={Blockly.Msg.builder_deleteExisting}
                 labelPlacement="end"
               />
@@ -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 '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
 import ReactStars from "react-rating-stars-component";
 import * as Blockly from "blockly";
-import FormGroup from "@mui/material/FormGroup";
+import FormGroup from "@material-ui/core/FormGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormControl from "@mui/material/FormControl";
+import FormControl from "@material-ui/core/FormControl";
-import FormLabel from "@mui/material/FormLabel";
+import FormLabel from "@material-ui/core/FormLabel";
 
 const styles = (theme) => ({
   multiline: {
@@ -55,7 +55,7 @@ class Difficulty extends Component {
 
   render() {
     return (
-      <FormControl variant="standard" component="fieldset">
+      <FormControl component="fieldset">
         <FormLabel component="legend">
           {Blockly.Msg.builder_difficulty}
         </FormLabel>

src/components/Tutorial/Builder/Hardware.js

@@ -9,17 +9,14 @@ import {
 
 import hardware from "../../../data/hardware.json";
 
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import ImageList from "@mui/material/ImageList";
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
-import ImageListItem from "@mui/material/ImageListItem";
+import ImageList from "@material-ui/core/ImageList";
-import ImageListItemBar from "@mui/material/ImageListItemBar";
+import ImageListItem from "@material-ui/core/ImageListItem";
-import FormHelperText from "@mui/material/FormHelperText";
+import ImageListItemBar from "@material-ui/core/ImageListItemBar";
-import FormLabel from "@mui/material/FormLabel";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import FormLabel from "@material-ui/core/FormLabel";
 import * as Blockly from "blockly";
-import { isWidthDown } from "../../../helpers/handleBreakpoints";
-
-// 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 '@mui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
-import Button from '@mui/material/Button';
+import Button from '@material-ui/core/Button';
-import OutlinedInput from '@mui/material/OutlinedInput';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
+import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@mui/material/FormControl';
+import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@mui/material/FormHelperText';
+import FormHelperText from '@material-ui/core/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 "@mui/material/FormControl";
+import FormControl from "@material-ui/core/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 '@mui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
-import Switch from '@mui/material/Switch';
+import Switch from '@material-ui/core/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormHelperText from '@mui/material/FormHelperText';
+import FormHelperText from '@material-ui/core/FormHelperText';
-import Radio from '@mui/material/Radio';
+import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
+import RadioGroup from '@material-ui/core/RadioGroup';
-import Button from '@mui/material/Button';
+import Button from '@material-ui/core/Button';
 
 const styles = (theme) => ({
   errorColor: {
@@ -97,6 +97,7 @@ class Media extends Component {
             <Switch
               checked={this.state.checked}
               onChange={(e) => this.onChangeSwitch(e.target.checked)}
+              color="primary"
             />
           }
         />
@@ -105,13 +106,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 />}
+                control={<Radio color="primary" />}
                 label="Bild"
                 labelPlacement="end"
               />
               <FormControlLabel style={{color: 'black'}}
                 value="youtube"
-                control={<Radio />}
+                control={<Radio color="primary" />}
                 label="Youtube-Video"
                 labelPlacement="end"
               />

src/components/Tutorial/Builder/Public.js

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

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { changeContent } from '../../../actions/tutorialBuilderActions';
 
-import FormGroup from '@mui/material/FormGroup';
+import FormGroup from '@material-ui/core/FormGroup';
-import Checkbox from '@mui/material/Checkbox';
+import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormLabel from '@mui/material/FormLabel';
+import FormLabel from '@material-ui/core/FormLabel';
-import FormHelperText from '@mui/material/FormHelperText';
+import FormHelperText from '@material-ui/core/FormHelperText';
-import FormControl from '@mui/material/FormControl';
+import FormControl from '@material-ui/core/FormControl';
 import * as Blockly from 'blockly'
 class Requirements extends Component {
 
@@ -26,13 +26,11 @@ class Requirements extends Component {
 
   render() {
     return (
-      <FormControl
+      <FormControl style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
-        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>
-          {this.props.tutorials.filter(tutorial => tutorial._id !== this.props.id && tutorial.public).map((tutorial, i) =>
+          {this.props.tutorials.filter(tutorial => tutorial._id !== this.props.id).map((tutorial, i) =>
             <FormControlLabel
               key={i}
               control={
@@ -41,6 +39,7 @@ 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

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

@@ -15,10 +15,10 @@ import BlocklyExample from "./BlocklyExample";
 import Requirements from "./Requirements";
 import Hardware from "./Hardware";
 
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/Typography";
-import IconButton from "@mui/material/IconButton";
+import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
 
 import {
   faPlus,
@@ -85,8 +85,8 @@ 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" />
+                <FontAwesomeIcon icon={faPlus} size="xs" />
               </IconButton>
             </Tooltip>
             {index !== 0 ? (
@@ -100,8 +100,8 @@ 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" />
+                    <FontAwesomeIcon icon={faAngleDoubleUp} size="xs" />
                   </IconButton>
                 </Tooltip>
                 <Tooltip
@@ -113,8 +113,8 @@ 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" />
+                    <FontAwesomeIcon icon={faAngleDoubleDown} size="xs" />
                   </IconButton>
                 </Tooltip>
                 <Tooltip title={`Schritt ${index + 1} löschen`} arrow>
@@ -125,8 +125,8 @@ class Step extends Component {
                       this.props.classes.delete
                     )}
                     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

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { changeContent, deleteProperty, deleteError } from '../../../actions/tutorialBuilderActions';
 
-import Radio from '@mui/material/Radio';
+import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
+import RadioGroup from '@material-ui/core/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 class StepType extends Component {
 
@@ -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 />}
+          control={<Radio color="primary" />}
           label="Anleitung"
           labelPlacement="end"
         />
         <FormControlLabel style={{color: 'black'}}
           disabled={this.props.index === 0}
           value="task"
-          control={<Radio />}
+          control={<Radio color="primary" />}
           label="Aufgabe"
           labelPlacement="end"
         />

src/components/Tutorial/Builder/Textfield.js

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

src/components/Tutorial/Hardware.js

@@ -4,22 +4,18 @@ import Dialog from "../Dialog";
 
 import hardware from "../../data/hardware.json";
 
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Link from "@mui/material/Link";
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
-import Typography from "@mui/material/Typography";
+import Link from "@material-ui/core/Link";
-import IconButton from "@mui/material/IconButton";
+import Typography from "@material-ui/core/Typography";
-import ImageList from "@mui/material/ImageList";
+import IconButton from "@material-ui/core/IconButton";
-import ImageListItem from "@mui/material/ImageListItem";
+import ImageList from "@material-ui/core/ImageList";
-import ImageListItemBar from "@mui/material/ImageListItemBar";
+import ImageListItem from "@material-ui/core/ImageListItem";
+import ImageListItemBar from "@material-ui/core/ImageListItemBar";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
 import * as Blockly from "blockly";
-import { isWidthDown } from "../../helpers/handleBreakpoints";
-
-// 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": {
@@ -55,9 +51,9 @@ class Hardware extends Component {
   };
 
   render() {
-    var cols = isWidthDown("md", window.innerWidth)
+    var cols = isWidthDown("md", this.props.width)
-      ? isWidthDown("sm", window.innerWidth)
+      ? isWidthDown("sm", this.props.width)
-        ? isWidthDown("xs", window.innerWidth)
+        ? isWidthDown("xs", this.props.width)
           ? 2
           : 3
         : 4
@@ -97,8 +93,8 @@ class Hardware extends Component {
                       className={this.props.classes.expand}
                       aria-label="Vollbild"
                       onClick={() => this.handleClickOpen(hardwareInfo)}
-                      size="large">
+                    >
-                      <FontAwesomeIcon icon={faExpandAlt}  size="xs" />
+                      <FontAwesomeIcon icon={faExpandAlt} size="xs" />
                     </IconButton>
                   }
                 />
@@ -128,7 +124,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 '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Checkbox from "@mui/material/Checkbox";
+import Checkbox from "@material-ui/core/Checkbox";
-import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
 import * as Blockly from "blockly";
 import ReactMarkdown from "react-markdown";
 
@@ -78,6 +78,7 @@ 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/Instruction.js

@@ -4,8 +4,8 @@ import Hardware from "./Hardware";
 import Requirement from "./Requirement";
 import BlocklyWindow from "../Blockly/BlocklyWindow";
 
-import Grid from "@mui/material/Grid";
+import Grid from "@material-ui/core/Grid";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/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 "@mui/material/styles";
+import { alpha } from "@material-ui/core/styles";
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/Typography";
-import List from "@mui/material/List";
+import List from "@material-ui/core/List";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
@@ -166,7 +166,6 @@ class Requirement extends Component {
                             icon={
                               tutorialStatus === "Success" ? faCheck : faTimes
                             }
-                            
                           />
                         ) : (
                           <Typography

src/components/Tutorial/SolutionCheck.js

@@ -10,10 +10,10 @@ import Dialog from "../Dialog";
 
 import { checkXml } from "../../helpers/compareXml";
 
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import IconButton from "@mui/material/IconButton";
+import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
-import Button from "@mui/material/Button";
+import Button from "@material-ui/core/Button";
 
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -62,8 +62,8 @@ 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" />
+            <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 "@mui/material/styles";
+import { alpha } from "@material-ui/core/styles";
 
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/Typography";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
-import Button from "@mui/material/Button";
+import Button from "@material-ui/core/Button";
 
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -127,7 +127,6 @@ class StepperHorizontal extends Component {
                   <FontAwesomeIcon
                     className={this.props.classes.icon}
                     icon={tutorialStatus === "Success" ? faCheck : faTimes}
-                    
                   />
                 </div>
               ) : null}

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 "@mui/material/styles";
+import { alpha } from "@material-ui/core/styles";
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Stepper from "@mui/material/Stepper";
+import Stepper from "@material-ui/core/Stepper";
-import Step from "@mui/material/Step";
+import Step from "@material-ui/core/Step";
-import StepLabel from "@mui/material/StepLabel";
+import StepLabel from "@material-ui/core/StepLabel";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
 
 const styles = (theme) => ({
   verticalStepper: {
@@ -23,12 +23,13 @@ const styles = (theme) => ({
     // borderWidth: '2px',
     borderRadius: "50%",
     borderColor: theme.palette.secondary.main,
-    width: "1rem",
+    width: "12px",
+    height: "12px",
     margin: "0 auto",
   },
   stepIconLarge: {
-    width: "2rem",
+    width: "24px",
-    height: "1rem",
+    height: "24px",
   },
   stepIconLargeSuccess: {
     borderColor: theme.palette.primary.main,

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 "@mui/material/Card";
+import Card from "@material-ui/core/Card";
-import Button from "@mui/material/Button";
+import Button from "@material-ui/core/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 "@mui/material/styles";
+import { alpha } from "@material-ui/core/styles";
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Grid from "@mui/material/Grid";
+import Grid from "@material-ui/core/Grid";
-import Paper from "@mui/material/Paper";
+import Paper from "@material-ui/core/Paper";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/Typography";
 
 import {
   faCheck,
@@ -33,11 +33,10 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly";
 import ReactStars from "react-rating-stars-component";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
-import IconButton from "@mui/material/IconButton";
+import IconButton from "@material-ui/core/IconButton";
 import Snackbar from "../Snackbar";
-import Divider from "@mui/material/Divider";
+import Divider from "@material-ui/core/Divider";
-import DeviceSelection from "../DeviceSelection";
 
 const styles = (theme) => ({
   outerDiv: {
@@ -244,11 +243,14 @@ class TutorialHome extends Component {
                             cy="50%"
                             fill="none"
                             stroke-width="10"
-                            stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
+                            stroke-dashoffset={`${
-                              }`}
+                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                            stroke-dasharray={`${75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
+                            }`}
-                              } ${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
+                            stroke-dasharray={`${
-                              }`}
+                              75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
+                            } ${
+                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
+                            }`}
                           ></circle>
                         )}
                         {success < 1 && !error ? (
@@ -263,8 +265,9 @@ class TutorialHome extends Component {
                             cy="50%"
                             fill="none"
                             stroke-width="10"
-                            stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
+                            stroke-dashoffset={`${
-                              }`}
+                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
+                            }`}
                             stroke-dasharray={`${75 * 2 * Math.PI}`}
                           ></circle>
                         ) : null}
@@ -276,8 +279,8 @@ class TutorialHome extends Component {
                         tutorialStatus === "Error"
                           ? this.props.classes.outerDivError
                           : tutorialStatus === "Success"
-                            ? this.props.classes.outerDivSuccess
+                          ? this.props.classes.outerDivSuccess
-                            : null
+                          : null
                       )}
                     >
                       <div className={this.props.classes.innerDiv}>
@@ -287,7 +290,6 @@ class TutorialHome extends Component {
                             icon={
                               tutorialStatus === "Success" ? faCheck : faTimes
                             }
-                            
                           />
                         ) : (
                           <Typography
@@ -309,7 +311,6 @@ class TutorialHome extends Component {
             );
           })}
         </Grid>
-        <DeviceSelection />
         {this.props.user ? (
           <div>
             <h2>User Tutorials</h2>
@@ -380,8 +381,8 @@ class TutorialHome extends Component {
                                   type: "success",
                                 });
                               }}
-                              size="large">
+                            >
-                              <FontAwesomeIcon icon={faShareAlt} size="xs"  />
+                              <FontAwesomeIcon icon={faShareAlt} size="xs" />
                             </IconButton>
                           </Tooltip>
                           <Tooltip
@@ -391,8 +392,8 @@ class TutorialHome extends Component {
                             <IconButton
                               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 ? (
@@ -403,7 +404,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 '@mui/material/Grid';
+import Grid from '@material-ui/core/Grid';
-import List from '@mui/material/List';
+import List from '@material-ui/core/List';
-import ListItem from '@mui/material/ListItem';
+import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
+import ListItemText from '@material-ui/core/ListItemText';
-import Divider from '@mui/material/Divider';
+import Divider from '@material-ui/core/Divider';
-import Paper from '@mui/material/Paper';
+import Paper from '@material-ui/core/Paper';
-import Link from '@mui/material/Link';
+import Link from '@material-ui/core/Link';
-import Typography from '@mui/material/Typography';
+import Typography from '@material-ui/core/Typography';
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip from '@material-ui/core/Tooltip';
 
 import { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox, faUserTag } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -30,19 +30,14 @@ export class Account extends Component {
 
         <h1>Account</h1>
         <Alert>
-          Alle Angaben stammen von <Link
+          Alle Angaben stammen von <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> und können dort verwaltet werden.
-          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>
             <ListItem>
               <Tooltip title='Nutzername'>
                 <ListItemIcon>
-                  <FontAwesomeIcon icon={faUser}  />
+                  <FontAwesomeIcon icon={faUser} />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary={`Name: ${user.name}`} />
@@ -50,14 +45,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>
@@ -67,12 +62,7 @@ export class Account extends Component {
         <div style={{ marginBottom: '8px' }}>
           {this.props.user.boxes.length < 1 ?
             <Typography>
-              Du hast noch keine senseBox registriert. Besuche <Link
+              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.
-              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:
@@ -83,13 +73,7 @@ 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
+                <Link rel="noreferrer" target="_blank" href={`https://opensensemap.org/explore/${box._id}`} color="primary" style={{ textDecoration: 'none', color: 'inherit' }}>
-                  rel="noreferrer"
-                  target="_blank"
-                  href={`https://opensensemap.org/explore/${box._id}`}
-                  color="primary"
-                  style={{ textDecoration: 'none', color: 'inherit' }}
-                  underline="hover">
                   <Paper>
                     <List>
                       <ListItem>
@@ -98,7 +82,7 @@ export class Account extends Component {
                       <ListItem>
                         <Tooltip title='Modell'>
                           <ListItemIcon>
-                            <FontAwesomeIcon icon={faBox}  />
+                            <FontAwesomeIcon icon={faBox} />
                           </ListItemIcon>
                         </Tooltip>
                         <div>
@@ -109,7 +93,7 @@ export class Account extends Component {
                       <ListItem>
                         <Tooltip title='Standort'>
                           <ListItemIcon>
-                            <FontAwesomeIcon icon={faMapMarkerAlt}  />
+                            <FontAwesomeIcon icon={faMapMarkerAlt} />
                           </ListItemIcon>
                         </Tooltip>
                         <div>
@@ -120,7 +104,7 @@ export class Account extends Component {
                       <ListItem>
                         <Tooltip title='Sensoren'>
                           <ListItemIcon>
-                            <FontAwesomeIcon icon={faCloudSunRain}  />
+                            <FontAwesomeIcon icon={faCloudSunRain} />
                           </ListItemIcon>
                         </Tooltip>
                         <div>
@@ -132,7 +116,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 "@mui/material/Button";
+import Button from "@material-ui/core/Button";
-import IconButton from "@mui/material/IconButton";
+import IconButton from "@material-ui/core/IconButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-import TextField from "@mui/material/TextField";
+import TextField from "@material-ui/core/TextField";
-import Divider from "@mui/material/Divider";
+import Divider from "@material-ui/core/Divider";
-import InputAdornment from "@mui/material/InputAdornment";
+import InputAdornment from "@material-ui/core/InputAdornment";
-import CircularProgress from "@mui/material/CircularProgress";
+import CircularProgress from "@material-ui/core/CircularProgress";
-import Link from "@mui/material/Link";
+import Link from "@material-ui/core/Link";
 import * as Blockly from "blockly";
 
 export class Login extends Component {
@@ -38,19 +38,6 @@ export class Login extends Component {
     };
   }
 
-  componentDidMount() {
-    if (this.props.message.id === "LOGIN_FAIL") {
-      this.setState({
-        email: "",
-        password: "",
-        snackbar: true,
-        key: Date.now(),
-        message: Blockly.Msg.messages_LOGIN_FAIL,
-        type: "error",
-      });
-    }
-  }
-
   componentDidUpdate(props) {
     const { message } = this.props;
     if (message !== props.message) {
@@ -125,7 +112,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,7 +125,6 @@ export class Login extends Component {
           />
           <form onSubmit={this.onSubmit}>
             <TextField
-              variant="standard"
               style={{ marginBottom: "10px" }}
               // variant='outlined'
               type="text"
@@ -146,9 +132,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}
@@ -161,18 +147,18 @@ export class Login extends Component {
                       onClick={this.handleClickShowPassword}
                       onMouseDown={this.handleMouseDownPassword}
                       edge="end"
-                      size="large">
+                    >
                       <FontAwesomeIcon
                         size="xs"
                         icon={this.state.showPassword ? faEyeSlash : faEye}
-                        
                       />
                     </IconButton>
                   </InputAdornment>
                 ),
               }}
               onChange={this.onChange}
-              fullWidth={true} />
+              fullWidth={true}
+            />
             <p>
               <Button
                 color="primary"
@@ -196,7 +182,7 @@ export class Login extends Component {
               target="_blank"
               href={"https://opensensemap.org/"}
               color="primary"
-              underline="hover">
+            >
               {Blockly.Msg.login_lostpassword}
             </Link>
           </p>
@@ -213,7 +199,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 '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Button from "@mui/material/Button";
+import Button from "@material-ui/core/Button";
-import Backdrop from "@mui/material/Backdrop";
+import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@mui/material/CircularProgress";
+import CircularProgress from "@material-ui/core/CircularProgress";
-import IconButton from "@mui/material/IconButton";
+import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
-import Divider from "@mui/material/Divider";
+import Divider from "@material-ui/core/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 "@mui/material/Drawer";
+import MuiDrawer from "@material-ui/core/Drawer";
 import Dialog from "../Dialog";
 
 const styles = (theme) => ({
@@ -188,8 +188,8 @@ class Compile extends Component {
             <IconButton
               className={`compileBlocks ${this.props.classes.iconButton}`}
               onClick={() => this.compile()}
-              size="large">
+            >
-              <FontAwesomeIcon icon={faClipboardCheck} size="xs"  />
+              <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
             </IconButton>
           </Tooltip>
         ) : (
@@ -202,7 +202,6 @@ class Compile extends Component {
             <FontAwesomeIcon
               icon={faClipboardCheck}
               style={{ marginRight: "5px" }}
-              
             />{" "}
             Kompilieren
           </Button>
@@ -303,7 +302,6 @@ class Compile extends Component {
                 <FontAwesomeIcon
                   icon={faClipboardCheck}
                   style={{ marginRight: "5px" }}
-                  
                 />{" "}
                 Starte Übertragung
               </Button>

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 '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import Button from "@mui/material/Button";
+import Button from "@material-ui/core/Button";
-import IconButton from "@mui/material/IconButton";
+import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/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 '@mui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@mui/material/IconButton';
+import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip from '@material-ui/core/Tooltip';
 
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -61,8 +61,8 @@ 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"  />
+            <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 '@mui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@mui/material/IconButton';
+import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip from '@material-ui/core/Tooltip';
 
 import { faFileDownload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -46,8 +46,8 @@ class DownloadProject extends Component {
           <IconButton
             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/OpenProject.js

@@ -8,8 +8,8 @@ import * as Blockly from 'blockly/core';
 import Snackbar from '../Snackbar';
 import Dialog from '../Dialog';
 
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip from '@material-ui/core/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 '@mui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@mui/material/IconButton';
+import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip from '@material-ui/core/Tooltip';
 
 import { faShare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Dialog from '../Dialog';
-import Button from '@mui/material/Button';
+import Button from '@material-ui/core/Button';
 
 const styles = (theme) => ({
   button: {
@@ -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 = () => {
@@ -81,8 +81,8 @@ class ResetWorkspace extends Component {
           <IconButton
             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>
+        <Button variant='contained' color='primary' onClick={() => { this.resetWorkspace(); this.toggleDialog(); }}>Zurücksetzen</Button>
-          </div></Dialog>
+      </div></Dialog>
       </div>
     );
   };

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 '@mui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
-import Button from '@mui/material/Button';
+import Button from '@material-ui/core/Button';
-import IconButton from '@mui/material/IconButton';
+import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip from '@material-ui/core/Tooltip';
-import TextField from '@mui/material/TextField';
+import TextField from '@material-ui/core/TextField';
-import Menu from '@mui/material/Menu';
+import Menu from '@material-ui/core/Menu';
-import MenuItem from '@mui/material/MenuItem';
+import MenuItem from '@material-ui/core/MenuItem';
 
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -91,11 +91,8 @@ class SaveProject extends Component {
   saveProject = () => {
     var body = {
       xml: this.props.xml,
-      title: this.props.name,
+      title: this.props.name
-      board: this.props.board,
-      type: "blockly"
     };
-    console.log(body);
     if (this.state.projectType === 'gallery') {
       body.description = this.state.description;
     }
@@ -136,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>
@@ -181,15 +178,7 @@ class SaveProject extends Component {
           button={'Abbrechen'}
         >
           <div style={{ marginTop: '10px' }}>
-            <TextField
+            <TextField autoFocus fullWidth multiline placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} />
-              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>
@@ -213,8 +202,7 @@ const mapStateToProps = state => ({
   description: state.project.description,
   xml: state.workspace.code.xml,
   message: state.message,
-  user: state.auth.user,
+  user: state.auth.user
-  board: state.board.board,
 });
 
 export default connect(mapStateToProps, { updateProject, setDescription })(withStyles(styles, { withTheme: true })(withRouter(SaveProject)));

src/components/Workspace/Screenshot.js

@@ -8,9 +8,9 @@ import { saveAs } from "file-saver";
 
 import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
 
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import IconButton from "@mui/material/IconButton";
+import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/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 '@mui/styles/withStyles';
+import { withStyles } from "@material-ui/core/styles";
-import IconButton from "@mui/material/IconButton";
+import IconButton from "@material-ui/core/IconButton";
-import Button from '@mui/material/Button';
+import Button from '@material-ui/core/Button';
-import Tooltip from "@mui/material/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
-import Typography from "@mui/material/Typography";
+import Typography from "@material-ui/core/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 '@mui/material/IconButton';
+import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip from '@material-ui/core/Tooltip';
-import withStyles from '@mui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 
 import { faTimes, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -56,28 +56,30 @@ class TrashcanButtons extends Component {
   }
 
   render() {
-    return this.state.closeTrashFlyout ?
+    return (
-      <div>
+      this.state.closeTrashFlyout ?
-        <Tooltip title={Blockly.Msg.tooltip_trashcan_hide}>
+        <div>
-          <IconButton
+          <Tooltip title={Blockly.Msg.tooltip_trashcan_hide}>
-            className={this.props.classes.closeTrash}
+            <IconButton
-            style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }}
+              className={this.props.classes.closeTrash}
-            onClick={() => this.closeTrashcan()}
+              style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }}
-            size="large">
+              onClick={() => this.closeTrashcan()}
-            <FontAwesomeIcon icon={faTimes} size="xs" />
+            >
-          </IconButton>
+              <FontAwesomeIcon icon={faTimes} size="xs" />
-        </Tooltip>
+            </IconButton>
-        <Tooltip title={Blockly.Msg.tooltip_trashcan_delete}>
+          </Tooltip>
-          <IconButton
+          <Tooltip title={Blockly.Msg.tooltip_trashcan_delete}>
-            className={this.props.classes.deleteTrash}
+            <IconButton
-            style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }}
+              className={this.props.classes.deleteTrash}
-            onClick={() => this.clearTrashcan()}
+              style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }}
-            size="large">
+              onClick={() => this.clearTrashcan()}
-            <FontAwesomeIcon icon={faTrash} size="xs" />
+            >
-          </IconButton>
+              <FontAwesomeIcon icon={faTrash} size="xs" />
-        </Tooltip>
+            </IconButton>
-      </div>
+          </Tooltip>
-      : null;
+        </div>
+        : null
+    );
   };
 }
 

src/components/Workspace/WorkspaceFunc.js

@@ -75,7 +75,7 @@ class WorkspaceFunc extends Component {
           <ResetWorkspace
             style={
               this.props.projectType === "project" ||
-                this.props.projectType === "gallery"
+              this.props.projectType === "gallery"
                 ? { marginRight: "5px" }
                 : null
             }
@@ -83,10 +83,10 @@ class WorkspaceFunc extends Component {
         ) : null}
 
         {!this.props.assessment &&
-          (this.props.projectType === "project" ||
+        (this.props.projectType === "project" ||
-            this.props.projectType === "gallery") &&
+          this.props.projectType === "gallery") &&
-          this.props.user &&
+        this.props.user &&
-          this.props.user.email === this.props.project.creator ? (
+        this.props.user.email === this.props.project.creator ? (
           <DeleteProject
             project={this.props.project}
             projectType={this.props.projectType}

src/components/Workspace/WorkspaceName.js

@@ -7,19 +7,16 @@ import { setDescription, updateProject } from "../../actions/projectActions";
 import Snackbar from "../Snackbar";
 import Dialog from "../Dialog";
 
-import withStyles from '@mui/styles/withStyles';
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
-import Button from "@mui/material/Button";
+import { withStyles } from "@material-ui/core/styles";
-import Tooltip from "@mui/material/Tooltip";
+import Button from "@material-ui/core/Button";
-import TextField from "@mui/material/TextField";
+import Tooltip from "@material-ui/core/Tooltip";
-import Typography from "@mui/material/Typography";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
 
 import { faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly/core";
-import { isWidthDown } from "../../helpers/handleBreakpoints";
-
-// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
 
 const styles = (theme) => ({
   workspaceName: {
@@ -108,8 +105,9 @@ class WorkspaceName extends Component {
     return (
       <div style={this.props.style}>
         <Tooltip
-          title={`${Blockly.Msg.tooltip_project_title} ${this.props.name ? `: ${this.props.name}` : ""
+          title={`${Blockly.Msg.tooltip_project_title} ${
-            }`}
+            this.props.name ? `: ${this.props.name}` : ""
+          }`}
           arrow
           style={{ height: "100%" }}
         >
@@ -128,8 +126,8 @@ class WorkspaceName extends Component {
                   this.props.projectType === "gallery"
                     ? "Projektdaten ändern"
                     : this.props.projectType === "project"
-                      ? "Projekt umbenennen"
+                    ? "Projekt umbenennen"
-                      : "Projekt benennen",
+                    : "Projekt benennen",
                 content:
                   this.props.projectType === "gallery"
                     ? "Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf 'Eingabe'."
@@ -138,13 +136,13 @@ class WorkspaceName extends Component {
             }}
           >
             {this.props.name &&
-              !isWidthDown(
+            !isWidthDown(
-                this.props.projectType === "project" ||
+              this.props.projectType === "project" ||
-                  this.props.projectType === "gallery"
+                this.props.projectType === "gallery"
-                  ? "xl"
+                ? "xl"
-                  : "xs",
+                : "xs",
-                this.props.width
+              this.props.width
-              ) ? (
+            ) ? (
               <Typography style={{ margin: "auto -3px auto 12px" }}>
                 {this.props.name}
               </Typography>
@@ -152,7 +150,6 @@ class WorkspaceName extends Component {
             <div style={{ width: "40px", display: "flex" }}>
               <FontAwesomeIcon
                 icon={faPen}
-                
                 style={{ height: "18px", width: "18px", margin: "auto" }}
               />
             </div>
@@ -187,34 +184,34 @@ class WorkspaceName extends Component {
         >
           <div style={{ marginTop: "10px" }}>
             {this.props.projectType === "gallery" ||
-              this.state.projectType === "gallery" ? (
+            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,12 +4,13 @@ import { connect } from "react-redux";
 
 import * as Blockly from "blockly/core";
 
-import withStyles from '@mui/styles/withStyles';
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
-import Tooltip from "@mui/material/Tooltip";
+import { withStyles } from "@material-ui/core/styles";
-import IconButton from "@mui/material/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
-import Chip from "@mui/material/Chip";
+import IconButton from "@material-ui/core/IconButton";
-import Avatar from "@mui/material/Avatar";
+import Chip from "@material-ui/core/Chip";
-import Popover from "@mui/material/Popover";
+import Avatar from "@material-ui/core/Avatar";
+import Popover from "@material-ui/core/Popover";
 
 import {
   faPuzzlePiece,
@@ -20,10 +21,6 @@ import {
   faEllipsisH,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { isWidthDown } from "../../helpers/handleBreakpoints";
-
-// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
 
 const styles = (theme) => ({
   stats: {
@@ -177,7 +174,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>

src/helpers/compareXml.js

@@ -15,13 +15,11 @@ const compareNumberOfBlocks = (originalBlocks, userBlocks) => {
     var blocks;
     if(originalBlocks.length > userBlocks.length){
       blocks = originalBlocks.length-userBlocks.length;
-      //return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu wenig verwendet.`, type: 'error'};
+      return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu wenig verwendet.`, type: 'error'};
-      return {text: `Du kannst deinen Programmcode kompilieren, aber es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} weniger verwendet als in der hinterlegten Lösung.`, type: 'success'};
     }
     else {
       blocks = userBlocks.length-originalBlocks.length;
-      //return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu viel verwendet.`, type: 'error'};
+      return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu viel verwendet.`, type: 'error'};
-      return {text: `Du kannst deinen Programmcode kompilieren, aber es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} mehr verwendet als in der hinterlegten Lösung.`, type: 'success'};
     }
   }
 };

src/helpers/handleBreakpoints.js

@@ -1,16 +0,0 @@
-export const isWidthDown = (breakpoint, screenWidth) => {
-    switch (breakpoint) {
-        case "xs":
-            return screenWidth < 600;
-        case "sm":
-            return screenWidth < 900;
-        case "md":
-            return screenWidth < 1200;
-        case "lg":
-            return screenWidth < 1536;
-        case "xl":
-            return screenWidth >= 1920;
-        default:
-            throw new Error("Invalid breakpoint");
-    }
-}

src/index.js

@@ -3,15 +3,12 @@ import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
-import store from "./store";
-import { fetchSensors } from "./actions/sensorwikiActions";
 
-store.dispatch(fetchSensors());
-
-fetchSensors();
 
 ReactDOM.render(
-  <App />,
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
   document.getElementById("root")
 );
 

src/reducers/arduinoReducer.js

@@ -1,20 +0,0 @@
-import { GET_ARDUINO_EXAMPLES } from '../actions/types';
-
-const initialState = {
-  examples: [],
-  type: '',
-  description: '',
-  progress: false
-};
-
-export default function foo(state = initialState, action) {
-  switch (action.type) {
-    case GET_ARDUINO_EXAMPLES:
-      return {
-        ...state,
-        examples: action.payload
-      };
-    default:
-      return state;
-  }
-}

src/reducers/boardReducer.js

@@ -1,20 +1,9 @@
 import { BOARD } from '../actions/types';
-import mini_opacity from "../data/mini_opacity.png"
-import mcu_opacity from "../data/mcu_opacity.png"
 
 const initialValue = () => {
-  if (window.sessionStorage.getItem("board")) {
+  return "";
-    setBackgroundImage(window.sessionStorage.getItem("board"));
-    return window.sessionStorage.getItem("board");
-  }
-  return null;
 };
 
-const setBackgroundImage = (board) => {
-  const root = document.querySelector(':root');
-  root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
-}
-
 const initialState = {
     board: initialValue()
 };

src/reducers/index.js

@@ -6,9 +6,7 @@ import generalReducer from './generalReducer';
 import projectReducer from './projectReducer';
 import messageReducer from './messageReducer';
 import authReducer from './authReducer';
-import boardReducer from './boardReducer';
+import boardReducer from './boardReducer'
-import sensorwikiReducer from './sensorwikiReducer';
-import arduinoReducer from './arduinoReducer';
 
 export default combineReducers({
   auth: authReducer,
@@ -18,7 +16,5 @@ export default combineReducers({
   builder: tutorialBuilderReducer,
   project: projectReducer,
   general: generalReducer,
-  message: messageReducer,
+  message: messageReducer
-  sensorwiki: sensorwikiReducer,
-  arduino: arduinoReducer
 });

src/reducers/sensorwikiReducer.js

@@ -1,10 +0,0 @@
-const sensors = (state = [] , action) => {
-    switch(action.type) {
-        case 'FETCH_SENSORWIKI_SUCCESS':
-            return action.payload.sensors
-        default:
-            return state
-    }
-}
-
-export default sensors