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;