Merge pull request #238 from sensebox/dev/update-mini-ports

update ports for senseBox MCU mini

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/short-issue.md

@@ -0,0 +1,14 @@
+---
+name: Short Issue
+about: Template for Short Issues
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+### Current behaviour
+Describe the current behaviour
+
+### Expected behaviour
+Describe how it is supposed to work

package.json

@@ -3,23 +3,27 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@blockly/block-plus-minus": "^3.0.5",
+    "@blockly/block-plus-minus": "^4.0.4",
-    "@blockly/field-grid-dropdown": "^1.0.31",
+    "@blockly/field-grid-dropdown": "^2.0.4",
-    "@blockly/field-slider": "^3.0.5",
+    "@blockly/field-slider": "4.0.4",
-    "@blockly/plugin-scroll-options": "^2.0.5",
+    "@blockly/plugin-scroll-options": "^3.0.5",
-    "@blockly/plugin-typed-variable-modal": "^4.0.5",
+    "@blockly/plugin-typed-variable-modal": "^5.0.6",
-    "@blockly/workspace-backpack": "^2.0.12",
+    "@blockly/workspace-backpack": "^3.0.4",
-    "@blockly/zoom-to-fit": "^2.0.14",
+    "@blockly/zoom-to-fit": "^3.0.4",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@emotion/react": "^11.10.5",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@emotion/styled": "^11.10.5",
-    "@fortawesome/react-fontawesome": "^0.1.19",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@material-ui/core": "^4.12.4",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@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": "^8.0.3",
+    "blockly": "^9.2.0",
     "file-saver": "^2.0.5",
     "markdown-it": "^12.3.2",
     "mnemonic-id": "^3.2.7",
@@ -35,12 +39,13 @@
     "react-rating-stars-component": "^2.2.0",
     "react-redux": "^7.2.9",
     "react-router-dom": "^5.3.3",
-    "react-scripts": "^5.0.0",
+    "react-scripts": "^5.0.1",
     "react-share": "^4.4.0",
     "react-spinners": "^0.13.3",
     "reactour": "^1.18.7",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
+    "rehype-raw": "^6.1.1",
     "remark-gemoji": "^7.0.1",
     "remark-gfm": "^3.0.1",
     "styled-components": "^4.4.1",

src/App.css

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

src/App.js

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

src/actions/boardAction.js

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

src/actions/sensorwikiActions.js

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

src/actions/workspaceActions.js

@@ -16,13 +16,19 @@ 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.selected
+  var selectedBlock = Blockly.getSelected();
   if (selectedBlock !== null) {
     code.helpurl = selectedBlock.helpUrl
     code.tooltip = selectedBlock.tooltip
+    if (selectedBlock.data) {
+      code.data = selectedBlock.data
+    } else {
+      code.data = null
+    }
   } else if (selectedBlock === null) {
     code.tooltip = Blockly.Msg.tooltip_hint
     code.helpurl = ''
+    code.data = null
   }
 
 

src/components/Alert.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import { alpha } from "@material-ui/core/styles";
+import { alpha } from "@mui/material/styles";
 
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 
 const styles = (theme) => ({
   alert: {

src/components/Blockly/BlocklyComponent.jsx

@@ -27,7 +27,7 @@ import Blockly from "blockly/core";
 import "blockly/blocks";
 import Toolbox from "./toolbox/Toolbox";
 
-import { Card } from "@material-ui/core";
+import { Card } from "@mui/material";
 import {
   ScrollOptions,
   ScrollBlockDragger,

src/components/Blockly/BlocklyWindow.js

@@ -45,6 +45,7 @@ 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);
@@ -62,6 +63,7 @@ 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);

src/components/Blockly/blocks/index.js

@@ -10,6 +10,7 @@ import "./sensebox-motors";
 import "./sensebox-lora";
 import "./sensebox-led";
 import "./sensebox-rtc";
+import "./sensebox-ntp";
 import "./sensebox-ble";
 import "./sensebox-sd";
 import "./mqtt";

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

@@ -0,0 +1,42 @@
+import * as Blockly from "blockly";
+import { getColour } from "../helpers/colour";
+import * as Types from "../helpers/types";
+
+Blockly.Blocks["sensebox_ntp_init"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_ntp_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_ntp_init);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.sensebox_ntp_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_ntp_get"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_ntp_get_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_ntp_get)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.sensebox_ntp_epochTime, "getEpochTime"],
+          [Blockly.Msg.sensebox_ntp_formattedTimeStamp, "getFormattedTime"],
+        ]),
+        "dropdown"
+      );
+    this.setOutput(true, Types.LARGE_NUMBER.typeName);
+    this.setTooltip(Blockly.Msg.sensebox_rtc_get_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_ntp_get_timestamp"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_rtc_get_timestamp);
+    this.setOutput(true);
+    this.setTooltip(Blockly.Msg.sensebox_rtc_get_timestamp_tooltip);
+  },
+};

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

@@ -76,3 +76,67 @@ Blockly.Blocks["sensebox_rtc_get_timestamp"] = {
     this.setTooltip(Blockly.Msg.sensebox_rtc_get_timestamp_tooltip);
   },
 };
+
+/**
+ *  Internal RTC
+ *
+ */
+
+Blockly.Blocks["sensebox_internal_rtc_init"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_internal_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_internal_rtc_init);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.sensebox_internal_rtc_init_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_internal_rtc_set"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendValueInput("time").appendField(
+      Blockly.Msg.sensebox_internal_rtc_set
+    );
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.sensebox_internal_rtc_set_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_internal_rtc_get"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_internal_rtc_get)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.sensebox_internal_rtc_epoch, "Epoch"],
+          [Blockly.Msg.sensebox_internal_rtc_year, "Year"],
+          [Blockly.Msg.sensebox_internal_rtc_month, "Month"],
+          [Blockly.Msg.sensebox_internal_rtc_day, "Day"],
+          [Blockly.Msg.sensebox_internal_rtc_hour, "Hours"],
+          [Blockly.Msg.sensebox_internal_rtc_minutes, "Minutes"],
+          [Blockly.Msg.sensebox_internal_rtc_seconds, "Seconds"],
+        ]),
+        "dropdown"
+      );
+    this.setOutput(true, Types.LARGE_NUMBER.typeName);
+    this.setTooltip(Blockly.Msg.sensebox_internal_rtc_get_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_internal_rtc_get_timestamp"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_internal_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(
+      Blockly.Msg.sensebox_internal_rtc_get_timestamp
+    );
+    this.setOutput(true);
+    this.setTooltip(Blockly.Msg.sensebox_internal_rtc_get_timestamp_tooltip);
+  },
+};

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

@@ -26,6 +26,7 @@ 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"};
   },
 };
 
@@ -51,6 +52,7 @@ 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"};
   },
 };
 
@@ -91,6 +93,7 @@ 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"};
   },
 };
 
@@ -115,13 +118,14 @@ Blockly.Blocks["sensebox_sensor_sds011"] = {
       .appendField(Blockly.Msg.senseBox_sds011_dimension)
       .appendField(
         new Blockly.FieldDropdown(
-          selectedBoard().serial),
+          selectedBoard().serialSensors),
         "SERIAL"
       );
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_sds011_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_sds011_helpurl);
+    this.data = {name: "sds011"};
   },
 };
 
@@ -155,6 +159,7 @@ 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");
@@ -186,7 +191,7 @@ Blockly.Blocks["sensebox_sensor_bme680_bsec"] = {
     var dropdownOptions = [
       [Blockly.Msg.senseBox_temp, "temperature"],
       [Blockly.Msg.senseBox_hum, "humidity"],
-      [Blockly.Msg.senseBox_pressure, "pressure"],
+      [Blockly.Msg.senseBox_bme_pressure, "pressure"],
       [Blockly.Msg.senseBox_bme_iaq, "IAQ"],
       [Blockly.Msg.senseBox_bme_iaq_accuracy, "IAQAccuracy"],
       [Blockly.Msg.senseBox_bme_co2, "CO2"],
@@ -201,6 +206,7 @@ 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"};
   },
 };
 
@@ -212,12 +218,7 @@ Blockly.Blocks["sensebox_sensor_bme680_bsec"] = {
 
 Blockly.Blocks["sensebox_sensor_ultrasonic_ranger"] = {
   init: function () {
-    var dropdownOptions = [
+    var dropdown = new FieldGridDropdown(selectedBoard().digitalPorts, function (option) {
-      [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);
     });
@@ -245,6 +246,7 @@ 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.
@@ -329,6 +331,7 @@ 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"
       )
@@ -382,6 +385,7 @@ 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");
@@ -425,17 +429,12 @@ Blockly.Blocks["sensebox_gps"] = {
  */
 
 Blockly.Blocks["sensebox_sensor_truebner_smt50"] = {
-  init: function () {
+  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(dropdownOptions), "Port");
+      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPorts), "Port");
     this.appendDummyInput()
       .appendField(Blockly.Msg.senseBox_value)
       .appendField(
@@ -448,6 +447,7 @@ 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,18 +458,15 @@ 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(dropdownOptions), "Port");
+      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPorts), "Port");
     this.setOutput(true, Types.NUMBER.typeName);
     this.setTooltip(Blockly.Msg.senseBox_watertemperature_tip);
+    this.data = {name: "ds18b20"};
   },
 };
 
@@ -496,16 +493,11 @@ 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(dropdownOptions), "Port");
+      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPorts), "Port");
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setTooltip(Blockly.Msg.senseBox_soundsensor_dfrobot_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_soundsensor_dfrobot_helpurl);
@@ -542,6 +534,7 @@ 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");
@@ -562,3 +555,31 @@ Blockly.Blocks["sensebox_sensor_dps310"] = {
     }
   },
 };
+
+/**
+ * Sensirion SPS30 Fine Particular Matter Sensor
+ * added 02.12.2022 
+ */
+
+ Blockly.Blocks["sensebox_sensor_sps30"] = {
+  init: function () {
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_sps30);
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_value)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_sps30_1p0, "1p0"],
+          [Blockly.Msg.senseBox_sps30_2p5, "2p5"],
+          [Blockly.Msg.senseBox_sps30_4p0, "4p0"],
+          [Blockly.Msg.senseBox_sps30_10p0, "10p0"],
+        ]),
+        "value"
+      )
+      .appendField(Blockly.Msg.senseBox_sps30_dimension);
+    this.setOutput(true, Types.DECIMAL.typeName);
+    this.setColour(getColour().sensebox);
+    this.setTooltip(Blockly.Msg.senseBox_sps30_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_sps30_helpurl);
+  },
+};

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("set", "set")
+      .appendField(Blockly.Msg.variables_set, Blockly.Msg.variables_set)
       .appendField("", "type")
       .appendField(new Blockly.FieldVariable("VAR"), "VAR")
-      .appendField("to");
+      .appendField(Blockly.Msg.variables_to);
   },
   onchange: function (e) {
     let variableID = this.getFieldValue("VAR");

src/components/Blockly/generator/index.js

@@ -10,6 +10,7 @@ import "./sensebox-lora";
 import "./sensebox-led";
 import "./sensebox";
 import "./sensebox-rtc";
+import "./sensebox-ntp";
 import "./sensebox-ble";
 import "./sensebox-sd";
 import "./mqtt";

src/components/Blockly/generator/math.js

@@ -275,10 +275,15 @@ Blockly.Arduino["math_change"] = function (block) {
       "DELTA",
       Blockly.Arduino.ORDER_ADDITIVE
     ) || "0";
-  var varName = Blockly.Arduino.nameDB_.getName(
+  var id = block.getFieldValue("VAR")
-    block.getFieldValue("VAR"),
+  const varName = Blockly.Variables.getVariable(
-    Blockly.Variables.NAME_TYPE
+      Blockly.getMainWorkspace(),
-  );
+      id
+    ).name;
+  // var varName = Blockly.Arduino.nameDB_.getName(
+  //   block.getFieldValue("VAR"),
+  //   Blockly.Variables.NAME_TYPE
+  // );
   return varName + " += " + argument0 + ";\n";
 };
 

src/components/Blockly/generator/sensebox-ntp.js

@@ -0,0 +1,19 @@
+import Blockly from "blockly";
+
+Blockly.Arduino.sensebox_ntp_init = function () {
+  Blockly.Arduino.libraries_["WiFiUdp"] = `#include <WiFiUdp.h>`;
+  Blockly.Arduino.libraries_["NTPClient"] = `#include <NTPClient.h>`;
+  Blockly.Arduino.definitions_["WiFiUDP"] = `WiFiUDP ntpUDP;`;
+  Blockly.Arduino.definitions_["NTPClient"] = `NTPClient timeClient(ntpUDP);`;
+  Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
+  Blockly.Arduino.setupCode_["timeclient.begin"] = `timeClient.begin();`;
+  Blockly.Arduino.setupCode_["timeclient.update"] = `timeClient.update();`;
+  var code = ``;
+  return code;
+};
+
+Blockly.Arduino.sensebox_ntp_get = function () {
+  var format = this.getFieldValue("dropdown");
+  var code = `timeClient.${format}()`;
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
+};

