From 0d722a318663d7222b9e7122e672c6bdeddbddd8 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Wed, 31 May 2017 16:08:32 -0700
Subject: [PATCH] Last seen indicator visual refresh

- Last seen indicator now spans the full conversation, with subtle
shadow highlights above and below
- Scrollbars now overlap the content of the conversation, allowing last
seen indicator to touch the right edge of the window.
- The iOS and Android conversation background is now #eee instead of
white, which meant that the outgoing messages (Android) and incoming
messages (iOS) had to be updated for contrast. They now have white
backgrounds.
- Similarly, the scroll down button needed more contrast, and its
background is now white in light themes.

FREEBIE
---
 background.html                |  6 ++--
 stylesheets/_android.scss      |  2 +-
 stylesheets/_conversation.scss | 43 ++++++++++++++--------
 stylesheets/_global.scss       |  2 ++
 stylesheets/_ios.scss          | 15 ++++----
 stylesheets/android-dark.scss  | 15 ++++++--
 stylesheets/manifest.css       | 65 +++++++++++++++++++++-------------
 test/index.html                |  6 ++--
 8 files changed, 98 insertions(+), 56 deletions(-)

diff --git a/background.html b/background.html
index 0df988dbc..aafaa1e48 100644
--- a/background.html
+++ b/background.html
@@ -48,8 +48,10 @@
     </button>
   </script>
   <script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
-    <div class='text'>
-      {{ unreadMessages }}
+    <div class='bar'>
+      <div class='text'>
+        {{ unreadMessages }}
+      </div>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='expired_alert'>
diff --git a/stylesheets/_android.scss b/stylesheets/_android.scss
index 8aae3189b..a7a250c85 100644
--- a/stylesheets/_android.scss
+++ b/stylesheets/_android.scss
@@ -28,7 +28,7 @@
   }
 
   .outgoing .bubble {
-    background-color: $grey_l;
+    background-color: white;
   }
   .outgoing .hourglass {
     @include hourglass(#999);
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index c18050791..ca981cd85 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -16,7 +16,7 @@
 }
 
 .conversation {
-  background-color: #ffffff;
+  background-color: white;
   height: 100%;
 
   .panel {
@@ -51,13 +51,17 @@
         height: 100%;
         width: 100%;
         margin: 0;
-        padding: 2em 20px 0;
-        overflow-y: auto;
+        padding: 0;
+        overflow-y: overlay;
       }
     }
   }
 }
 
+.discussion-container {
+  background-color: #eee;
+}
+
 .key-verification {
   label {
     display: block;
@@ -295,6 +299,9 @@ li.entry .error-icon-container {
   li {
     max-width: 800px;
     margin: 0 auto 10px;
+    padding-left: 1em;
+    // we need more padding on right side because scroll bar overlaps
+    padding-right: 1.5em;
 
     &::after {
       visibility: hidden;
@@ -685,19 +692,27 @@ li.entry .error-icon-container {
 }
 
 .message-list .last-seen-indicator-view {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-bottom: 2px solid #2090ea;
-  margin-bottom: 15px;
+  // We need this extra layer of DOM nodes because scrollIntoView() doesn't honor margins
+  padding-bottom: 2em;
+  padding-top: 2em;
+
+  .bar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding: 6px;
+
+    border-top: 1px solid rgba(255, 255, 255, 0.75);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+
+    background-color: rgba(0, 0, 0, 0.05);
+  }
 
   .text {
-    padding: 5px 10px;
-    // this margin-top needs to be here (not on parent) because scrollIntoView uses the
-    //   top of the element, not counting its margin
-    margin-top: 2em;
-    margin-bottom: -12px;
     background-color: white;
+    border-radius: 1.5em;
+    padding: .75em 1.25em .75em 1.25em;
   }
 }
 
@@ -711,7 +726,7 @@ li.entry .error-icon-container {
     width: 44px;
     border-radius: 22px;
     text-align: center;
-    background-color: $grey_l;
+    background-color: white;
     border: none;
     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
 
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 63b0eb6af..39dcb6822 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -91,9 +91,11 @@ button.hamburger {
 
 ::-webkit-scrollbar {
     width: 10px;
+    z-index: 1000;
 }
 
 ::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss
index 4d192ef9d..2cd6d63e0 100644
--- a/stylesheets/_ios.scss
+++ b/stylesheets/_ios.scss
@@ -28,9 +28,6 @@ $ios-border-color: rgba(0,0,0,0.1);
         }
       }
     }
-    ::-webkit-scrollbar-track {
-      background: $grey_l;
-    }
   }
   .tool-bar {
     float: left;
@@ -144,7 +141,7 @@ $ios-border-color: rgba(0,0,0,0.1);
           height: 11px;
           right: -6px;
           bottom: -3px;
-          background: white;
+          background: #eee;
         }
       }
     }
