From 8bb8ed8151648b77bbd2ee5ab97fc1001709b4a4 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Sun, 20 Mar 2016 20:02:38 -0700
Subject: [PATCH] Change left pane header color

// FREEBIE
---
 background.html          |  2 +-
 js/views/inbox_view.js   | 15 +++++++++++++++
 stylesheets/_global.scss | 10 ++++++++--
 stylesheets/_index.scss  |  6 +++++-
 stylesheets/manifest.css | 12 ++++++++++--
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/background.html b/background.html
index 05728d4f..428ae755 100644
--- a/background.html
+++ b/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'>
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 9862fd6e..b241fa16 100644
--- a/js/views/inbox_view.js
+++ b/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();
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index f42bde55..6df889c7 100644
--- a/stylesheets/_global.scss
+++ b/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 {
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index cda845ca..a84db62e 100644
--- a/stylesheets/_index.scss
+++ b/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;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 1ffd3000..89f03dcd 100644
--- a/stylesheets/manifest.css
+++ b/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;