src/components/Blockly/generator/sensebox-rtc.js

@@ -94,3 +94,46 @@ uint8_t sec, min, hour, day, month;
   var code = `getTimeStamp()`;
   return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
+
+Blockly.Arduino.sensebox_internal_rtc_init = function () {
+  Blockly.Arduino.libraries_["RTClib"] = `#include <RTCZero.h>`;
+  Blockly.Arduino.definitions_["RTC"] = `RTCZero rtc;`;
+  Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
+  Blockly.Arduino.setupCode_["rtc.begin"] = `rtc.begin();`;
+  return "";
+};
+
+Blockly.Arduino.sensebox_internal_rtc_set = function () {
+  var branch =
+    Blockly.Arduino.valueToCode(this, "time", Blockly.Arduino.ORDER_ATOMIC) ||
+    "0";
+  Blockly.Arduino.setupCode_["rtc.setEpoch"] = `rtc.setEpoch(${branch});`;
+  var code = ``;
+  return code;
+};
+
+Blockly.Arduino.sensebox_internal_rtc_get = function () {
+  var dropdown = this.getFieldValue("dropdown");
+  var code = `rtc.get${dropdown}()`;
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
+};
+
+Blockly.Arduino.sensebox_internal_rtc_get_timestamp = function () {
+  Blockly.Arduino.variables_["rtc_timestamp"] = `char timestamp[20];`;
+  Blockly.Arduino.codeFunctions_["getTimeStamp"] = `
+char* getTimeStamp() {
+uint8_t sec, min, hour, day, month;
+ uint16_t year;
+sec = rtc.getSeconds();
+min = rtc.getMinutes();
+hour = rtc.getHours();
+day = rtc.getDay();
+month = rtc.getMonth();
+year = rtc.getYear();
+ sprintf(timestamp, "%02d-%02d-%02dT%02d:%02d:%02dZ", year, month, day, hour, min, sec);
+ return timestamp;
+ }
+  `;
+  var code = `getTimeStamp()`;
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
+};

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

@@ -399,6 +399,7 @@ 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 + ""] =
@@ -413,6 +414,10 @@ 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];
 };
@@ -429,11 +434,13 @@ Blockly.Arduino.sensebox_scd30 = function () {
     "#include <SparkFun_SCD30_Arduino_Library.h> // http://librarymanager/All#SparkFun_SCD30_Arduino_Library";
   Blockly.Arduino.definitions_["SCD30"] = "SCD30 airSensor;";
   Blockly.Arduino.setupCode_["init_scd30"] = ` Wire.begin();
-  if (airSensor.begin() == false)
+if (airSensor.begin() == false)
-  {
+{
-    while (1)
+  while (1)
-      ;
+    ;
-  }`;
+}`;
+  Blockly.Arduino.setupCode_["scd30_staleData"] =
+    "airSensor.useStaleData(true);";
   var code = "";
   switch (dropdown) {
     case "temperature":
@@ -692,3 +699,57 @@ Blockly.Arduino.sensebox_sensor_dps310 = function () {
   }
   return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
+
+/**
+ * Sensirion SPS30 Fine Particlar Matter
+ *
+ */
+
+Blockly.Arduino.sensebox_sensor_sps30 = function () {
+  var dropdown_name = this.getFieldValue("value");
+  Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
+  Blockly.Arduino.libraries_[
+    "sps30"
+  ] = `#include <sps30.h> // http://librarymanager/All#`;
+  Blockly.Arduino.variables_["sps30_measurement"] =
+    "struct sps30_measurement m;";
+  Blockly.Arduino.variables_["sps30_auto_clean_days"] =
+    "uint32_t auto_clean_days = 4;";
+  Blockly.Arduino.variables_["sps30_interval_intervalsps"] =
+    "const long intervalsps = 1000;";
+  Blockly.Arduino.variables_["sps30_time_startsps"] =
+    "unsigned long time_startsps = 0;";
+  Blockly.Arduino.variables_["sps30_time_actualsps"] =
+    "unsigned long time_actualsps = 0;";
+  Blockly.Arduino.codeFunctions_["sps30_getData"] = `
+void getSPS30Data(){
+
+uint16_t data_ready;
+int16_t ret;
+      
+do {
+    ret = sps30_read_data_ready(&data_ready);
+    if (ret < 0) { 
+    } else if (!data_ready)  {}
+    else
+        break;
+        delay(100); /* retry in 100ms */
+    } while (1);
+    ret = sps30_read_measurement(&m); 
+}
+  `;
+
+  Blockly.Arduino.setupCode_["sps30_begin"] = "sensirion_i2c_init();";
+  Blockly.Arduino.setupCode_["sps30_setFanCleaningInterval"] =
+    "sps30_set_fan_auto_cleaning_interval_days(auto_clean_days);";
+  Blockly.Arduino.setupCode_["sps30_startMeasurement"] =
+    "sps30_start_measurement();";
+  Blockly.Arduino.loopCodeOnce_["getSPS30Data();"] = `
+time_startsps = millis();
+if (time_startsps > time_actualsps + intervalsps) {
+  time_actualsps = millis();
+  getSPS30Data();
+}`;
+  var code = `m.mc_${dropdown_name}`;
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
+};

src/components/Blockly/helpers/board.js

@@ -13,6 +13,11 @@ const sensebox_mcu = {
     ["C5", "5"],
     ["C6", "6"],
   ],
