From 11372b4e00701ecdfeb74bcbf3594bf1c7a597bb Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Fri, 16 Jun 2017 14:56:38 -0700
Subject: [PATCH] Add icons for keychange and expiration timer in-conversation
 items

The shield matches the Android app's key change notification, and the
clock icon was easy to do and makes it easier to visually distinguish
those items in the conversation history.

FREEBIE
---
 background.html                |  4 ++--
 js/views/message_view.js       |  2 +-
 stylesheets/_conversation.scss | 33 +++++++++++++++-------------
 stylesheets/android-dark.scss  |  3 +++
 stylesheets/manifest.css       | 40 ++++++++++++++++++++--------------
 test/index.html                |  8 ++++++-
 6 files changed, 55 insertions(+), 35 deletions(-)

diff --git a/background.html b/background.html
index 1307849eb01a..8acc6f9a81d3 100644
--- a/background.html
+++ b/background.html
@@ -192,7 +192,7 @@
     <span href='#' class='retry'>{{ resend }}</span>
   </script>
   <script type='text/x-tmpl-mustache' id='keychange'>
-      <span class='content' dir='auto'>{{ content }}</span>
+      <span class='content' dir='auto'><span class='shield icon'></span> {{ content }}</span>
   </script>
   <script type='text/x-tmpl-mustache' id='verified-change'>
       <span class='content' dir='auto'><span class='{{ icon }} icon'></span> {{ content }}</span>
@@ -216,7 +216,7 @@
       <span class='hourglass'><span class='sand'></span></span>
   </script>
   <script type='text/x-tmpl-mustache' id='expirationTimerUpdate'>
-    <span class='content'>{{ content }}</span>
+    <span class='content'><span class='icon clock'></span> {{ content }}</span>
   </script>
   <script type='text/x-tmpl-mustache' id='new-group-update'>
       <div class='conversation-header'>
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 7b3defc06477..ab61974c0f38 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -76,7 +76,7 @@
 
     Whisper.KeyChangeView = Whisper.View.extend({
         tagName:   'li',
-        className: 'keychange',
+        className: 'keychange advisory',
         templateName: 'keychange',
         id: function() {
             return this.model.id;
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index ea055bd561fe..b04a96754989 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -662,33 +662,36 @@ li.entry .error-icon-container {
     }
   }
 }
-.message-list li.keychange {
+.advisory .icon {
+  height: 1.25em;
+  width: 1.25em;
+  vertical-align: text-bottom;
+  display: inline-block;
+
+  &.verified {
+    @include color-svg('/images/verified-check.svg', $grey_d);
+  }
+  &.shield {
+    @include color-svg('/images/shield.svg', $grey_d);
+  }
+  &.clock {
+    @include color-svg('/images/clock.svg', $grey_d);
+  }
+}
+
+.keychange {
   text-align: center;
   .content {
     cursor: pointer;
     display: inline-block;
     padding: 5px 10px;
     background: #fff5c4;
-    color: $grey_d;
     border-radius: $border-radius;
   }
 }
 
 .verified-change {
   text-align: center;
-  .icon {
-    height: 1.25em;
-    width: 1.25em;
-    vertical-align: text-bottom;
-    display: inline-block;
-
-    &.verified {
-      @include color-svg('/images/verified-check.svg', $grey_d);
-    }
-    &.shield {
-      @include color-svg('/images/shield.svg', $grey_d);
-    }
-  }
 
   .content {
     cursor: pointer;
diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss
index 723f13e7124f..98832a2dca5d 100644
--- a/stylesheets/android-dark.scss
+++ b/stylesheets/android-dark.scss
@@ -93,6 +93,9 @@ $text-dark_l2: darken($text-dark, 30%);
     .verified {
       @include color-svg('/images/verified-check.svg', $text-dark);
     }
+    .clock {
+      @include color-svg('/images/clock.svg', $text-dark);
+    }
   }
 
   .inactive .conversation-header {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index db6a54b82cf4..be6610403a0e 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -1542,31 +1542,35 @@ li.entry .error-icon-container {
         background-color: #d9d9d9;
         border-color: silver; }
 
-.message-list li.keychange {
+.advisory .icon {
+  height: 1.25em;
+  width: 1.25em;
+  vertical-align: text-bottom;
+  display: inline-block; }
+  .advisory .icon.verified {
+    -webkit-mask: url("/images/verified-check.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #454545; }
+  .advisory .icon.shield {
+    -webkit-mask: url("/images/shield.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #454545; }
+  .advisory .icon.clock {
+    -webkit-mask: url("/images/clock.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #454545; }
+
+.keychange {
   text-align: center; }
-  .message-list li.keychange .content {
+  .keychange .content {
     cursor: pointer;
     display: inline-block;
     padding: 5px 10px;
     background: #fff5c4;
-    color: #454545;
     border-radius: 5px; }
 
 .verified-change {
   text-align: center; }
-  .verified-change .icon {
-    height: 1.25em;
-    width: 1.25em;
-    vertical-align: text-bottom;
-    display: inline-block; }
-    .verified-change .icon.verified {
-      -webkit-mask: url("/images/verified-check.svg") no-repeat center;
-      -webkit-mask-size: 100%;
-      background-color: #454545; }
-    .verified-change .icon.shield {
-      -webkit-mask: url("/images/shield.svg") no-repeat center;
-      -webkit-mask-size: 100%;
-      background-color: #454545; }
   .verified-change .content {
     cursor: pointer;
     display: inline-block;
@@ -2073,6 +2077,10 @@ li.entry .error-icon-container {
     -webkit-mask: url("/images/verified-check.svg") no-repeat center;
     -webkit-mask-size: 100%;
     background-color: #CCCCCC; }
+  .android-dark .message-list .advisory .clock {
+    -webkit-mask: url("/images/clock.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 114d783f0b32..10528c611a7c 100644
--- a/test/index.html
+++ b/test/index.html
@@ -187,7 +187,7 @@
     <span href='#' class='retry'>{{ resend }}</span>
   </script>
   <script type='text/x-tmpl-mustache' id='keychange'>
-      <span class='content' dir='auto'>{{ content }}</span>
+      <span class='content' dir='auto'><span class='shield icon'></span> {{ content }}</span>
   </script>
   <script type='text/x-tmpl-mustache' id='verified-change'>
       <span class='content' dir='auto'><span class='{{ icon }} icon'></span> {{ content }}</span>
@@ -206,6 +206,12 @@
           </div>
       </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='hourglass'>
+      <span class='hourglass'><span class='sand'></span></span>
+  </script>
+  <script type='text/x-tmpl-mustache' id='expirationTimerUpdate'>
+    <span class='content'><span class='icon clock'></span> {{ content }}</span>
+  </script>
   <script type='text/x-tmpl-mustache' id='new-group-update'>
       <div class='conversation-header'>
         <button class='back'></button>