@@ -152,7 +149,7 @@ $ios-border-color: rgba(0,0,0,0.1);
       border-radius: 15px;
     }
     .attachments img {
-      border: 1px solid $ios-border-color;
+      background-color: white;
     }
     .meta {
       clear: both;
@@ -160,13 +157,13 @@ $ios-border-color: rgba(0,0,0,0.1);
   }
 
   .message-list .incoming .bubbled {
-    background-color: #e6e5ea;
+    background-color: white;
     color: black;
     float: left;
 
     &:before {
       left: -1px;
-      background-color: #e6e5ea;
+      background-color: white;
     }
     &:after {
       left: -6px;
@@ -174,13 +171,13 @@ $ios-border-color: rgba(0,0,0,0.1);
   }
 
   .incoming .content {
-    background-color: #e6e5ea;
+    background-color: white;
     color: black;
     float: left;
     .body {
       &:before {
         left: -1px;
-        background-color: #e6e5ea;
+        background-color: white;
       }
       &:after {
         left: -6px;
diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss
index 0c7f21a7f..608f9ef60 100644
--- a/stylesheets/android-dark.scss
+++ b/stylesheets/android-dark.scss
@@ -193,14 +193,23 @@ $text-dark: #CCCCCC;
     }
   }
   ::-webkit-scrollbar-track {
-    background-color: $grey-dark_l2;
+    background-color: transparent;
   }
   .recorder {
     background: $grey-dark_l2;
   }
 
-  .message-list .last-seen-indicator-view .text {
-    background-color: $grey-dark_l3;
+  .message-list .last-seen-indicator-view {
+    .bar {
+      border-top: 1px solid rgba(255, 255, 255, 0.15);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.6);
+
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .text {
+      background-color: $grey-dark_l3;
+    }
   }
 
   .discussion-container .scroll-down-button-view {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 554e48a7d..cf764edb3 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -105,7 +105,11 @@ button.hamburger {
     background-color: black; }
 
 ::-webkit-scrollbar {
-  width: 10px; }
+  width: 10px;
+  z-index: 1000; }
+
+::-webkit-scrollbar-track {
+  background: transparent; }
 
 ::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.15);
@@ -971,7 +975,7 @@ input.search {
   padding: 0 5px 0 4px; }
 
 .conversation {
-  background-color: #ffffff;
+  background-color: white;
   height: 100%; }
   .conversation .panel {
     height: calc(100% - 64px);
@@ -998,8 +1002,11 @@ input.search {
         height: 100%;
         width: 100%;
         margin: 0;
-        padding: 2em 20px 0;
-        overflow-y: auto; }
+        padding: 0;
+        overflow-y: overlay; }
+
+.discussion-container {
+  background-color: #eee; }
 
 .key-verification label {
   display: block;
@@ -1174,7 +1181,9 @@ li.entry .error-icon-container {
   .message-container li,
   .message-list li {
     max-width: 800px;
-    margin: 0 auto 10px; }
+    margin: 0 auto 10px;
+    padding-left: 1em;
+    padding-right: 1.5em; }
     .message-container li::after,
     .message-list li::after {
       visibility: hidden;
@@ -1496,16 +1505,20 @@ li.entry .error-icon-container {
     border-radius: 5px; }
 
 .message-list .last-seen-indicator-view {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-bottom: 2px solid #2090ea;
-  margin-bottom: 15px; }
+  padding-bottom: 2em;
+  padding-top: 2em; }
+  .message-list .last-seen-indicator-view .bar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 6px;
+    border-top: 1px solid rgba(255, 255, 255, 0.75);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+    background-color: rgba(0, 0, 0, 0.05); }
   .message-list .last-seen-indicator-view .text {
-    padding: 5px 10px;
-    margin-top: 2em;
-    margin-bottom: -12px;
-    background-color: white; }
+    background-color: white;
+    border-radius: 1.5em;
+    padding: .75em 1.25em .75em 1.25em; }
 
 .discussion-container .scroll-down-button-view {
   position: absolute;
@@ -1516,7 +1529,7 @@ li.entry .error-icon-container {
     width: 44px;
     border-radius: 22px;
     text-align: center;
-    background-color: #f3f3f3;
+    background-color: white;
     border: none;
     box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }
     .discussion-container .scroll-down-button-view button .icon {
@@ -1553,8 +1566,6 @@ li.entry .error-icon-container {
       color: white; }
       .ios .gutter .contact.selected .last-timestamp {
         color: white; }
-  .ios .gutter ::-webkit-scrollbar-track {
-    background: #f3f3f3; }
 .ios .tool-bar {
   float: left;
   padding: 15px; }
@@ -1642,29 +1653,29 @@ li.entry .error-icon-container {
       height: 11px;
       right: -6px;
       bottom: -3px;
-      background: white; }
+      background: #eee; }
 .ios .bubble .content, .ios .bubble .attachments img {
   border-radius: 15px; }
 .ios .bubble .attachments img {
-  border: 1px solid rgba(0, 0, 0, 0.1); }
+  background-color: white; }
 .ios .bubble .meta {
   clear: both; }
 .ios .message-list .incoming .bubbled {
-  background-color: #e6e5ea;
+  background-color: white;
   color: black;
   float: left; }
   .ios .message-list .incoming .bubbled:before {
     left: -1px;
-    background-color: #e6e5ea; }
+    background-color: white; }
   .ios .message-list .incoming .bubbled:after {
     left: -6px; }
 .ios .incoming .content {
-  background-color: #e6e5ea;
+  background-color: white;
   color: black;
   float: left; }
   .ios .incoming .content .body:before {
     left: -1px;
-    background-color: #e6e5ea; }
+    background-color: white; }
   .ios .incoming .content .body:after {
     left: -6px; }
 .ios .outgoing .content, .ios .outgoing .attachments .bubbled {
@@ -1770,7 +1781,7 @@ li.entry .error-icon-container {
   border-radius: 5px;
   box-shadow: 0 3px 3px -4px black; }
 .android .outgoing .bubble {
-  background-color: #f3f3f3; }
+  background-color: white; }
 .android .outgoing .hourglass {
   display: inline-block;
   position: relative;
@@ -2128,9 +2139,13 @@ li.entry .error-icon-container {
     .android-dark ::-webkit-scrollbar-thumb:hover {
       background: rgba(255, 255, 255, 0.25); }
   .android-dark ::-webkit-scrollbar-track {
-    background-color: #292929; }
+    background-color: transparent; }
   .android-dark .recorder {
     background: #292929; }
+  .android-dark .message-list .last-seen-indicator-view .bar {
+    border-top: 1px solid rgba(255, 255, 255, 0.15);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
+    background-color: rgba(255, 255, 255, 0.1); }
   .android-dark .message-list .last-seen-indicator-view .text {
     background-color: #171717; }
   .android-dark .discussion-container .scroll-down-button-view button {
diff --git a/test/index.html b/test/index.html
index 5117255a0..78c0420ba 100644
--- a/test/index.html
+++ b/test/index.html
@@ -22,8 +22,10 @@
     </button>
   </script>
   <script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
-    <div class='text'>
-      {{ unreadMessages }}
+    <div class='bar'>
+      <div class='text'>
+        {{ unreadMessages }}
+      </div>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='two-column'>