Adding reconnect button, fixing CSS.

src/components/alerts/alert.css

@@ -5,7 +5,10 @@
 .alert-container {
     position:absolute;
     z-index: $z-index-card;
-    margin: 0.5rem 2rem;
+    top: 53px;
+    left: 0;
+    right: 0;
+    margin: auto;
     border: 1px solid #FF8C1A;
     border-radius: 8px;
     cursor: move;
@@ -13,23 +16,40 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     width: 448px;
-    padding: 16px;
+    padding: 12px;
     font-size: 10pt;
     box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);
 }
 
 .alert {
-    color: #000;
+    color: #555;
     z-index: 20;
     overflow: hidden;
     align-items: left;
     width: 100%;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 22pt;
+}
+
+.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;
-    color: #000;
+    color: #FF8C1A;
     align-items: center;
+    font-weight: bold;
+    line-height: 22pt;
 }

src/components/alerts/alerts.jsx

@@ -8,12 +8,17 @@ import styles from './alert.css';
 const Alerts = props => (
     <Draggable
         bounds="parent"
-        position={{x: 500, y: 50}}
     >
         <div className={styles.alertContainer}>
             <div className={styles.alert}>
                 {props.message}
             </div>
+            <div
+                className={styles.button}
+                onClick={props.onReconnect}
+            >
+                Reconnect
+            </div>
             <div
                 className={styles.removeButton}
                 onClick={props.onCloseAlert}
@@ -26,7 +31,8 @@ const Alerts = props => (
 
 Alerts.propTypes = {
     message: PropTypes.string.isRequired,
-    onCloseAlert: PropTypes.func.isRequired
+    onCloseAlert: PropTypes.func.isRequired,
+    onReconnect: PropTypes.func.isRequired
 };
 
 export default Alerts;

src/containers/alerts.jsx

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

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',
@@ -18,6 +19,10 @@ const reducer = function (state, action) {
         return Object.assign({}, state, {
             visible: false
         });
+    case ON_RECONNECT:
+        return Object.assign({}, state, {
+            visible: false
+        });
     default:
         return state;
     }
@@ -34,9 +39,14 @@ const showAlert = function (message) {
     };
 };
 
+const onReconnect = function () {
+    return {type: ON_RECONNECT};
+};
+
 export {
     reducer as default,
     initialState as alertsInitialState,
     closeAlert,
-    showAlert
+    showAlert,
+    onReconnect
 };