From c714fb6dbff068c81dc053e26c7a7b39dfe880a4 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Fri, 16 Jun 2017 14:29:27 -0700
Subject: [PATCH] Shadow/icon/blue for banner, better verify advisories in dark
 theme

FREEBIE
---
 background.html                |  3 ++-
 js/views/message_view.js       |  2 +-
 stylesheets/_conversation.scss |  3 +--
 stylesheets/_global.scss       | 16 ++++++++++++---
 stylesheets/android-dark.scss  | 13 ++++++++++--
 stylesheets/manifest.css       | 37 +++++++++++++++++++++++++---------
 test/index.html                |  3 ++-
 7 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/background.html b/background.html
index da4cb9609..1307849eb 100644
--- a/background.html
+++ b/background.html
@@ -62,8 +62,9 @@
   </script>
   <script type='text/x-tmpl-mustache' id='banner'>
     <div class='body'>
+      <span class='icon warning'></span>
       {{ message }}
-      <img class='dismiss' src='/images/x.svg' />
+      <span class='icon dismiss'></span>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='toast'>
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 51a859cb4..7b3defc06 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -100,7 +100,7 @@
 
     Whisper.VerifiedChangeView = Whisper.View.extend({
         tagName:   'li',
-        className: 'verified-change',
+        className: 'verified-change advisory',
         templateName: 'verified-change',
         id: function() {
             return this.model.id;
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 140167b2f..ea055bd56 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -674,7 +674,7 @@ li.entry .error-icon-container {
   }
 }
 
-.message-list li.verified-change {
+.verified-change {
   text-align: center;
   .icon {
     height: 1.25em;
@@ -695,7 +695,6 @@ li.entry .error-icon-container {
     display: inline-block;
     padding: 5px 10px;
     background: #fff5c4;
-    color: $grey_d;
     border-radius: $border-radius;
   }
 }
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index b7c896651..7d77af681 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -336,8 +336,9 @@ $avatar-size: 44px;
 
 .banner {
   // what's the right color?
-  background-color: orange;
+  background-color: $blue_l;
   color: black;
+  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
 
   position: absolute;
   top: 25px;
@@ -351,13 +352,22 @@ $avatar-size: 44px;
 
   cursor: pointer;
 
+  .warning {
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+    vertical-align: text-bottom;
+    @include color-svg('/images/warning.svg', black);
+  }
+
   .dismiss {
     position: absolute;
     right: 3px;
     top: 3px;
 
-    height: 20px;
-    width: 20px;
+    height: 23px;
+    width: 23px;
+    @include color-svg('/images/x.svg', black);
   }
 }
 
diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss
index 39c68abf2..723f13e71 100644
--- a/stylesheets/android-dark.scss
+++ b/stylesheets/android-dark.scss
@@ -83,9 +83,18 @@ $text-dark_l2: darken($text-dark, 30%);
   .avatar, .conversation-header, .bubble {
     @include dark-avatar-colors;
   }
-  .message-list .advisory .content {
-    background-color: $grey-dark;
+  .message-list .advisory {
+    .content {
+      background-color: $grey-dark;
+    }
+    .shield {
+      @include color-svg('/images/shield.svg', $text-dark);
+    }
+    .verified {
+      @include color-svg('/images/verified-check.svg', $text-dark);
+    }
   }
+
   .inactive .conversation-header {
     background-color: $grey-dark !important;
     color: $text-dark;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 690a8a049..db6a54b82 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -327,8 +327,9 @@ button.hamburger {
     display: none; }
 
 .banner {
-  background-color: orange;
+  background-color: #a2d2f4;
   color: black;
+  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
   position: absolute;
   top: 25px;
   right: 30px;
@@ -337,12 +338,23 @@ button.hamburger {
   text-align: center;
   border-radius: 10px;
   cursor: pointer; }
+  .banner .warning {
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+    vertical-align: text-bottom;
+    -webkit-mask: url("/images/warning.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: black; }
   .banner .dismiss {
     position: absolute;
     right: 3px;
     top: 3px;
-    height: 20px;
-    width: 20px; }
+    height: 23px;
+    width: 23px;
+    -webkit-mask: url("/images/x.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: black; }
 
 .contact-details {
   vertical-align: middle;
@@ -1540,27 +1552,26 @@ li.entry .error-icon-container {
     color: #454545;
     border-radius: 5px; }
 
-.message-list li.verified-change {
+.verified-change {
   text-align: center; }
-  .message-list li.verified-change .icon {
+  .verified-change .icon {
     height: 1.25em;
     width: 1.25em;
     vertical-align: text-bottom;
     display: inline-block; }
-    .message-list li.verified-change .icon.verified {
+    .verified-change .icon.verified {
       -webkit-mask: url("/images/verified-check.svg") no-repeat center;
       -webkit-mask-size: 100%;
       background-color: #454545; }
-    .message-list li.verified-change .icon.shield {
+    .verified-change .icon.shield {
       -webkit-mask: url("/images/shield.svg") no-repeat center;
       -webkit-mask-size: 100%;
       background-color: #454545; }
-  .message-list li.verified-change .content {
+  .verified-change .content {
     cursor: pointer;
     display: inline-block;
     padding: 5px 10px;
     background: #fff5c4;
-    color: #454545;
     border-radius: 5px; }
 
 .message-list .last-seen-indicator-view {
@@ -2054,6 +2065,14 @@ li.entry .error-icon-container {
     background-color: #2090ea; }
   .android-dark .message-list .advisory .content {
     background-color: #333333; }
+  .android-dark .message-list .advisory .shield {
+    -webkit-mask: url("/images/shield.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #CCCCCC; }
+  .android-dark .message-list .advisory .verified {
+    -webkit-mask: url("/images/verified-check.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #CCCCCC; }
   .android-dark .inactive .conversation-header {
     background-color: #333333 !important;
     color: #CCCCCC; }
diff --git a/test/index.html b/test/index.html
index 4e2034f87..114d783f0 100644
--- a/test/index.html
+++ b/test/index.html
@@ -76,8 +76,9 @@
   </script>
   <script type='text/x-tmpl-mustache' id='banner'>
     <div class='body'>
+      <span class='icon warning'></span>
       {{ message }}
-      <img class='dismiss' src='/images/x.svg' />
+      <span class='icon dismiss'></span>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='toast'>