Changes based on PR feedback from rschamp.

src/components/alerts/alert.css

 @import "../../css/units.css";
 @import "../../css/colors.css";
 @import "../../css/z-index.css";
+@import "../gui/gui.css";
 
-.alert-container {
-    position:absolute;
-    z-index: $z-index-alert;
-    top: 53px;
-    left: 0;
-    right: 0;
-    margin: auto;
-    border: 1px solid #FF8C1A;
-    border-radius: 8px;
+.alert {
+    width: 100%;
     background: #FFF0DF;
     display: flex;
     flex-direction: row;
-    justify-content: center;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    width: 448px;
+    overflow: hidden;
+    align-items: left;
+    border: 1px solid #FF8C1A;
+    border-radius: 8px;
     padding: 12px;
-    font-size: 10pt;
     box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);
 }
 
-.alert {
+.alert-message {
     color: #555;
-    z-index: 20;
-    overflow: hidden;
-    align-items: left;
-    width: 100%;
     font-weight: bold;
     font-size: 12px;
     line-height: 22pt;
+    width: 100%;
 }
 
-.button {
-    cursor: pointer;
-    background-color: #FF8C1A;
-    color: white;
-    border-radius: 5px;
-    line-height: 14pt;
-    padding: 5px 15px;
-    margin-right: 16px;
-    letter-spacing: 1px;
-    font-size: 11px;
-}
-
-.remove-button {
-    cursor: pointer;
+.alert-remove-button {
     color: #FF8C1A;
-    align-items: center;
-    font-weight: bold;
-    line-height: 22pt;
 }

src/components/alerts/alerts.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 import Box from '../box/box.jsx';
+import Button from '../button/button.jsx';
 
 import styles from './alert.css';
 
-// this is a functional component, declared with arrow syntax
 const Alerts = props => (
     <Box
         bounds="parent"
+        className={styles.alertsContainer}
     >
-        <div className={styles.alertContainer}>
-            <div className={styles.alert}>
+        <Box
+            className={styles.alert}
+        >
+            <div className={styles.alertMessage}>
                 {props.message}
             </div>
-            <div
-                className={styles.removeButton}
+            <Button
+                className={styles.alertRemoveButton}
                 onClick={props.onCloseAlert}
             >
                 { /* eslint-disable react/jsx-no-literals */ }
                 x
-            </div>
-        </div>
+            </Button>
+        </Box>
     </Box>
 );
 

src/components/gui/gui.css

@@ -278,3 +278,15 @@ $fade-out-distance: 15px;
 .extension-button > div {
     margin-top: 0;
 }
+
+/* Alerts */
+
+.alerts-container {
+    width: 448px;
+    z-index: $z-index-alerts;
+    left: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    margin-top: 53px;
+}

src/containers/alerts.jsx

@@ -2,8 +2,7 @@ import {connect} from 'react-redux';
 
 import {
     showAlert,
-    closeAlert,
-    onReconnect
+    closeAlert
 } from '../reducers/alerts';
 
 import AlertsComponent from '../components/alerts/alerts.jsx';
@@ -15,8 +14,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
     onShowAlert: () => dispatch(showAlert()),
-    onCloseAlert: () => dispatch(closeAlert()),
-    onReconnect: () => dispatch(onReconnect())
+    onCloseAlert: () => dispatch(closeAlert())
 });
 
 export default connect(

src/css/z-index.css

@@ -14,7 +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-alerts: 520;
 
 $z-index-drag-layer: 1000;
 $z-index-monitor-dragging: 1010;

src/reducers/alerts.js

 const CLOSE_ALERT = 'scratch-gui/alerts/CLOSE_ALERT';
 const SHOW_ALERT = 'scratch-gui/alerts/SHOW_ALERT';
-const ON_RECONNECT = 'scratch-gui/alerts/ON_RECONNECT';
 
 const initialState = {
-    message: 'Alert',
+    message: '',
     visible: false
 };
 
@@ -19,10 +18,6 @@ const reducer = function (state, action) {
         return Object.assign({}, state, {
             visible: false
         });
-    case ON_RECONNECT:
-        return Object.assign({}, state, {
-            visible: false
-        });
     default:
         return state;
     }
@@ -39,14 +34,9 @@ const showAlert = function (message) {
     };
 };
 
-const onReconnect = function () {
-    return {type: ON_RECONNECT};
-};
-
 export {
     reducer as default,
     initialState as alertsInitialState,
     closeAlert,
-    showAlert,
-    onReconnect
+    showAlert
 };