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 }} ·{{ /isVerified }} {{ number }}</div>
+ <div class='number'>{{ #isVerified }}<span class='verified-icon'></span> {{ verified }} ·{{ /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 }} ·{{ /isVerified }} {{ number }}</div>
+ <div class='number'>{{ #isVerified }}<span class='verified-icon'></span> {{ verified }} ·{{ /
</script>
<script type='text/x-tmpl-mustache' id='contact'>
{{> avatar }}