add fields for ratelimit testing

2023-02-02 14:20:04 +01:00
106 changed files with 740 additions and 1437 deletions
--- a/.gitea/workflows/build.yaml
+++ b/.gitea/workflows/build.yaml
@ -1,41 +0,0 @@
-name: Build and push image
-on:
-  push:
-    branches:
-      - master
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    container:
-      image: catthehacker/ubuntu:act-latest
-    #defaults:
-    #  run:
-    #    working-directory: /repo
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0 # all history for all branches and tags
-
-      - name: Login to  gitea.simonzeyer.de Repo
-        uses: docker/login-action@v2
-        with:
-          registry: gitea.simonzeyer.de
-          username: ${{ secrets.DOCKER_REPO_USER }}
-          password: ${{ secrets.DOCKER_REPO_PASSWD }}
-
-      - name: Get Meta
-        id: meta
-        run: |
-          echo REPO_NAME=$(echo ${GITHUB_REPOSITORY} | awk -F"/" '{print $2}') >> $GITHUB_OUTPUT
-          echo REPO_VERSION=$(git describe --always | sed 's/^v//') >> $GITHUB_OUTPUT          
-      - name: Build and push
-        uses: docker/build-push-action@v4
-        env:
-          ACTIONS_RUNTIME_TOKEN: '' # See https://gitea.com/gitea/act_runner/issues/119
-        with:
-          context: .
-          file: ./Dockerfile     
-          push: true
-          tags: |
-            gitea.simonzeyer.de/schuelerlabor-cleverlab/smarti:${{ steps.meta.outputs.REPO_VERSION }}
--- a/12
+++ b/12
@ -1,12 +0,0 @@
-# specify the node base image with your desired version node:<version>
-FROM node:16 as build
-WORKDIR /app
-copy ./ /app
-RUN npm install  --verbose
-RUN npm run build  --verbose
-
-FROM nginx:alpine
-COPY --from=build /app/build/ /usr/share/nginx/html
-RUN chmod 755 /usr/share/nginx/html/ -R
-EXPOSE 80
-ENTRYPOINT ["sh", "-c", "cd /usr/share/nginx/html/ && nginx -g 'daemon off;'"]
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@ -1,11 +0,0 @@
-# docker-compose.yml
-services:
-  smarti: 
-    mem_limit: 2048m
-    mem_reservation: 128M
-    cpus: 2
-    build:
-      dockerfile: Dockerfile
-    ports:
-    - "80"
-      
--- a/package.json
+++ b/package.json
@ -3,27 +3,23 @@
  "version": "1.0.0",
  "private": true,
  "dependencies": {
-    "@blockly/block-plus-minus": "^4.0.4",
-    "@blockly/field-grid-dropdown": "^2.0.4",
-    "@blockly/field-slider": "4.0.4",
-    "@blockly/plugin-scroll-options": "^3.0.5",
-    "@blockly/plugin-typed-variable-modal": "^5.0.6",
-    "@blockly/workspace-backpack": "^3.0.4",
-    "@blockly/zoom-to-fit": "^3.0.4",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@blockly/block-plus-minus": "^3.0.5",
+    "@blockly/field-grid-dropdown": "^1.0.31",
+    "@blockly/field-slider": "^3.0.5",
+    "@blockly/plugin-scroll-options": "^2.0.5",
+    "@blockly/plugin-typed-variable-modal": "^4.0.5",
+    "@blockly/workspace-backpack": "^2.0.12",
+    "@blockly/zoom-to-fit": "^2.0.14",
+    "@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",
    "axios": "^0.22.0",
-    "blockly": "^9.2.0",
+    "blockly": "^8.0.3",
    "file-saver": "^2.0.5",
    "markdown-it": "^12.3.2",
    "mnemonic-id": "^3.2.7",
@ -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",
@ -70,8 +65,5 @@
    ">0.2%",
    "not dead",
    "not op_mini all"
-  ],
-  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "7.21.11"
-  }
+  ]
 }
--- a/src/App.css
+++ b/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;
 }

@ -62,13 +62,3 @@ td {
  flex-direction: column;
  align-items: center;
 }
-
-:root {
-  --url: url('./data/mcu_opacity.png');
-}
-
-.blocklySvg {
-  background-image: var(--url);
-  background-position: center;
-  background-repeat: no-repeat;
-}
--- a/src/App.js
+++ b/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,7 +36,6 @@ class App extends Component {
  render() {
    const customHistory = createBrowserHistory();
    return (
-      <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <Provider store={store}>
          <Router history={customHistory}>
@ -44,7 +43,6 @@ class App extends Component {
          </Router>
        </Provider>
      </ThemeProvider>
-      </StyledEngineProvider>
    );
  }
 }
--- a/src/actions/boardAction.js
+++ b/src/actions/boardAction.js
@ -1,13 +1,8 @@
 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,
--- a/src/actions/sensorwikiActions.js
+++ b/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)
-        }
-    }
-}
--- a/src/actions/workspaceActions.js
+++ b/src/actions/workspaceActions.js
@ -16,19 +16,13 @@ export const onChangeCode = () => (dispatch, getState) => {
  code.arduino = Blockly.Arduino.workspaceToCode(workspace);
  var xmlDom = Blockly.Xml.workspaceToDom(workspace);
  code.xml = Blockly.Xml.domToPrettyText(xmlDom);
-  var selectedBlock = Blockly.getSelected();
+  var selectedBlock = Blockly.selected
  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
  }


--- a/src/components/Alert.js
+++ b/src/components/Alert.js
@ -1,9 +1,9 @@
 import React, { Component } from "react";

-import withStyles from '@mui/styles/withStyles';
-import { alpha } from "@mui/material/styles";
+import { withStyles } from "@material-ui/core/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: {
--- a/src/components/Blockly/BlocklyComponent.jsx
+++ b/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,
--- a/src/components/Blockly/BlocklyWindow.js
+++ b/src/components/Blockly/BlocklyWindow.js
@ -45,7 +45,6 @@ class BlocklyWindow extends Component {
    const workspace = Blockly.getMainWorkspace();
    var xml = this.props.initialXml;
    if (props.selectedBoard !== this.props.selectedBoard) {
-       xml = localStorage.getItem("autoSaveXML");
      // change board
      if(!xml) xml = initialXml;
      var xmlDom = Blockly.Xml.textToDom(xml);
@ -63,7 +62,6 @@ class BlocklyWindow extends Component {
    }
    if (props.language !== this.props.language) {
      // change language
-       xml = localStorage.getItem("autoSaveXML");
      if (!xml) xml = initialXml;
       xmlDom = Blockly.Xml.textToDom(xml);
      Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
--- a/src/components/Blockly/blocks/CleVerLab.js
+++ b/src/components/Blockly/blocks/CleVerLab.js
@ -1,88 +0,0 @@
-import Blockly from "blockly";
-import { getColour } from "../helpers/colour";
-import * as Types from "../helpers/types";
-import { selectedBoard } from "../helpers/board";
-import { FieldGridDropdown } from "@blockly/field-grid-dropdown";
-
-/**
- * DS18B20 Temperatursonde
- *
- */
-Blockly.Blocks["CleVerLab_dummy1"] = {
- init: function () {
-    this.setColour(getColour().cleverlab);
-    this.appendDummyInput()
-        .appendField("tut nichts")
-    this.setOutput(true, Types.NUMBER.typeName);
-    this.data = {name: "empty"};
-},
-};
-
-
-Blockly.Blocks["CleVerLab_temperature"] = {
-  init: function () {
-    this.setColour(getColour().cleverlab);
-    this.appendDummyInput()
-      .appendField("Temperatur")
-      .appendField("Digital Port:")
-      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPorts), "DigitalPin");
-    this.setOutput(true, Types.NUMBER.typeName);
-    this.data = {name: "ds18b20"};
-  },
-};
-/**
- * PH Wert
- *
- */
-Blockly.Blocks["CleVerLab_pH"] = {
-  init: function () {
-
-    this.setColour(getColour().cleverlab);
-    this.appendDummyInput()
-      .appendField("pH Wert")
-      .appendField("Digital Port:")
-      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPins), "DigitalPin");
-    this.setOutput(true, Types.NUMBER.typeName);
-    this.data = {name: "phoderso"};
-  },
-};
-Blockly.Blocks["CleVerLab_cali1"] = {
-    init: function () {
-        this.appendDummyInput()
-            .appendField("Kalibriere pH Sensor");
-        this.appendValueInput("VAR1", "Number")
-            .appendField("Referenzlösung pH 4.00 =")
-            .setAlign(Blockly.ALIGN_RIGHT);
-        this.appendValueInput("VAR2", "Number2")
-            .appendField("Referenzlösung pH 7.00 =")
-            .setAlign(Blockly.ALIGN_RIGHT);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setColour(getColour().cleverlab);
-        this.setOutput(true, Types.NUMBER.typeName);
-        this.data = {name: "dsasda"};
-    },
-};
-
-/**
- * Pump
- *
- */
-Blockly.Blocks['CleVerLab_pump'] = {
-  init: function() {
-    this.setColour(getColour().cleverlab);
-        var dropdown = new Blockly.FieldDropdown([
-          [ 'START','HIGH'],
-          [ 'STOPP','LOW']
-        ]);
-    this.appendDummyInput()
-        .appendField(dropdown, "Mode")
-        .appendField(" Pumpe ")
-        .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPins), "DigitalPin");
-    this.setPreviousStatement(true, null);
-    this.setNextStatement(true, null);
-    //this.setOutput(true, "Number");
-    this.setTooltip('');
-    this.setHelpUrl('');
-  }
-};
--- a/src/components/Blockly/blocks/index.js
+++ b/src/components/Blockly/blocks/index.js
@ -26,6 +26,5 @@ import "./variables";
 import "./lists";
 import "./watchdog";
 import "./webserver";
