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

@@ -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'>

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;

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;

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 {

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; }

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>