From f693768bcf6d8a90e441454559b35d28c88efff7 Mon Sep 17 00:00:00 2001
From: Ken Powers <ken@signal.org>
Date: Wed, 18 Dec 2019 14:36:20 -0500
Subject: [PATCH] Stickers: Ensure icon for 'blessed' pack is displayed

---
 stylesheets/_modules.scss | 59 ++++++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 19 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 370cd47c4..d83440036 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -5309,6 +5309,44 @@ button.module-image__border-overlay:focus {
   }
 }
 
+%blessed-sticker-pack-icon {
+  height: 14px;
+  width: 14px;
+  border-radius: 8px;
+  background-color: $color-white;
+  display: inline-block;
+  vertical-align: middle;
+  margin: {
+    left: 5px;
+    bottom: 2px;
+  }
+  position: relative;
+
+  &::before {
+    content: "";
+    display: block;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: -1px;
+    left: -1px;
+
+    @include light-theme {
+      @include color-svg(
+        '../images/icons/v2/check-circle-solid-24.svg',
+        $color-accent-blue
+      );
+    }
+
+    @include dark-theme {
+      @include color-svg(
+        '../images/icons/v2/check-circle-solid-24.svg',
+        $color-accent-blue
+      );
+    }
+  }
+}
+
 .module-sticker-manager__pack-row {
   @include button-reset;
 
@@ -5370,12 +5408,7 @@ button.module-image__border-overlay:focus {
     }
 
     &__blessed-icon {
-      height: 16px;
-      width: 16px;
-      display: inline-block;
-      margin-left: 3px;
-      vertical-align: top;
-      background-image: url('../images/check-circle-filled-16.svg');
+      @extend %blessed-sticker-pack-icon;
     }
   }
 
@@ -5615,19 +5648,7 @@ button.module-image__border-overlay:focus {
         }
 
         &__blessed-icon {
-          height: 16px;
-          width: 16px;
-          display: inline-block;
-          margin-left: 3px;
-          vertical-align: top;
-
-          @include light-theme {
-            background-image: url('../images/check-circle-filled-16.svg');
-          }
-
-          @include dark-theme {
-            background-image: url('../images/check-circle-filled-16.svg');
-          }
+          @extend %blessed-sticker-pack-icon;
         }
       }