fix baground mcu image

src/actions/boardAction.js

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

src/components/DeviceSelection.js

@@ -7,8 +7,6 @@ import { withStyles } from "@material-ui/core/styles";
 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: {
@@ -49,9 +47,6 @@ class DeviceSeclection extends Component {
   };
 
   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 });
@@ -115,21 +110,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/reducers/boardReducer.js

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