Replace unicode check with new svg icon

A good bit of CSS was required to keep the text color changing along
with the text it is nestled within.

Also: took this opportunity to increase the contrast of the number and
verified section right under the contact name in the group members view.

FREEBIE

background.html

@@ -80,7 +80,7 @@
       <span class='conversation-number'>{{ number }}</span>
     {{ /number }}
     {{ #isVerified }}
-      <span class='verified'>✓ {{ verified }}</span>
+      <span class='verified'><span class='verified-icon'></span> {{ verified }}</span>
     {{ /isVerified }}
   </script>
   <script type='text/x-tmpl-mustache' id='conversation'>
@@ -251,7 +251,7 @@
   </script>
   <script type='text/x-tmpl-mustache' id='contact_name_and_number'>
       <h3 class='name' dir='auto'> {{ title }} </h3>
-      <div class='number'>{{ #isVerified }}✓ {{ verified }} &middot;{{ /isVerified }} {{ number }}</div>
+      <div class='number'>{{ #isVerified }}<span class='verified-icon'></span> {{ verified }} &middot;{{ /isVerified }} {{ number }}</div>
   </script>
   <script type='text/x-tmpl-mustache' id='contact'>
       {{> avatar }}

images/verified-check.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M11 21.34L2.66 13l-2.83 2.83L11 27 31.736 6.425 28.83 3.8" fill-rule="nonzero" fill="#000"/></svg>

stylesheets/_conversation.scss

@@ -21,6 +21,13 @@
     padding: 0 5px 0 4px;
   }
 }
+.conversation-title .verified-icon {
+  @include color-svg('/images/verified-check.svg', white);
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  vertical-align: text-bottom;
+}
 
 .conversation {
   background-color: white;

stylesheets/_global.scss

@@ -393,6 +393,14 @@ $avatar-size: 44px;
   &.not-clickable {
     cursor: default;
   }
+
+  .verified-icon {
+      @include color-svg('/images/verified-check.svg', $grey);
+      display: inline-block;
+      width: 1.25em;
+      height: 1.25em;
+      vertical-align: text-bottom;
+  }
 }
 
 

stylesheets/_index.scss

@@ -95,6 +95,9 @@
   background-color: $grey_l !important;
   color: $grey_d;
   border-color: rgba(0,0,0,0.05);
+  .verified-icon {
+    @include color-svg('/images/verified-check.svg', $grey_d);
+  }
 }
 
 .tool-bar {

stylesheets/_ios.scss

@@ -65,7 +65,12 @@ $ios-border-color: rgba(0,0,0,0.1);
 
     .conversation-title {
       line-height: $header-height;
+
+      .verified-icon {
+        @include color-svg('/images/verified-check.svg', #454545);
+      }
     }
+
     .avatar { display: none; }
   }
   .settings h3,

stylesheets/android-dark.scss

@@ -4,6 +4,7 @@ $grey-dark_l3: darken($grey-dark_l2, 7%);
 $grey-dark_l4: darken($grey-dark_l3, 8%);
 $button-dark: #ccc;
 $text-dark: #CCCCCC;
+$text-dark_l2: darken($text-dark, 30%);
 
 .android-dark {
   .gutter .content {
@@ -66,6 +67,12 @@ $text-dark: #CCCCCC;
   .contact-details .name {
     font-weight: 400;
   }
+  .contact-details .number {
+    color: $text-dark_l2;
+    .verified-icon {
+       @include color-svg('/images/verified-check.svg', $text-dark_l2);
+    }
+  }
   .group-member-list .members .contact, .new-group-update .members .contact, .attachment-previews img {
     background-color: $grey-dark_l3;
     border-color: $grey-dark;
@@ -82,6 +89,9 @@ $text-dark: #CCCCCC;
   .inactive .conversation-header {
     background-color: $grey-dark !important;
     color: $text-dark;
+    .verified-icon {
+      @include color-svg('/images/verified-check.svg', $text-dark);
+    }
   }
   .sent .status {
     display: inline-block;

stylesheets/manifest.css

@@ -366,6 +366,14 @@ button.hamburger {
     font-size: 0.92857em; }
   .contact-details.not-clickable {
     cursor: default; }
+  .contact-details .verified-icon {
+    -webkit-mask: url("/images/verified-check.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #616161;
+    display: inline-block;
+    width: 1.25em;
+    height: 1.25em;
+    vertical-align: text-bottom; }
 
 .recipients-input {
   position: relative; }
@@ -852,6 +860,10 @@ img.emoji.jumbo {
   background-color: #f3f3f3 !important;
   color: #454545;
   border-color: rgba(0, 0, 0, 0.05); }
+  .inactive .conversation-header .verified-icon {
+    -webkit-mask: url("/images/verified-check.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #454545; }
 
 .tool-bar {
   position: relative; }
@@ -1013,6 +1025,15 @@ input.search {
   font-weight: bold;
   padding: 0 5px 0 4px; }
 
+.conversation-title .verified-icon {
+  -webkit-mask: url("/images/verified-check.svg") no-repeat center;
+  -webkit-mask-size: 100%;
+  background-color: white;
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  vertical-align: text-bottom; }
+
 .conversation {
   background-color: white;
   height: 100%; }
@@ -1613,6 +1634,10 @@ li.entry .error-icon-container {
   text-align: left; }
   .ios .conversation-header .conversation-title {
     line-height: 64px; }
+    .ios .conversation-header .conversation-title .verified-icon {
+      -webkit-mask: url("/images/verified-check.svg") no-repeat center;
+      -webkit-mask-size: 100%;
+      background-color: #454545; }
   .ios .conversation-header .avatar {
     display: none; }
 .ios .settings h3,
@@ -1955,6 +1980,12 @@ li.entry .error-icon-container {
       color: #CCCCCC; }
   .android-dark .contact-details .name {
     font-weight: 400; }
+  .android-dark .contact-details .number {
+    color: gray; }
+    .android-dark .contact-details .number .verified-icon {
+      -webkit-mask: url("/images/verified-check.svg") no-repeat center;
+      -webkit-mask-size: 100%;
+      background-color: gray; }
   .android-dark .group-member-list .members .contact, .android-dark .new-group-update .members .contact, .android-dark .attachment-previews img {
     background-color: #171717;
     border-color: #333333; }
@@ -1999,6 +2030,10 @@ li.entry .error-icon-container {
   .android-dark .inactive .conversation-header {
     background-color: #333333 !important;
     color: #CCCCCC; }
+    .android-dark .inactive .conversation-header .verified-icon {
+      -webkit-mask: url("/images/verified-check.svg") no-repeat center;
+      -webkit-mask-size: 100%;
+      background-color: #CCCCCC; }
   .android-dark .sent .status {
     display: inline-block;
     -webkit-mask: url("/images/check.svg") no-repeat center;

test/index.html

@@ -94,7 +94,7 @@
       <span class='conversation-number'>{{ number }}</span>
     {{ /number }}
     {{ #isVerified }}
-      <span class='verified'>✓ {{ verified }}</span>
+      <span class='verified'><span class='verified-icon'></span> {{ verified }}</span>
     {{ /isVerified }}
   </script>
   <script type='text/x-tmpl-mustache' id='conversation'>
@@ -236,7 +236,7 @@
   </script>
   <script type='text/x-tmpl-mustache' id='contact_name_and_number'>
       <h3 class='name' dir='auto'> {{ title }} </h3>
-      <div class='number'>{{ #isVerified }}✓ {{ verified }} &middot;{{ /isVerified }} {{ number }}</div>
+      <div class='number'>{{ #isVerified }}<span class='verified-icon'></span> {{ verified }} &middot;{{ /
   </script>
   <script type='text/x-tmpl-mustache' id='contact'>
       {{> avatar }}