From d3b035121d1f5eb79467404c6caaae910f077fb3 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 21 Mar 2016 17:17:39 -0700
Subject: [PATCH] Clean up bottom bar styles

// FREEBIE
---
 background.html                |  2 +-
 js/views/conversation_view.js  |  9 +--------
 stylesheets/_conversation.scss |  4 ++--
 stylesheets/_global.scss       |  4 +---
 stylesheets/manifest.css       | 12 +++++-------
 5 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/background.html b/background.html
index 3a6d96b0..2bedd737 100644
--- a/background.html
+++ b/background.html
@@ -82,7 +82,7 @@
       </div>
 
       <div class='bottom-bar' id='footer'>
-          <form class='send'>
+          <form class='send clearfix'>
               <div class='attachment-previews'></div>
               <div class='choose-file'>
                   <div class='paperclip thumbnail'></div>
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index d711a831..a81c5da0 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -92,7 +92,7 @@
             'click' : 'onClick',
             'select .message-list .entry': 'messageDetail',
             'force-resize': 'forceUpdateMessageFieldSize',
-            'click .choose-file': 'focusMessageField',
+            'click .bottom-bar': 'focusMessageField',
             'loadMore .message-list': 'fetchMessages',
             'focus .send-message': 'focusBottomBar',
             'blur .send-message': 'unfocusBottomBar',
@@ -282,13 +282,6 @@
             this.view.measureScrollPosition();
             window.autosize(this.$messageField);
 
-            var $attachmentPreviews = this.$('.attachment-previews'),
-                $bottomBar = this.$('.bottom-bar');
-
-            $bottomBar.outerHeight(
-                    this.$messageField.outerHeight() +
-                    $attachmentPreviews.outerHeight() + 12);
-
             this.view.scrollToBottomIfNeeded();
         },
 
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 00ba6092..2775888c 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -470,9 +470,9 @@
 }
 
 .bottom-bar {
+  box-sizing: content-box;
   $button-width: 36px;
   padding: 5px 1px 5px 0;
-  height: 50px;
   background: $grey_l;
 
   form.active {
@@ -481,6 +481,7 @@
 
   form.send {
     background: #ffffff;
+    padding-bottom: 1px;
   }
 
   button, input, textarea {
@@ -543,7 +544,6 @@
   .send-message {
     display: block;
     width: calc(100% - #{$button-width});
-    min-height: $button-height - 1px;
     max-height: 100px;
     padding: 10px;
     border: 0;
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 68016ef8..0bca714a 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -142,8 +142,6 @@ button.back {
 
 .file-input {
   position: relative;
-  box-sizing: content-box;
-  border: 1px transparent solid;
   .choose-file {
     cursor: pointer;
   }
@@ -185,7 +183,7 @@ button.back {
 }
 
 .dropoff {
-  border: 1px #2090ea dashed;
+  outline: solid 1px #2090ea;
 }
 
 img.emoji {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 6bb10e94..fb5752b3 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -121,9 +121,7 @@ button.back {
           background-color: #f3f3f3; }
 
 .file-input {
-  position: relative;
-  box-sizing: content-box;
-  border: 1px transparent solid; }
+  position: relative; }
   .file-input .choose-file {
     cursor: pointer; }
   .file-input .paperclip {
@@ -156,7 +154,7 @@ button.back {
     text-align: center; }
 
 .dropoff {
-  border: 1px #2090ea dashed; }
+  outline: solid 1px #2090ea; }
 
 img.emoji {
   height: 1em;
@@ -987,13 +985,14 @@ input.search {
       margin-top: 5px; }
 
 .bottom-bar {
+  box-sizing: content-box;
   padding: 5px 1px 5px 0;
-  height: 50px;
   background: #f3f3f3; }
   .bottom-bar form.active {
     outline: solid 1px #2090ea; }
   .bottom-bar form.send {
-    background: #ffffff; }
+    background: #ffffff;
+    padding-bottom: 1px; }
   .bottom-bar button, .bottom-bar input, .bottom-bar textarea {
     color: #454545; }
   .bottom-bar button {
@@ -1036,7 +1035,6 @@ input.search {
   .bottom-bar .send-message {
     display: block;
     width: calc(100% - 36px);
-    min-height: 35px;
     max-height: 100px;
     padding: 10px;
     border: 0;