Restyle compose button

Move it to a tool bar at the top of the conversation list. This is also
where a search bar will live someday.

Fixes #357

// FREEBIE

background.html

@@ -14,6 +14,9 @@
       <span class='socket-status'></span>
     </div>
     <div class='gutter'>
+        <div class='tool-bar clearfix'>
+          <button class='show-new-conversation'></button>
+        </div>
         <div class='conversations scrollable'></div>
         <span class='fab'></span>
     </div>

js/views/inbox_view.js

@@ -108,7 +108,7 @@
                 'click': 'closeMenu',
                 'click .hamburger': 'toggleMenu',
                 'click .show-debug-log': 'showDebugLog',
-                'click .fab': 'showCompose',
+                'click .show-new-conversation': 'showCompose',
                 'select .gutter .contact': 'openConversation'
             },
             openConversation: function(e, data) {

stylesheets/_index.scss

@@ -22,6 +22,7 @@
   width: 300px;
   border-right: solid 1px #ddd;
   .conversations {
+    height: calc(100% - #{$header-height});
     width: 100%;
   }
 }
@@ -63,6 +64,7 @@
   }
 }
 
+.tool-bar,
 .conversation-header {
   background: $grey_l;
   border-bottom: solid 1px darken($grey_l, 10%);
@@ -89,26 +91,20 @@ input.search {
   outline: 0;
 }
 
-.fab {
-  z-index: 1;
-  position: fixed;
-  left: 215px;;
-  bottom: 22px;
-  height: 50px;
-  width: 50px;
-  border: 0;
-  border-radius: (60px / 2);
-  outline: 0;
-  font: 300 36px $roboto;
-  color: white;
-  background: $blue url('/images/pencil.png') no-repeat center center;
-  box-shadow: 0 8px 8px -8px rgba(darken($blue, 50%), 0.8);
-  transition: box-shadow 0.33s, transform 0.33s, background 0.33s;
-
-  &:hover {
-    background-color: darken($blue, 3%);
-    box-shadow: 0 8px 18px -8px rgba(darken($blue, 50%), 0.9);
-    transform: translate3d(0, -1px, 0);
+.tool-bar {
+  button.show-new-conversation {
+    float: right;
+    height: $header-height;
+    width: $header-height;
+    border: 0;
+    outline: 0;
+    font: 300 36px $roboto;
+    color: white;
+    background: url('/images/pencil.png') no-repeat center center;
+
+    &:hover {
+      background-color: darken($grey_l, 3%);
+    }
   }
 }
 

stylesheets/manifest.css

@@ -401,6 +401,7 @@ img.emoji {
   width: 300px;
   border-right: solid 1px #ddd; }
   .gutter .conversations {
+    height: calc(100% - 36px);
     width: 100%; }
 
 .socket-status {
@@ -429,6 +430,7 @@ img.emoji {
   .conversation-stack .conversation:first-child {
     display: block; }
 
+.tool-bar,
 .conversation-header {
   background: #f3f3f3;
   border-bottom: solid 1px #d9d9d9; }
@@ -449,25 +451,17 @@ input.search {
   margin: 0;
   outline: 0; }
 
-.fab {
-  z-index: 1;
-  position: fixed;
-  left: 215px;
-  bottom: 22px;
-  height: 50px;
-  width: 50px;
+.tool-bar button.show-new-conversation {
+  float: right;
+  height: 36px;
+  width: 36px;
   border: 0;
-  border-radius: 30px;
   outline: 0;
   font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
   color: white;
-  background: #2090ea url("/images/pencil.png") no-repeat center center;
-  box-shadow: 0 8px 8px -8px rgba(1, 6, 10, 0.8);
-  transition: box-shadow 0.33s, transform 0.33s, background 0.33s; }
-  .fab:hover {
-    background-color: #1689e5;
-    box-shadow: 0 8px 18px -8px rgba(1, 6, 10, 0.9);
-    transform: translate3d(0, -1px, 0); }
+  background: url("/images/pencil.png") no-repeat center center; }
+  .tool-bar button.show-new-conversation:hover {
+    background-color: #ebebeb; }
 
 .last-timestamp {
   font-size: smaller; }