From 47c5142a837866fa364cdab29f90325c8fa2e8d6 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Wed, 14 Jun 2017 14:06:36 -0700
Subject: [PATCH] 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                |  4 ++--
 images/verified-check.svg      |  2 ++
 stylesheets/_conversation.scss |  7 +++++++
 stylesheets/_global.scss       |  8 ++++++++
 stylesheets/_index.scss        |  3 +++
 stylesheets/_ios.scss          |  5 +++++
 stylesheets/android-dark.scss  | 10 ++++++++++
 stylesheets/manifest.css       | 35 ++++++++++++++++++++++++++++++++++
 test/index.html                |  4 ++--
 9 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 images/verified-check.svg

diff --git a/background.html b/background.html
index 460e09ed8..e9df1b896 100644
--- a/background.html
+++ b/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 }}
diff --git a/images/verified-check.svg b/images/verified-check.svg
new file mode 100644
index 000000000..ce98e1184
--- /dev/null
+++ b/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>
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 02ceb6b28..923f6e358 100644
--- a/stylesheets/_conversation.scss
+++ b/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;
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 705665117..b7c896651 100644
--- a/stylesheets/_global.scss
+++ b/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;
+  }
 }
 
 
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 4f9c07825..c41140c51 100644
--- a/stylesheets/_index.scss
+++ b/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 {
diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss
index 3d9769410..a1fbb7429 100644
--- a/stylesheets/_ios.scss
+++ b/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,
diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss
index e417a6dad..39c68abf2 100644
--- a/stylesheets/android-dark.scss
+++ b/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;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 5d23f3b67..e0c99f9e3 100644
--- a/stylesheets/manifest.css
+++ b/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;
diff --git a/test/index.html b/test/index.html
index 85e461f50..10beb9647 100644
--- a/test/index.html
+++ b/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 }}