+  digitalPorts: [
+    ["A", "A"],
+    ["B", "B"],
+    ["C", "C"],
+  ],
   digitalPinsLED: [
     ["BUILTIN_1", "7"],
     ["BUILTIN_2", "8"],
@@ -46,9 +51,13 @@ const sensebox_mcu = {
     ["C6", "6"],
   ],
   serial: [
-    ["serial", "SerialUSB"],
+    ["SerialUSB", "SerialUSB"],
-    ["serial_1", "Serial1"],
+    ["Serial1", "Serial1"],
-    ["serial_2", "Serial2"],
+    ["Serial2", "Serial2"],
+  ],
+  serialSensors: [
+    ["Serial1", "Serial1"],
+    ["Serial2", "Serial2"],
   ],
   serialPins: {
     SerialUSB: [
@@ -139,6 +148,9 @@ const sensebox_mini = {
     ["IO1", "1"],
     ["IO2", "2"],
   ],
+  digitalPorts: [
+    ["IO1-2", "A"],
+  ],
   digitalPinsLED: [
     ["BUILTIN_1", "7"],
     ["BUILTIN_2", "8"],
@@ -147,8 +159,7 @@ const sensebox_mini = {
   ],
   digitalPinsRGB: [
     ["on Board", "6"],
-    ["IO1", "1"],
+    ["IO1-2", "1"],
-    ["IO2", "2"],
   ],
   digitalPinsButton: [
     ["on Board", "0"],
@@ -161,8 +172,11 @@ const sensebox_mini = {
     ["IO2", "2"],
   ],
   serial: [
-    ["serial", "SerialUSB"],
+    ["SerialUSB", "SerialUSB"],
-    ["serial_1", "Serial1"],
+    ["Serial1", "Serial1"],
+  ],
+  serialSensors: [
+    ["Serial1", "Serial1"],
   ],
   serialPins: {
     SerialUSB: [

src/components/Blockly/helpers/maxInstances.js

@@ -13,6 +13,8 @@ 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,
 };
 

src/components/Blockly/index.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * 
+ *
  * Copyright 2019 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,39 +21,51 @@
  * @author samelh@google.com (Sam El-Husseini)
  */
 
- import React from 'react';
+import React from "react";
-import BlocklyComponent from './BlocklyComponent';
+import BlocklyComponent from "./BlocklyComponent";
 
 export default BlocklyComponent;
 
 const Block = (p) => {
-    const { children, ...props } = p;
+  const { children, ...props } = p;
-    props.is = "blockly";
+  props.is = "blockly";
-    return React.createElement("block", props, children);
+  return React.createElement("block", props, children);
 };
 
 const Category = (p) => {
-    const { children, ...props } = p;
+  const { children, ...props } = p;
-    props.is = "blockly";
+  props.is = "blockly";
-    return React.createElement("category", props, children);
+  return React.createElement("category", props, children);
 };
 
 const Value = (p) => {
-    const { children, ...props } = p;
+  const { children, ...props } = p;
-    props.is = "blockly";
+  props.is = "blockly";
-    return React.createElement("value", props, children);
+  return React.createElement("value", props, children);
 };
 
 const Field = (p) => {
-    const { children, ...props } = p;
+  const { children, ...props } = p;
-    props.is = "blockly";
+  props.is = "blockly";
-    return React.createElement("field", props, children);
+  return React.createElement("field", props, children);
 };
 
 const Shadow = (p) => {
-    const { children, ...props } = p;
+  const { children, ...props } = p;
-    props.is = "blockly";
+  props.is = "blockly";
-    return React.createElement("shadow", props, children);
+  return React.createElement("shadow", props, children);
 };
 
-export { Block, Category, Value, Field, Shadow }
+const Sep = (p) => {
+  const { children, ...props } = p;
+  props.is = "blockly";
+  return React.createElement("sep", props, children);
+};
+
+const Label = (p) => {
+  const { children, ...props } = p;
+  props.is = "blockly";
+  return React.createElement("label", props, children);
+};
+
+export { Block, Category, Value, Field, Shadow, Sep, Label };

src/components/Blockly/msg/de.js

@@ -12,6 +12,7 @@ import { LED } from "./de/sensebox-led";
 import { LORA } from "./de/sensebox-lora";
 import { OSEM } from "./de/sensebox-osem";
 import { RTC } from "./de/sensebox-rtc";
+import { NTP } from "./de/sensebox-ntp";
 import { SD } from "./de/sensebox-sd";
 import { SENSORS } from "./de/sensebox-sensors";
 import { SENSEBOX } from "./de/sensebox";
@@ -40,6 +41,7 @@ export const De = {
   ...LORA,
   ...OSEM,
   ...RTC,
+  ...NTP,
   ...SD,
   ...SENSORS,
   ...SENSEBOX,

src/components/Blockly/msg/de/sensebox-ntp.js

@@ -0,0 +1,11 @@
+export const NTP = {
+  sensebox_ntp_init: "Initialisiere NTP",
+  sensebox_ntp_init_tooltip: "Initialisiere den NTP Server.",
+  sensebox_ntp_get: "Hole Zeit von NTP Server: ",
+  sensebox_ntp_get_timestamp_tooltip:
+    "Gibt dir einen in ISO 8601 formatierten Zeitstempel zurück. Bsp: 2021-12-24T18:21Z",
+  sensebox_ntp_get_tooltip:
+    "Gibt dir den ausgewählten Wert zurück. Unix Zeit entspricht der Anzahl der Sekunden seit dem 1.1.1970",
+  sensebox_ntp_epochTime: "Unix Zeit",
+  sensebox_ntp_formattedTimeStamp: "Zeitstempel (hh:mm:ss)",
+};

src/components/Blockly/msg/de/sensebox-rtc.js

@@ -1,14 +1,14 @@
 export const RTC = {
-  sensebox_rtc_init: "Initialisiere RTC",
+  sensebox_rtc_init: "Initialisiere externe RTC",
   sensebox_rtc_init_tooltip:
     "Initialisiere die RTC. Schließe diese an einen der 5 I2C/Wire Anschlüsse an und lege die Batterie ein. Bevor du die Uhrzeit auslesen kannst muss diese zunächst einmal gesetzt werden. Dieser Schritt muss normalerweise nur einmalig durchgeführt werden.",
-  sensebox_rtc_set: "Setze Uhrzeit/Datum der RTC",
+  sensebox_rtc_set: "Setze Uhrzeit/Datum der externen RTC",
   sensebox_rtc_set_tooltip:
     "Stellt die Uhrzeit der RTC ein. Beachte, dass du diesen Block im Setup ausführst.",
-  sensebox_rtc_get_timestamp: "Zeitstempel (RFC 3339)",
+  sensebox_rtc_get_timestamp: "Zeitstempel externe RTC (RFC 3339)",
   sensebox_rtc_get_timestamp_tooltip:
     "Gibt dir einen in ISO 8601 formatierten Zeitstempel zurück. Bsp: 2021-12-24T18:21Z",
-  sensebox_rtc_get: "Wert: ",
+  sensebox_rtc_get: "Wert (externe RTC): ",
   sensebox_rtc_get_tooltip: "Gibt dir den ausgewählten Wert zurück.",
   sensebox_rtc_second: "Sekunden",
   sensebox_rtc_minutes: "Minuten",
@@ -16,4 +16,22 @@ export const RTC = {
   sensebox_rtc_day: "Tag",
   sensebox_rtc_month: "Monat",
   sensebox_rtc_year: "Jahr",
+  sensebox_internal_rtc_init: "Initialisiere interne RTC",
+  sensebox_internal_rtc_init_tooltip:
+    "Initialisieren der internen RTC. Diese RTC ist nicht batteriegepuffert und wird bei jedem Einschaltvorgang zurückgesetzt",
+  sensebox_internal_rtc_set: "Setze interne RTC Zeit/Datum (Unix Time)",
+  sensebox_internal_rtc_set_tooltip:
+    "Setzt die Zeit der internen RTC. Führe den Block einmalig im Setup aus und setzte die Uhrzeit über die Unix Zeit.",
+  sensebox_internal_rtc_get: "Wert (interne RTC): ",
+  sensebox_internal_rtc_get_timestamp: "Zeitstempel interne RTC (RFC 3339)",
+  sensebox_internal_rtc_get_timestamp_tooltip:
+    "Returns a timestamp formatted in ISO 8601. Ex: 2021-12-24T18:21Z",
+  sensebox_internal_rtc_get_tooltip: "Gibt den ausgewählten Wert zurück",
+  sensebox_internal_rtc_epoch: "Unix Zeit",
+  sensebox_internal_rtc_year: "Jahr",
+  sensebox_internal_rtc_month: "Monat",
+  sensebox_internal_rtc_day: "Tag",
+  sensebox_internal_rtc_hour: "Stunde",
+  sensebox_internal_rtc_minutes: "Minute",
+  sensebox_internal_rtc_seconds: "Sekunde",
 };

src/components/Blockly/msg/de/sensebox-sensors.js

@@ -140,6 +140,7 @@ Wenn die maximale Distanz überschritten wird, wird ein Wert von **O** ausgegebe
   senseBox_bme_iaq: "Innenraumluftqualität (IAQ)",
   senseBox_bme_iaq_accuracy: "Kalibrierungswert",
   senseBox_bme_co2: "CO2 Äquivalent",
+  senseBox_bme_pressure: "Luftdruck in Pa",
   senseBox_bme_breatheVocEquivalent: "Atemluft VOC Äquivalent",
   senseBox_bme_tooltip: `Schließe den Umweltsensor an einen der 5 **I2C-Anschlüsse** an. **Beachte:** Der Sensor benöigt eine gewisse Zeit zum kalibrieren. 
 Den Status der Kalibrierung kann über den Kalibrierungswert abgelesen werden. Er ist entweder 0, 1, 2 oder 3 und sagt folgendes aus:
@@ -175,7 +176,7 @@ Die Messwerte für Temperatur, Luftfeuchtigkeit und Luftdruck können direkt ver
    * Feinstaubsensor (SDS011)
    */
 
-  senseBox_sds011: "Feinstaubsensor",
+  senseBox_sds011: "Feinstaubsensor SDS011",
   senseBox_sds011_dimension: "in µg/m³ an",
   senseBox_sds011_pm25: "PM2.5",
   senseBox_sds011_pm10: "PM10",
@@ -200,4 +201,23 @@ Die Messwerte für Temperatur, Luftfeuchtigkeit und Luftdruck können direkt ver
 - "wurde gedrückt": Mit diesem Modus kannst du abfragen ob der Block gedrückt wurde. Erst wenn der Knopf gedrückt und wieder losgelassen wurde erhältst du TRUE zurück
 - "als Schalter": Wenn du diesen Block verwendest kannst du den Knopf wie ein Lichtschalter verwenden. Der Status wird gespeichert bis der Button erneut gedrückt wird`,
   senseBox_button_helpurl: "",
-};
+
+
+
+  /**
+   * Feinstaubsensor Sensirion SPS30
+   */
+
+   senseBox_sps30: "Feinstaubsensor Sensirion SPS30",
+   senseBox_sps30_dimension: "in µg/m³",
+   senseBox_sps30_1p0: "PM1.0",
+   senseBox_sps30_2p5: "PM2.5",
+   senseBox_sps30_4p0: "PM4.0",
+   senseBox_sps30_10p0: "PM10",
+   senseBox_sps30_tooltip:"Dieser Block gibt dir den Messwert des Sensirion SPS30 Feinstaubsensor. Schließe den Feinstaubsensor an einen der 5 **I2C** Anschlüssen an. Im Dropdown Menü zwischen PM1.0, PM2.5, PM4.0 und PM10 auswählen. Der Messwert wird dir als **Kommazahl** in µg/m3",
+    senseBox_sps30_helpurl:
+     "https://docs.sensebox.de/hardware/sensoren-feinstaub/",
+ 
+
+
+    };

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

@@ -8,21 +8,27 @@ export const UI = {
   toolbox_math: "Mathematik",
   toolbox_io: "Eingang/Ausgang",
   toolbox_time: "Zeit",
+  toolbox_rtc: "RTC",
+  toolbox_ntp: "NTP",
   toolbox_functions: "Funktionen",
   toolbox_variables: "Variablen",
   toolbox_serial: "Seriell",
   toolbox_advanced: "Erweitert",
   toolbox_motors: "Motoren",
+  toolbox_label_externalRTC: "Externe RTC",
+  toolbox_label_internalRTC: "Interne RTC",
   variable_NUMBER: "Zahl (int)",
   variable_SHORT_NUMBER: "char",
   variable_LONG: "große Zahl (long)",
   variable_DECIMAL: "Kommazahl (float)",
   variables_TEXT: "Text (string)",
   variables_ARRAY: "Array (array)",
-  variables_CHARACTER: "char (char)",
+  variables_CHARACTER: "Buchstabe (char)",
   variables_BOOLEAN: "Boolean (boolean)",
   variables_NULL: "void (void)",
   variables_UNDEF: "undefined",
+  variables_set: "Schreibe",
+  variables_to: "",
 
   /**
    * Tooltips
@@ -150,6 +156,7 @@ export const UI = {
   button_next: "nächster Schritt",
   button_tutorial_overview: "Tutorial Übersicht",
   button_login: "Anmelden",
+  button_createVariable: "Typisierte Variable erstellen",
 
   /**
    *
@@ -309,7 +316,18 @@ export const UI = {
    * Device Selction
    *  */
   deviceselection_head: "Welches Board benutzt du?",
-  deviceselection_keep_selection: "Speichere meine Auswahl fürs nächste Mal (Du kannst das Board später in den Einstellungen wechseln)",
+  deviceselection_keep_selection:
+    "Speichere meine Auswahl fürs nächste Mal (Du kannst das Board später in den Einstellungen wechseln)",
   deviceselection_footnote: "Hier kommst du zur alten Blockly Version für den ",
-  deviceselection_footnote_02: "oder die"
+  deviceselection_footnote_02: "oder die",
+
+  /**
+   * Sensor Markdown Information
+   */
+  sensorinfo_info: "Informationen zum Sensor",
+  sensorinfo_description: "Beschreibung",
+  sensorinfo_measurable_phenos: "Messbare Phänomene",
+  sensorinfo_manufacturer: "Hersteller",
+  sensorinfo_lifetime: "Lebensdauer",
+  sensorinfo_explanation: "Diese Informationen wurden aus [sensors.wiki](https://sensors.wiki) entnommen. Für weitere Informationen besuchen Sie den Abschnitt über diesen Sensor "
 };

src/components/Blockly/msg/en.js

@@ -13,6 +13,7 @@ import { LED } from "./en/sensebox-led";
 import { LORA } from "./en/sensebox-lora";
 import { OSEM } from "./en/sensebox-osem";
 import { RTC } from "./en/sensebox-rtc";
+import { NTP } from "./en/sensebox-ntp";
 import { SD } from "./en/sensebox-sd";
 import { SENSORS } from "./en/sensebox-sensors";
 import { TELEGRAM } from "./en/sensebox-telegram";
@@ -40,6 +41,7 @@ export const En = {
   ...LORA,
   ...OSEM,
   ...RTC,
+  ...NTP,
   ...SD,
   ...SENSORS,
   ...SENSEBOX,

src/components/Blockly/msg/en/sensebox-ntp.js

@@ -0,0 +1,10 @@
+export const NTP = {
+  sensebox_ntp_init: "Initialise NTP",
+  sensebox_ntp_init_tooltip:
+    "Initialisiere die RTC. Schließe diese an einen der 5 I2C/Wire Anschlüsse an und lege die Batterie ein. Bevor du die Uhrzeit auslesen kannst muss diese zunächst einmal gesetzt werden. Dieser Schritt muss normalerweise nur einmalig durchgeführt werden.",
+  sensebox_ntp_get: "Get time from NTP Server: ",
+  sensebox_ntp_get_tooltip:
+    "Gibt dir den ausgewählten Wert zurück. Unix Zeit entspricht der Anzahl der Sekunden seit dem 1.1.1970",
+  sensebox_ntp_epochTime: "Unix time",
+  sensebox_ntp_formattedTimeStamp: "Timestamp (hh:mm:ss)",
+};

src/components/Blockly/msg/en/sensebox-rtc.js

@@ -1,11 +1,11 @@
 export const RTC = {
-  sensebox_rtc_init: "Initialise RTC",
+  sensebox_rtc_init: "Initialise external RTC",
   sensebox_rtc_init_tooltip:
     "Initialise the RTC. Connect it to one of the 5 I2C/Wire connections and insert the battery. Before you can read out the time, it must first be set. This step usually only needs to be done once.",
   sensebox_rtc_set: "Set RTC time/date:",
   sensebox_rtc_set_tooltip:
     "Sets the time of the RTC. Note that you execute this block in the setup.",
-  sensebox_rtc_get_timestamp: "Get timestamp",
+  sensebox_rtc_get_timestamp: "Timestamp external RTC (RFC 3339)",
   sensebox_rtc_get_timestamp_tooltip:
     "Returns a timestamp formatted in ISO 8601. Ex: 2021-12-24T18:21Z",
   sensebox_rtc_get_tooltip: "Returns the selected value",
@@ -17,4 +17,22 @@ export const RTC = {
   sensebox_rtc_day: "day",
   sensebox_rtc_month: "month",
   sensebox_rtc_year: "year",
+  sensebox_internal_rtc_init: "Initialise internal RTC",
+  sensebox_internal_rtc_init_tooltip:
+    "Initialise the internal RTC. This RTC is not battery backed and will be reset on every power cycle.",
+  sensebox_internal_rtc_set: "Set internal RTC time/date:",
+  sensebox_internal_rtc_set_tooltip:
+    "Sets the time of the internal RTC. Note that you execute this block in the setup.",
+  sensebox_internal_rtc_get: "Get: ",
+  sensebox_internal_rtc_get_timestamp: "Timestamp internal RTC (RFC 3339)",
+  sensebox_internal_rtc_get_timestamp_tooltip:
+    "Returns a timestamp formatted in ISO 8601. Ex: 2021-12-24T18:21Z",
+  sensebox_internal_rtc_get_tooltip: "Returns the selected value",
+  sensebox_internal_rtc_epoch: "Unix Time",
+  sensebox_internal_rtc_year: "year",
+  sensebox_internal_rtc_month: "month",
+  sensebox_internal_rtc_day: "day",
+  sensebox_internal_rtc_hour: "hour",
+  sensebox_internal_rtc_minutes: "minutes",
+  sensebox_internal_rtc_seconds: "seconds",
 };

src/components/Blockly/msg/en/sensebox-sensors.js

@@ -141,6 +141,7 @@ If the max distance is reached the a value of **O** will be returned`,
   senseBox_bme680: "Environmental sensor (BME680)",
   senseBox_bme_iaq: "Indoor Air Quality (IAQ)",
   senseBox_bme_iaq_accuracy: "Calibration Value",
+  senseBox_bme_pressure: "Airpressure in Pa",
   senseBox_bme_co2: "CO2 Equivalent",
   senseBox_bme_breatheVocEquivalent: "Breathe VOC Equivalent",
   senseBox_bme_tooltip: `Connect the environmental sensor to one of the 5 **I2C ports**. **Note:** The sensor needs some time to calibrate. 
@@ -205,4 +206,23 @@ The measured values for temperature, humidity and air pressure can be used direc
    *
    */
   senseBox_watertemperature: "Water Temperature",
+
+
+    /**
+   * Feinstaubsensor Sensirion SPS30
+   */
+
+     senseBox_sps30: "Particulate Matter Sensor (Sensirion SPS30)",
+     senseBox_sps30_dimension: "in µg/m³",
+     senseBox_sps30_1p0: "PM1.0",
+     senseBox_sps30_2p5: "PM2.5",
+     senseBox_sps30_4p0: "PM4.0",
+     senseBox_sps30_10p0: "PM10",
+     senseBox_sps30_tooltip:
+     "This block gives you the measured value of the Sensirion SPS30 fine dust sensor. Connect the fine dust sensor to one of the 5 **I2C** connectors. Select between PM1.0, PM2.5, PM4.0 and PM10 in the dropdown menu. The measured value will be displayed as **decimal** in µg/m3",
+     senseBox_sps30_helpurl:
+       "https://docs.sensebox.de/hardware/sensoren-feinstaub/",
+   
+  
+
 };

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

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

src/components/Blockly/toolbox/Toolbox.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Block, Value, Field, Shadow, Category } from "../";
+import { Block, Value, Field, Shadow, Category, Sep, Label } from "../";
 import { getColour } from "../helpers/colour";
 import "@blockly/block-plus-minus";
 import { TypedVariableModal } from "@blockly/plugin-typed-variable-modal";
@@ -16,7 +16,6 @@ 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"],
@@ -33,7 +32,7 @@ class Toolbox extends React.Component {
 
     // Add your button and give it a callback name.
     const button = document.createElement("button");
-    button.setAttribute("text", "Create Typed Variable");
+    button.setAttribute("text", Blockly.Msg.button_createVariable);
     button.setAttribute("callbackKey", "callbackName");
 
     xmlList.push(button);
@@ -41,6 +40,7 @@ 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;
   }
@@ -61,6 +61,7 @@ class Toolbox extends React.Component {
           <Block type="sensebox_sensor_uv_light" />
           <Block type="sensebox_sensor_bmx055_accelerometer" />
           <Block type="sensebox_sensor_sds011" />
+          <Block type="sensebox_sensor_sps30" />
           <Block type="sensebox_sensor_pressure" />
           <Block type="sensebox_sensor_dps310" />
           <Block type="sensebox_sensor_bme680_bsec" />
@@ -295,7 +296,7 @@ class Toolbox extends React.Component {
             </Value>
           </Block>
         </Category>
-        
+
         {/* <Category name="Telegram" colour={getColour().sensebox}>
           <Block type="sensebox_telegram" />
           <Block type="sensebox_telegram_do" />
@@ -502,42 +503,63 @@ class Toolbox extends React.Component {
           <Block type="time_micros"></Block>
           <Block type="infinite_loop"></Block>
           <Block type="sensebox_interval_timer"></Block>
-          <Block type="sensebox_rtc_init"></Block>
+          <Category
-          <Block type="sensebox_rtc_set">
+            id="time"
-            <Value name="second">
+            name={Blockly.Msg.toolbox_rtc}
-              <Block type="math_number">
+            colour={getColour().time}
-                <Field name="NUM">00</Field>
+          >
-              </Block>
+            <Label text={Blockly.Msg.toolbox_label_externalRTC}></Label>
-            </Value>
+            <Block type="sensebox_rtc_init"></Block>
-            <Value name="minutes">
+            <Block type="sensebox_rtc_set">
-              <Block type="math_number">
+              <Value name="second">
-                <Field name="NUM">00</Field>
+                <Block type="math_number">
-              </Block>
+                  <Field name="NUM">00</Field>
-            </Value>
+                </Block>
-            <Value name="hour">
+              </Value>
-              <Block type="math_number">
+              <Value name="minutes">
-                <Field name="NUM">00</Field>
+                <Block type="math_number">
-              </Block>
+                  <Field name="NUM">00</Field>
-            </Value>
+                </Block>
-            <Value name="day">
+              </Value>
-              <Block type="math_number">
+              <Value name="hour">
-                <Field name="NUM">01</Field>
+                <Block type="math_number">
-              </Block>
+                  <Field name="NUM">00</Field>
-            </Value>
+                </Block>
-            <Value name="month">
+              </Value>
-              <Block type="math_number">
+              <Value name="day">
-                <Field name="NUM">01</Field>
+                <Block type="math_number">
-              </Block>
+                  <Field name="NUM">01</Field>
-            </Value>
+                </Block>
-            <Value name="year">
+              </Value>
-              <Block type="math_number">
+              <Value name="month">
-                <Field name="NUM">1970</Field>
+                <Block type="math_number">
-              </Block>
+                  <Field name="NUM">01</Field>
-            </Value>
+                </Block>
-          </Block>
+              </Value>
-          {/* <Block type="sensebox_rtc_set_ntp"></Block> */}
+              <Value name="year">
-          <Block type="sensebox_rtc_get"></Block>
+                <Block type="math_number">
-          <Block type="sensebox_rtc_get_timestamp"></Block>
+                  <Field name="NUM">1970</Field>
+                </Block>
+              </Value>
+            </Block>
+            {/* <Block type="sensebox_rtc_set_ntp"></Block> */}
+            <Block type="sensebox_rtc_get"></Block>
+            <Block type="sensebox_rtc_get_timestamp"></Block>
+            <Sep gap="40"></Sep>
+            <Label text={Blockly.Msg.toolbox_label_internalRTC}></Label>
+            <Block type="sensebox_internal_rtc_init"></Block>
+            <Block type="sensebox_internal_rtc_set"></Block>
+            <Block type="sensebox_internal_rtc_get"></Block>
+            <Block type="sensebox_internal_rtc_get_timestamp"></Block>
+          </Category>
+          <Category
+            id="timeUTP"
+            name={Blockly.Msg.toolbox_ntp}
+            colour={getColour().time}
+          >
+            <Block type="sensebox_ntp_init"></Block>
+            <Block type="sensebox_ntp_get"></Block>
+          </Category>
         </Category>
         <Category
           id="math"
@@ -611,7 +633,6 @@ class Toolbox extends React.Component {
           colour={getColour().procedures}
           custom="PROCEDURE"
         ></Category>
-        <sep></sep>
         <Category name={Blockly.Msg.toolbox_advanced} colour={getColour().io}>
           <Category
             name={Blockly.Msg.toolbox_serial}
@@ -643,16 +664,19 @@ class Toolbox extends React.Component {
               </Value>
             </Block>
           </Category>
-          <Category name={Blockly.Msg.toolbox_motors} colour={getColour().motors}>
+          <Category
-          <Block type="sensebox_motors_beginServoMotor" />
+            name={Blockly.Msg.toolbox_motors}
-          <Block type="sensebox_motors_moveServoMotor">
+            colour={getColour().motors}
-            <Value name="degrees">
+          >
-              <Block type="math_number">
+            <Block type="sensebox_motors_beginServoMotor" />
-                <Field name="NUM">90</Field>
+            <Block type="sensebox_motors_moveServoMotor">
-              </Block>
+              <Value name="degrees">
-            </Value>
+                <Block type="math_number">
-          </Block>
+                  <Field name="NUM">90</Field>
-          {/* <Block type="sensebox_motors_I2CMotorBoard_begin" />
+                </Block>
+              </Value>
+            </Block>
+            {/* <Block type="sensebox_motors_I2CMotorBoard_begin" />
           <Block type="sensebox_motors_I2CMotorBoard_moveDCMotor">
             <Value name="speed">
               <Block type="math_number">
@@ -669,7 +693,7 @@ class Toolbox extends React.Component {
               </Block>
             </Value>
           </Block> */}
-        </Category>
+          </Category>
           <Category name="Watchdog" colour={getColour().io}>
             <Block type="watchdog_enable"></Block>
             <Block type="watchdog_reset"></Block>

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 '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
-import MaterialUIBreadcrumbs from '@material-ui/core/Breadcrumbs';
+import MaterialUIBreadcrumbs from '@mui/material/Breadcrumbs';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 import { faHome } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -30,7 +30,7 @@ class Breadcrumbs extends Component {
       this.props.content && this.props.content.length > 0 ?
         <MaterialUIBreadcrumbs separator="›" style={{marginBottom: '20px'}}>
           <Link to={'/'} style={{textDecoration: 'none'}}>
-            <FontAwesomeIcon className={clsx(this.props.classes.home, this.props.classes.hover)} icon={faHome} size="xs"/>
+            <FontAwesomeIcon className={clsx(this.props.classes.home, this.props.classes.hover)} icon={faHome}  size="xs"/>
           </Link>
           {this.props.content.splice(0, this.props.content.length-1).map((content, i) => (
             <Link to={content.link} style={{textDecoration: 'none'}} key={i}>

src/components/CodeEditor/CodeEditor.js

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

src/components/CodeEditor/Compile.js

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

src/components/CodeEditor/SaveIcon.js

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

src/components/CodeEditor/SerialMonitor.js

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

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 "@material-ui/core/Accordion";
+import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
+import AccordionDetails from "@mui/material/AccordionDetails";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 import { LibraryVersions } from "../../data/versions.js";
 import { useMonaco } from "@monaco-editor/react";
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
 import SerialMonitor from "./SerialMonitor.js";
 import axios from "axios";
 

src/components/CodeViewer.js

@@ -2,15 +2,17 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
-import withWidth from "@material-ui/core/withWidth";
+import withStyles from '@mui/styles/withStyles';
-import { withStyles } from "@material-ui/core/styles";
+import MuiAccordion from "@mui/material/Accordion";
-import MuiAccordion from "@material-ui/core/Accordion";
+import MuiAccordionSummary from "@mui/material/AccordionSummary";
-import MuiAccordionSummary from "@material-ui/core/AccordionSummary";
+import MuiAccordionDetails from "@mui/material/AccordionDetails";
-import MuiAccordionDetails from "@material-ui/core/AccordionDetails";
+import { Card } from "@mui/material";
-import { Card } from "@material-ui/core";
 import * as Blockly from "blockly";
 import { default as MonacoEditor } from "@monaco-editor/react";
 
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
+
 const Accordion = withStyles((theme) => ({
   root: {
     border: `1px solid ${theme.palette.secondary.main}`,

src/components/DeviceSelection.js

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

src/components/Dialog.js

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

src/components/Faq.js

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

src/components/Footer.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import { Link } from 'react-router-dom';
 
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 class Footer extends Component {
   render() {

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 "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from "@mui/material/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
 
 import { faCode } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -160,8 +160,8 @@ class Home extends Component {
                   zIndex: 21,
                 }}
                 onClick={() => this.onChange()}
-              >
+                size="large">
-                <FontAwesomeIcon icon={faCode} size="xs" />
+                <FontAwesomeIcon icon={faCode}  size="xs" />
               </IconButton>
             </Tooltip>
 

src/components/Impressum.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { withRouter } from "react-router-dom";
-import Container from "@material-ui/core/Container";
+import Container from "@mui/material/Container";
 class Impressum extends Component {
   render() {
     return (

src/components/MaxBlocks.js

@@ -5,8 +5,8 @@ import { workspaceChange } from '../actions/workspaceActions';
 
 import * as Blockly from 'blockly/core';
 
-import TextField from '@material-ui/core/TextField';
+import TextField from '@mui/material/TextField';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 class MaxBlocks extends Component {
 
@@ -28,12 +28,12 @@ class MaxBlocks extends Component {
     return (
       <div style={{display: 'inline', marginLeft: '10px'}}>
         <TextField
+          variant="standard"
           style={{width: '50px', marginRight: '5px'}}
           name="max"
           type="number"
           onChange={this.onChange}
-          value={this.state.max}
+          value={this.state.max} />
-        />
         <Button style={{marginRight: '10px', color: 'white'}} variant="contained" color="primary" onClick={this.setMaxBlocks}>
           Maximale Blöcke
         </Button>

src/components/Navbar.js

@@ -8,20 +8,20 @@ import senseboxLogo from "./sensebox_logo.svg";
 
 import { withRouter } from "react-router-dom";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import Drawer from "@material-ui/core/Drawer";
+import Drawer from "@mui/material/Drawer";
-import AppBar from "@material-ui/core/AppBar";
+import AppBar from "@mui/material/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
+import Toolbar from "@mui/material/Toolbar";
-import List from "@material-ui/core/List";
+import List from "@mui/material/List";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
-import Divider from "@material-ui/core/Divider";
+import Divider from "@mui/material/Divider";
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from "@mui/material/IconButton";
-import ListItem from "@material-ui/core/ListItem";
+import ListItem from "@mui/material/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@material-ui/core/ListItemText";
+import ListItemText from "@mui/material/ListItemText";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
 import Tour from "reactour";
-import { Badge } from "@material-ui/core";
+import { Badge } from "@mui/material";
 import { home, assessment } from "./Tour";
 import {
   faBars,
@@ -37,10 +37,20 @@ 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 "@material-ui/core/Tooltip";
+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";
 
 const styles = (theme) => ({
   drawerWidth: {
@@ -60,9 +70,14 @@ 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
     };
   }
 
@@ -80,7 +95,6 @@ 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 &&
@@ -116,7 +130,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" }}>
@@ -127,55 +141,226 @@ class Navbar extends Component {
             <Link to={"/"} style={{ marginLeft: "10px" }}>
               <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
             </Link>
-            {isTutorial ? (
+            <div style={{ margin: "0 0 0 auto", display: "flex", alignItems: 'center', justifyContent: 'center' }}>
-              <Link
+              {isHome ? (
-                to={"/tutorial"}
+                <div style={{ display: "flex" }}>
-                style={{
+                  <div style={{ padding: "12px" }}>
-                  textDecoration: "none",
+                    <Button
-                  color: "inherit",
+                      style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
-                  marginLeft: "10px",
+                      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>
+                  <IconButton
+                    color="inherit"
+                    className={`openTour ${this.props.classes.button}`}
+                    onClick={() => {
+                      this.openTour();
+                    }}
+                    size="large">
+                    <FontAwesomeIcon icon={faQuestionCircle} />
+                  </IconButton>
+                </Tooltip>
+              ) : null}
+              {isAssessment ? (
+                <Tooltip title={'Start tour'} arrow>
+                  <IconButton
+                    color="inherit"
+                    className={`openTour ${this.props.classes.button}`}
+                    onClick={() => {
+                      this.openTour();
+                    }}
+                    size="large">
+                    <FontAwesomeIcon icon={faQuestionCircle} />
+                  </IconButton>
+                </Tooltip>
+              ) : null}
+              <Tour
+                steps={isHome ? home() : assessment()}
+                isOpen={this.state.isTourOpen}
+                onRequestClose={() => {
+                  this.closeTour();
                 }}
-              >
+              />
-                <Typography variant="h6" noWrap>
+              {this.props.user ? (
-                  Tutorial
+                <div>
-                </Typography>
+                  <IconButton
-              </Link>
+                    color="inherit"
-            ) : null}
+                    onClick={(event) => { this.setState({ anchorElUser: event.target }) }}
-            {isHome ? (
+                    style={{ margin: "0 30px 0 0" }}
-              <Tooltip title={Blockly.Msg.tooltip_start_tour} arrow>
+                    size="large"
-                <IconButton
+                  >
-                  color="inherit"
+                    <FontAwesomeIcon icon={faUser} />
-                  className={`openTour ${this.props.classes.button}`}
+                  </IconButton>
-                  onClick={() => {
+                  <Menu
-                    this.openTour();
+                    anchorEl={this.state.anchorElUser}
-                  }}
+                    anchorOrigin={{
-                  style={{ margin: "0 30px 0 auto" }}
+                      vertical: 'bottom',
-                >
+                      horizontal: 'center',
-                  <FontAwesomeIcon icon={faQuestionCircle} />
+                    }}
-                </IconButton>
+                    keepMounted
-              </Tooltip>
+                    transformOrigin={{
-            ) : null}
+                      vertical: 'top',
-            {isAssessment ? (
+                      horizontal: 'center',
-              <Tooltip title={Blockly.Msg.tooltip_start_tour} arrow>
+                    }}
-                <IconButton
+                    open={Boolean(this.state.anchorElUser)}
-                  color="inherit"
+                    onClose={() => { this.setState({ anchorElUser: null }); }}
-                  className={`openTour ${this.props.classes.button}`}
+                  >
-                  onClick={() => {
+                    <div className="" style={{ paddingLeft: "16px", paddingRight: "16px", paddingTop: "16px" }}>
-                    this.openTour();
+                      <p style={{ fontWeight: "bold", margin: "0px" }}>
-                  }}
+                        {this.props.user.name}
-                  style={{ margin: "0 30px 0 auto" }}
+                      </p>
-                >
+                      <p style={{ marginTop: "0px", color: "#696969" }}>
-                  <FontAwesomeIcon icon={faQuestionCircle} />
+                        {this.props.user.email}
-                </IconButton>
+                      </p>
-              </Tooltip>
+                    </div>
-            ) : null}
+                    <hr style={{ borderTop: "3px solid #bbb", marginLeft: "5px", marginRight: "5px" }} />
-            <Tour
+                    <MenuItem>
-              steps={isHome ? home() : assessment()}
+                      <Link to={"/user"} style={{ textDecoration: 'none', color: "black" }}>
-              isOpen={this.state.isTourOpen}
+                        {Blockly.Msg.navbar_account}
-              onRequestClose={() => {
+                      </Link>
-                this.closeTour();
+                    </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
@@ -214,11 +399,11 @@ class Navbar extends Component {
           </div>
           <List>
             {[
-                 {
+              {
-                  text: Blockly.Msg.navbar_blockly,
+                text: Blockly.Msg.navbar_blockly,
-                  icon: faPuzzlePiece,
+                icon: faPuzzlePiece,
-                  link: "/",
+                link: "/",
-                },
+              },
               {
                 text: Blockly.Msg.navbar_tutorials,
                 icon: faChalkboardTeacher,
@@ -267,7 +452,7 @@ class Navbar extends Component {
                         <FontAwesomeIcon icon={item.icon} />
                       </ListItemIcon>
                       {item.text === "Code Editor" ? (
-                        <Badge badgeContent={"Experimental"} color="primary">
+                        <Badge badgeContent={"Experimental"} color="primary" overlap="rectangular">
                           <ListItemText primary={item.text} />
                         </Badge>
                       ) : (
@@ -329,9 +514,9 @@ class Navbar extends Component {
                       onClick={
                         item.function
                           ? () => {
-                              item.function();
+                            item.function();
-                              this.toggleDrawer();
+                            this.toggleDrawer();
-                            }
+                          }
                           : this.toggleDrawer
                       }
                     >
@@ -369,6 +554,10 @@ 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) => ({
@@ -378,8 +567,10 @@ 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 })(
+export default connect(mapStateToProps, { logout, setLanguage, setBoard })(
   withStyles(styles, { withTheme: true })(withRouter(Navbar))
 );

src/components/News.js

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

src/components/NotFound.js

@@ -4,8 +4,8 @@ import Breadcrumbs from './Breadcrumbs';
 
 import { withRouter } from 'react-router-dom';
 
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import * as Blockly from 'blockly'
 
 class NotFound extends Component {

src/components/Privacy.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
-import Container from '@material-ui/core/Container';
+import Container from '@mui/material/Container';
 class Privay extends Component {
     render() {
         return (

src/components/Project/Project.js

@@ -10,8 +10,8 @@ import { withRouter } from 'react-router-dom';
 import Home from '../Home';
 import Breadcrumbs from '../Breadcrumbs';
 
-import Backdrop from '@material-ui/core/Backdrop';
+import Backdrop from '@mui/material/Backdrop';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 
 
 class Project extends Component {

src/components/Project/ProjectHome.js

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

src/components/Route/Routes.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { visitPage } from "../../actions/generalActions";
+import { visitPage, setPlatform } from "../../actions/generalActions";
 
 import { Route, Switch, withRouter } from "react-router-dom";
 
@@ -27,6 +27,24 @@ import Faq from "../Faq";
 import CodeEditor from "../CodeEditor/CodeEditor";
 
 class Routes extends Component {
+
+  componentDidMount() {
+    const { location } = this.props;
+    const query = new URLSearchParams(location.search, [location.search]);
+    const mode = query.get('mode');
+
+    if (!this.props.platform && mode) {
+      switch (mode.toLowerCase()) {
+        case 'tablet':
+          this.props.setPlatform(true);
+          break;
+        default:
+          break;
+      }
+
+    }
+  }
+
   componentDidUpdate() {
     this.props.visitPage();
   }
@@ -105,6 +123,12 @@ class Routes extends Component {
 
 Home.propTypes = {
   visitPage: PropTypes.func,
+  platform: PropTypes.bool.isRequired,
+  setPlatform: PropTypes.func.isRequired
 };
 
-export default connect(null, { visitPage })(withRouter(Routes));
+const mapStateToProps = (state) => ({
+  platform: state.general.platform,
+});
+
+export default connect(mapStateToProps, { visitPage, setPlatform })(withRouter(Routes));

src/components/SensorInfo.js

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

src/components/Settings/DeviceSelector.js

@@ -5,12 +5,12 @@ import { setBoard } from '../../actions/boardAction';
 
 import * as Blockly from 'blockly/core';
 
-import InputLabel from '@material-ui/core/InputLabel';
+import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
+import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
+import FormControl from '@mui/material/FormControl';
-import Select from '@material-ui/core/Select';
+import Select from '@mui/material/Select';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import FormHelperText from '@mui/material/FormHelperText';
 
 class DeviceSelector extends Component {
 
@@ -22,18 +22,18 @@ class DeviceSelector extends Component {
 
 
   render(){
-    return(
+    return (
       <div>
         <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_board}</Typography>
         <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_board_text}</FormHelperText>
-        <FormControl>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_board}</InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.selectedBoard}
-            onChange={(e) => this.props.setBoard(e.target.value)}
+            onChange={(e) => this.props.setBoard(e.target.value)}>
-          >
             <MenuItem value="mcu">senseBox MCU</MenuItem>
             <MenuItem value="mini">senseBox MCU mini</MenuItem>
           </Select>

src/components/Settings/LanguageSelector.js

@@ -5,12 +5,12 @@ import { setLanguage } from '../../actions/generalActions';
 
 import * as Blockly from 'blockly/core';
 
-import InputLabel from '@material-ui/core/InputLabel';
+import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
+import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
+import FormControl from '@mui/material/FormControl';
-import Select from '@material-ui/core/Select';
+import Select from '@mui/material/Select';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import FormHelperText from '@mui/material/FormHelperText';
 
 class LanguageSelector extends Component {
 
@@ -25,18 +25,18 @@ class LanguageSelector extends Component {
   }
 
   render(){
-    return(
+    return (
       <div>
         <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_language}</Typography>
         <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_language_text}</FormHelperText>
-        <FormControl>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_language}</InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.language}
-            onChange={this.handleChange}
+            onChange={this.handleChange}>
-          >
             <MenuItem value={'de_DE'}>{Blockly.Msg.settings_language_de}</MenuItem>
             <MenuItem value={'en_US'}>{Blockly.Msg.settings_language_en}</MenuItem>
           </Select>

src/components/Settings/OtaSelector.js

@@ -5,12 +5,12 @@ import { setPlatform } from "../../actions/generalActions";
 
 import * as Blockly from "blockly/core";
 
-import InputLabel from "@material-ui/core/InputLabel";
+import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@material-ui/core/MenuItem";
+import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@material-ui/core/FormControl";
+import FormControl from "@mui/material/FormControl";
-import Select from "@material-ui/core/Select";
+import Select from "@mui/material/Select";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
-import FormHelperText from "@material-ui/core/FormHelperText";
+import FormHelperText from "@mui/material/FormHelperText";
 
 class OtaSelector extends Component {
   componentDidMount() {
@@ -33,16 +33,16 @@ class OtaSelector extends Component {
             https://sensebox.de/app
           </a>
         </FormHelperText>
-        <FormControl>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">
             {Blockly.Msg.settings_statistics}
           </InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.platform}
-            onChange={(e) => this.props.setPlatform(e.target.value)}
+            onChange={(e) => this.props.setPlatform(e.target.value)}>
-          >
             <MenuItem value={true}>{Blockly.Msg.settings_ota_on}</MenuItem>
             <MenuItem value={false}>{Blockly.Msg.settings_ota_off}</MenuItem>
           </Select>

src/components/Settings/RenderSelector.js

@@ -5,12 +5,12 @@ import { setRenderer } from '../../actions/generalActions';
 
 import * as Blockly from 'blockly/core'
 
-import InputLabel from '@material-ui/core/InputLabel';
+import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
+import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
+import FormControl from '@mui/material/FormControl';
-import Select from '@material-ui/core/Select';
+import Select from '@mui/material/Select';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import FormHelperText from '@mui/material/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>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_renderer}</InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.renderer}
-            onChange={(e) => this.props.setRenderer(e.target.value)}
+            onChange={(e) => this.props.setRenderer(e.target.value)}>
-          >
             <MenuItem value={'geras'}>Geras</MenuItem>
             <MenuItem value={'zelos'}>Zelos</MenuItem>
           </Select>

src/components/Settings/Settings.js

@@ -14,8 +14,8 @@ import OtaSelector from "./OtaSelector";
 import SoundsSelector from "./SoundsSelector";
 import DeviceSelector from "./DeviceSelector";
 
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
-import Paper from "@material-ui/core/Paper";
+import Paper from "@mui/material/Paper";
 
 class Settings extends Component {
   componentDidMount() {

src/components/Settings/SoundsSelector.js

@@ -5,12 +5,12 @@ import { setSounds } from "../../actions/generalActions";
 
 import * as Blockly from "blockly/core";
 
-import InputLabel from "@material-ui/core/InputLabel";
+import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@material-ui/core/MenuItem";
+import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@material-ui/core/FormControl";
+import FormControl from "@mui/material/FormControl";
-import Select from "@material-ui/core/Select";
+import Select from "@mui/material/Select";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
-import FormHelperText from "@material-ui/core/FormHelperText";
+import FormHelperText from "@mui/material/FormHelperText";
 
 class SoundsSelector extends Component {
   componentDidMount() {
@@ -30,16 +30,16 @@ class SoundsSelector extends Component {
         >
           {Blockly.Msg.settings_sounds_text}
         </FormHelperText>
-        <FormControl>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">
             {Blockly.Msg.settings_sounds}
           </InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.sounds}
-            onChange={(e) => this.props.setSounds(e.target.value)}
+            onChange={(e) => this.props.setSounds(e.target.value)}>
-          >
             <MenuItem value={false}>{Blockly.Msg.settings_ota_off}</MenuItem>
             <MenuItem value={true}>{Blockly.Msg.settings_ota_on}</MenuItem>
           </Select>

src/components/Settings/StatsSelector.js

@@ -5,12 +5,12 @@ import { setStatistics } from '../../actions/generalActions';
 
 import * as Blockly from 'blockly/core'
 
-import InputLabel from '@material-ui/core/InputLabel';
+import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
+import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
+import FormControl from '@mui/material/FormControl';
-import Select from '@material-ui/core/Select';
+import Select from '@mui/material/Select';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import FormHelperText from '@mui/material/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>
+        <FormControl variant="standard">
           <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_statistics}</InputLabel>
           <Select
+            variant="standard"
             labelId="demo-simple-select-label"
             id="demo-simple-select"
             value={this.props.statistics}
-            onChange={(e) => this.props.setStatistics(e.target.value)}
+            onChange={(e) => this.props.setStatistics(e.target.value)}>
-          >
             <MenuItem value={true}>{Blockly.Msg.settings_statistics_on}</MenuItem>
             <MenuItem value={false}>{Blockly.Msg.settings_statistics_off}</MenuItem>
           </Select>

src/components/Snackbar.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
-import IconButton from '@material-ui/core/IconButton';
+import IconButton from '@mui/material/IconButton';
-import MaterialUISnackbar from '@material-ui/core/Snackbar';
+import MaterialUISnackbar from '@mui/material/Snackbar';
-import SnackbarContent from '@material-ui/core/SnackbarContent';
+import SnackbarContent from '@mui/material/SnackbarContent';
 
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -69,8 +69,8 @@ class Snackbar extends Component {
           style={{flexWrap: 'nowrap'}}
           className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success}
           action={
-            <IconButton onClick={this.onClose} style={{color: 'inherit'}}>
+            <IconButton onClick={this.onClose} style={{color: 'inherit'}} size="large">
-              <FontAwesomeIcon icon={faTimes} size="xs"/>
+              <FontAwesomeIcon icon={faTimes} size="xs" />
             </IconButton>
           }
           message={this.props.message}

src/components/TooltipViewer.js

@@ -1,17 +1,43 @@
 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 "@material-ui/core/CardContent";
+import CardContent from "@mui/material/CardContent";
-
+import Typography from "@mui/material/Typography";
-import Typography from "@material-ui/core/Typography";
 import ReactMarkdown from "react-markdown";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import Slide from "@mui/material/Slide";
+import SensorInfo from "./SensorInfo";
+import store from "../store";
+
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
 
 class TooltipViewer extends Component {
+
+  constructor(props) {
+    super(props);
+    this.inputRef = React.createRef();
+    this.state = {
+      open: false,
+    };
+  }
+
+  toggleDialog = () => {
+    this.setState({ open: !this.state });
+  };
+
+  openDialog = () => {
+    this.setState({ open: true });
+  };
+
   render() {
     return (
       <Card
@@ -29,14 +55,46 @@ class TooltipViewer extends Component {
             {Blockly.Msg.tooltip_viewer}
           </Typography>
 
-          <ReactMarkdown linkTarget="_blank">
+          <Typography variant="body2" component="span">
-            {this.props.tooltip}
+            <ReactMarkdown linkTarget="_blank">
-          </ReactMarkdown>
+              {this.props.tooltip}
-
+            </ReactMarkdown>
-          {this.props.helpurl !== "" ? (
+            {store.getState().workspace.code.data ? (
-            <ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
+              <Button
-          ) : null}
+                label="Mehr"
+                variant="contained"
+                color="primary"
+                onClick={() => {
+                  this.openDialog();
+                }}
+              >
+                Sensor Informationen
+              </Button>
+            ) : (
+              <ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
+            )}
+          </Typography>
         </CardContent>
+        {store.getState().workspace.code.data ? (<Dialog
+          open={this.state.open}
+          TransitionComponent={Transition}
+          keepMounted
+          aria-describedby="alert-dialog-slide-description"
+          onClose={() => {
+            this.toggleDialog();
+          }}
+          maxWidth={"md"}
+          fullWidth={true}
+        >
+          <DialogContent>
+            <SensorInfo></SensorInfo>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => {
+              this.toggleDialog();
+            }}>Close</Button>
+          </DialogActions>
+        </Dialog>) : (null)}
       </Card>
     );
   }

src/components/Tutorial/Assessment.js

@@ -6,22 +6,26 @@ import { workspaceName } from "../../actions/workspaceActions";
 import BlocklyWindow from "../Blockly/BlocklyWindow";
 import WorkspaceFunc from "../Workspace/WorkspaceFunc";
 
-import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
+import Grid from "@mui/material/Grid";
-import Grid from "@material-ui/core/Grid";
+import Card from "@mui/material/Card";
-import Card from "@material-ui/core/Card";
+import Typography from "@mui/material/Typography";
-import Typography from "@material-ui/core/Typography";
 import * as Blockly from "blockly";
 import { initialXml } from "../Blockly/initialXml";
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from "@mui/material/IconButton";
 import CodeViewer from "../CodeViewer";
 import TooltipViewer from "../TooltipViewer";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 import ReactMarkdown from "react-markdown";
 import { faCode } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
 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: {
@@ -98,11 +102,10 @@ class Assessment extends Component {
               }
             >
               <IconButton
-                className={`showCode ${
+                className={`showCode ${this.state.codeOn
-                  this.state.codeOn
                     ? this.props.classes.codeOn
                     : this.props.classes.codeOff
-                }`}
+                  }`}
                 style={{
                   width: "40px",
                   height: "40px",
@@ -112,8 +115,8 @@ class Assessment extends Component {
                   zIndex: 21,
                 }}
                 onClick={() => this.onChange()}
-              >
+                size="large">
-                <FontAwesomeIcon icon={faCode} size="xs" />
+                <FontAwesomeIcon icon={faCode}  size="xs" />
               </IconButton>
             </Tooltip>
             <BlocklyWindow

src/components/Tutorial/Builder/BlocklyExample.js

@@ -15,13 +15,13 @@ import * as Blockly from "blockly/core";
 import { initialXml } from "../../Blockly//initialXml.js";
 import BlocklyWindow from "../../Blockly/BlocklyWindow";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import Switch from "@material-ui/core/Switch";
+import Switch from "@mui/material/Switch";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControlLabel from "@mui/material/FormControlLabel";
-import FormHelperText from "@material-ui/core/FormHelperText";
+import FormHelperText from "@mui/material/FormHelperText";
-import FormLabel from "@material-ui/core/FormLabel";
+import FormLabel from "@mui/material/FormLabel";
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 
 const styles = (theme) => ({
   errorColor: {
@@ -139,7 +139,6 @@ class BlocklyExample extends Component {
               <Switch
                 checked={this.state.checked}
                 onChange={(e) => this.onChange(e.target.checked)}
-                color="primary"
               />
             }
           />

src/components/Tutorial/Builder/Builder.js

@@ -33,19 +33,19 @@ import Snackbar from "../../Snackbar";
 import Public from "./Public";
 import Review from "./Review";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
-import Backdrop from "@material-ui/core/Backdrop";
+import Backdrop from "@mui/material/Backdrop";
-import CircularProgress from "@material-ui/core/CircularProgress";
+import CircularProgress from "@mui/material/CircularProgress";
-import Divider from "@material-ui/core/Divider";
+import Divider from "@mui/material/Divider";
-import FormHelperText from "@material-ui/core/FormHelperText";
+import FormHelperText from "@mui/material/FormHelperText";
-import Radio from "@material-ui/core/Radio";
+import Radio from "@mui/material/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
+import RadioGroup from "@mui/material/RadioGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControlLabel from "@mui/material/FormControlLabel";
-import InputLabel from "@material-ui/core/InputLabel";
+import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@material-ui/core/MenuItem";
+import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@material-ui/core/FormControl";
+import FormControl from "@mui/material/FormControl";
-import Select from "@material-ui/core/Select";
+import Select from "@mui/material/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 color="primary" />}
+            control={<Radio />}
             label={Blockly.Msg.builder_createNew}
             labelPlacement="end"
           />
@@ -417,7 +417,7 @@ class Builder extends Component {
                 style={{ color: "black" }}
                 disabled={this.props.index === 0}
                 value="change"
-                control={<Radio color="primary" />}
+                control={<Radio />}
                 label={Blockly.Msg.builder_changeExisting}
                 labelPlacement="end"
               />
@@ -425,7 +425,7 @@ class Builder extends Component {
                 style={{ color: "black" }}
                 disabled={this.props.index === 0}
                 value="delete"
-                control={<Radio color="primary" />}
+                control={<Radio />}
                 label={Blockly.Msg.builder_deleteExisting}
                 labelPlacement="end"
               />
@@ -470,12 +470,12 @@ class Builder extends Component {
           <FormControl variant="outlined" style={{ width: "100%" }}>
             <InputLabel id="select-outlined-label">Tutorial</InputLabel>
             <Select
+              variant="standard"
               color="primary"
               labelId="select-outlined-label"
               value={this.props.id}
               onChange={(e) => this.onChangeId(e.target.value)}
-              label="Tutorial"
+              label="Tutorial">
-            >
               {filteredTutorials.map((tutorial) => (
                 <MenuItem value={tutorial._id}>
                   {tutorial.title}{" "}

src/components/Tutorial/Builder/Difficulty.js

@@ -9,13 +9,13 @@ import {
   deleteError,
 } from "../../../actions/tutorialBuilderActions";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
 import ReactStars from "react-rating-stars-component";
 import * as Blockly from "blockly";
-import FormGroup from "@material-ui/core/FormGroup";
+import FormGroup from "@mui/material/FormGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControlLabel from "@mui/material/FormControlLabel";
-import FormControl from "@material-ui/core/FormControl";
+import FormControl from "@mui/material/FormControl";
-import FormLabel from "@material-ui/core/FormLabel";
+import FormLabel from "@mui/material/FormLabel";
 
 const styles = (theme) => ({
   multiline: {
@@ -55,7 +55,7 @@ class Difficulty extends Component {
 
   render() {
     return (
-      <FormControl component="fieldset">
+      <FormControl variant="standard" component="fieldset">
         <FormLabel component="legend">
           {Blockly.Msg.builder_difficulty}
         </FormLabel>

src/components/Tutorial/Builder/Hardware.js

@@ -9,14 +9,17 @@ import {
 
 import hardware from "../../../data/hardware.json";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
+import ImageList from "@mui/material/ImageList";
-import ImageList from "@material-ui/core/ImageList";
+import ImageListItem from "@mui/material/ImageListItem";
-import ImageListItem from "@material-ui/core/ImageListItem";
+import ImageListItemBar from "@mui/material/ImageListItemBar";
-import ImageListItemBar from "@material-ui/core/ImageListItemBar";
+import FormHelperText from "@mui/material/FormHelperText";
-import FormHelperText from "@material-ui/core/FormHelperText";
+import FormLabel from "@mui/material/FormLabel";
-import FormLabel from "@material-ui/core/FormLabel";
 import * as Blockly from "blockly";
+import { isWidthDown } from "../../../helpers/handleBreakpoints";
+
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
 
 const styles = (theme) => ({
   multiImageListItem: {

src/components/Tutorial/Builder/Id.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { tutorialId, setError, deleteError } from '../../../actions/tutorialBuilderActions';
 
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
+import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@material-ui/core/InputLabel';
+import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
+import FormControl from '@mui/material/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import FormHelperText from '@mui/material/FormHelperText';
 
 import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

src/components/Tutorial/Builder/MarkdownEditor.js

@@ -8,7 +8,7 @@ import {
   deleteError,
 } from "../../../actions/tutorialBuilderActions";
 
-import FormControl from "@material-ui/core/FormControl";
+import FormControl from "@mui/material/FormControl";
 import MarkdownIt from "markdown-it";
 import Editor from "react-markdown-editor-lite";
 import "react-markdown-editor-lite/lib/index.css";

src/components/Tutorial/Builder/Media.js

@@ -5,13 +5,13 @@ import { changeContent, deleteProperty, setError, deleteError } from '../../../a
 
 import Textfield from './Textfield';
 
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
-import Switch from '@material-ui/core/Switch';
+import Switch from '@mui/material/Switch';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import FormHelperText from '@mui/material/FormHelperText';
-import Radio from '@material-ui/core/Radio';
+import Radio from '@mui/material/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
+import RadioGroup from '@mui/material/RadioGroup';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 const styles = (theme) => ({
   errorColor: {
@@ -97,7 +97,6 @@ class Media extends Component {
             <Switch
               checked={this.state.checked}
               onChange={(e) => this.onChangeSwitch(e.target.checked)}
-              color="primary"
             />
           }
         />
@@ -106,13 +105,13 @@ class Media extends Component {
             <RadioGroup row value={this.state.radioValue} onChange={(e) => {this.onChangeRadio(e.target.value);}}>
               <FormControlLabel style={{color: 'black'}}
                 value="picture"
-                control={<Radio color="primary" />}
+                control={<Radio />}
                 label="Bild"
                 labelPlacement="end"
               />
               <FormControlLabel style={{color: 'black'}}
                 value="youtube"
-                control={<Radio color="primary" />}
+                control={<Radio />}
                 label="Youtube-Video"
                 labelPlacement="end"
               />

src/components/Tutorial/Builder/Public.js

@@ -9,14 +9,14 @@ import {
   deleteError,
 } from "../../../actions/tutorialBuilderActions";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
 
 import * as Blockly from "blockly";
-import Checkbox from "@material-ui/core/Checkbox";
+import Checkbox from "@mui/material/Checkbox";
-import FormGroup from "@material-ui/core/FormGroup";
+import FormGroup from "@mui/material/FormGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControlLabel from "@mui/material/FormControlLabel";
-import FormControl from "@material-ui/core/FormControl";
+import FormControl from "@mui/material/FormControl";
-import FormLabel from "@material-ui/core/FormLabel";
+import FormLabel from "@mui/material/FormLabel";
 
 const styles = (theme) => ({
   multiline: {
@@ -52,7 +52,7 @@ class Public extends Component {
 
   render() {
     return (
-      <FormControl component="fieldset">
+      <FormControl variant="standard" component="fieldset">
         <FormLabel component="legend">
           {Blockly.Msg.builder_public_head}
         </FormLabel>
@@ -63,7 +63,6 @@ class Public extends Component {
               <Checkbox
                 checked={this.props.value}
                 onChange={this.handleChange}
-                color="primary"
                 name="checkedA"
                 inputProps={{ "aria-label": "secondary checkbox" }}
               />

src/components/Tutorial/Builder/Requirements.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { changeContent } from '../../../actions/tutorialBuilderActions';
 
-import FormGroup from '@material-ui/core/FormGroup';
+import FormGroup from '@mui/material/FormGroup';
-import Checkbox from '@material-ui/core/Checkbox';
+import Checkbox from '@mui/material/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
-import FormLabel from '@material-ui/core/FormLabel';
+import FormLabel from '@mui/material/FormLabel';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import FormHelperText from '@mui/material/FormHelperText';
-import FormControl from '@material-ui/core/FormControl';
+import FormControl from '@mui/material/FormControl';
 import * as Blockly from 'blockly'
 class Requirements extends Component {
 
@@ -26,11 +26,13 @@ class Requirements extends Component {
 
   render() {
     return (
-      <FormControl style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
+      <FormControl
+        variant="standard"
+        style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
         <FormLabel style={{ color: 'black' }}>{Blockly.Msg.builder_requirements_head}</FormLabel>
         <FormHelperText style={{ marginTop: '5px' }}>{Blockly.Msg.builder_requirements_order}</FormHelperText>
         <FormGroup>
-          {this.props.tutorials.filter(tutorial => tutorial._id !== this.props.id).map((tutorial, i) =>
+          {this.props.tutorials.filter(tutorial => tutorial._id !== this.props.id && tutorial.public).map((tutorial, i) =>
             <FormControlLabel
               key={i}
               control={
@@ -39,7 +41,6 @@ class Requirements extends Component {
                   checked={this.props.value.filter(id => id === tutorial._id).length > 0}
                   onChange={(e) => this.onChange(e)}
                   name="requirements"
-                  color="primary"
                 />
               }
               label={tutorial.title}

src/components/Tutorial/Builder/Review.js

@@ -9,14 +9,14 @@ import {
   deleteError,
 } from "../../../actions/tutorialBuilderActions";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
 
 import * as Blockly from "blockly";
-import Checkbox from "@material-ui/core/Checkbox";
+import Checkbox from "@mui/material/Checkbox";
-import FormGroup from "@material-ui/core/FormGroup";
+import FormGroup from "@mui/material/FormGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControlLabel from "@mui/material/FormControlLabel";
-import FormControl from "@material-ui/core/FormControl";
+import FormControl from "@mui/material/FormControl";
-import FormLabel from "@material-ui/core/FormLabel";
+import FormLabel from "@mui/material/FormLabel";
 
 const styles = (theme) => ({
   multiline: {
@@ -52,7 +52,7 @@ class Review extends Component {
 
   render() {
     return (
-      <FormControl component="fieldset">
+      <FormControl variant="standard" component="fieldset">
         <FormLabel component="legend">
           {Blockly.Msg.builder_review_head}
         </FormLabel>
@@ -64,7 +64,6 @@ class Review extends Component {
               <Checkbox
                 checked={this.props.value}
                 onChange={this.handleChange}
-                color="primary"
                 name="checkedA"
                 inputProps={{ "aria-label": "secondary checkbox" }}
               />

src/components/Tutorial/Builder/Step.js

@@ -15,10 +15,10 @@ import BlocklyExample from "./BlocklyExample";
 import Requirements from "./Requirements";
 import Hardware from "./Hardware";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from "@mui/material/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 
 import {
   faPlus,
@@ -85,8 +85,8 @@ class Step extends Component {
                 className={this.props.classes.button}
                 style={index === 0 ? {} : { marginBottom: "5px" }}
                 onClick={() => this.props.addStep(index + 1)}
-              >
+                size="large">
-                <FontAwesomeIcon icon={faPlus} size="xs" />
+                <FontAwesomeIcon icon={faPlus}  size="xs" />
               </IconButton>
             </Tooltip>
             {index !== 0 ? (
@@ -100,8 +100,8 @@ class Step extends Component {
                     className={this.props.classes.button}
                     style={{ marginBottom: "5px" }}
                     onClick={() => this.props.changeStepIndex(index, index - 1)}
-                  >
+                    size="large">
-                    <FontAwesomeIcon icon={faAngleDoubleUp} size="xs" />
+                    <FontAwesomeIcon icon={faAngleDoubleUp}  size="xs" />
                   </IconButton>
                 </Tooltip>
                 <Tooltip
@@ -113,8 +113,8 @@ class Step extends Component {
                     className={this.props.classes.button}
                     style={{ marginBottom: "5px" }}
                     onClick={() => this.props.changeStepIndex(index, index + 1)}
-                  >
+                    size="large">
-                    <FontAwesomeIcon icon={faAngleDoubleDown} size="xs" />
+                    <FontAwesomeIcon icon={faAngleDoubleDown}  size="xs" />
                   </IconButton>
                 </Tooltip>
                 <Tooltip title={`Schritt ${index + 1} löschen`} arrow>
@@ -125,8 +125,8 @@ class Step extends Component {
                       this.props.classes.delete
                     )}
                     onClick={() => this.props.removeStep(index)}
-                  >
+                    size="large">
-                    <FontAwesomeIcon icon={faTrash} size="xs" />
+                    <FontAwesomeIcon icon={faTrash}  size="xs" />
                   </IconButton>
                 </Tooltip>
               </div>

src/components/Tutorial/Builder/StepType.js

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

src/components/Tutorial/Builder/Textfield.js

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

src/components/Tutorial/Hardware.js

@@ -4,18 +4,22 @@ import Dialog from "../Dialog";
 
 import hardware from "../../data/hardware.json";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
+import Link from "@mui/material/Link";
-import Link from "@material-ui/core/Link";
+import Typography from "@mui/material/Typography";
-import Typography from "@material-ui/core/Typography";
+import IconButton from "@mui/material/IconButton";
-import IconButton from "@material-ui/core/IconButton";
+import ImageList from "@mui/material/ImageList";
-import ImageList from "@material-ui/core/ImageList";
+import ImageListItem from "@mui/material/ImageListItem";
-import ImageListItem from "@material-ui/core/ImageListItem";
+import ImageListItemBar from "@mui/material/ImageListItemBar";
-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": {
@@ -51,9 +55,9 @@ class Hardware extends Component {
   };
 
   render() {
-    var cols = isWidthDown("md", this.props.width)
+    var cols = isWidthDown("md", window.innerWidth)
-      ? isWidthDown("sm", this.props.width)
+      ? isWidthDown("sm", window.innerWidth)
-        ? isWidthDown("xs", this.props.width)
+        ? isWidthDown("xs", window.innerWidth)
           ? 2
           : 3
         : 4
@@ -93,8 +97,8 @@ class Hardware extends Component {
                       className={this.props.classes.expand}
                       aria-label="Vollbild"
                       onClick={() => this.handleClickOpen(hardwareInfo)}
-                    >
+                      size="large">
-                      <FontAwesomeIcon icon={faExpandAlt} size="xs" />
+                      <FontAwesomeIcon icon={faExpandAlt}  size="xs" />
                     </IconButton>
                   }
                 />
@@ -124,7 +128,7 @@ class Hardware extends Component {
               target="_blank"
               href={this.state.hardwareInfo.url}
               color="primary"
-            >
+              underline="hover">
               {Blockly.Msg.tutorials_hardware_here}
             </Link>
             .

src/components/Tutorial/HintTutorialExists.js

@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import Dialog from "../Dialog";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import Checkbox from "@material-ui/core/Checkbox";
+import Checkbox from "@mui/material/Checkbox";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControlLabel from "@mui/material/FormControlLabel";
 import * as Blockly from "blockly";
 import ReactMarkdown from "react-markdown";
 
@@ -78,7 +78,6 @@ class HintTutorialExists extends Component {
               checked={this.state.checked}
               onChange={(e) => this.onChange(e)}
               name="dialog"
-              color="primary"
             />
           }
           label={Blockly.Msg.labels_donotshowagain}

src/components/Tutorial/Instruction.js

@@ -4,8 +4,8 @@ import Hardware from "./Hardware";
 import Requirement from "./Requirement";
 import BlocklyWindow from "../Blockly/BlocklyWindow";
 
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkGemoji from "remark-gemoji";

src/components/Tutorial/Requirement.js

@@ -4,11 +4,11 @@ import { connect } from "react-redux";
 
 import clsx from "clsx";
 import { withRouter, Link } from "react-router-dom";
-import { alpha } from "@material-ui/core/styles";
+import { alpha } from "@mui/material/styles";
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
-import List from "@material-ui/core/List";
+import List from "@mui/material/List";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
@@ -166,6 +166,7 @@ class Requirement extends Component {
                             icon={
                               tutorialStatus === "Success" ? faCheck : faTimes
                             }
+                            
                           />
                         ) : (
                           <Typography

src/components/Tutorial/SolutionCheck.js

@@ -10,10 +10,10 @@ import Dialog from "../Dialog";
 
 import { checkXml } from "../../helpers/compareXml";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from "@mui/material/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -62,8 +62,8 @@ class SolutionCheck extends Component {
             className={`solutionCheck ${this.props.classes.compile}`}
             style={{ width: "40px", height: "40px", marginRight: "5px" }}
             onClick={() => this.check()}
-          >
+            size="large">
-            <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
+            <FontAwesomeIcon icon={faClipboardCheck}  size="xs" />
           </IconButton>
         </Tooltip>
 

src/components/Tutorial/StepperHorizontal.js

@@ -7,12 +7,12 @@ import { withRouter } from "react-router-dom";
 import clsx from "clsx";
 
 // import tutorials from '../../data/tutorials';
-import { alpha } from "@material-ui/core/styles";
+import { alpha } from "@mui/material/styles";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -127,6 +127,7 @@ class StepperHorizontal extends Component {
                   <FontAwesomeIcon
                     className={this.props.classes.icon}
                     icon={tutorialStatus === "Success" ? faCheck : faTimes}
+                    
                   />
                 </div>
               ) : null}

src/components/Tutorial/StepperVertical.js

@@ -6,12 +6,12 @@ import { tutorialStep } from "../../actions/tutorialActions";
 import { withRouter } from "react-router-dom";
 
 import clsx from "clsx";
-import { alpha } from "@material-ui/core/styles";
+import { alpha } from "@mui/material/styles";
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import Stepper from "@material-ui/core/Stepper";
+import Stepper from "@mui/material/Stepper";
-import Step from "@material-ui/core/Step";
+import Step from "@mui/material/Step";
-import StepLabel from "@material-ui/core/StepLabel";
+import StepLabel from "@mui/material/StepLabel";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 
 const styles = (theme) => ({
   verticalStepper: {
@@ -23,13 +23,12 @@ const styles = (theme) => ({
     // borderWidth: '2px',
     borderRadius: "50%",
     borderColor: theme.palette.secondary.main,
-    width: "12px",
+    width: "1rem",
-    height: "12px",
     margin: "0 auto",
   },
   stepIconLarge: {
-    width: "24px",
+    width: "2rem",
-    height: "24px",
+    height: "1rem",
   },
   stepIconLargeSuccess: {
     borderColor: theme.palette.primary.main,

src/components/Tutorial/Tutorial.js

@@ -21,8 +21,8 @@ import NotFound from "../NotFound";
 import * as Blockly from "blockly";
 import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
 
-import Card from "@material-ui/core/Card";
+import Card from "@mui/material/Card";
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 
 class Tutorial extends Component {
   componentDidMount() {

src/components/Tutorial/TutorialHome.js

@@ -17,11 +17,11 @@ import clsx from "clsx";
 import Breadcrumbs from "../Breadcrumbs";
 
 import { Link } from "react-router-dom";
-import { alpha } from "@material-ui/core/styles";
+import { alpha } from "@mui/material/styles";
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
-import Paper from "@material-ui/core/Paper";
+import Paper from "@mui/material/Paper";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 
 import {
   faCheck,
@@ -33,10 +33,11 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly";
 import ReactStars from "react-rating-stars-component";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from "@mui/material/IconButton";
 import Snackbar from "../Snackbar";
-import Divider from "@material-ui/core/Divider";
+import Divider from "@mui/material/Divider";
+import DeviceSelection from "../DeviceSelection";
 
 const styles = (theme) => ({
   outerDiv: {
@@ -243,14 +244,11 @@ class TutorialHome extends Component {
                             cy="50%"
                             fill="none"
                             stroke-width="10"
-                            stroke-dashoffset={`${
+                            stroke-dashoffset={`${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))
-                            stroke-dasharray={`${
+                              } ${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                              75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
+                              }`}
-                            } ${
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                            }`}
                           ></circle>
                         )}
                         {success < 1 && !error ? (
@@ -265,9 +263,8 @@ class TutorialHome extends Component {
                             cy="50%"
                             fill="none"
                             stroke-width="10"
-                            stroke-dashoffset={`${
+                            stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
+                              }`}
-                            }`}
                             stroke-dasharray={`${75 * 2 * Math.PI}`}
                           ></circle>
                         ) : null}
@@ -279,8 +276,8 @@ class TutorialHome extends Component {
                         tutorialStatus === "Error"
                           ? this.props.classes.outerDivError
                           : tutorialStatus === "Success"
-                          ? this.props.classes.outerDivSuccess
+                            ? this.props.classes.outerDivSuccess
-                          : null
+                            : null
                       )}
                     >
                       <div className={this.props.classes.innerDiv}>
@@ -290,6 +287,7 @@ class TutorialHome extends Component {
                             icon={
                               tutorialStatus === "Success" ? faCheck : faTimes
                             }
+                            
                           />
                         ) : (
                           <Typography
@@ -311,6 +309,7 @@ class TutorialHome extends Component {
             );
           })}
         </Grid>
+        <DeviceSelection />
         {this.props.user ? (
           <div>
             <h2>User Tutorials</h2>
@@ -381,8 +380,8 @@ class TutorialHome extends Component {
                                   type: "success",
                                 });
                               }}
-                            >
+                              size="large">
-                              <FontAwesomeIcon icon={faShareAlt} size="xs" />
+                              <FontAwesomeIcon icon={faShareAlt} size="xs"  />
                             </IconButton>
                           </Tooltip>
                           <Tooltip
@@ -392,8 +391,8 @@ class TutorialHome extends Component {
                             <IconButton
                               className={`publicTutorial ${this.props.classes.button}`}
                               disabled={!tutorial.public}
-                            >
+                              size="large">
-                              <FontAwesomeIcon icon={faEye} size="xs" />
+                              <FontAwesomeIcon icon={faEye} size="xs"  />
                             </IconButton>
                           </Tooltip>
                           {tutorial.review ? (
@@ -404,7 +403,7 @@ class TutorialHome extends Component {
                               <IconButton
                                 className={`publicTutorial ${this.props.classes.button}`}
                                 disabled={!tutorial.review}
-                              >
+                                size="large">
                                 <FontAwesomeIcon icon={faUserCheck} size="xs" />
                               </IconButton>
                             </Tooltip>

src/components/User/Account.js

@@ -5,16 +5,16 @@ import { connect } from 'react-redux';
 import Breadcrumbs from '../Breadcrumbs';
 import Alert from '../Alert';
 
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
-import List from '@material-ui/core/List';
+import List from '@mui/material/List';
-import ListItem from '@material-ui/core/ListItem';
+import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
+import ListItemText from '@mui/material/ListItemText';
-import Divider from '@material-ui/core/Divider';
+import Divider from '@mui/material/Divider';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
-import Link from '@material-ui/core/Link';
+import Link from '@mui/material/Link';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '@mui/material/Tooltip';
 
 import { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox, faUserTag } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -30,14 +30,19 @@ export class Account extends Component {
 
         <h1>Account</h1>
         <Alert>
-          Alle Angaben stammen von <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> und können dort verwaltet werden.
+          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.
         </Alert>
         <Paper style={{ width: 'max-content', maxWidth: '100%' }}>
           <List>
             <ListItem>
               <Tooltip title='Nutzername'>
                 <ListItemIcon>
-                  <FontAwesomeIcon icon={faUser} />
+                  <FontAwesomeIcon icon={faUser}  />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary={`Name: ${user.name}`} />
@@ -45,14 +50,14 @@ export class Account extends Component {
             <ListItem>
               <Tooltip title='Email'>
                 <ListItemIcon>
-                  <FontAwesomeIcon icon={faAt} />
+                  <FontAwesomeIcon icon={faAt}  />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary={`Email: ${user.email}`} />
             </ListItem>
             <ListItem>
               <ListItemIcon>
-                <FontAwesomeIcon icon={faUserTag} />
+                <FontAwesomeIcon icon={faUserTag}  />
               </ListItemIcon>
               <ListItemText primary={`Userrolle: ${user.blocklyRole}`} />
             </ListItem>
@@ -62,7 +67,12 @@ 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/'}>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/'}
+              underline="hover">openSenseMap</Link> um eine senseBox zu registrieren.
             </Typography>
             : <Typography style={{ fontWeight: 'bold', fontSize: '1.1rem' }}>
               Du hast {this.props.user.boxes.length} {this.props.user.boxes.length === 1 ? 'senseBox' : 'senseBoxen'} registriert:
@@ -73,7 +83,13 @@ 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' }}>
+                <Link
+                  rel="noreferrer"
+                  target="_blank"
+                  href={`https://opensensemap.org/explore/${box._id}`}
+                  color="primary"
+                  style={{ textDecoration: 'none', color: 'inherit' }}
+                  underline="hover">
                   <Paper>
                     <List>
                       <ListItem>
@@ -82,7 +98,7 @@ export class Account extends Component {
                       <ListItem>
                         <Tooltip title='Modell'>
                           <ListItemIcon>
-                            <FontAwesomeIcon icon={faBox} />
+                            <FontAwesomeIcon icon={faBox}  />
                           </ListItemIcon>
                         </Tooltip>
                         <div>
@@ -93,7 +109,7 @@ export class Account extends Component {
                       <ListItem>
                         <Tooltip title='Standort'>
                           <ListItemIcon>
-                            <FontAwesomeIcon icon={faMapMarkerAlt} />
+                            <FontAwesomeIcon icon={faMapMarkerAlt}  />
                           </ListItemIcon>
                         </Tooltip>
                         <div>
@@ -104,7 +120,7 @@ export class Account extends Component {
                       <ListItem>
                         <Tooltip title='Sensoren'>
                           <ListItemIcon>
-                            <FontAwesomeIcon icon={faCloudSunRain} />
+                            <FontAwesomeIcon icon={faCloudSunRain}  />
                           </ListItemIcon>
                         </Tooltip>
                         <div>
@@ -116,7 +132,7 @@ export class Account extends Component {
                   </Paper>
                 </Link>
               </Grid>
-            )
+            );
           })}
         </Grid>
       </div>

src/components/User/Login.js

@@ -10,15 +10,15 @@ import Snackbar from "../Snackbar";
 import Alert from "../Alert";
 import Breadcrumbs from "../Breadcrumbs";
 
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from "@mui/material/IconButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-import TextField from "@material-ui/core/TextField";
+import TextField from "@mui/material/TextField";
-import Divider from "@material-ui/core/Divider";
+import Divider from "@mui/material/Divider";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import InputAdornment from "@mui/material/InputAdornment";
-import CircularProgress from "@material-ui/core/CircularProgress";
+import CircularProgress from "@mui/material/CircularProgress";
-import Link from "@material-ui/core/Link";
+import Link from "@mui/material/Link";
 import * as Blockly from "blockly";
 
 export class Login extends Component {
@@ -38,6 +38,19 @@ 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) {
@@ -112,7 +125,7 @@ export class Login extends Component {
               rel="noreferrer"
               target="_blank"
               href={"https://opensensemap.org/"}
-            >
+              underline="hover">
               openSenseMap
             </Link>{" "}
             {Blockly.Msg.login_osem_account_02}.
@@ -125,6 +138,7 @@ export class Login extends Component {
           />
           <form onSubmit={this.onSubmit}>
             <TextField
+              variant="standard"
               style={{ marginBottom: "10px" }}
               // variant='outlined'
               type="text"
@@ -132,9 +146,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}
@@ -147,18 +161,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"
@@ -182,7 +196,7 @@ export class Login extends Component {
               target="_blank"
               href={"https://opensensemap.org/"}
               color="primary"
-            >
+              underline="hover">
               {Blockly.Msg.login_lostpassword}
             </Link>
           </p>
@@ -199,7 +213,7 @@ export class Login extends Component {
               rel="noreferrer"
               target="_blank"
               href={"https://opensensemap.org/"}
-            >
+              underline="hover">
               openSenseMap
             </Link>
             .

src/components/Workspace/Compile.js

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

src/components/Workspace/CopyCode.js

@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { workspaceName } from "../../actions/workspaceActions";
 
-import { withStyles } from "@material-ui/core/styles";
+import withStyles from '@mui/styles/withStyles';
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from "@mui/material/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 
 import { faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -68,7 +68,7 @@ class CopyCode extends Component {
             <IconButton
               className={`copyCode ${this.props.classes.iconButton}`}
               onClick={() => this.copyCode()}
-            >
+              size="large">
               <FontAwesomeIcon icon={faCopy} size="xs" />
             </IconButton>
           </Tooltip>

src/components/Workspace/DeleteProject.js

@@ -7,9 +7,9 @@ import { withRouter } from 'react-router-dom';
 
 import Snackbar from '../Snackbar';
 
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
-import IconButton from '@material-ui/core/IconButton';
+import IconButton from '@mui/material/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '@mui/material/Tooltip';
 
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -61,8 +61,8 @@ class DeleteProject extends Component {
           <IconButton
             className={this.props.classes.buttonTrash}
             onClick={() => this.props.deleteProject(this.props.projectType, this.props.project._id)}
-          >
+            size="large">
-            <FontAwesomeIcon icon={faTrashAlt} size="xs" />
+            <FontAwesomeIcon icon={faTrashAlt} size="xs"  />
           </IconButton>
         </Tooltip>