Added Alert component

frontend/components/Alert/Alert.js

@@ -0,0 +1,35 @@
+import React, { PropTypes } from 'react';
+
+import { Flex } from 'reflexbox';
+
+import styles from './Alert.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+class Alert extends React.Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    danger: PropTypes.bool,
+    warning: PropTypes.bool,
+    success: PropTypes.bool,
+    info: PropTypes.bool,
+    offline: PropTypes.bool,
+  }
+
+  render() {
+    let alertType;
+    if (this.props.danger) alertType = 'danger';
+    if (this.props.warning) alertType = 'warning';
+    if (this.props.success) alertType = 'success';
+    if (this.props.offline) alertType = 'offline';
+    if (!alertType) alertType = 'info'; // default
+
+    return (
+      <Flex align="center" justify="center" className={ cx(styles.container, styles[alertType]) }>
+        { this.props.children }
+      </Flex>
+    );
+  }
+}
+
+export default Alert;

frontend/components/Alert/Alert.scss

@@ -0,0 +1,28 @@
+@import '~styles/constants.scss';
+
+.container {
+  height: $headerHeight;
+  color: #ffffff;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.danger {
+  background-color: #f04124;
+}
+
+.warning {
+  background-color: #f08a24;
+}
+
+.success {
+  background-color: #43AC6A;
+}
+
+.info {
+  background-color: #a0d3e8;
+}
+
+.offline {
+  background-color: #000000;
+}

frontend/components/Alert/index.js

@@ -0,0 +1,2 @@
+import Alert from './Alert';
+export default Alert;

frontend/components/Layout/Layout.js

@@ -8,6 +8,7 @@ import _ from 'lodash';
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 import Flex from 'components/Flex';
 import LoadingIndicator from 'components/LoadingIndicator';
+import Alert from 'components/Alert';
 import { Avatar } from 'rebass';
 
 import styles from './Layout.scss';
@@ -17,6 +18,7 @@ const cx = classNames.bind(styles);
 @observer(['user'])
 class Layout extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node,
     actions: React.PropTypes.node,
     title: React.PropTypes.node,
     titleText: React.PropTypes.node,
@@ -48,16 +50,15 @@ class Layout extends React.Component {
     return (
       <div className={ styles.container }>
         <Helmet
-          title={
-            this.props.titleText
+          title={ this.props.titleText
               ? `${this.props.titleText} - Beautiful Atlas`
-              : 'Beautiful Atlas'
-          }
+              : 'Beautiful Atlas' }
         />
 
         { this.props.loading ? (
           <LoadingIndicator />
         ) : null }
+
         <div className={ cx(styles.header, { fixed: this.props.fixed }) }>
           <div className={ styles.headerLeft }>
             <Link to="/" className={ styles.team }>{ user.team.name }</Link>
@@ -76,17 +77,17 @@ class Layout extends React.Component {
                   className={ styles.search }
                   title="Search (/)"
                 >
-                  <img src={ require('assets/icons/search.svg') } />
+                  <img src={ require('assets/icons/search.svg') } alt="Search" />
                 </div>
               </Flex>
             ) }
-            <DropdownMenu label={
-              <Avatar
+            <DropdownMenu
+              label={ <Avatar
                 circle
-                size={24}
+                size={ 24 }
                 src={ user.user.avatarUrl }
-              />
-            }>
+              /> }
+            >
               <MenuItem onClick={ user.logout }>Logout</MenuItem>
             </DropdownMenu>
           </Flex>

package.json

@@ -102,6 +102,7 @@
     "react-keydown": "^1.6.1",
     "react-router": "2.5.1",
     "rebass": "0.2.6",
+    "reflexbox": "^2.0.0",
     "safestart": "0.8.0",
     "sass-loader": "4.0.0",
     "sequelize": "3.23.4",