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
signalapp · Aug 4, 2017 · 47c5142 · 47c5142
1 parent 688cae6
commit 47c5142
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 4 deletions.
diff --git a/background.html b/background.html
@@ -80,7 +80,7 @@ <h3>{{ welcomeToSignal }}</h3>
       <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 @@ <h3>{{ welcomeToSignal }}</h3>
   </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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/test/index.html b/test/index.html
@@ -94,7 +94,7 @@ <h3>{{ welcomeToSignal }}</h3>
       <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 @@ <h3>{{ welcomeToSignal }}</h3>
   </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 }}