subs: Switch checkmarks to icon format.

Fixes zulip#10918.
synicalsyntax · Feb 18, 2019 · 4080922 · 4080922
1 parent e175c83
commit 4080922
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 31 deletions.
diff --git a/static/assets/icons/checkmark.svg b/static/assets/icons/checkmark.svg
diff --git a/static/styles/subscriptions.scss b/static/styles/subscriptions.scss
@@ -587,44 +587,40 @@ form#add_new_subscription {
 }
 
 .stream-row {
-    padding: 15px 10px 11px 10px;
+    padding: 15px 15px 15px 0;
     border-bottom: 1px solid hsl(0, 0%, 93%);
+    display: flex;
+    align-items: center;
     cursor: pointer;
 
     .check {
-        width: 25px;
-        height: 25px;
-        position: relative;
-        margin-right: 8px;
-        margin-top: 9px;
-        background-size: 60% auto;
-        background-repeat: no-repeat;
-        background-position: center center;
-
-        svg {
-            fill: transparent;
-            width: 70%;
-            margin: 0% 15%;
+        display: flex;
+        font-size: 18px;
+        flex: 1;
+        align-self: center;
+        margin: 0 15px;
+
+        i {
+            color: transparent;
         }
 
         &.checked {
-            svg {
-                fill: hsl(170, 48%, 54%);
+            i {
+                color: hsl(170, 48%, 54%);
             }
 
             &:hover {
-                svg {
+                i {
                     opacity: 0.5;
                 }
             }
         }
     }
 
     .icon {
-        width: 35px;
+        min-width: 35px;
         height: 35px;
-        margin-right: 8px;
-        margin-top: 4px;
+        margin-right: 14px;
         background-color: hsl(300, 100%, 25%);
         border-radius: 4px;
         color: hsl(0, 0%, 100%);
@@ -739,13 +735,13 @@ form#add_new_subscription {
     &:hover,
     &.active:hover {
         .check:not(.checked) {
-            svg {
-                fill: hsl(0, 0%, 87%);
+            i {
+                color: hsl(0, 0%, 87%);
             }
 
             &:hover {
-                svg {
-                    fill: hsl(0, 0%, 72%);
+                i {
+                    color: hsl(0, 0%, 72%);
                 }
             }
         }
@@ -910,17 +906,17 @@ form#add_new_subscription {
     color: hsl(0, 0%, 27%);
 }
 
-#subscription_overlay .checkmark {
+#subscription_overlay span.checkmark {
     display: none;
     margin-left: 5px;
     font-size: 0.9rem;
     color: hsl(0, 0%, 67%);
 
     cursor: pointer;
-}
 
-#subscription_overlay .checkmark.show {
-    display: block;
+    &.show {
+        display: block;
+    }
 }
 
 #subscription_overlay .subscription-type {

diff --git a/static/templates/subscription.handlebars b/static/templates/subscription.handlebars
@@ -2,9 +2,7 @@
 {{#with this}}
 <div class="stream-row" data-stream-id="{{stream_id}}" data-stream-name="{{name}}">
     <div class="check {{#if subscribed }}checked{{/if}} sub_unsub_button">
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-            <path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
-        </svg>
+        <i class="zulip-icon checkmark" aria-hidden="true"></i>
     </div>
     {{ partial "subscription_setting_icon" }}
     <div class="sub-info-box">