Merge pull request #656 from technoboy10/gh651-stagingalert

Fix GH-651: Orangeify navbar when SCRATCH_ENV=staging

src/components/dropdown/dropdown.scss

@@ -15,6 +15,10 @@
     font-size: .8125rem;
     font-weight: normal;
 
+    &.staging {
+        background-color: $ui-orange;
+    }
+
     &.open {
         display: block;
     }

src/components/navigation/container/navigation.scss

@@ -11,6 +11,10 @@
     box-shadow: 0 0 3px $box-shadow-gray;
     background-color: $ui-blue;
 
+    &.staging {
+        background-color: $ui-orange;
+    }
+
 
     width: 100%;
     /* NOTE: Height should match offset settings in main.scss file */

src/components/navigation/www/navigation.jsx

@@ -253,7 +253,8 @@ var Navigation = React.createClass({
                                 <Dropdown
                                         as="ul"
                                         isOpen={this.state.accountNavOpen}
-                                        onRequestClose={this.closeAccountNav}>
+                                        onRequestClose={this.closeAccountNav}
+                                        className={process.env.SCRATCH_ENV}>
                                     <li>
                                         <a href={this.getProfileUrl()}>
                                             <FormattedMessage id="general.profile" />

src/components/navigation/www/navigation.scss

 @import "../../../colors";
 
 #navigation {
+    &.staging {
+        .messages {
+            .message-count {
+                display: none;
+
+                &.show {
+                    background-color: $ui-blue;
+                }
+            }
+        }
+    }
+
     .logo {
         margin-right: 10px;
 

src/components/page/www/page.jsx

 var React = require('react');
+var classNames = require('classnames');
 
 var Navigation = require('../../navigation/www/navigation.jsx');
 var Footer = require('../../footer/www/footer.jsx');
@@ -6,9 +7,12 @@ var Footer = require('../../footer/www/footer.jsx');
 var Page = React.createClass({
     type: 'Page',
     render: function () {
+        var classes = classNames({
+            'staging': process.env.SCRATCH_ENV == 'staging'
+        });
         return (
             <div className="page">
-                <div id="navigation">
+                <div id="navigation" className={classes}>
                     <Navigation />
                 </div>
                 <div id="view">

webpack.config.js

@@ -116,7 +116,8 @@ module.exports = {
             'process.env.NODE_ENV': '"' + (process.env.NODE_ENV || 'development') + '"',
             'process.env.SENTRY_DSN': '"' + (process.env.SENTRY_DSN || '') + '"',
             'process.env.API_HOST': '"' + (process.env.API_HOST || 'https://api.scratch.mit.edu') + '"',
-            'process.env.SMARTY_STREETS_API_KEY': '"' + (process.env.SMARTY_STREETS_API_KEY || '') + '"'
+            'process.env.SMARTY_STREETS_API_KEY': '"' + (process.env.SMARTY_STREETS_API_KEY || '') + '"',
+            'process.env.SCRATCH_ENV': '"'+ (process.env.SCRATCH_ENV || 'development') + '"'
         }),
         new webpack.optimize.CommonsChunkPlugin('common', 'js/common.bundle.js'),
         new webpack.optimize.OccurenceOrderPlugin()