Highlight bottom bar when focused

// FREEBIE

js/views/conversation_view.js

@@ -72,6 +72,9 @@
             }.bind(this));
 
             this.fetchMessages();
+
+            this.$('.send-message').focus(this.focusBottomBar.bind(this));
+            this.$('.send-message').blur(this.unfocusBottomBar.bind(this));
         },
 
         events: {
@@ -90,7 +93,16 @@
             'select .message-list .entry': 'messageDetail',
             'force-resize': 'forceUpdateMessageFieldSize',
             'click .choose-file': 'focusMessageField',
-            'loadMore .message-list': 'fetchMessages'
+            'loadMore .message-list': 'fetchMessages',
+            'focus .send-message': 'focusBottomBar',
+            'blur .send-message': 'unfocusBottomBar'
+        },
+
+        unfocusBottomBar: function() {
+            this.$('.bottom-bar form').removeClass('active');
+        },
+        focusBottomBar: function() {
+            this.$('.bottom-bar form').addClass('active');
         },
 
         onOpened: function() {

stylesheets/_conversation.scss

@@ -490,10 +490,14 @@
 
 .bottom-bar {
   $button-width: 36px;
-  padding: 5px 0;
+  padding: 5px 1px 5px 0;
   height: 50px;
   background: $grey_l;
 
+  form.active {
+    outline: solid 1px $blue;
+  }
+
   form.send {
     background: #ffffff;
   }

stylesheets/manifest.css

@@ -1001,9 +1001,11 @@ input.search {
       margin-top: 5px; }
 
 .bottom-bar {
-  padding: 5px 0;
+  padding: 5px 1px 5px 0;
   height: 50px;
   background: #f3f3f3; }
+  .bottom-bar form.active {
+    outline: solid 1px #2090ea; }
   .bottom-bar form.send {
     background: #ffffff; }
   .bottom-bar button, .bottom-bar input, .bottom-bar textarea {