Adding z-index-alert, and removing custom message for now.

src/components/alerts/alert.css

@@ -4,7 +4,7 @@
 
 .alert-container {
     position:absolute;
-    z-index: $z-index-card;
+    z-index: $z-index-alert;
     top: 53px;
     left: 0;
     right: 0;

src/components/alerts/alerts.jsx

@@ -13,16 +13,11 @@ const Alerts = props => (
             <div className={styles.alert}>
                 {props.message}
             </div>
-            <div
-                className={styles.button}
-                onClick={props.onReconnect}
-            >
-                Reconnect
-            </div>
             <div
                 className={styles.removeButton}
                 onClick={props.onCloseAlert}
             >
+                { /* eslint-disable react/jsx-no-literals */ }
                 x
             </div>
         </div>
@@ -31,8 +26,7 @@ const Alerts = props => (
 
 Alerts.propTypes = {
     message: PropTypes.string.isRequired,
-    onCloseAlert: PropTypes.func.isRequired,
-    onReconnect: PropTypes.func.isRequired
+    onCloseAlert: PropTypes.func.isRequired
 };
 
 export default Alerts;

src/components/gui/gui.jsx

@@ -110,7 +110,11 @@ const GUIComponent = props => {
                 isRendererSupported={isRendererSupported}
                 stageSize={stageSize}
                 vm={vm}
-            />
+            >
+                {alertsVisible ? (
+                    <Alerts />
+                ) : null}
+            </StageWrapper>
         ) : (
             <Box
                 className={styles.pageWrapper}

src/css/z-index.css

@@ -14,6 +14,7 @@ $z-index-tooltip: 130; /* tooltips should go over add buttons if they overlap */
 $z-index-card: 490;
 $z-index-loader: 500;
 $z-index-modal: 510;
+$z-index-alert: 550;
 
 $z-index-drag-layer: 1000;
 $z-index-monitor-dragging: 1010;

src/lib/vm-listener-hoc.jsx

@@ -139,8 +139,8 @@ const vmListenerHOC = function (WrappedComponent) {
         onProjectRunStop: () => dispatch(setRunningState(false)),
         onTurboModeOn: () => dispatch(setTurboState(true)),
         onTurboModeOff: () => dispatch(setTurboState(false)),
-        onShowAlert: data => {
-            dispatch(showAlert(data.message));
+        onShowAlert: () => {
+            dispatch(showAlert('Scratch has lost connection to peripheral.'));
         }
     });
     return connect(