Change right header color

// FREEBIE

js/views/inbox_view.js

@@ -119,12 +119,12 @@
                 return;
             }
 
-            this.$('#header').removeClass('active');
+            this.$('#header').addClass('inactive');
             this.$('.conversation-stack').removeClass('inactive');
         },
         focusHeader: function() {
             this.$('.conversation-stack').addClass('inactive');
-            this.$('#header').addClass('active');
+            this.$('#header').removeClass('inactive');
         },
         reloadBackgroundPage: function() {
             chrome.runtime.reload();

stylesheets/_global.scss

@@ -29,13 +29,13 @@ body {
 }
 
 #header {
-  background-color: $grey_l;
+  background-color: $blue;
-  color: $grey_d;
+  color: white;
   transition: background-color 0.5s;
 
-  &.active {
+  &.inactive {
-    background-color: $blue;
+    background-color: $grey_l;
-    color: white;
+    color: $grey_d;
   }
 
   h1 {
@@ -97,6 +97,10 @@ button.back {
   }
 }
 
+.inactive .menu .hamburger {
+  background: url('/images/menu_black.png') no-repeat center;
+}
+
 .menu {
   position: relative;
   float: right;

stylesheets/manifest.css

@@ -38,12 +38,12 @@ body {
   display: none; }
 
 #header {
-  background-color: #f3f3f3;
+  background-color: #2090ea;
-  color: #454545;
+  color: white;
   transition: background-color 0.5s; }
-  #header.active {
+  #header.inactive {
-    background-color: #2090ea;
+    background-color: #f3f3f3;
-    color: white; }
+    color: #454545; }
   #header h1 {
     margin: 0;
     line-height: 64px;
@@ -89,6 +89,9 @@ button.back {
     vertical-align: middle;
     display: table-cell; }
 
+.inactive .menu .hamburger {
+  background: url("/images/menu_black.png") no-repeat center; }
+
 .menu {
   position: relative;
   float: right; }