Adding dismissal of alert.

src/components/alerts/alert.css

@@ -6,22 +6,30 @@
     position:absolute;
     z-index: $z-index-card;
     margin: 0.5rem 2rem;
-}
-
-.alert {
     border: 1px solid #FF8C1A;
     border-radius: 8px;
-    display: flex;
-    flex-direction: column;
     cursor: move;
     background: #FFF0DF;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
     width: 448px;
+    padding: 16px;
+    font-size: 10pt;
+    box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);
+}
+
+.alert {
     color: #000;
     z-index: 20;
     overflow: hidden;
-    padding: 16px;
-    font-size: 10pt;
-    box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);;
     align-items: left;
+    width: 100%;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+
+.remove-button {
+    cursor: pointer;
+    color: #000;
+    align-items: center;
+}

src/components/alerts/alerts.jsx

@@ -8,18 +8,25 @@ import styles from './alert.css';
 const Alerts = props => (
     <Draggable
         bounds="parent"
-        position={{x: 500, y: 0}}
+        position={{x: 500, y: 50}}
     >
         <div className={styles.alertContainer}>
             <div className={styles.alert}>
                 {props.message}
             </div>
+            <div
+                className={styles.removeButton}
+                onClick={props.onCloseAlert}
+            >
+                x
+            </div>
         </div>
     </Draggable>
 );
 
 Alerts.propTypes = {
-    message: PropTypes.string.isRequired
+    message: PropTypes.string.isRequired,
+    onCloseAlert: PropTypes.func.isRequired
 };
 
 export default Alerts;

src/containers/alerts.jsx

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

src/reducers/alerts.js

@@ -16,7 +16,7 @@ const reducer = function (state, action) {
         });
     case CLOSE_ALERT:
         return Object.assign({}, state, {
-            message: 'Closing alert!'
+            visible: false
         });
     default:
         return state;