-import "./CleVerLab"

 import "../helpers/types";
--- a/src/components/Blockly/blocks/sensebox-osem.js
+++ b/src/components/Blockly/blocks/sensebox-osem.js
@ -19,6 +19,7 @@ Blockly.Blocks["sensebox_osem_connection"] = {
    this.setColour(getColour().sensebox);
    this.appendDummyInput()
      .appendField(Blockly.Msg.senseBox_osem_connection)
+      .appendField( new Blockly.FieldDropdown([[Blockly.Msg.senseBox_osem_host, "opensensemap.org"], [Blockly.Msg.senseBox_osem_host_testing, "testing.opensensemap.org"]]), "HOST")
      .appendField("SSL")
      .appendField(new Blockly.FieldCheckbox(ssl), "SSL");
    this.appendDummyInput()
@ -53,6 +54,10 @@ Blockly.Blocks["sensebox_osem_connection"] = {
      .setAlign(Blockly.ALIGN_LEFT)
      .appendField(Blockly.Msg.senseBox_osem_access_token)
      .appendField(new Blockly.FieldTextInput("access_token"), "access_token");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_osem_xallowtoken)
+      .appendField(new Blockly.FieldTextInput("ratelimit-token"), "ratelimit-token");
    this.appendStatementInput("DO")
      .appendField(Blockly.Msg.senseBox_sensor)
      .setCheck(null);
--- a/src/components/Blockly/blocks/sensebox-sensors.js
+++ b/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"};
  },
 };

