Tweak network status styles

Remove inline styles
Use flexbox in the left pane

// FREEBIE

background.html

@@ -25,8 +25,8 @@ <h1>Signal</h1>
           </div>
         </div>
         <div class='content'>
-          <div class='conversations scrollable inbox'></div>
-          <div class='conversations scrollable search-results hide'>
+          <div class='conversations inbox'></div>
+          <div class='conversations search-results hide'>
             <div class='new-contact contact hide'></div>
           </div>
         </div>
@@ -492,8 +492,8 @@ <h3>{{ sync }}</h3>
   </script>
 
   <script type='text/x-tmpl-mustache' id='networkStatus'>
-    <div class='network-status-message' style='{{^instructions}}margin-top:3px;{{/instructions}}{{#instructions}}margin-top:-6px{{/instructions}}'>
-      <h3 style='{{^instructions}}font-size:17px;{{/instructions}}'>{{ message }}</h3>
+    <div class='network-status-message'>
+      <h3>{{ message }}</h3>
       <span>{{ instructions }}</span>
     </div>
     {{ #reconnectDurationAsSeconds }}

stylesheets/_index.scss

@@ -18,43 +18,37 @@
   color: $grey_d;
   float: left;
   width: 300px;
+  display: flex;
+  flex-direction: column;
+
   .content {
     background-color: $grey_l;
-    height: calc(100% - #{$header-height} - #{$search-height});
-  }
-
-  .conversations {
-    overflow-y: scroll;
-    height: 100%;
-    width: 100%;
+    flex-grow: 1;
+    overflow-y: auto;
   }
+}
+.network-status-container {
+  .network-status {
+    background: url('/images/error_red.svg') no-repeat left 10px center;
+    background-size: 25px 25px;
+    background-color: #fcd156;
+    padding: 10px;
+    padding-left: 2 * $button-height;
+    display: none;
 
-  .network-status-container {
-
-    .network-status {
-
-      height:2 *  $button-height;
-      background: url('/images/error_red.svg') no-repeat left 10px center;
-      background-size: 25px 25px;
-      background-color: #fcd156;
-      padding-top: 0.5 * $button-height;
-      padding-left: 2 * $button-height;
-      display: none;
-
-      .network-status-message{
-        h3{
-          padding: 0px;
-          margin: 0px;
-          margin-bottom: 4px;
-          font-size: 14px;
-        }
-        span{
-          font-size: 12px;
-        }
+    .network-status-message{
+      h3 {
+        padding: 0px;
+        margin: 0px;
+        margin-bottom: 2px;
+        font-size: 14px;
+      }
+      span {
+        display: inline-block;
+        font-size: 12px;
+        padding: 0.5em 0;
       }
-
     }
-
   }
 }
 

stylesheets/android-dark.scss

@@ -5,6 +5,9 @@ $grey-dark_l4: darken($grey-dark_l3, 8%);
 $text-dark: #CCCCCC;
 
 .android-dark {
+  .gutter .content {
+    background-color: $grey-dark;
+  }
   color: $text-dark;
   a { color: #57a5e5; }
   hr {
@@ -88,7 +91,7 @@ $text-dark: #CCCCCC;
     @include color-svg('/images/paperclip.svg', white);
     transform: rotateZ(-45deg);
   }
-  .scrollable {
+  .conversations {
     background-color: $grey-dark_l2;
     .conversation-list-item {
       background-color: $grey-dark_l3;