diff --git a/package.json b/package.json index a350d05..9ebe8f1 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,15 @@ "@blockly/plugin-typed-variable-modal": "^4.0.5", "@blockly/workspace-backpack": "^2.0.12", "@blockly/zoom-to-fit": "^2.0.14", + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.19", - "@material-ui/core": "^4.12.4", - "@material-ui/lab": "^4.0.0-alpha.61", "@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", @@ -36,7 +39,7 @@ "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", diff --git a/src/App.css b/src/App.css index e9d7fc2..afc53a1 100644 --- a/src/App.css +++ b/src/App.css @@ -53,7 +53,7 @@ td { padding-top: 12px; padding-bottom: 12px; text-align: left; - background-color: #4eaf47; + border-color: #4eaf47; color: white; } diff --git a/src/App.js b/src/App.js index 29289e5..fd19339 100644 --- a/src/App.js +++ b/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 ( - - - - - - - + + + + + + + + + ); } } diff --git a/src/components/Alert.js b/src/components/Alert.js index 01bac66..2d24b17 100644 --- a/src/components/Alert.js +++ b/src/components/Alert.js @@ -1,9 +1,9 @@ import React, { Component } from "react"; -import { withStyles } from "@material-ui/core/styles"; -import { alpha } from "@material-ui/core/styles"; +import withStyles from '@mui/styles/withStyles'; +import { alpha } from "@mui/material/styles"; -import Typography from "@material-ui/core/Typography"; +import Typography from "@mui/material/Typography"; const styles = (theme) => ({ alert: { diff --git a/src/components/Blockly/BlocklyComponent.jsx b/src/components/Blockly/BlocklyComponent.jsx index 20c0795..ec97078 100644 --- a/src/components/Blockly/BlocklyComponent.jsx +++ b/src/components/Blockly/BlocklyComponent.jsx @@ -27,7 +27,7 @@ import Blockly from "blockly/core"; import "blockly/blocks"; import Toolbox from "./toolbox/Toolbox"; -import { Card } from "@material-ui/core"; +import { Card } from "@mui/material"; import { ScrollOptions, ScrollBlockDragger, diff --git a/src/components/Blockly/toolbox/Toolbox.js b/src/components/Blockly/toolbox/Toolbox.js index 54a157c..6085724 100644 --- a/src/components/Blockly/toolbox/Toolbox.js +++ b/src/components/Blockly/toolbox/Toolbox.js @@ -611,7 +611,6 @@ class Toolbox extends React.Component { colour={getColour().procedures} custom="PROCEDURE" > - 0 ? - + {this.props.content.splice(0, this.props.content.length-1).map((content, i) => ( diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js index 7741b20..c8eb0f8 100644 --- a/src/components/CodeEditor/CodeEditor.js +++ b/src/components/CodeEditor/CodeEditor.js @@ -2,11 +2,11 @@ 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"; diff --git a/src/components/CodeEditor/Compile.js b/src/components/CodeEditor/Compile.js index 26a9d4b..dba8ea9 100644 --- a/src/components/CodeEditor/Compile.js +++ b/src/components/CodeEditor/Compile.js @@ -5,19 +5,19 @@ import { workspaceName } from "../../actions/workspaceActions"; import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace"; -import { withStyles } from "@material-ui/core/styles"; -import Button from "@material-ui/core/Button"; -import Backdrop from "@material-ui/core/Backdrop"; -import CircularProgress from "@material-ui/core/CircularProgress"; -import IconButton from "@material-ui/core/IconButton"; -import Tooltip from "@material-ui/core/Tooltip"; -import Divider from "@material-ui/core/Divider"; +import withStyles from '@mui/styles/withStyles'; +import Button from "@mui/material/Button"; +import Backdrop from "@mui/material/Backdrop"; +import CircularProgress from "@mui/material/CircularProgress"; +import IconButton from "@mui/material/IconButton"; +import Tooltip from "@mui/material/Tooltip"; +import Divider from "@mui/material/Divider"; import { 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 { this.compile()} - > - + size="large"> + ) : ( @@ -201,6 +201,7 @@ class Compile extends Component { > {" "} Kompilieren @@ -301,6 +302,7 @@ class Compile extends Component { > {" "} Starte Übertragung diff --git a/src/components/CodeEditor/SaveIcon.js b/src/components/CodeEditor/SaveIcon.js index c776485..9400fc7 100644 --- a/src/components/CodeEditor/SaveIcon.js +++ b/src/components/CodeEditor/SaveIcon.js @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCircleNotch, faSave } from "@fortawesome/free-solid-svg-icons"; -import Tooltip from "@material-ui/core/Tooltip"; +import Tooltip from "@mui/material/Tooltip"; import React from "react"; const SaveIcon = ({ loading }) => ( @@ -17,6 +17,7 @@ const SaveIcon = ({ loading }) => ( ( transform: "translate(-50%,-50%)", }} icon={faSave} + color={loading ? "grey" : "green"} size={loading ? "1x" : "lg"} /> diff --git a/src/components/CodeEditor/SerialMonitor.js b/src/components/CodeEditor/SerialMonitor.js index 0636301..c9cb471 100644 --- a/src/components/CodeEditor/SerialMonitor.js +++ b/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([]); diff --git a/src/components/CodeEditor/Sidebar.js b/src/components/CodeEditor/Sidebar.js index 5e2b976..d170054 100644 --- a/src/components/CodeEditor/Sidebar.js +++ b/src/components/CodeEditor/Sidebar.js @@ -1,13 +1,13 @@ import React from "react"; import Blockly from "blockly"; import { useSelector } from "react-redux"; -import Accordion from "@material-ui/core/Accordion"; -import AccordionSummary from "@material-ui/core/AccordionSummary"; -import AccordionDetails from "@material-ui/core/AccordionDetails"; -import Typography from "@material-ui/core/Typography"; +import Accordion from "@mui/material/Accordion"; +import AccordionSummary from "@mui/material/AccordionSummary"; +import AccordionDetails from "@mui/material/AccordionDetails"; +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"; diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js index e7506ac..e1a3f74 100644 --- a/src/components/CodeViewer.js +++ b/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 "@material-ui/core/styles"; -import MuiAccordion from "@material-ui/core/Accordion"; -import MuiAccordionSummary from "@material-ui/core/AccordionSummary"; -import MuiAccordionDetails from "@material-ui/core/AccordionDetails"; -import { Card } from "@material-ui/core"; +import withStyles from '@mui/styles/withStyles'; +import MuiAccordion from "@mui/material/Accordion"; +import MuiAccordionSummary from "@mui/material/AccordionSummary"; +import MuiAccordionDetails from "@mui/material/AccordionDetails"; +import { Card } from "@mui/material"; import * 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) => ; + const Accordion = withStyles((theme) => ({ root: { border: `1px solid ${theme.palette.secondary.main}`, diff --git a/src/components/DeviceSelection.js b/src/components/DeviceSelection.js index 4645c0f..d096d66 100644 --- a/src/components/DeviceSelection.js +++ b/src/components/DeviceSelection.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 * 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"; const styles = (theme) => ({ @@ -67,7 +67,7 @@ class DeviceSeclection extends Component {
- this.onclick(e, "mcu")}> + this.onclick(e, "mcu")} size="large"> Sensebox ESP

 */} - this.onclick(e, "mini")}> + this.onclick(e, "mini")} size="large"> FAQ {FaqQuestions().map((object, i) => { return ( - this.handleChange(`panel${i}`)} > - } > {object.question} - - + + - - + + ); })} {this.props.button ? ( diff --git a/src/components/Footer.js b/src/components/Footer.js index 2ee892d..1052297 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { Link } from 'react-router-dom'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; class Footer extends Component { render() { diff --git a/src/components/Home.js b/src/components/Home.js index 13a4661..0b008b2 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -14,10 +14,10 @@ import TrashcanButtons from "./Workspace/TrashcanButtons"; // import HintTutorialExists from "./Tutorial/HintTutorialExists"; import DeviceSelection from "./DeviceSelection"; -import Grid from "@material-ui/core/Grid"; -import IconButton from "@material-ui/core/IconButton"; -import Tooltip from "@material-ui/core/Tooltip"; -import { withStyles } from "@material-ui/core/styles"; +import Grid from "@mui/material/Grid"; +import IconButton from "@mui/material/IconButton"; +import Tooltip from "@mui/material/Tooltip"; +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"> + diff --git a/src/components/Impressum.js b/src/components/Impressum.js index 01388c7..1fc6caa 100644 --- a/src/components/Impressum.js +++ b/src/components/Impressum.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import { withRouter } from "react-router-dom"; -import Container from "@material-ui/core/Container"; +import Container from "@mui/material/Container"; class Impressum extends Component { render() { return ( diff --git a/src/components/MaxBlocks.js b/src/components/MaxBlocks.js index bf4981a..586dcd1 100644 --- a/src/components/MaxBlocks.js +++ b/src/components/MaxBlocks.js @@ -5,8 +5,8 @@ import { workspaceChange } from '../actions/workspaceActions'; import * as Blockly from 'blockly/core'; -import TextField from '@material-ui/core/TextField'; -import Button from '@material-ui/core/Button'; +import TextField from '@mui/material/TextField'; +import Button from '@mui/material/Button'; class MaxBlocks extends Component { @@ -28,12 +28,12 @@ class MaxBlocks extends Component { return (
+ value={this.state.max} /> diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 228e7bb..9b03d76 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -8,20 +8,20 @@ import senseboxLogo from "./sensebox_logo.svg"; import { withRouter } from "react-router-dom"; -import { withStyles } from "@material-ui/core/styles"; -import Drawer from "@material-ui/core/Drawer"; -import AppBar from "@material-ui/core/AppBar"; -import Toolbar from "@material-ui/core/Toolbar"; -import List from "@material-ui/core/List"; -import Typography from "@material-ui/core/Typography"; -import Divider from "@material-ui/core/Divider"; -import IconButton from "@material-ui/core/IconButton"; -import ListItem from "@material-ui/core/ListItem"; -import ListItemIcon from "@material-ui/core/ListItemIcon"; -import ListItemText from "@material-ui/core/ListItemText"; -import LinearProgress from "@material-ui/core/LinearProgress"; +import withStyles from '@mui/styles/withStyles'; +import Drawer from "@mui/material/Drawer"; +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import List from "@mui/material/List"; +import Typography from "@mui/material/Typography"; +import Divider from "@mui/material/Divider"; +import IconButton from "@mui/material/IconButton"; +import ListItem from "@mui/material/ListItem"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import LinearProgress from "@mui/material/LinearProgress"; import Tour from "reactour"; -import { Badge } from "@material-ui/core"; +import { Badge } from "@mui/material"; import { home, assessment } from "./Tour"; import { faBars, @@ -40,7 +40,7 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as Blockly from "blockly"; -import Tooltip from "@material-ui/core/Tooltip"; +import Tooltip from "@mui/material/Tooltip"; const styles = (theme) => ({ drawerWidth: { @@ -116,7 +116,7 @@ class Navbar extends Component { onClick={this.toggleDrawer} style={{ margin: "0 10px" }} className="MenuButton" - > + size="large"> @@ -142,7 +142,7 @@ class Navbar extends Component { ) : null} {isHome ? ( - + + size="large"> ) : null} {isAssessment ? ( - + + size="large"> @@ -214,11 +214,11 @@ class Navbar extends Component {
{[ - { - text: Blockly.Msg.navbar_blockly, - icon: faPuzzlePiece, - link: "/", - }, + { + text: Blockly.Msg.navbar_blockly, + icon: faPuzzlePiece, + link: "/", + }, { text: Blockly.Msg.navbar_tutorials, icon: faChalkboardTeacher, @@ -267,7 +267,7 @@ class Navbar extends Component { {item.text === "Code Editor" ? ( - + ) : ( @@ -329,9 +329,9 @@ class Navbar extends Component { onClick={ item.function ? () => { - item.function(); - this.toggleDrawer(); - } + item.function(); + this.toggleDrawer(); + } : this.toggleDrawer } > diff --git a/src/components/News.js b/src/components/News.js index 8ece760..09e3785 100644 --- a/src/components/News.js +++ b/src/components/News.js @@ -4,11 +4,11 @@ import Breadcrumbs from './Breadcrumbs'; import { withRouter } from 'react-router-dom'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import Button from '@mui/material/Button'; +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 = ` diff --git a/src/components/NotFound.js b/src/components/NotFound.js index 01b03f7..9cdbc21 100644 --- a/src/components/NotFound.js +++ b/src/components/NotFound.js @@ -4,8 +4,8 @@ import Breadcrumbs from './Breadcrumbs'; import { withRouter } from 'react-router-dom'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import * as Blockly from 'blockly' class NotFound extends Component { diff --git a/src/components/Privacy.js b/src/components/Privacy.js index 47b1d0b..e01d8d6 100644 --- a/src/components/Privacy.js +++ b/src/components/Privacy.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; -import Container from '@material-ui/core/Container'; +import Container from '@mui/material/Container'; class Privay extends Component { render() { return ( diff --git a/src/components/Project/Project.js b/src/components/Project/Project.js index df0253d..53148ed 100644 --- a/src/components/Project/Project.js +++ b/src/components/Project/Project.js @@ -10,8 +10,8 @@ import { withRouter } from 'react-router-dom'; import Home from '../Home'; import Breadcrumbs from '../Breadcrumbs'; -import Backdrop from '@material-ui/core/Backdrop'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import Backdrop from '@mui/material/Backdrop'; +import CircularProgress from '@mui/material/CircularProgress'; class Project extends Component { diff --git a/src/components/Project/ProjectHome.js b/src/components/Project/ProjectHome.js index 445781f..7ce3538 100644 --- a/src/components/Project/ProjectHome.js +++ b/src/components/Project/ProjectHome.js @@ -11,13 +11,13 @@ import BlocklyWindow from "../Blockly/BlocklyWindow"; import Snackbar from "../Snackbar"; import WorkspaceFunc from "../Workspace/WorkspaceFunc"; -import { withStyles } from "@material-ui/core/styles"; -import Grid from "@material-ui/core/Grid"; -import Paper from "@material-ui/core/Paper"; -import Divider from "@material-ui/core/Divider"; -import Typography from "@material-ui/core/Typography"; -import Backdrop from "@material-ui/core/Backdrop"; -import CircularProgress from "@material-ui/core/CircularProgress"; +import withStyles from '@mui/styles/withStyles'; +import Grid from "@mui/material/Grid"; +import Paper from "@mui/material/Paper"; +import Divider from "@mui/material/Divider"; +import Typography from "@mui/material/Typography"; +import Backdrop from "@mui/material/Backdrop"; +import CircularProgress from "@mui/material/CircularProgress"; import DeviceSelection from "../DeviceSelection"; const styles = (theme) => ({ diff --git a/src/components/SensorInfo.js b/src/components/SensorInfo.js index 49156bb..0c0ba67 100644 --- a/src/components/SensorInfo.js +++ b/src/components/SensorInfo.js @@ -1,9 +1,9 @@ import React from "react"; -import Box from "@material-ui/core/Box"; -import Tab from "@material-ui/core/Tab"; -import TabContext from "@material-ui/lab/TabContext"; -import TabList from "@material-ui/lab/TabList"; -import TabPanel from "@material-ui/lab/TabPanel"; +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"; diff --git a/src/components/Settings/DeviceSelector.js b/src/components/Settings/DeviceSelector.js index b506527..6e6fbac 100644 --- a/src/components/Settings/DeviceSelector.js +++ b/src/components/Settings/DeviceSelector.js @@ -5,12 +5,12 @@ import { setBoard } from '../../actions/boardAction'; import * as Blockly from 'blockly/core'; -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class DeviceSelector extends Component { @@ -22,18 +22,18 @@ class DeviceSelector extends Component { render(){ - return( + return (
{Blockly.Msg.settings_board} {Blockly.Msg.settings_board_text} - + {Blockly.Msg.settings_board} diff --git a/src/components/Settings/LanguageSelector.js b/src/components/Settings/LanguageSelector.js index f069b1b..986ddc9 100644 --- a/src/components/Settings/LanguageSelector.js +++ b/src/components/Settings/LanguageSelector.js @@ -5,12 +5,12 @@ import { setLanguage } from '../../actions/generalActions'; import * as Blockly from 'blockly/core'; -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class LanguageSelector extends Component { @@ -25,18 +25,18 @@ class LanguageSelector extends Component { } render(){ - return( + return (
{Blockly.Msg.settings_language} {Blockly.Msg.settings_language_text} - + {Blockly.Msg.settings_language} diff --git a/src/components/Settings/OtaSelector.js b/src/components/Settings/OtaSelector.js index 8a55b82..5a6b7bd 100644 --- a/src/components/Settings/OtaSelector.js +++ b/src/components/Settings/OtaSelector.js @@ -5,12 +5,12 @@ import { setPlatform } from "../../actions/generalActions"; import * as Blockly from "blockly/core"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import FormControl from "@material-ui/core/FormControl"; -import Select from "@material-ui/core/Select"; -import Typography from "@material-ui/core/Typography"; -import FormHelperText from "@material-ui/core/FormHelperText"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; +import Typography from "@mui/material/Typography"; +import FormHelperText from "@mui/material/FormHelperText"; class OtaSelector extends Component { componentDidMount() { @@ -33,16 +33,16 @@ class OtaSelector extends Component { https://sensebox.de/app - + {Blockly.Msg.settings_statistics} diff --git a/src/components/Settings/RenderSelector.js b/src/components/Settings/RenderSelector.js index 7359283..e4fa139 100644 --- a/src/components/Settings/RenderSelector.js +++ b/src/components/Settings/RenderSelector.js @@ -5,12 +5,12 @@ import { setRenderer } from '../../actions/generalActions'; import * as Blockly from 'blockly/core' -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class RenderSelector extends Component { @@ -26,14 +26,14 @@ class RenderSelector extends Component {
{Blockly.Msg.settings_renderer} {Blockly.Msg.settings_renderer_text} - + {Blockly.Msg.settings_renderer} diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js index a0f9361..6e88472 100644 --- a/src/components/Settings/Settings.js +++ b/src/components/Settings/Settings.js @@ -14,8 +14,8 @@ import OtaSelector from "./OtaSelector"; import SoundsSelector from "./SoundsSelector"; import DeviceSelector from "./DeviceSelector"; -import Button from "@material-ui/core/Button"; -import Paper from "@material-ui/core/Paper"; +import Button from "@mui/material/Button"; +import Paper from "@mui/material/Paper"; class Settings extends Component { componentDidMount() { diff --git a/src/components/Settings/SoundsSelector.js b/src/components/Settings/SoundsSelector.js index a7535a8..c253a30 100644 --- a/src/components/Settings/SoundsSelector.js +++ b/src/components/Settings/SoundsSelector.js @@ -5,12 +5,12 @@ import { setSounds } from "../../actions/generalActions"; import * as Blockly from "blockly/core"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import FormControl from "@material-ui/core/FormControl"; -import Select from "@material-ui/core/Select"; -import Typography from "@material-ui/core/Typography"; -import FormHelperText from "@material-ui/core/FormHelperText"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; +import Typography from "@mui/material/Typography"; +import FormHelperText from "@mui/material/FormHelperText"; class SoundsSelector extends Component { componentDidMount() { @@ -30,16 +30,16 @@ class SoundsSelector extends Component { > {Blockly.Msg.settings_sounds_text} - + {Blockly.Msg.settings_sounds} diff --git a/src/components/Settings/StatsSelector.js b/src/components/Settings/StatsSelector.js index b0b3cfe..6ab82d6 100644 --- a/src/components/Settings/StatsSelector.js +++ b/src/components/Settings/StatsSelector.js @@ -5,12 +5,12 @@ import { setStatistics } from '../../actions/generalActions'; import * as Blockly from 'blockly/core' -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class StatsSelector extends Component { @@ -25,14 +25,14 @@ class StatsSelector extends Component {
{Blockly.Msg.settings_statistics} {Blockly.Msg.settings_statistics_text} - + {Blockly.Msg.settings_statistics} diff --git a/src/components/Snackbar.js b/src/components/Snackbar.js index 55e7429..554f335 100644 --- a/src/components/Snackbar.js +++ b/src/components/Snackbar.js @@ -1,9 +1,9 @@ import React, { Component } from 'react'; -import { withStyles } from '@material-ui/core/styles'; -import IconButton from '@material-ui/core/IconButton'; -import MaterialUISnackbar from '@material-ui/core/Snackbar'; -import SnackbarContent from '@material-ui/core/SnackbarContent'; +import withStyles from '@mui/styles/withStyles'; +import IconButton from '@mui/material/IconButton'; +import MaterialUISnackbar from '@mui/material/Snackbar'; +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={ - - + + } message={this.props.message} diff --git a/src/components/TooltipViewer.js b/src/components/TooltipViewer.js index 1d1225d..758a67b 100644 --- a/src/components/TooltipViewer.js +++ b/src/components/TooltipViewer.js @@ -1,19 +1,21 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; -import withWidth from "@material-ui/core/withWidth"; -import { Button, Card } from "@material-ui/core"; +import { Button, Card } from "@mui/material"; import * as Blockly from "blockly"; -import CardContent from "@material-ui/core/CardContent"; -import Typography from "@material-ui/core/Typography"; +import CardContent from "@mui/material/CardContent"; +import Typography from "@mui/material/Typography"; import ReactMarkdown from "react-markdown"; -import Dialog from "@material-ui/core/Dialog"; -import DialogActions from "@material-ui/core/DialogActions"; -import DialogContent from "@material-ui/core/DialogContent"; -import Slide from "@material-ui/core/Slide"; +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) => ; + const Transition = React.forwardRef(function Transition(props, ref) { return ; }); @@ -53,7 +55,7 @@ class TooltipViewer extends Component { {Blockly.Msg.tooltip_viewer} - + {this.props.tooltip} diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js index ddd7248..4f95d59 100644 --- a/src/components/Tutorial/Assessment.js +++ b/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 "@material-ui/core/Grid"; -import Card from "@material-ui/core/Card"; -import Typography from "@material-ui/core/Typography"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; +import Typography from "@mui/material/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) => ; const styles = (theme) => ({ codeOn: { @@ -98,11 +102,10 @@ class Assessment extends Component { } > this.onChange()} - > - + size="large"> + ({ errorColor: { @@ -139,7 +139,6 @@ class BlocklyExample extends Component { this.onChange(e.target.checked)} - color="primary" /> } /> diff --git a/src/components/Tutorial/Builder/Builder.js b/src/components/Tutorial/Builder/Builder.js index d603e00..d1c6052 100644 --- a/src/components/Tutorial/Builder/Builder.js +++ b/src/components/Tutorial/Builder/Builder.js @@ -33,19 +33,19 @@ import Snackbar from "../../Snackbar"; import Public from "./Public"; import Review from "./Review"; -import { withStyles } from "@material-ui/core/styles"; -import Button from "@material-ui/core/Button"; -import Backdrop from "@material-ui/core/Backdrop"; -import CircularProgress from "@material-ui/core/CircularProgress"; -import Divider from "@material-ui/core/Divider"; -import FormHelperText from "@material-ui/core/FormHelperText"; -import Radio from "@material-ui/core/Radio"; -import RadioGroup from "@material-ui/core/RadioGroup"; -import FormControlLabel from "@material-ui/core/FormControlLabel"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import FormControl from "@material-ui/core/FormControl"; -import Select from "@material-ui/core/Select"; +import withStyles from '@mui/styles/withStyles'; +import Button from "@mui/material/Button"; +import Backdrop from "@mui/material/Backdrop"; +import CircularProgress from "@mui/material/CircularProgress"; +import Divider from "@mui/material/Divider"; +import FormHelperText from "@mui/material/FormHelperText"; +import Radio from "@mui/material/Radio"; +import RadioGroup from "@mui/material/RadioGroup"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; import * as Blockly from "blockly"; const styles = (theme) => ({ @@ -407,7 +407,7 @@ class Builder extends Component { } + control={} 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={} + control={} 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={} + control={} label={Blockly.Msg.builder_deleteExisting} labelPlacement="end" /> @@ -470,12 +470,12 @@ class Builder extends Component { Tutorial