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;
     }
@@ -53,7 +57,7 @@
                 text-decoration: none;
             }
         }
-    }        
+    }
 
     &.with-arrow {
         $arrow-border-width: 14px;
@@ -61,12 +65,12 @@
         border-radius: 5px;
         overflow: visible;
 
-        &:before {        
+        &:before {
             display: block;
             position: absolute;
             top: -$arrow-border-width / 2;
             right: 10%;
-            
+
             transform: rotate(45deg);
 
             border-top: 1px solid $active-gray;

src/components/navigation/container/navigation.scss

@@ -11,8 +11,12 @@
     box-shadow: 0 0 3px $box-shadow-gray;
     background-color: $ui-blue;
 
+    &.staging {
+        background-color: $ui-orange;
+    }
 
-    width: 100%;   
+
+    width: 100%;
     /* NOTE: Height should match offset settings in main.scss file */
     height: 50px;
 
@@ -35,7 +39,7 @@
         .ie9 & {
             display: table-row;
         }
-        
+
 
         > li {
             display: inline-block;
@@ -75,7 +79,7 @@
             display: block;
             padding: 13px 15px 4px 15px;
             height: 33px;
-            
+
             text-decoration: none;
             white-space: nowrap;
             color: $type-white;

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

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

src/components/page/www/page.jsx

@@ -1,4 +1,5 @@
 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()