Inline alert component

frontend/js/components/environments/Category.js

@@ -24,11 +24,11 @@ class Category extends Component {
         const categories = this.props.category.categories;
 
         return (
-          <CategoryList
-            categories={categories.sort((catA, catB) => {
-                return catA.rank - catB.rank;
-            })} />
-      );
+            <CategoryList
+                categories={categories.sort((catA, catB) => {
+                    return catA.rank - catB.rank;
+                })} />
+        );
     }
 }
 

frontend/js/components/molecules/IconButton.js

@@ -3,17 +3,15 @@ import React, { PropTypes, Component } from 'react';
 import Icon from './../atoms/Icon';
 
 class IconButton extends Component {
-
     render() {
         return (
-      <button
-        onClick={this.props.onClick}
-        className="icon-button">
-        <Icon class="big padded">{this.props.icon}</Icon>
-      </button>
-    );
+            <button
+                onClick={this.props.onClick}
+                className="icon-button">
+                <Icon class="big padded">{this.props.icon}</Icon>
+            </button>
+        );
     }
-
 }
 
 IconButton.propTypes = {

frontend/js/components/organisms/Alert.js

@@ -0,0 +1,39 @@
+import React, { Component, PropTypes } from 'react';
+import IconButton from './../molecules/IconButton';
+
+const alertLevels = [
+    'success',
+    'warning',
+    'danger'
+];
+
+class Alert extends Component {
+    render() {
+        let levelClass = 'info';
+        if (alertLevels.includes(this.props.level)) {
+            levelClass = this.props.level;
+        }
+
+        return (
+            <div className={`alert ${levelClass}`}>
+                <div className="alert-message">
+                    { this.props.message }
+                </div>
+                {
+                    this.props.onDismiss &&
+                    <IconButton
+                        onClick={this.props.onDismiss}
+                        icon="close" />
+                }
+            </div>
+        );
+    }
+}
+
+Alert.propTypes = {
+    level: PropTypes.string,
+    message: PropTypes.string,
+    onDismiss: PropTypes.func
+};
+
+export default Alert;

frontend/styles/alert.scss

@@ -0,0 +1,30 @@
+@import 'colors';
+
+.alert {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .5em 1em;
+    border-radius: 4px;
+
+    &.info {
+        background: $blue;
+        color: darken($blue, 50%);
+    }
+
+    &.danger {
+        background: $red;
+        color: darken($red, 50%);
+    }
+
+    &.warning {
+        background: $yellow;
+        color: darken($yellow, 50%);
+    }
+
+    &.success {
+        background: $green;
+        color: darken($green, 50%);
+    }
+
+}

frontend/styles/colors.scss

@@ -1,4 +1,3 @@
-$red: #F33535;
 $lightBlue: #D8E9F0;
 $darkBlue: #33425B;
 $black: #29252C;
@@ -8,7 +7,8 @@ $lightGray: #E1E1E1;
 $darkGray: #666666;
 $darkerGray: #999999;
 
-// threshold colors
+$blue: #D9EDF7;
 $green: #84ba71;
 $yellow: #e0cc47;
 $orange: #e89f31;
+$red: #F33535;

frontend/styles/style.scss

@@ -17,4 +17,5 @@ This file exists only to import other stylesheets.
 @import 'survey';
 @import 'survey-card';
 @import 'results';
-@import 'agreement-selector';
+@import 'agreement-selector';
+@import 'alert';