Add notification bar

Used for displaying global info (e.g. "you just got a reward.")
Can be displayed from anywhere in the app using events.

ui/js/component/header.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Link} from './link.js';
+import NotificationBar from './notification-bar.js';
 
 var Header = React.createClass({
   getInitialState: function() {
@@ -61,6 +62,7 @@ var Header = React.createClass({
             <SubHeader links={this.props.links} viewingPage={this.props.viewingPage} /> :
             ''
         }
+        <NotificationBar />
       </header>
     );
   }

ui/js/component/notice.js

@@ -15,7 +15,7 @@ export const Notice = React.createClass({
   },
   render: function() {
     return (
-      <section className={'notice' + (this.props.isError ? ' notice--error' : '')}>
+      <section className={'notice ' + (this.props.isError ? 'notice--error ' : '') + (this.props.className || '')}>
         {this.props.children}
       </section>
     );

ui/js/component/notification-bar.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import lbry from '../lbry.js';
+import Notice from '../component/notice.js';
+
+export const NotificationBar = React.createClass({
+  _displayTime: 8, // in seconds
+
+  _hideTimeout: null,
+
+  getInitialState: function() {
+    return {
+      message: null,
+      isError: null,
+    }
+  },
+  handleNoticeReceived: function(event) {
+    if (this._hideTimeout) {
+      clearTimeout(this._hideTimeout);
+    }
+
+    const {detail: {message, isError}} = event;
+    this.setState({
+      message: message,
+      isError: isError,
+    });
+
+    this._hideTimeout = setTimeout(() => {
+      this.setState({
+        message: null,
+        isError: null,
+      });
+    }, this._displayTime * 1000);
+  },
+  componentWillMount: function() {
+    document.addEventListener('globalNotice', this.handleNoticeReceived);
+  },
+  componentWillUnmount: function() {
+    document.removeEventListener('globalNotice', this.handleNoticeReceived);
+  },
+  render: function() {
+    if (!this.state.message) {
+      return null;
+    }
+
+    return (
+      <Notice isError={this.state.isError} className="notification-bar">
+        {this.state.message}
+      </Notice>
+    );
+  },
+});
+
+export default NotificationBar;

ui/scss/all.scss

@@ -13,6 +13,7 @@
 @import "component/_channel-indicator.scss";
 @import "component/_notice.scss";
 @import "component/_modal-page.scss";
+@import "component/_notification-bar.scss";
 @import "page/_developer.scss";
 @import "page/_watch.scss";
 @import "page/_reward.scss";

ui/scss/component/_notice.scss

@@ -5,6 +5,10 @@
     border: 1px solid #000;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
     border-radius: 5px;
+
+    color: #468847;
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
 }
 
 .notice--error {

ui/scss/component/_notification-bar.scss

@@ -0,0 +1,6 @@
+@import "../global";
+
+.notification-bar {
+  margin-top: 5px;
+  margin-right: 10px;
+}