Change left pane header color

// FREEBIE

background.html

@@ -4,7 +4,7 @@
   <meta charset='utf-8'>
   <script type='text/x-tmpl-mustache' id='two-column'>
     <div class='gutter'>
-        <div class='title-bar' id='header'>
+        <div class='title-bar active' id='header'>
           <div class='header-buttons'>
             <div class='vertical-align'>
               <div class='global-menu menu'>

js/views/inbox_view.js

@@ -105,6 +105,8 @@
         },
         events: {
             'click': 'closeMenu',
+            'click #header': 'focusHeader',
+            'click .conversation': 'focusConversation',
             'click .global-menu .hamburger': 'toggleMenu',
             'click .show-debug-log': 'showDebugLog',
             'click .settings': 'showSettings',
@@ -112,6 +114,18 @@
             'input input.search': 'filterContacts',
             'click .restart-signal': 'reloadBackgroundPage'
         },
+        focusConversation: function(e) {
+            if (e && this.$(e.target).hasClass('placeholder')) {
+                return;
+            }
+
+            this.$('#header').removeClass('active');
+            this.$('.conversation-stack').removeClass('inactive');
+        },
+        focusHeader: function() {
+            this.$('.conversation-stack').addClass('inactive');
+            this.$('#header').addClass('active');
+        },
         reloadBackgroundPage: function() {
             chrome.runtime.reload();
         },
@@ -133,6 +147,7 @@
             this.searchView.hideHints();
             conversation = ConversationController.create(conversation);
             this.conversation_stack.open(conversation);
+            this.focusConversation();
         },
         toggleMenu: function() {
             this.$('.global-menu .menu-list').toggle();

stylesheets/_global.scss

@@ -29,7 +29,14 @@ body {
 }
 
 #header {
-  background-color: $blue;
+  background-color: $grey_l;
+  color: black;
+
+  &.active {
+    background-color: $blue;
+    color: white;
+  }
+
   h1 {
     margin: 0;
     line-height: 64px;
@@ -38,7 +45,6 @@ body {
     color: #ffffff;
     font-weight: normal;
   }
-
 }
 
 .title-text {

stylesheets/_index.scss

@@ -70,6 +70,10 @@
     position: relative;
   }
 }
+.inactive .conversation-header {
+  background: $grey_l !important;
+  color: $grey_d;
+}
 
 input.search {
   border: none;
@@ -90,7 +94,7 @@ input.search {
 
 .tool-bar {
   background: $grey_l;
-  padding: 2px 1px 1px;
+  padding: 2px;
 
   button.show-new-conversation {
     float: right;

stylesheets/manifest.css

@@ -38,7 +38,11 @@ body {
   display: none; }
 
 #header {
-  background-color: #2090ea; }
+  background-color: #f3f3f3;
+  color: black; }
+  #header.active {
+    background-color: #2090ea;
+    color: white; }
   #header h1 {
     margin: 0;
     line-height: 64px;
@@ -480,6 +484,10 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
     line-height: 44px;
     position: relative; }
 
+.inactive .conversation-header {
+  background: #f3f3f3 !important;
+  color: #454545; }
+
 input.search {
   border: none;
   padding: 0;
@@ -496,7 +504,7 @@ input.search {
 
 .tool-bar {
   background: #f3f3f3;
-  padding: 2px 1px 1px; }
+  padding: 2px; }
   .tool-bar button.show-new-conversation {
     float: right;
     height: 36px;