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
-
-
    -
  • -
    - -
    - Refresh row data: - -
    -
    -
  • -
-
-
+ +
Tools
+
+ +
+
Homepage Cache
+
+
    +
  • +
    + +
    + Refresh row data: + +
    +
    +
  • +
+
+
+
); }