From 5d1e7703076042a459b4a71eb090f3d6e1d3a7cc Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Tue, 11 Apr 2017 16:24:06 -0700
Subject: [PATCH] Tweak network status styles

Remove inline styles
Use flexbox in the left pane

// FREEBIE
---
 background.html               |  8 ++---
 stylesheets/_index.scss       | 56 ++++++++++++++++-------------------
 stylesheets/android-dark.scss |  5 +++-
 stylesheets/manifest.css      | 49 ++++++++++++++++--------------
 4 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/background.html b/background.html
index 167682ee5..c33f3377f 100644
--- a/background.html
+++ b/background.html
@@ -25,8 +25,8 @@
           </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 @@
   </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 }}
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index d68bd272b..e80b8aabe 100644
--- a/stylesheets/_index.scss
+++ b/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;
       }
-
     }
-
   }
 }
 
diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss
index 407e26898..4982b0a16 100644
--- a/stylesheets/android-dark.scss
+++ b/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;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 23916d01c..57012a8ef 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -739,29 +739,30 @@ img.emoji {
 .gutter {
   color: #454545;
   float: left;
-  width: 300px; }
+  width: 300px;
+  display: flex;
+  flex-direction: column; }
   .gutter .content {
     background-color: #f3f3f3;
-    height: calc(100% - 64px - 36px); }
-  .gutter .conversations {
-    overflow-y: scroll;
-    height: 100%;
-    width: 100%; }
-  .gutter .network-status-container .network-status {
-    height: 48px;
-    background: url("/images/error_red.svg") no-repeat left 10px center;
-    background-size: 25px 25px;
-    background-color: #fcd156;
-    padding-top: 12px;
-    padding-left: 48px;
-    display: none; }
-    .gutter .network-status-container .network-status .network-status-message h3 {
-      padding: 0px;
-      margin: 0px;
-      margin-bottom: 4px;
-      font-size: 14px; }
-    .gutter .network-status-container .network-status .network-status-message span {
-      font-size: 12px; }
+    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: 48px;
+  display: none; }
+  .network-status-container .network-status .network-status-message h3 {
+    padding: 0px;
+    margin: 0px;
+    margin-bottom: 2px;
+    font-size: 14px; }
+  .network-status-container .network-status .network-status-message span {
+    display: inline-block;
+    font-size: 12px;
+    padding: 0.5em 0; }
 
 .conversation-stack {
   padding-left: 300px; }
@@ -1716,6 +1717,8 @@ li.entry .error-icon-container {
 
 .android-dark {
   color: #CCCCCC; }
+  .android-dark .gutter .content {
+    background-color: #333333; }
   .android-dark a {
     color: #57a5e5; }
   .android-dark hr {
@@ -1819,9 +1822,9 @@ li.entry .error-icon-container {
     -webkit-mask-size: 100%;
     background-color: white;
     transform: rotateZ(-45deg); }
-  .android-dark .scrollable {
+  .android-dark .conversations {
     background-color: #292929; }
-    .android-dark .scrollable .conversation-list-item {
+    .android-dark .conversations .conversation-list-item {
       background-color: #171717;
       color: #CCCCCC; }
   .android-dark .bottom-bar {