Reward: add error handling

Also adds Notice component

ui/js/component/notice.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import lbry from '../lbry.js';
+import {Link} from '../component/link.js';
+import {FileActions} from '../component/file-actions.js';
+import {Thumbnail, TruncatedText, CreditAmount} from '../component/common.js';
+
+export const Notice = React.createClass({
+  propTypes: {
+    isError: React.PropTypes.bool,
+  },
+  getDefaultProps: function() {
+    return {
+      isError: false,
+    };
+  },
+  render: function() {
+    return (
+      <section className={'notice' + (this.props.isError ? ' notice--error' : '')}>
+        {this.props.children}
+      </section>
+    );
+  },
+});
+
+export default Notice;

ui/js/page/reward.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import lbryio from '../lbryio.js';
 import {Link} from '../component/link.js';
+import Notice from '../component/notice.js';
 import {CreditAmount} from '../component/common.js';
 
 const {shell} = require('electron');
@@ -39,11 +40,13 @@ const LinkGithubReward = React.createClass({
 
         this.setState({
           confirming: false,
+          error: null,
         });
       }, (error) => {
         console.log('failed with error:', error);
         this.setState({
           confirming: false,
+          error: error,
         });
       });
     });
@@ -51,6 +54,7 @@ const LinkGithubReward = React.createClass({
   getInitialState: function() {
     return {
       confirming: false,
+      error: null,
     };
   },
   render: function() {
@@ -61,6 +65,11 @@ const LinkGithubReward = React.createClass({
           <p>This will open a browser window where you can authorize GitHub to link your account to LBRY. This will record your email (no spam) and star the LBRY repo.</p>
           <p>Once you're finished, you may confirm you've linked the account to receive your reward.</p>
         </section>
+        {this.state.error
+          ? <Notice isError>
+              {this.state.error.message}
+            </Notice>
+          : null}
 
         <Link button="primary" label={this.state.confirming ? 'Confirming...' : 'Confirm'}
               onClick={this.handleConfirmClicked} />

ui/scss/all.scss

@@ -14,3 +14,4 @@
 @import "page/_developer.scss";
 @import "page/_watch.scss";
 @import "page/_reward.scss";
+@import "component/_notice.scss";

ui/scss/component/_notice.scss

@@ -0,0 +1,14 @@
+@import "../global";
+
+.notice {
+    padding: 10px 20px;
+    border: 1px solid #000;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    border-radius: 5px;
+}
+
+.notice--error {
+    color: #b94a48;
+    background-color: #f2dede;
+    border-color: #eed3d7;
+}