Add green flag and stop buttons to blocks example

Add class name props to the components, and fix positioning for the green flag to be reusable.

src/components/green-flag/green-flag.css

@@ -2,10 +2,9 @@
     width: 1.1rem;
     height: 1.1rem;
     opacity: 0.5;
-    margin: 0.25rem 0.6rem;
     user-select: none;
     cursor: pointer;
-    transition: opacity 0.2s ease-out; /* @todo: standardize with var */ 
+    transition: opacity 0.2s ease-out; /* @todo: standardize with var */
 }
 
 .green-flag.is-active,

src/components/green-flag/green-flag.jsx

@@ -8,16 +8,20 @@ import styles from './green-flag.css';
 const GreenFlagComponent = function (props) {
     const {
         active,
+        className,
         onClick,
         title,
         ...componentProps
     } = props;
     return (
         <img
-            className={classNames({
-                [styles.greenFlag]: true,
-                [styles.isActive]: active
-            })}
+            className={classNames(
+                className,
+                styles.greenFlag,
+                {
+                    [styles.isActive]: active
+                }
+            )}
             src={greenFlagIcon}
             title={title}
             onClick={onClick}
@@ -27,6 +31,7 @@ const GreenFlagComponent = function (props) {
 };
 GreenFlagComponent.propTypes = {
     active: PropTypes.bool,
+    className: PropTypes.string,
     onClick: PropTypes.func.isRequired,
     title: PropTypes.string
 };

src/components/gui/gui.css

@@ -101,6 +101,10 @@
     position: relative;
 }
 
+.green-flag {
+    margin: 0.25rem 0.6rem;
+}
+
 .stage-and-target-wrapper {
     /*
         Makes rows for children:

src/components/gui/gui.jsx

@@ -90,7 +90,10 @@ const GUIComponent = props => {
 
                     <Box className={styles.stageAndTargetWrapper}>
                         <Box className={styles.stageMenuWrapper}>
-                            <GreenFlag vm={vm} />
+                            <GreenFlag
+                                className={styles.greenFlag}
+                                vm={vm}
+                            />
                             <StopAll vm={vm} />
                         </Box>
                         <Box className={styles.stageWrapper}>

src/components/stop-all/stop-all.jsx

@@ -8,16 +8,20 @@ import styles from './stop-all.css';
 const StopAllComponent = function (props) {
     const {
         active,
+        className,
         onClick,
         title,
         ...componentProps
     } = props;
     return (
         <img
-            className={classNames({
-                [styles.stopAll]: true,
-                [styles.isActive]: active
-            })}
+            className={classNames(
+                className,
+                styles.stopAll,
+                {
+                    [styles.isActive]: active
+                }
+            )}
             src={stopAllIcon}
             title={title}
             onClick={onClick}
@@ -28,6 +32,7 @@ const StopAllComponent = function (props) {
 
 StopAllComponent.propTypes = {
     active: PropTypes.bool,
+    className: PropTypes.string,
     onClick: PropTypes.func.isRequired,
     title: PropTypes.string
 };

src/examples/blocks-only.css

@@ -1,3 +1,13 @@
-.app {
-    
+.green-flag {
+    position: absolute;
+    z-index: 2;
+    top: 10px;
+    right: 50px;
+}
+
+.stop-all {
+    position: absolute;
+    z-index: 2;
+    top: 10px;
+    right: 15px;
 }

src/examples/blocks-only.jsx

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import {connect} from 'react-redux';
 
 import AppStateHOC from '../lib/app-state-hoc.jsx';
+import GreenFlag from '../containers/green-flag.jsx';
+import StopAll from '../containers/stop-all.jsx';
 import Blocks from '../containers/blocks.jsx';
 import GUI from '../containers/gui.jsx';
 import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
@@ -10,7 +12,10 @@ import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
 import styles from './blocks-only.css';
 
 const mapStateToProps = (state) => ({vm: state.vm});
+
 const VMBlocks = connect(mapStateToProps)(Blocks);
+const VMGreenFlag = connect(mapStateToProps)(GreenFlag);
+const VMStopAll = connect(mapStateToProps)(StopAll);
 
 const BlocksOnly = props => (
     <GUI {...props}>
@@ -20,13 +25,14 @@ const BlocksOnly = props => (
                 media: `static/blocks-media/`
             }}
         />
+        <VMGreenFlag className={styles.greenFlag} />
+        <VMStopAll className={styles.stopAll} />
     </GUI>
 );
 
 const App = AppStateHOC(ProjectLoaderHOC(BlocksOnly));
 
 const appTarget = document.createElement('div');
-appTarget.className = styles.app;
 document.body.appendChild(appTarget);
 
 ReactDOM.render(<App />, appTarget);