diff --git a/src/components/banner/banner.jsx b/src/components/banner/banner.jsx
new file mode 100644
index 000000000..be5f74361
--- /dev/null
+++ b/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 (
+
+
+ {this.props.children}
+ {this.props.onRequestDismiss ? [
+
x
+ ] : []}
+
+
+ );
+ }
+});
+
+module.exports = Banner;
diff --git a/src/components/banner/banner.scss b/src/components/banner/banner.scss
new file mode 100644
index 000000000..1ca057263
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx
index f87ddeb97..f2be323b1 100644
--- a/src/views/splash/splash.jsx
+++ b/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,58 +236,71 @@ 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 (
-
- {this.state.session.user ? [
-
- {this.state.session.flags.show_welcome ? [
-
- ] : [
-
- ]}
-
-
- ] : [
-
- ]}
+
+ {showEmailConfirmation ? [
+
+ Confirm your email to enable sharing.{' '}
+ Having trouble?
+
+ ] : []}
+
+ {this.state.session.user ? [
+
+ {this.state.session.flags.show_welcome ? [
+
+ ] : [
+
+ ]}
+
+
+ ] : [
+
+ ]}
- {featured}
+ {featured}
-
- Tools
-
-
-
- Homepage Cache
-
-
-
-
+
+ Tools
+
+
+
+ Homepage Cache
+
+
+
+
+
);
}