fix vertical stepper bug

src/components/Blockly/BlocklySvg.js

@@ -42,7 +42,13 @@ class BlocklySvg extends Component {
       // https://github.com/google/blockly/pull/3431/files#diff-00254795773903d3c0430915a68c9521R328
       cssContent += `.blocklyPath {
         fill-opacity: 1;
-      } `;
+      }
+      .blocklyPathDark {
+        display: flex;
+      }
+      .blocklyPathLight {
+        display: flex;
+      }  `;
 
       var css = '<defs><style type="text/css" xmlns="http://www.w3.org/1999/xhtml"><![CDATA[' + cssContent + ']]></style></defs>';
       var bbox = document.getElementsByClassName("blocklyBlockCanvas")[0].getBBox();

src/components/Tutorial/Builder/Hardware.js

@@ -15,7 +15,7 @@ import FormLabel from '@material-ui/core/FormLabel';
 
 const styles = theme => ({
   multiGridListTile: {
-    background: "#4EAF47",
+    background: theme.palette.primary.main,
     opacity: 0.9,
     height: '30px'
   },

src/components/Tutorial/Hardware.js

@@ -27,7 +27,7 @@ const styles = theme => ({
     color: theme.palette.text.primary
   },
   multiGridListTile: {
-    background: "#4EAF47",
+    background: theme.palette.primary.main,
     opacity: 0.9,
     height: '30px'
   },
@@ -95,7 +95,7 @@ class Hardware extends Component {
         >
           <div>
             <img src={`/media/hardware/${this.state.hardwareInfo.src}`} width="100%" alt={this.state.hardwareInfo.name} />
-            Weitere Informationen zur Hardware-Komponente findest du <Link href={this.state.hardwareInfo.url} color="primary">hier</Link>.
+            Weitere Informationen zur Hardware-Komponente findest du <Link rel="noreferrer" target="_blank" href={this.state.hardwareInfo.url} color="primary">hier</Link>.
           </div>
         </Dialog>
 

src/components/Tutorial/StepperHorizontal.js

@@ -51,6 +51,7 @@ class StepperHorizontal extends Component {
 
   render() {
     var tutorialId = this.props.currentTutorialId;
+    var tutorialIndex = this.props.currentTutorialIndex;
     var status = this.props.status.filter(status => status.id === tutorialId)[0];
     var tasks = status.tasks;
     var error = tasks.filter(task => task.type === 'error').length > 0;
@@ -69,8 +70,8 @@ class StepperHorizontal extends Component {
           : null}
         <div className={this.props.classes.stepper}>
           <Button
-            disabled={tutorialId === 1}
-            onClick={() => { this.props.history.push(`/tutorial/${tutorialId - 1}`) }}
+            disabled={tutorialIndex === 0}
+            onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
           >
             {'<'}
           </Button>
@@ -81,8 +82,8 @@ class StepperHorizontal extends Component {
             </div>
           </Tooltip>
           <Button
-            disabled={tutorialId + 1 > tutorials.length}
-            onClick={() => { this.props.history.push(`/tutorial/${tutorialId + 1}`) }}
+            disabled={tutorialIndex + 1 === tutorials.length}
+            onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
           >
             {'>'}
           </Button>
@@ -95,13 +96,15 @@ class StepperHorizontal extends Component {
 StepperHorizontal.propTypes = {
   status: PropTypes.array.isRequired,
   change: PropTypes.number.isRequired,
-  currentTutorialId: PropTypes.number.isRequired
+  currentTutorialId: PropTypes.number.isRequired,
+  currentTutorialIndex: PropTypes.number.isRequired
 };
 
 const mapStateToProps = state => ({
   change: state.tutorial.change,
   status: state.tutorial.status,
-  currentTutorialId: state.tutorial.currentId
+  currentTutorialId: state.tutorial.currentId,
+  currentTutorialIndex: state.tutorial.currentIndex
 });
 
 export default connect(mapStateToProps, null)(withRouter(withStyles(styles, { withTheme: true })(StepperHorizontal)));

src/components/WorkspaceFunc.js

@@ -106,7 +106,13 @@ class WorkspaceFunc extends Component {
       // https://github.com/google/blockly/pull/3431/files#diff-00254795773903d3c0430915a68c9521R328
       cssContent += `.blocklyPath {
         fill-opacity: 1;
-      } `;
+      }
+      .blocklyPathDark {
+        display: flex;
+      }
+      .blocklyPathLight {
+        display: flex;
+      }  `;
 
       var css = '<defs><style type="text/css" xmlns="http://www.w3.org/1999/xhtml"><![CDATA[' + cssContent + ']]></style></defs>';