@ -218,7 +212,12 @@ Blockly.Blocks["sensebox_sensor_bme680_bsec"] = {

 Blockly.Blocks["sensebox_sensor_ultrasonic_ranger"] = {
  init: function () {
-    var dropdown = new FieldGridDropdown(selectedBoard().digitalPorts, function (option) {
+    var dropdownOptions = [
+      [Blockly.Msg.senseBox_ultrasonic_port_A, "A"],
+      [Blockly.Msg.senseBox_ultrasonic_port_B, "B"],
+      [Blockly.Msg.senseBox_ultrasonic_port_C, "C"],
+    ];
+    var dropdown = new FieldGridDropdown(dropdownOptions, function (option) {
      var input = option === "A" || option === "B" || option === "C";
      this.sourceBlock_.updateShape_(input);
    });
@ -246,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.
@ -331,7 +329,6 @@ Blockly.Blocks["sensebox_button"] = {
          [Blockly.Msg.senseBox_button_isPressed, "isPressed"],
          [Blockly.Msg.senseBox_button_wasPressed, "wasPressed"],
          [Blockly.Msg.senseBox_button_longPress, "longPress"],
-          [Blockly.Msg.senseBox_button_switch,"toggleButton"]
        ]),
        "FUNCTION"
      )
@ -385,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");
@ -430,11 +426,16 @@ Blockly.Blocks["sensebox_gps"] = {

 Blockly.Blocks["sensebox_sensor_truebner_smt50"] = {
  init: function () {
+    var dropdownOptions = [
+      [Blockly.Msg.senseBox_ultrasonic_port_A, "A"],
+      [Blockly.Msg.senseBox_ultrasonic_port_B, "B"],
+      [Blockly.Msg.senseBox_ultrasonic_port_C, "C"],
+    ];
    this.setColour(getColour().sensebox);
    this.appendDummyInput().appendField(Blockly.Msg.senseBox_smt50);
    this.appendDummyInput()
      .appendField("Port:")
-      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPorts), "Port");
+      .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port");
    this.appendDummyInput()
      .appendField(Blockly.Msg.senseBox_value)
      .appendField(
@ -447,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"};
  },
 };

@ -458,15 +458,18 @@ Blockly.Blocks["sensebox_sensor_truebner_smt50"] = {

 Blockly.Blocks["sensebox_sensor_watertemperature"] = {
  init: function () {
-
+    var dropdownOptions = [
+      [Blockly.Msg.senseBox_ultrasonic_port_A, "A"],
+      [Blockly.Msg.senseBox_ultrasonic_port_B, "B"],
+      [Blockly.Msg.senseBox_ultrasonic_port_C, "C"],
+    ];
    this.setColour(getColour().sensebox);
    this.appendDummyInput()
      .appendField(Blockly.Msg.senseBox_watertemperature)
      .appendField("Port:")
-      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPorts), "Port");
+      .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port");
    this.setOutput(true, Types.NUMBER.typeName);
    this.setTooltip(Blockly.Msg.senseBox_watertemperature_tip);
-    this.data = {name: "ds18b20"};
  },
 };

@ -493,11 +496,16 @@ Blockly.Blocks['sensebox_windspeed'] = {

 Blockly.Blocks["sensebox_soundsensor_dfrobot"] = {
  init: function () {
+    var dropdownOptions = [
+      [Blockly.Msg.senseBox_ultrasonic_port_A, "A"],
+      [Blockly.Msg.senseBox_ultrasonic_port_B, "B"],
+      [Blockly.Msg.senseBox_ultrasonic_port_C, "C"],
+    ];
    this.setColour(getColour().sensebox);
    this.appendDummyInput()
      .appendField(Blockly.Msg.senseBox_soundsensor_dfrobot)
      .appendField("Port:")
-      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPorts), "Port");
+      .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port");
    this.setOutput(true, Types.DECIMAL.typeName);
    this.setTooltip(Blockly.Msg.senseBox_soundsensor_dfrobot_tooltip);
    this.setHelpUrl(Blockly.Msg.senseBox_soundsensor_dfrobot_helpurl);
@ -534,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");
--- a/src/components/Blockly/blocks/variables.js
+++ b/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(new Blockly.FieldVariable("VAR"), "VAR")
-      .appendField(Blockly.Msg.variables_to);
+      .appendField("to");
  },
  onchange: function (e) {
    let variableID = this.getFieldValue("VAR");
--- a/src/components/Blockly/generator/CleVerLab.js
+++ b/src/components/Blockly/generator/CleVerLab.js
@ -1,61 +0,0 @@
-import Blockly from "blockly";
-
- /**
-  * starte/stoppe Pumpe
-  *
-  */
-Blockly.Arduino.CleVerLab_pump = function (block) {
-    var pin = block.getFieldValue('DigitalPin');
-    var state = block.getFieldValue("Mode");
-    Blockly['Arduino'].setupCode_['pinMode'] = 'pinMode(' + pin + ', OUTPUT);';
-    var code = 'digitalWrite(' + pin + ', ' + state + ');\n';
-    return code;
-};
-/**
- * PH wert
- *
- */
-Blockly.Arduino.CleVerLab_temperature = function () {
-  var dropdown_pin = this.getFieldValue("DigitalPort");
-  Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
-  Blockly.Arduino.libraries_["library_oneWire"] =
-    "#include <OneWire.h> // http://librarymanager/All#OneWire";
-  Blockly.Arduino.libraries_["library_oneDallasTemperature"] =
-    "#include <DallasTemperature.h> // http://librarymanager/All#DallasTemperature";
-  Blockly.Arduino.definitions_["define_OneWire"] =
-    "#define ONE_WIRE_BUS " +
-    dropdown_pin +
-    "\nOneWire oneWire(ONE_WIRE_BUS);\nDallasTemperature sensors(&oneWire);";
-  Blockly.Arduino.setupCode_["sensebox_oneWireSetup"] = "sensors.begin();";
-  Blockly.Arduino.codeFunctions_["sensebox_requestTemp"] =
-    "float getWaterTemp(){\nsensors.requestTemperatures();\nsensors.getTempCByIndex(0);\n}";
-  var code = "getWaterTemp()";
-  return [code, Blockly.Arduino.ORDER_ATOMIC];
-};
-Blockly.Arduino.CleVerLab_pH = function () {
-   var dropdown_pin = this.getFieldValue("DigitalPin");
-   Blockly.Arduino.definitions_["define_pHgetter"] =
-     "#define SensorPin " + dropdown_pin +"\n#define samplingInterval 20\n#define printInterval 800\n#define ArrayLenth  40    //times of collection\nint pHArray[ArrayLenth];   //Store the average value of the sensor feedback\nint pHArrayIndex=0;\nfloat slope = 1.00;\nfloat b =0.00;";
-   Blockly.Arduino.codeFunctions_["sensebox_requestpH"] =
-     "float getpH(){\nstatic unsigned long samplingTime = millis();\nstatic unsigned long printTime = millis();\nstatic float pHValue,voltage;\n//nif(millis()-samplingTime > samplingInterval){\n//pHArray[pHArrayIndex++]=analogRead(SensorPin);\nfor (int i = 1; i <= 10; i += 1) {\nvoltage = voltage + analogRead(SensorPin);\n}\n voltage = (voltage / 10)*5.0/1024; \nsamplingTime=millis();\n\nreturn pHValue = 3.5*voltage*slope+b;\n}\n";
-    Blockly.Arduino.codeFunctions_["avergearraypH"] =
-        "double avergearray(int* arr, int number) {\n int i;\n int max, min;\n double avg;\n long amount = 0;\n if (number <= 0) {\n return 0;\n }\n if (number < 5) {\n for (i = 0; i < number; i++) {\n amount += arr[i];\n }\n avg = amount / number;\n return avg;\n }\n else {\n if (arr[0] < arr[1]) {\n min = arr[0];\n max = arr[1];\n }\n else {\n min = arr[1];\n max = arr[0];\n }\n for (i = 2; i < number; i++) {\n if (arr[i] < min) {\n amount += min;\n min = arr[i];\n }\n else {\n if (arr[i] > max) {\n amount += max;\n max = arr[i];\n }\n else {\n amount += arr[i];\n }\n }\n }\n avg = (double)amount / (number - 2);\n }\n return avg;\n}";
-   var code = "getpH()";
-   return [code, Blockly.Arduino.ORDER_ATOMIC];
-};
-
-Blockly.Arduino.CleVerLab_cali1 = function () {
-   var var1 = Blockly.Arduino.valueToCode(this, 'VAR1', Blockly.Arduino.ORDER_ATOMIC) || "4.00";
-   var var2 = Blockly.Arduino.valueToCode(this, 'VAR2', Blockly.Arduino.ORDER_ATOMIC) || "7.00";
-   //var var1 = this.getFieldValue("VAR1");
-   //var var2 = this.getFieldValue("VAR2");
-   Blockly.Arduino.definitions_["define_pHKali"] = "#define pH4 4.00\n#define pH7 7.00\nfloat pH4is = "+ var1+";\nfloat pH7is = "+ var2 +";";
-   Blockly.Arduino.setupCode_["asdsadsa"] ="slope = (2.00-(4.00/3.50))/(pH7is/3.50 - pH4is/3.50);\n b = 7 - (pH7is * slope);";
-   var code = "0";
-   return [code, Blockly.Arduino.ORDER_ATOMIC];
-};
-
-
-
-
-
--- a/src/components/Blockly/generator/index.js
+++ b/src/components/Blockly/generator/index.js
@ -27,4 +27,3 @@ import "./variables";
 import "./lists";
 import "./watchdog";
 import "./webserver";
-import "./CleVerLab"
--- a/src/components/Blockly/generator/sensebox-osem.js
+++ b/src/components/Blockly/generator/sensebox-osem.js
@ -30,6 +30,8 @@ Blockly.Arduino.sensebox_osem_connection = function (Block) {
  var box_id = this.getFieldValue("BoxID");
  var branch = Blockly.Arduino.statementToCode(Block, "DO");
  var access_token = this.getFieldValue("access_token");
+  var host = this.getFieldValue("HOST");
+  var ratelimit_token = this.getFieldValue("ratelimit-token");
  var blocks = this.getDescendants();
  var type = this.getFieldValue("type");
  var ssl = this.getFieldValue("SSL");
@ -50,7 +52,7 @@ Blockly.Arduino.sensebox_osem_connection = function (Block) {
  Blockly.Arduino.definitions_["SenseBoxID"] =
    'const char SENSEBOX_ID [] PROGMEM = "' + box_id + '";';
  Blockly.Arduino.definitions_["host"] =
-    'const char server [] PROGMEM ="ingress.opensensemap.org";';
+    `const char server [] PROGMEM ="ingress.${host}";`;
  if (wifi === true) {
    if (ssl === "TRUE") {
      Blockly.Arduino.libraries_["library_bearSSL"] =
@ -154,7 +156,7 @@ ${
    if (connected == true) {
      // construct the HTTP POST request:
      sprintf_P(buffer,
-                PSTR("POST /boxes/%s/data HTTP/1.1\\nAuthorization: ${access_token}\\nHost: %s\\nContent-Type: "
+                PSTR("POST /boxes/%s/data HTTP/1.1\\nAuthorization: ${access_token}\\nX-Allow-Token: ${ratelimit_token}\\nHost: %s\\nContent-Type: "
                     "text/csv\\nConnection: close\\nContent-Length: %i\\n\\n"),
                SENSEBOX_ID, server, num_measurements * lengthMultiplikator);
      // send the HTTP POST request:
@ -253,7 +255,7 @@ ${
      if (connected == true) {
        // construct the HTTP POST request:
        sprintf_P(buffer,
-                  PSTR("POST /boxes/%s/data HTTP/1.1\\nAuthorization: ${access_token}\\nHost: %s\\nContent-Type: "
+                  PSTR("POST /boxes/%s/data HTTP/1.1\\nAuthorization: ${access_token}\\nX-Allow-Token: ${ratelimit_token}\\nHost: %s\\nContent-Type: "
                       "text/csv\\nConnection: close\\nContent-Length: %i\\n\\n"),
                  SENSEBOX_ID, server, num_measurements * lengthMultiplikator);
        // send the HTTP POST request:
--- a/src/components/Blockly/generator/sensebox-sensors.js
+++ b/src/components/Blockly/generator/sensebox-sensors.js
@ -399,7 +399,6 @@ Blockly.Arduino.sensebox_button = function () {
  Blockly.Arduino.libraries_[
    "library_jcButtons"
  ] = `#include <JC_Button.h> // http://librarymanager/All#JC_Button`;
-
  Blockly.Arduino.definitions_["define_button" + dropdown_pin + ""] =
    "Button button_" + dropdown_pin + "(" + dropdown_pin + ");";
  Blockly.Arduino.setupCode_["setup_button" + dropdown_pin + ""] =
@ -414,10 +413,6 @@ Blockly.Arduino.sensebox_button = function () {
  } else if (dropown_function === "longPress") {
    var time = this.getFieldValue("time");
    code = "button_" + dropdown_pin + ".pressedFor(" + time + ")";
-  } else if (dropown_function === "toggleButton") {
-    code = "button_" + dropdown_pin + ".toggleState()";
-    Blockly.Arduino.definitions_["define_button" + dropdown_pin + ""] =
-    "ToggleButton button_" + dropdown_pin + "(" + dropdown_pin + ");";
  }
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
--- a/src/components/Blockly/helpers/board.js
+++ b/src/components/Blockly/helpers/board.js
@ -13,11 +13,6 @@ const sensebox_mcu = {
    ["C5", "5"],
    ["C6", "6"],
  ],
-  digitalPorts: [
-    ["A", "A"],
-    ["B", "B"],
-    ["C", "C"],
-  ],
  digitalPinsLED: [
    ["BUILTIN_1", "7"],
    ["BUILTIN_2", "8"],
@ -148,9 +143,6 @@ const sensebox_mini = {
    ["IO1", "1"],
    ["IO2", "2"],
  ],
-  digitalPorts: [
-    ["IO1-2", "A"],
-  ],
  digitalPinsLED: [
    ["BUILTIN_1", "7"],
    ["BUILTIN_2", "8"],
@ -159,7 +151,8 @@ const sensebox_mini = {
  ],
  digitalPinsRGB: [
    ["on Board", "6"],
-    ["IO1-2", "1"],
+    ["IO1", "1"],
+    ["IO2", "2"],
  ],
  digitalPinsButton: [
    ["on Board", "0"],
--- a/src/components/Blockly/helpers/colour.js
+++ b/src/components/Blockly/helpers/colour.js
@ -15,7 +15,6 @@ const colours = {
  webserver: 40,
  phyphox: 25,
  motors: 190,
-  cleverlab: 185 ,
 };

 export const getColour = () => {
--- a/src/components/Blockly/helpers/maxInstances.js
+++ b/src/components/Blockly/helpers/maxInstances.js
@ -13,8 +13,6 @@ const maxInstances = {
  sensebox_lora_initialize_otaa: 1,
  sensebox_lora_initialize_abp: 1,
  sensebox_phyphox_init: 1,
-  sensebox_phyphox_experiment: 1,
-  sensebox_phyphox_experiment_send: 1,
  sensebox_ethernet: 1,
 };

--- a/src/components/Blockly/msg/de/sensebox-osem.js
+++ b/src/components/Blockly/msg/de/sensebox-osem.js
@ -10,11 +10,12 @@ export const OSEM = {
  senseBox_send_to_osem: "Sende Messwert an die openSenseMap",
  senseBox_osem_connection: "Verbinde mit openSenseMap:",
  senseBox_osem_host: "opensensemap.org",
-  senseBox_osem_host_workshop: "workshop.opensensemap.org",
+  senseBox_osem_host_testing: "testing.opensensemap.org",
  senseBox_osem_exposure: "Typ",
  senseBox_osem_stationary: "Stationär",
  senseBox_osem_mobile: "Mobil",
  senseBox_osem_access_token: "API Schlüssel",
+  senseBox_osem_xallowtoken: "X-ALLOW-TOKEN",
  senseBox_send_mobile_to_osem:
    "Sende Messwert und Standort an die openSenseMap",
  senseBox_send_mobile_to_osem_tip:
--- a/src/components/Blockly/msg/de/ui.js
+++ b/src/components/Blockly/msg/de/ui.js
@ -23,12 +23,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
@ -156,7 +154,6 @@ export const UI = {
  button_next: "nächster Schritt",
  button_tutorial_overview: "Tutorial Übersicht",
  button_login: "Anmelden",
-  button_createVariable: "Typisierte Variable erstellen",

  /**
   *
@ -320,14 +317,4 @@ export const UI = {
    "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",
-
-  /**
-   * 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 "
 };
--- a/src/components/Blockly/msg/en/CleVerLab.js
+++ b/src/components/Blockly/msg/en/CleVerLab.js
@ -1,3 +0,0 @@
-export const CLEVERLAB = {
-
-}
--- a/src/components/Blockly/msg/en/sensebox-osem.js
+++ b/src/components/Blockly/msg/en/sensebox-osem.js
@ -11,11 +11,12 @@ export const OSEM = {
  senseBox_send_to_osem: "Send measurement to openSenseMap",
  senseBox_osem_connection: "Connect to openSenseMap",
  senseBox_osem_host: "opensensemap.org",
-  senseBox_osem_host_workshop: "workshop.opensensemap.org",
+  senseBox_osem_host_testing: "testing.opensensemap.org",
  senseBox_osem_exposure: "Type",
  senseBox_osem_stationary: "Stationary",
  senseBox_osem_mobile: "Mobile",
  senseBox_osem_access_token: "API Key",
+  senseBox_osem_xallowtoken: "X-ALLOW-TOKEN",
  senseBox_send_mobile_to_osem: "Send measurement and location to openSenseMap",
  senseBox_send_mobile_to_osem_tip: "Send Value and Location to openSenseMap",
  senseBox_osem_restart: "Restart device if disconnected?",
--- a/src/components/Blockly/msg/en/ui.js
+++ b/src/components/Blockly/msg/en/ui.js
@ -19,16 +19,14 @@ export const UI = {
  toolbox_label_internalRTC: "Internal RTC",
  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
@ -151,7 +149,6 @@ export const UI = {
  button_next: "Next step",
  button_tutorial_overview: "Tutorial overview",
  button_login: "Login",
-  button_createVariable: "Create Typed Variable",

  /**
   *
@ -308,23 +305,12 @@ export const UI = {
    "Your code will now be compiled and then downloaded to your computer",

  /**
-  * Device Selection
+   * 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 ",
 };
--- a/src/components/Blockly/toolbox/Toolbox.js
+++ b/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;
  }
@ -633,11 +633,7 @@ class Toolbox extends React.Component {
          colour={getColour().procedures}
          custom="PROCEDURE"
        ></Category>
-        <Category name="CleVerLab" colour={getColour().cleverlab}>
-           <Block type="CleVerLab_pH" />
-           <Block type="CleVerLab_pump" />
-           <Block type="CleVerLab_cali1" />
-        </Category>
+        <sep></sep>
        <Category name={Blockly.Msg.toolbox_advanced} colour={getColour().io}>
          <Category
            name={Blockly.Msg.toolbox_serial}
--- a/src/components/Breadcrumbs.js
+++ b/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 MaterialUIBreadcrumbs from '@mui/material/Breadcrumbs';
-import Typography from '@mui/material/Typography';
+import { withStyles } from '@material-ui/core/styles';
+import MaterialUIBreadcrumbs from '@material-ui/core/Breadcrumbs';
+import Typography from '@material-ui/core/Typography';

 import { faHome } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/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" }}
--- a/src/components/CodeEditor/Compile.js
+++ b/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 Button from "@mui/material/Button";
-import Backdrop from "@mui/material/Backdrop";
-import CircularProgress from "@mui/material/CircularProgress";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import Divider from "@mui/material/Divider";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+import Backdrop from "@material-ui/core/Backdrop";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
+import Divider from "@material-ui/core/Divider";
 import { 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,7 +188,7 @@ class Compile extends Component {
            <IconButton
              className={`compileBlocks ${this.props.classes.iconButton}`}
              onClick={() => this.compile()}
-              size="large">
+            >
              <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
            </IconButton>
          </Tooltip>
@ -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
--- a/src/components/CodeEditor/SaveIcon.js
+++ b/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"}
      />
--- a/src/components/CodeEditor/SerialMonitor.js
+++ b/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([]);
--- a/src/components/CodeEditor/Sidebar.js
+++ b/src/components/CodeEditor/Sidebar.js
@ -1,13 +1,13 @@
 import React from "react";
 import Blockly from "blockly";
 import { useSelector } from "react-redux";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import Typography from "@mui/material/Typography";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import Typography from "@material-ui/core/Typography";
 import { 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";

--- a/src/components/CodeViewer.js
+++ b/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 MuiAccordion from "@mui/material/Accordion";
-import MuiAccordionSummary from "@mui/material/AccordionSummary";
-import MuiAccordionDetails from "@mui/material/AccordionDetails";
-import { Card } from "@mui/material";
+import withWidth from "@material-ui/core/withWidth";
+import { withStyles } from "@material-ui/core/styles";
+import MuiAccordion from "@material-ui/core/Accordion";
+import MuiAccordionSummary from "@material-ui/core/AccordionSummary";
+import MuiAccordionDetails from "@material-ui/core/AccordionDetails";
+import { Card } from "@material-ui/core";
 import * 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}`,
--- a/src/components/DeviceSelection.js
+++ b/src/components/DeviceSelection.js
@ -3,9 +3,11 @@ 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 "@material-ui/core/Checkbox";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
 import * as Blockly from "blockly";
-import { IconButton, Grid, Avatar, Typography } from "@mui/material";
+import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
 import { setBoard } from "../actions/boardAction";

 const styles = (theme) => ({
@ -25,9 +27,15 @@ const styles = (theme) => ({

 class DeviceSeclection extends Component {
  constructor(props) {
+    var previousPageWasAnotherDomain = props.pageVisits === 0;
+    var userWantToKeepBoard = window.localStorage.getItem("board")
+      ? true
+      : false;
    super(props);
    this.state = {
-      open: props.selectedBoard ? false : true,
+      open: userWantToKeepBoard
+        ? !userWantToKeepBoard
+        : previousPageWasAnotherDomain,
      selectedBoard : "",
      saveSettings: false,

@ -35,7 +43,12 @@ class DeviceSeclection extends Component {
  }

  toggleDialog = () => {
+    this.setState({ open: !this.state });
+    if(this.state.saveSettings){
+      window.localStorage.setItem("board", this.state.selectedBoard) 
+    }
    this.props.setBoard(this.state.selectedBoard)
+
  };

  onChange = (e) => {
@ -47,9 +60,8 @@ class DeviceSeclection extends Component {
  };

  onclick = (e, value) => {
+    console.log(e, value)
    this.setState({selectedBoard: value})
-    this.props.setBoard(value)
-    this.setState({ open: !this.state });
  };

  render() {
@ -62,12 +74,13 @@ class DeviceSeclection extends Component {
        title={Blockly.Msg.deviceselection_head}
        content={""}
        onClick={this.toggleDialog}
+        button={Blockly.Msg.button_accept}
        disabled={this.state.selectedBoard===""}
      >
        <div>
          <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
                alt="Sensebox MCU"
                src="/media/hardware/senseboxmcu.png"
@ -80,6 +93,7 @@ class DeviceSeclection extends Component {
              </IconButton>
              <p>senseBox MCU</p>
            </Grid>
+
            {/* <Grid item xs={4}>
            <IconButton onClick={(e) => this.onclick(e, "esp")}>
              <Avatar
@ -95,7 +109,7 @@ class DeviceSeclection extends Component {
              <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
                alt="Sensebox Mini"
                src="/media/hardware/senseboxmcumini.png"
@ -110,6 +124,21 @@ class DeviceSeclection extends Component {
            </Grid>
          </Grid>
        </div>
+        <FormControlLabel
+          style={{ marginTop: "20px" }}
+          classes={{ label: this.props.classes.label }}
+          control={
+            <Checkbox
+              size={"small"}
+              value={true}
+              checked={this.state.checked}
+              onChange={(e) => this.onChange(e)}
+              name="dialog"
+              color="primary"
+            />
+          }
+          label={Blockly.Msg.deviceselection_keep_selection}
+        />
        <Typography variant="body1" >
          {Blockly.Msg.deviceselection_footnote} <a href="https://sensebox.github.io/blockly/">Arduino UNO</a> {Blockly.Msg.deviceselection_footnote_02} <a href="https://sensebox-blockly.netlify.app/ardublockly/?board=sensebox-mcu">senseBox MCU</a>
        </Typography>
--- a/src/components/Dialog.js
+++ b/src/components/Dialog.js
@ -1,10 +1,10 @@
 import React, { Component } from 'react';

-import Button from '@mui/material/Button';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import MaterialUIDialog from '@mui/material/Dialog';
+import Button from '@material-ui/core/Button';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import MaterialUIDialog from '@material-ui/core/Dialog';

 class Dialog extends Component {

--- a/src/components/Faq.js
+++ b/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 Typography from "@mui/material/Typography";
+import Button from "@material-ui/core/Button";
+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 "@mui/material/Container";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
+import Container from "@material-ui/core/Container";
+import ExpansionPanel from "@material-ui/core/ExpansionPanel";
+import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
 import { 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>
-                  <AccordionDetails>
+                  </ExpansionPanelSummary>
+                  <ExpansionPanelDetails>
                    <Typography>
                      <ReactMarkdown
                        className="news"
                        allowDangerousHtml="true"
                        children={object.answer}
-                        rehypePlugins={[rehypeRaw]}
                      ></ReactMarkdown>
                    </Typography>
-                  </AccordionDetails>
-                </Accordion>
+                  </ExpansionPanelDetails>
+                </ExpansionPanel>
              );
            })}
            {this.props.button ? (
--- a/src/components/Footer.js
+++ b/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() {
--- a/src/components/Home.js
+++ b/src/components/Home.js
@ -14,10 +14,10 @@ import TrashcanButtons from "./Workspace/TrashcanButtons";
 // import HintTutorialExists from "./Tutorial/HintTutorialExists";
 import DeviceSelection from "./DeviceSelection";

-import Grid from "@mui/material/Grid";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import withStyles from '@mui/styles/withStyles';
+import Grid from "@material-ui/core/Grid";
+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
+import { withStyles } from "@material-ui/core/styles";

 import { faCode } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -160,7 +160,7 @@ class Home extends Component {
                  zIndex: 21,
                }}
                onClick={() => this.onChange()}
-                size="large">
+              >
                <FontAwesomeIcon icon={faCode} size="xs" />
              </IconButton>
            </Tooltip>
--- a/src/components/Impressum.js
+++ b/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 (
--- a/src/components/MaxBlocks.js
+++ b/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 Button from '@mui/material/Button';
+import TextField from '@material-ui/core/TextField';
+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>
--- a/src/components/Navbar.js
+++ b/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 Drawer from "@mui/material/Drawer";
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import List from "@mui/material/List";
-import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
-import IconButton from "@mui/material/IconButton";
-import ListItem from "@mui/material/ListItem";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import LinearProgress from "@mui/material/LinearProgress";
+import { withStyles } from "@material-ui/core/styles";
+import Drawer from "@material-ui/core/Drawer";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import List from "@material-ui/core/List";
+import Typography from "@material-ui/core/Typography";
+import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import LinearProgress from "@material-ui/core/LinearProgress";
 import Tour from "reactour";
-import { Badge } from "@mui/material";
+import { Badge } from "@material-ui/core";
 import { home, assessment } from "./Tour";
 import {
  faBars,
@ -37,20 +37,10 @@ import {
  faLightbulb,
  faCode,
  faPuzzlePiece,
-  faUser,
-  faMicrochip,
-  faEarthEurope,
-  faEarthAmericas,
-  faCaretDown
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly";
-import Tooltip from "@mui/material/Tooltip";
-import MenuItem from '@mui/material/MenuItem'
-import Menu from '@mui/material/Menu'
-import { setLanguage } from "../actions/generalActions";
-import { setBoard } from "../actions/boardAction";
-import { Button } from "@mui/material";
+import Tooltip from "@material-ui/core/Tooltip";

 const styles = (theme) => ({
  drawerWidth: {
@ -70,14 +60,9 @@ const styles = (theme) => ({
 class Navbar extends Component {
  constructor(props) {
    super(props);
-    this.langRef = React.createRef();
-    this.mcuRef = React.createRef();
    this.state = {
      open: false,
      isTourOpen: false,
-      anchorElLang: null,
-      anchorElBoard: null,
-      anchorElUser: null
    };
  }

@ -95,6 +80,7 @@ class Navbar extends Component {

  render() {
    var isHome = /^\/(\/.*$|$)/g.test(this.props.location.pathname);
+    var isTutorial = /^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname);
    var isAssessment =
      /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) &&
      !this.props.tutorialIsLoading &&
@ -130,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" }}>
@ -141,150 +127,44 @@ class Navbar extends Component {
            <Link to={"/"} style={{ marginLeft: "10px" }}>
              <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
            </Link>
-            <div style={{ margin: "0 0 0 auto", display: "flex", alignItems: 'center', justifyContent: 'center' }}>
+            {isTutorial ? (
+              <Link
+                to={"/tutorial"}
+                style={{
+                  textDecoration: "none",
+                  color: "inherit",
+                  marginLeft: "10px",
+                }}
+              >
+                <Typography variant="h6" noWrap>
+                  Tutorial
+                </Typography>
+              </Link>
+            ) : null}
            {isHome ? (
-                <div style={{ display: "flex" }}>
-                  <div style={{ padding: "12px" }}>
-                    <Button
-                      style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
-                      ref={this.mcuRef}
-                      onClick={() => {
-                        this.setState({ anchorElBoard: this.mcuRef.current })
-                      }}
-                      startIcon={<FontAwesomeIcon icon={faMicrochip} />}
-                      endIcon={<FontAwesomeIcon icon={faCaretDown} />}
-                      sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
-                    >
-                      {this.props.selectedBoard}
-                    </Button>
-                    <Menu
-                      anchorEl={this.state.anchorElBoard}
-                      anchorOrigin={{
-                        vertical: 'bottom',
-                        horizontal: 'center',
-                      }}
-                      keepMounted
-                      transformOrigin={{
-                        vertical: 'top',
-                        horizontal: 'center',
-                      }}
-                      open={Boolean(this.state.anchorElBoard)}
-                      onClose={() => {
-                        this.setState({ anchorElBoard: null });
-                      }}
-                    >
-                      <MenuItem
-                        value="mcu"
-                        onClick={(event) => {
-                          this.props.setBoard(event.currentTarget.getAttribute("value"));
-                          this.setState({ anchorElBoard: null });
-                        }}
-                      >
-                        mcu
-                      </MenuItem>
-                      <MenuItem
-                        value="mini"
-                        onClick={(event) => {
-                          this.props.setBoard(event.currentTarget.getAttribute("value"));
-                          this.setState({ anchorElBoard: null });
-                        }}
-                      >
-                        mini
-                      </MenuItem>
-                    </Menu>
-                  </div>
-                  <div style={{ padding: "12px" }}>
-                    {
-                      this.props.language === "en_US" ?
-                        (
-                          <Button
-                            style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
-                            ref={this.langRef}
-                            onClick={() => {
-                              this.setState({ anchorElLang: this.langRef.current })
-                            }}
-                            startIcon={<FontAwesomeIcon icon={faEarthAmericas} />}
-                            endIcon={<FontAwesomeIcon icon={faCaretDown} />}
-                            sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
-                          >
-                            English
-                          </Button>
-                        ) : (
-                          <Button
-                            style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
-                            ref={this.langRef}
-                            onClick={() => {
-                              this.setState({ anchorElLang: this.langRef.current })
-                            }}
-                            startIcon={<FontAwesomeIcon icon={faEarthEurope} />}
-                            endIcon={<FontAwesomeIcon icon={faCaretDown} />}
-                            sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
-                          >
-                            Deutsch
-                          </Button>
-
-                        )
-                    }
-                    <Menu
-                      anchorEl={this.state.anchorElLang}
-                      anchorOrigin={{
-                        vertical: 'bottom',
-                        horizontal: 'center',
-                      }}
-                      keepMounted
-                      transformOrigin={{
-                        vertical: 'top',
-                        horizontal: 'center',
-                      }}
-                      open={Boolean(this.state.anchorElLang)}
-                      onClose={() => {
-                        this.setState({ anchorElLang: null });
-                      }}
-                    >
-                      <MenuItem
-                        value="de_DE"
-                        onClick={(event) => {
-                          this.props.setLanguage(event.currentTarget.getAttribute("value"));
-                          this.setState({ anchorElLang: null });
-                        }}
-                      >
-                        Deutsch
-                      </MenuItem>
-                      <MenuItem
-                        value="en_US"
-                        onClick={(event) => {
-                          this.props.setLanguage(event.currentTarget.getAttribute("value"));
-                          this.setState({ anchorElLang: null });
-                        }}
-                      >
-                        English
-                      </MenuItem>
-                    </Menu>
-                  </div>
-                </div>
-              ) : (null)}
-              {isHome ? (
-                <Tooltip title={'Start Tour'} arrow>
+              <Tooltip title={Blockly.Msg.tooltip_start_tour} arrow>
                <IconButton
                  color="inherit"
                  className={`openTour ${this.props.classes.button}`}
                  onClick={() => {
                    this.openTour();
                  }}
-                    size="large">
+                  style={{ margin: "0 30px 0 auto" }}
+                >
                  <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}`}
                  onClick={() => {
                    this.openTour();
                  }}
-                    size="large">
+                  style={{ margin: "0 30px 0 auto" }}
+                >
                  <FontAwesomeIcon icon={faQuestionCircle} />
                </IconButton>
              </Tooltip>
@ -296,71 +176,6 @@ class Navbar extends Component {
                this.closeTour();
              }}
            />
-              {this.props.user ? (
-                <div>
-                  <IconButton
-                    color="inherit"
-                    onClick={(event) => { this.setState({ anchorElUser: event.target }) }}
-                    style={{ margin: "0 30px 0 0" }}
-                    size="large"
-                  >
-                    <FontAwesomeIcon icon={faUser} />
-                  </IconButton>
-                  <Menu
-                    anchorEl={this.state.anchorElUser}
-                    anchorOrigin={{
-                      vertical: 'bottom',
-                      horizontal: 'center',
-                    }}
-                    keepMounted
-                    transformOrigin={{
-                      vertical: 'top',
-                      horizontal: 'center',
-                    }}
-                    open={Boolean(this.state.anchorElUser)}
-                    onClose={() => { this.setState({ anchorElUser: null }); }}
-                  >
-                    <div className="" style={{ paddingLeft: "16px", paddingRight: "16px", paddingTop: "16px" }}>
-                      <p style={{ fontWeight: "bold", margin: "0px" }}>
-                        {this.props.user.name}
-                      </p>
-                      <p style={{ marginTop: "0px", color: "#696969" }}>
-                        {this.props.user.email}
-                      </p>
-                    </div>
-                    <hr style={{ borderTop: "3px solid #bbb", marginLeft: "5px", marginRight: "5px" }} />
-                    <MenuItem>
-                      <Link to={"/user"} style={{ textDecoration: 'none', color: "black" }}>
-                        {Blockly.Msg.navbar_account}
-                      </Link>
-                    </MenuItem>
-                    <MenuItem>
-                      <Link to={"/settings"} style={{ textDecoration: 'none', color: "black" }}>
-                        {Blockly.Msg.navbar_settings}
-                      </Link>
-                    </MenuItem>
-                    <MenuItem
-                      onClick={() => {
-                        this.props.logout()
-                      }}
-                    >
-                      {Blockly.Msg.navbar_logout}
-                    </MenuItem>
-                  </Menu>
-                </div>
-              )
-                :
-                (<Link to={"/user/login"} style={{ textDecoration: 'none', color: "white" }}>
-                  <IconButton
-                    color="inherit"
-                    style={{ margin: "0 30px 0 auto" }}
-                  >
-                    <FontAwesomeIcon icon={faUser} />
-                  </IconButton>
-                </Link>
-                )
-              }
-            </div>
          </Toolbar>
        </AppBar>
        <Drawer
@ -452,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>
                      ) : (
@ -554,10 +369,6 @@ Navbar.propTypes = {
  user: PropTypes.object,
  tutorial: PropTypes.object,
  activeStep: PropTypes.number.isRequired,
-  setLanguage: PropTypes.func.isRequired,
-  language: PropTypes.string.isRequired,
-  setBoard: PropTypes.func.isRequired,
-  selectedBoard: PropTypes.string.isRequired
 };

 const mapStateToProps = (state) => ({
@ -567,10 +378,8 @@ const mapStateToProps = (state) => ({
  user: state.auth.user,
  tutorial: state.tutorial.tutorials[0],
  activeStep: state.tutorial.activeStep,
-  language: state.general.language,
-  selectedBoard: state.board.board
 });

-export default connect(mapStateToProps, { logout, setLanguage, setBoard })(
+export default connect(mapStateToProps, { logout })(
  withStyles(styles, { withTheme: true })(withRouter(Navbar))
 );
--- a/src/components/News.js
+++ b/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 Typography from '@mui/material/Typography';
+import Button from '@material-ui/core/Button';
+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 = `

--- a/src/components/NotFound.js
+++ b/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 Typography from '@mui/material/Typography';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import * as Blockly from 'blockly'

 class NotFound extends Component {
--- a/src/components/Privacy.js
+++ b/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 (
--- a/src/components/Project/Project.js
+++ b/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 CircularProgress from '@mui/material/CircularProgress';
+import Backdrop from '@material-ui/core/Backdrop';
+import CircularProgress from '@material-ui/core/CircularProgress';


 class Project extends Component {
--- a/src/components/Project/ProjectHome.js
+++ b/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 Grid from "@mui/material/Grid";
-import Paper from "@mui/material/Paper";
-import Divider from "@mui/material/Divider";
-import Typography from "@mui/material/Typography";
-import Backdrop from "@mui/material/Backdrop";
-import CircularProgress from "@mui/material/CircularProgress";
-import DeviceSelection from "../DeviceSelection";
+import { withStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import Divider from "@material-ui/core/Divider";
+import Typography from "@material-ui/core/Typography";
+import Backdrop from "@material-ui/core/Backdrop";
+import CircularProgress from "@material-ui/core/CircularProgress";

 const styles = (theme) => ({
  link: {
@ -61,7 +60,8 @@ class ProjectHome extends Component {
        this.setState({
          snackbar: true,
          key: Date.now(),
-          message: `Dein angefragtes ${type === "gallery" ? "Galerie-" : ""
+          message: `Dein angefragtes ${
+            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,7 +127,8 @@ class ProjectHome extends Component {
                        }}
                      >
                        <Link
-                          to={`/${data === "Projekte" ? "project" : "gallery"
+                          to={`/${
+                            data === "Projekte" ? "project" : "gallery"
                          }/${project._id}`}
                          style={{ textDecoration: "none", color: "inherit" }}
                        >
--- a/src/components/SensorInfo.js
+++ b/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>
-    );
-}
--- a/src/components/Settings/DeviceSelector.js
+++ b/src/components/Settings/DeviceSelector.js
@ -5,12 +5,12 @@ import { setBoard } from '../../actions/boardAction';

 import * as Blockly from 'blockly/core';

-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import Typography from '@mui/material/Typography';
-import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import Typography from '@material-ui/core/Typography';
+import FormHelperText from '@material-ui/core/FormHelperText';

 class DeviceSelector extends Component {

@ -26,14 +26,14 @@ class DeviceSelector extends Component {
      <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>
--- a/src/components/Settings/LanguageSelector.js
+++ b/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 MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import Typography from '@mui/material/Typography';
-import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import Typography from '@material-ui/core/Typography';
+import FormHelperText from '@material-ui/core/FormHelperText';

 class LanguageSelector extends Component {

@ -29,14 +29,14 @@ class LanguageSelector extends Component {
      <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>
--- a/src/components/Settings/OtaSelector.js
+++ b/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 MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import Typography from "@mui/material/Typography";
-import FormHelperText from "@mui/material/FormHelperText";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import Typography from "@material-ui/core/Typography";
+import FormHelperText from "@material-ui/core/FormHelperText";

 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>
--- a/src/components/Settings/RenderSelector.js
+++ b/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 MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import Typography from '@mui/material/Typography';
-import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import Typography from '@material-ui/core/Typography';
+import FormHelperText from '@material-ui/core/FormHelperText';


 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>
--- a/src/components/Settings/Settings.js
+++ b/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 Paper from "@mui/material/Paper";
+import Button from "@material-ui/core/Button";
+import Paper from "@material-ui/core/Paper";

 class Settings extends Component {
  componentDidMount() {
--- a/src/components/Settings/SoundsSelector.js
+++ b/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 MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import Typography from "@mui/material/Typography";
-import FormHelperText from "@mui/material/FormHelperText";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import Typography from "@material-ui/core/Typography";
+import FormHelperText from "@material-ui/core/FormHelperText";

 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>
--- a/src/components/Settings/StatsSelector.js
+++ b/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 MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import Typography from '@mui/material/Typography';
-import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import Typography from '@material-ui/core/Typography';
+import FormHelperText from '@material-ui/core/FormHelperText';

 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>
--- a/src/components/Snackbar.js
+++ b/src/components/Snackbar.js
@ -1,9 +1,9 @@
 import React, { Component } from 'react';

-import withStyles from '@mui/styles/withStyles';
-import IconButton from '@mui/material/IconButton';
-import MaterialUISnackbar from '@mui/material/Snackbar';
-import SnackbarContent from '@mui/material/SnackbarContent';
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import MaterialUISnackbar from '@material-ui/core/Snackbar';
+import SnackbarContent from '@material-ui/core/SnackbarContent';

 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -69,7 +69,7 @@ class Snackbar extends Component {
          style={{flexWrap: 'nowrap'}}
          className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success}
          action={
-            <IconButton onClick={this.onClose} style={{color: 'inherit'}} size="large">
+            <IconButton onClick={this.onClose} style={{color: 'inherit'}}>
              <FontAwesomeIcon icon={faTimes} size="xs"/>
            </IconButton>
          }
--- a/src/components/TooltipViewer.js
+++ b/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 Typography from "@mui/material/Typography";
+import CardContent from "@material-ui/core/CardContent";
+
+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">
            {this.props.tooltip}
          </ReactMarkdown>
-            {store.getState().workspace.code.data ? (
-              <Button
-                label="Mehr"
-                variant="contained"
-                color="primary"
-                onClick={() => {
-                  this.openDialog();
-                }}
-              >
-                Sensor Informationen
-              </Button>
-            ) : (
+
+          {this.props.helpurl !== "" ? (
            <ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
-            )}
-          </Typography>
+          ) : null}
        </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>
    );
  }
--- a/src/components/Tutorial/Assessment.js
+++ b/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 Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
+import Grid from "@material-ui/core/Grid";
+import Card from "@material-ui/core/Card";
+import Typography from "@material-ui/core/Typography";
 import * 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,7 +98,8 @@ class Assessment extends Component {
              }
            >
              <IconButton
-                className={`showCode ${this.state.codeOn
+                className={`showCode ${
+                  this.state.codeOn
                    ? this.props.classes.codeOn
                    : this.props.classes.codeOff
                }`}
@ -115,7 +112,7 @@ class Assessment extends Component {
                  zIndex: 21,
                }}
                onClick={() => this.onChange()}
-                size="large">
+              >
                <FontAwesomeIcon icon={faCode} size="xs" />
              </IconButton>
            </Tooltip>
--- a/src/components/Tutorial/Builder/BlocklyExample.js
+++ b/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 Switch from "@mui/material/Switch";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import FormHelperText from "@mui/material/FormHelperText";
-import FormLabel from "@mui/material/FormLabel";
-import Button from "@mui/material/Button";
-import Grid from "@mui/material/Grid";
+import { withStyles } from "@material-ui/core/styles";
+import Switch from "@material-ui/core/Switch";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import FormLabel from "@material-ui/core/FormLabel";
+import Button from "@material-ui/core/Button";
+import Grid from "@material-ui/core/Grid";

 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"
              />
            }
          />
--- a/src/components/Tutorial/Builder/Builder.js
+++ b/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 Button from "@mui/material/Button";
-import Backdrop from "@mui/material/Backdrop";
-import CircularProgress from "@mui/material/CircularProgress";
-import Divider from "@mui/material/Divider";
-import FormHelperText from "@mui/material/FormHelperText";
-import Radio from "@mui/material/Radio";
-import RadioGroup from "@mui/material/RadioGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+import Backdrop from "@material-ui/core/Backdrop";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Divider from "@material-ui/core/Divider";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Radio from "@material-ui/core/Radio";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
 import * 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}{" "}
--- a/src/components/Tutorial/Builder/Difficulty.js
+++ b/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 FormControlLabel from "@mui/material/FormControlLabel";
-import FormControl from "@mui/material/FormControl";
-import FormLabel from "@mui/material/FormLabel";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControl from "@material-ui/core/FormControl";
+import FormLabel from "@material-ui/core/FormLabel";

 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>
--- a/src/components/Tutorial/Builder/Hardware.js
+++ b/src/components/Tutorial/Builder/Hardware.js
@ -9,17 +9,14 @@ import {

 import hardware from "../../../data/hardware.json";

-import withStyles from '@mui/styles/withStyles';
-import ImageList from "@mui/material/ImageList";
-import ImageListItem from "@mui/material/ImageListItem";
-import ImageListItemBar from "@mui/material/ImageListItemBar";
-import FormHelperText from "@mui/material/FormHelperText";
-import FormLabel from "@mui/material/FormLabel";
+import { withStyles } from "@material-ui/core/styles";
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
+import ImageList from "@material-ui/core/ImageList";
+import ImageListItem from "@material-ui/core/ImageListItem";
+import ImageListItemBar from "@material-ui/core/ImageListItemBar";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import FormLabel from "@material-ui/core/FormLabel";
 import * 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: {
--- a/src/components/Tutorial/Builder/Id.js
+++ b/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 Button from '@mui/material/Button';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@mui/material/FormControl';
-import FormHelperText from '@mui/material/FormHelperText';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';

 import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
--- a/src/components/Tutorial/Builder/MarkdownEditor.js
+++ b/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";
--- a/src/components/Tutorial/Builder/Media.js
+++ b/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 Switch from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormHelperText from '@mui/material/FormHelperText';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import Button from '@mui/material/Button';
+import { withStyles } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Button from '@material-ui/core/Button';

 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"
              />
--- a/src/components/Tutorial/Builder/Public.js
+++ b/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 FormGroup from "@mui/material/FormGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import FormControl from "@mui/material/FormControl";
-import FormLabel from "@mui/material/FormLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControl from "@material-ui/core/FormControl";
+import FormLabel from "@material-ui/core/FormLabel";

 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" }}
              />
--- a/src/components/Tutorial/Builder/Requirements.js
+++ b/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 Checkbox from '@mui/material/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormLabel from '@mui/material/FormLabel';
-import FormHelperText from '@mui/material/FormHelperText';
-import FormControl from '@mui/material/FormControl';
+import FormGroup from '@material-ui/core/FormGroup';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
 import * as Blockly from 'blockly'
 class Requirements extends Component {

@ -26,13 +26,11 @@ class Requirements extends Component {

  render() {
    return (
-      <FormControl
-        variant="standard"
-        style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
+      <FormControl 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}
--- a/src/components/Tutorial/Builder/Review.js
+++ b/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 FormGroup from "@mui/material/FormGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import FormControl from "@mui/material/FormControl";
-import FormLabel from "@mui/material/FormLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControl from "@material-ui/core/FormControl";
+import FormLabel from "@material-ui/core/FormLabel";

 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" }}
              />
--- a/src/components/Tutorial/Builder/Step.js
+++ b/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 Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
+import { withStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";

 import {
  faPlus,
@ -85,7 +85,7 @@ class Step extends Component {
                className={this.props.classes.button}
                style={index === 0 ? {} : { marginBottom: "5px" }}
                onClick={() => this.props.addStep(index + 1)}
-                size="large">
+              >
                <FontAwesomeIcon icon={faPlus} size="xs" />
              </IconButton>
            </Tooltip>
@ -100,7 +100,7 @@ class Step extends Component {
                    className={this.props.classes.button}
                    style={{ marginBottom: "5px" }}
                    onClick={() => this.props.changeStepIndex(index, index - 1)}
-                    size="large">
+                  >
                    <FontAwesomeIcon icon={faAngleDoubleUp} size="xs" />
                  </IconButton>
                </Tooltip>
@ -113,7 +113,7 @@ class Step extends Component {
                    className={this.props.classes.button}
                    style={{ marginBottom: "5px" }}
                    onClick={() => this.props.changeStepIndex(index, index + 1)}
-                    size="large">
+                  >
                    <FontAwesomeIcon icon={faAngleDoubleDown} size="xs" />
                  </IconButton>
                </Tooltip>
@ -125,7 +125,7 @@ class Step extends Component {
                      this.props.classes.delete
                    )}
                    onClick={() => this.props.removeStep(index)}
-                    size="large">
+                  >
                    <FontAwesomeIcon icon={faTrash} size="xs" />
                  </IconButton>
                </Tooltip>
--- a/src/components/Tutorial/Builder/StepType.js
+++ b/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 RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+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"
        />
--- a/src/components/Tutorial/Builder/Textfield.js
+++ b/src/components/Tutorial/Builder/Textfield.js
@ -9,11 +9,11 @@ import {
  deleteError,
 } from "../../../actions/tutorialBuilderActions";

-import withStyles from '@mui/styles/withStyles';
-import OutlinedInput from "@mui/material/OutlinedInput";
-import InputLabel from "@mui/material/InputLabel";
-import FormControl from "@mui/material/FormControl";
-import FormHelperText from "@mui/material/FormHelperText";
+import { withStyles } from "@material-ui/core/styles";
+import OutlinedInput from "@material-ui/core/OutlinedInput";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import FormHelperText from "@material-ui/core/FormHelperText";

 const styles = (theme) => ({
  multiline: {
--- a/src/components/Tutorial/Hardware.js
+++ b/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 Link from "@mui/material/Link";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import ImageList from "@mui/material/ImageList";
-import ImageListItem from "@mui/material/ImageListItem";
-import ImageListItemBar from "@mui/material/ImageListItemBar";
+import { withStyles } from "@material-ui/core/styles";
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
+import Link from "@material-ui/core/Link";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import ImageList from "@material-ui/core/ImageList";
+import ImageListItem from "@material-ui/core/ImageListItem";
+import ImageListItemBar from "@material-ui/core/ImageListItemBar";

 import { 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)
-      ? isWidthDown("sm", window.innerWidth)
-        ? isWidthDown("xs", window.innerWidth)
+    var cols = isWidthDown("md", this.props.width)
+      ? isWidthDown("sm", this.props.width)
+        ? isWidthDown("xs", this.props.width)
          ? 2
          : 3
        : 4
@ -97,7 +93,7 @@ class Hardware extends Component {
                      className={this.props.classes.expand}
                      aria-label="Vollbild"
                      onClick={() => this.handleClickOpen(hardwareInfo)}
-                      size="large">
+                    >
                      <FontAwesomeIcon icon={faExpandAlt} size="xs" />
                    </IconButton>
                  }
@ -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>
            .
--- a/src/components/Tutorial/HintTutorialExists.js
+++ b/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 Checkbox from "@mui/material/Checkbox";
-import FormControlLabel from "@mui/material/FormControlLabel";
+import { withStyles } from "@material-ui/core/styles";
+import Checkbox from "@material-ui/core/Checkbox";
+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}
--- a/src/components/Tutorial/Instruction.js
+++ b/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 Typography from "@mui/material/Typography";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkGemoji from "remark-gemoji";
--- a/src/components/Tutorial/Requirement.js
+++ b/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 withStyles from '@mui/styles/withStyles';
-import Typography from "@mui/material/Typography";
-import List from "@mui/material/List";
-import Tooltip from "@mui/material/Tooltip";
+import { alpha } from "@material-ui/core/styles";
+import { withStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import List from "@material-ui/core/List";
+import Tooltip from "@material-ui/core/Tooltip";

 import { 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
--- a/src/components/Tutorial/SolutionCheck.js
+++ b/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 IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import Button from "@mui/material/Button";
+import { withStyles } from "@material-ui/core/styles";
+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
+import Button from "@material-ui/core/Button";

 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -62,7 +62,7 @@ class SolutionCheck extends Component {
            className={`solutionCheck ${this.props.classes.compile}`}
            style={{ width: "40px", height: "40px", marginRight: "5px" }}
            onClick={() => this.check()}
-            size="large">
+          >
            <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
          </IconButton>
        </Tooltip>
--- a/src/components/Tutorial/StepperHorizontal.js
+++ b/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 Typography from "@mui/material/Typography";
-import Tooltip from "@mui/material/Tooltip";
-import Button from "@mui/material/Button";
+import { withStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import Tooltip from "@material-ui/core/Tooltip";
+import Button from "@material-ui/core/Button";

 import { 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}
--- a/src/components/Tutorial/StepperVertical.js
+++ b/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 withStyles from '@mui/styles/withStyles';
-import Stepper from "@mui/material/Stepper";
-import Step from "@mui/material/Step";
-import StepLabel from "@mui/material/StepLabel";
-import Tooltip from "@mui/material/Tooltip";
+import { alpha } from "@material-ui/core/styles";
+import { withStyles } from "@material-ui/core/styles";
+import Stepper from "@material-ui/core/Stepper";
+import Step from "@material-ui/core/Step";
+import StepLabel from "@material-ui/core/StepLabel";
+import Tooltip from "@material-ui/core/Tooltip";

 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",
-    height: "1rem",
+    width: "24px",
+    height: "24px",
  },
  stepIconLargeSuccess: {
    borderColor: theme.palette.primary.main,
--- a/src/components/Tutorial/Tutorial.js
+++ b/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 Button from "@mui/material/Button";
+import Card from "@material-ui/core/Card";
+import Button from "@material-ui/core/Button";

 class Tutorial extends Component {
  componentDidMount() {
--- a/src/components/Tutorial/TutorialHome.js
+++ b/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 withStyles from '@mui/styles/withStyles';
-import Grid from "@mui/material/Grid";
-import Paper from "@mui/material/Paper";
-import Typography from "@mui/material/Typography";
+import { alpha } from "@material-ui/core/styles";
+import { withStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import Typography from "@material-ui/core/Typography";

 import {
  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 IconButton from "@mui/material/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
+import IconButton from "@material-ui/core/IconButton";
 import Snackbar from "../Snackbar";
-import Divider from "@mui/material/Divider";
-import DeviceSelection from "../DeviceSelection";
+import Divider from "@material-ui/core/Divider";

 const styles = (theme) => ({
  outerDiv: {
@ -244,10 +243,13 @@ 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>
                        )}
@ -263,7 +265,8 @@ 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>
@ -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,7 +381,7 @@ class TutorialHome extends Component {
                                  type: "success",
                                });
                              }}
-                              size="large">
+                            >
                              <FontAwesomeIcon icon={faShareAlt} size="xs" />
                            </IconButton>
                          </Tooltip>
@ -391,7 +392,7 @@ class TutorialHome extends Component {
                            <IconButton
                              className={`publicTutorial ${this.props.classes.button}`}
                              disabled={!tutorial.public}
-                              size="large">
+                            >
                              <FontAwesomeIcon icon={faEye} size="xs" />
                            </IconButton>
                          </Tooltip>
@ -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>
--- a/src/components/User/Account.js
+++ b/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 List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import Divider from '@mui/material/Divider';
-import Paper from '@mui/material/Paper';
-import Link from '@mui/material/Link';
-import Typography from '@mui/material/Typography';
-import Tooltip from '@mui/material/Tooltip';
+import Grid from '@material-ui/core/Grid';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Divider from '@material-ui/core/Divider';
+import Paper from '@material-ui/core/Paper';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';

 import { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox, faUserTag } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -30,12 +30,7 @@ export class Account extends Component {

        <h1>Account</h1>
        <Alert>
-          Alle Angaben stammen von <Link
-          color='primary'
-          rel="noreferrer"
-          target="_blank"
-          href={'https://opensensemap.org/'}
-          underline="hover">openSenseMap</Link> und können dort verwaltet werden.
+          Alle Angaben stammen von <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> und können dort verwaltet werden.
        </Alert>
        <Paper style={{ width: 'max-content', maxWidth: '100%' }}>
          <List>
@ -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
-              color='primary'
-              rel="noreferrer"
-              target="_blank"
-              href={'https://opensensemap.org/'}
-              underline="hover">openSenseMap</Link> um eine senseBox zu registrieren.
+              Du hast noch keine senseBox registriert. Besuche <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>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
-                  rel="noreferrer"
-                  target="_blank"
-                  href={`https://opensensemap.org/explore/${box._id}`}
-                  color="primary"
-                  style={{ textDecoration: 'none', color: 'inherit' }}
-                  underline="hover">
+                <Link rel="noreferrer" target="_blank" href={`https://opensensemap.org/explore/${box._id}`} color="primary" style={{ textDecoration: 'none', color: 'inherit' }}>
                  <Paper>
                    <List>
                      <ListItem>
@ -132,7 +116,7 @@ export class Account extends Component {
                  </Paper>
                </Link>
              </Grid>
-            );
+            )
          })}
        </Grid>
      </div>
--- a/src/components/User/Login.js
+++ b/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 IconButton from "@mui/material/IconButton";
+import Button from "@material-ui/core/Button";
+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 Divider from "@mui/material/Divider";
-import InputAdornment from "@mui/material/InputAdornment";
-import CircularProgress from "@mui/material/CircularProgress";
-import Link from "@mui/material/Link";
+import TextField from "@material-ui/core/TextField";
+import Divider from "@material-ui/core/Divider";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Link from "@material-ui/core/Link";
 import * 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>
            .
--- a/src/components/Workspace/Compile.js
+++ b/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 Button from "@mui/material/Button";
-import Backdrop from "@mui/material/Backdrop";
-import CircularProgress from "@mui/material/CircularProgress";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import Divider from "@mui/material/Divider";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+import Backdrop from "@material-ui/core/Backdrop";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
+import Divider from "@material-ui/core/Divider";
 import { 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,7 +188,7 @@ class Compile extends Component {
            <IconButton
              className={`compileBlocks ${this.props.classes.iconButton}`}
              onClick={() => this.compile()}
-              size="large">
+            >
              <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
            </IconButton>
          </Tooltip>
@ -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>
--- a/src/components/Workspace/CopyCode.js
+++ b/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 Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";

 import { 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>
--- a/src/components/Workspace/DeleteProject.js
+++ b/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 IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';

 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -61,7 +61,7 @@ class DeleteProject extends Component {
          <IconButton
            className={this.props.classes.buttonTrash}
            onClick={() => this.props.deleteProject(this.props.projectType, this.props.project._id)}
-            size="large">
+          >
            <FontAwesomeIcon icon={faTrashAlt} size="xs" />
          </IconButton>
        </Tooltip>
--- a/src/components/Workspace/DownloadProject.js
+++ b/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 IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';

 import { faFileDownload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -46,7 +46,7 @@ class DownloadProject extends Component {
          <IconButton
            className={`saveBlocks ${this.props.classes.button}`}
            onClick={() => this.downloadXmlFile()}
-            size="large">
+          >
            <FontAwesomeIcon icon={faFileDownload} size="xs" />
          </IconButton>
        </Tooltip>
--- a/src/components/Workspace/OpenProject.js
+++ b/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 Tooltip from '@mui/material/Tooltip';
+import { withStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';

 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
--- a/src/components/Workspace/ResetWorkspace.js
+++ b/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 IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+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: {
@ -81,7 +81,7 @@ class ResetWorkspace extends Component {
          <IconButton
            className={this.props.classes.button}
            onClick={() => this.openDialog()}
-            size="large">
+          >
            <FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
          </IconButton>
        </Tooltip>
--- a/src/components/Workspace/SaveProject.js
+++ b/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 Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import TextField from '@mui/material/TextField';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import TextField from '@material-ui/core/TextField';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';

 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -133,7 +133,7 @@ class SaveProject extends Component {
          <IconButton
            className={this.props.classes.button}
            onClick={this.props.user.blocklyRole !== 'user' && (!this.props.project || this.props.user.email === this.props.project.creator) ? (e) => this.toggleMenu(e) : this.state.projectType === 'project' ? () => this.props.updateProject(this.state.projectType, this.props.project._id) : () => { this.setState({ projectType: 'project' }, () => this.saveProject()) }}
-            size="large">
+          >
            <FontAwesomeIcon icon={faSave} size="xs" />
          </IconButton>
        </Tooltip>
@ -178,15 +178,7 @@ class SaveProject extends Component {
          button={'Abbrechen'}
        >
          <div style={{ marginTop: '10px' }}>
-            <TextField
-              variant="standard"
-              autoFocus
-              fullWidth
-              multiline
-              placeholder={'Projektbeschreibung'}
-              value={this.state.description}
-              onChange={this.setDescription}
-              style={{ marginBottom: '10px' }} />
+            <TextField 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>
--- a/src/components/Workspace/Screenshot.js
+++ b/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 IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
+import { withStyles } from "@material-ui/core/styles";
+import IconButton from "@material-ui/core/IconButton";
+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>
--- a/src/components/Workspace/ShareProject.js
+++ b/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 IconButton from "@mui/material/IconButton";
-import Button from '@mui/material/Button';
-import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
+import { withStyles } from "@material-ui/core/styles";
+import IconButton from "@material-ui/core/IconButton";
+import Button from '@material-ui/core/Button';
+import Tooltip from "@material-ui/core/Tooltip";
+import Typography from "@material-ui/core/Typography";

 import { 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>
--- a/src/components/Workspace/TrashcanButtons.js
+++ b/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 Tooltip from '@mui/material/Tooltip';
-import withStyles from '@mui/styles/withStyles';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import { withStyles } from '@material-ui/core/styles';

 import { faTimes, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -56,14 +56,15 @@ class TrashcanButtons extends Component {
  }

  render() {
-    return this.state.closeTrashFlyout ?
+    return (
+      this.state.closeTrashFlyout ?
        <div>
          <Tooltip title={Blockly.Msg.tooltip_trashcan_hide}>
            <IconButton
              className={this.props.classes.closeTrash}
              style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }}
              onClick={() => this.closeTrashcan()}
-            size="large">
+            >
              <FontAwesomeIcon icon={faTimes} size="xs" />
            </IconButton>
          </Tooltip>
@ -72,12 +73,13 @@ class TrashcanButtons extends Component {
              className={this.props.classes.deleteTrash}
              style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }}
              onClick={() => this.clearTrashcan()}
-            size="large">
+            >
              <FontAwesomeIcon icon={faTrash} size="xs" />
            </IconButton>
          </Tooltip>
        </div>
-      : null;
+        : null
+    );
  };
 }

--- a/src/components/Workspace/WorkspaceName.js
+++ b/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 Button from "@mui/material/Button";
-import Tooltip from "@mui/material/Tooltip";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+import Tooltip from "@material-ui/core/Tooltip";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";

 import { 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,7 +105,8 @@ 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%" }}
@ -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>
@ -190,31 +187,31 @@ class WorkspaceName extends Component {
            this.state.projectType === "gallery" ? (
              <div>
                <TextField
-                  variant="standard"
                  autoFocus
                  placeholder={
                    this.state.saveXml ? "Dateiname" : "Projekttitel"
                  }
                  value={this.state.name}
                  onChange={this.setFileName}
-                  style={{ marginBottom: "10px" }} />
+                  style={{ marginBottom: "10px" }}
+                />
                <TextField
-                  variant="standard"
                  fullWidth
                  multiline
                  placeholder={"Projektbeschreibung"}
                  value={this.state.description}
                  onChange={this.setDescription}
-                  style={{ marginBottom: "10px" }} />
+                  style={{ marginBottom: "10px" }}
+                />
              </div>
            ) : (
              <TextField
-                variant="standard"
                autoFocus
                placeholder={this.state.saveXml ? "Dateiname" : "Projekttitel"}
                value={this.state.name}
                onChange={this.setFileName}
-                style={{ marginRight: "10px" }} />
+                style={{ marginRight: "10px" }}
+              />
            )}
            <Button
              disabled={!this.state.name}
--- a/src/components/Workspace/WorkspaceStats.js
+++ b/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 Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import Chip from "@mui/material/Chip";
-import Avatar from "@mui/material/Avatar";
-import Popover from "@mui/material/Popover";
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
+import { withStyles } from "@material-ui/core/styles";
+import Tooltip from "@material-ui/core/Tooltip";
+import IconButton from "@material-ui/core/IconButton";
+import Chip from "@material-ui/core/Chip";
+import Avatar from "@material-ui/core/Avatar";
+import Popover from "@material-ui/core/Popover";

 import {
  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>
--- a/src/data/mcu_opacity.png
+++ b/src/data/mcu_opacity.png
--- a/src/data/mini_opacity.png
+++ b/src/data/mini_opacity.png
--- a/src/helpers/compareXml.js
+++ b/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: `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'};
+      return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu wenig verwendet.`, type: 'error'};
    }
    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: `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'};
+      return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu viel verwendet.`, type: 'error'};
    }
  }
 };
--- a/Show More
+++ b/Show More