open device selection only once

src/App.css

@@ -62,3 +62,13 @@ td {
   flex-direction: column;
   align-items: center;
 }
+
+:root {
+  --url: url('./data/mcu_opacity.png');
+}
+
+.blocklySvg {
+  background-image: var(--url);
+  background-position: center;
+  background-repeat: no-repeat;
+}

src/components/DeviceSelection.js

@@ -4,11 +4,11 @@ import { connect } from "react-redux";
 import Dialog from "./Dialog";
 
 import { withStyles } from "@material-ui/core/styles";
-import Checkbox from "@material-ui/core/Checkbox";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
 import * as Blockly from "blockly";
 import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
 import { setBoard } from "../actions/boardAction";
+import mini_opacity from "../data/mini_opacity.png"
+import mcu_opacity from "../data/mcu_opacity.png"
 
 const styles = (theme) => ({
   link: {
@@ -27,41 +27,32 @@ const styles = (theme) => ({
 
 class DeviceSeclection extends Component {
   constructor(props) {
-    var previousPageWasAnotherDomain = props.pageVisits === 0;
-    var userWantToKeepBoard = window.localStorage.getItem("board")
-      ? true
-      : false;
     super(props);
     this.state = {
-      open: userWantToKeepBoard
-        ? !userWantToKeepBoard
-        : previousPageWasAnotherDomain,
-      selectedBoard : "",
+      open: this.props.selectedBoard !== "" ? false : true,
+      selectedBoard : this.props.selectedBoard,
       saveSettings: false,
 
     };
   }
 
   toggleDialog = () => {
-    this.setState({ open: !this.state });
-    if(this.state.saveSettings){
-      window.localStorage.setItem("board", this.state.selectedBoard) 
-    }
+    
     this.props.setBoard(this.state.selectedBoard)
 
   };
 
-  onChange = (e) => {
-    if (e.target.checked) {
-      this.setState({ saveSettings: true});
-    } else {
-      this.setState({ saveSettings: false});
-    }
-  };
 
   onclick = (e, value) => {
     console.log(e, value)
+    const root = document.querySelector(':root');
+    root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity })`);
     this.setState({selectedBoard: value})
+    this.props.setBoard(value)
+    this.setState({ open: !this.state });
+   
+
+   
   };
 
   render() {
@@ -74,7 +65,6 @@ class DeviceSeclection extends Component {
         title={Blockly.Msg.deviceselection_head}
         content={""}
         onClick={this.toggleDialog}
-        button={Blockly.Msg.button_accept}
         disabled={this.state.selectedBoard===""}
       >
         <div>
@@ -124,21 +114,6 @@ class DeviceSeclection extends Component {
             </Grid>
           </Grid>
         </div>
-        <FormControlLabel
-          style={{ marginTop: "20px" }}
-          classes={{ label: this.props.classes.label }}
-          control={
-            <Checkbox
-              size={"small"}
-              value={true}
-              checked={this.state.checked}
-              onChange={(e) => this.onChange(e)}
-              name="dialog"
-              color="primary"
-            />
-          }
-          label={Blockly.Msg.deviceselection_keep_selection}
-        />
         <Typography variant="body1" >
           {Blockly.Msg.deviceselection_footnote} <a href="https://sensebox.github.io/blockly/">Arduino UNO</a> {Blockly.Msg.deviceselection_footnote_02} <a href="https://sensebox-blockly.netlify.app/ardublockly/?board=sensebox-mcu">senseBox MCU</a>
         </Typography>

src/components/Home.js

@@ -187,6 +187,7 @@ class Home extends Component {
             </Grid>
           ) : null}
         </Grid>
+        
         <DeviceSelection />
         {/* <HintTutorialExists /> */}
         {this.props.platform ? (

src/reducers/boardReducer.js

@@ -1,10 +1,7 @@
 import { BOARD } from '../actions/types';
 
 const initialValue = () => {
-  if (window.localStorage.getItem("board")) {
-    return window.localStorage.getItem("board");
-  }
-  return "bla";
+  return "";
 };
 
 const initialState = {