Add dismissable email confirmation banner

src/components/banner/banner.jsx

@@ -0,0 +1,24 @@
+var React = require('react');
+
+require('./banner.scss');
+
+var Banner = React.createClass({
+    type: 'Banner',
+    propTypes: {
+        onRequestDismiss: React.PropTypes.func
+    },
+    render: function () {
+        return (
+            <div className={'banner ' + this.props.className}>
+                <div className="inner">
+                    {this.props.children}
+                    {this.props.onRequestDismiss ? [
+                        <a className="close" key="close" href="#" onClick={this.props.onRequestDismiss}>x</a>
+                    ] : []}
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = Banner;

src/components/banner/banner.scss

@@ -0,0 +1,40 @@
+@import "../../colors";
+
+$navigation-height: 50px;
+
+.banner {
+    position: fixed;
+    top: $navigation-height;
+    box-shadow: 0 1px 1px $ui-dark-gray;
+    background-color: $ui-orange;
+    width: 100%;
+    overflow: hidden;
+    text-align: center;
+    line-height: $navigation-height;
+
+    &, a {
+        color: $ui-white;
+    }
+
+    a {
+        text-decoration: underline;
+    }
+
+    .close {
+        float: right;
+        margin-top: $navigation-height/4;
+        border-radius: $navigation-height/4;
+        background-color: $box-shadow-gray;
+        width: $navigation-height/2;
+        height: $navigation-height/2;
+        text-decoration: none;
+        text-shadow: none;
+        line-height: $navigation-height/2;
+        color: $ui-white;
+        font-weight: normal;
+    }
+
+    &.warning {
+        background-color: $ui-orange;
+    }    
+}

src/views/splash/splash.jsx

@@ -7,6 +7,7 @@ var Session = require('../../mixins/session.jsx');
 
 var Activity = require('../../components/activity/activity.jsx');
 var AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
+var Banner = require('../../components/banner/banner.jsx');
 var Box = require('../../components/box/box.jsx');
 var Button = require('../../components/forms/button.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
@@ -235,8 +236,20 @@ var Splash = injectIntl(React.createClass({
     },
     render: function () {
         var featured = this.renderHomepageRows();
+        var showEmailConfirmation = true;(
+            this.state.session.user && this.state.session.flags.has_outstanding_email_confirmation &&
+            this.state.session.flags.confirm_email_banner);
         return (
-            <div className="inner">
+            <div className="splash">
+                {showEmailConfirmation ? [
+                    <Banner key="confirmedEmail"
+                            className="warning"
+                            onRequestDismiss={this.handleDismiss.bind(this, 'confirmed_email')}>
+                        <a href="#" onClick={this.showConfirmEmailPopup}>Confirm your email</a> to enable sharing.{' '}
+                        <a href="/info/faq/#accounts">Having trouble?</a>
+                    </Banner>
+                ] : []}
+                <div key="inner" className="inner">
                     {this.state.session.user ? [
                         <div key="header" className="splash-header">
                             {this.state.session.flags.show_welcome ? [
@@ -288,6 +301,7 @@ var Splash = injectIntl(React.createClass({
                         </dd>
                     </AdminPanel>
                 </div>
+            </div>
         );
     }
 }));