From 9d24f0db836be54a160e86343250b511d37a9a6c Mon Sep 17 00:00:00 2001
From: Ken Powers <ken@signal.org>
Date: Fri, 8 May 2020 13:29:42 -0400
Subject: [PATCH] Use new "any emoji" icon in light mode

---
 ...-hover.svg => any-emoji-32-dark-hover.svg} |  0
 ...any-emoji-32.svg => any-emoji-32-dark.svg} |  0
 images/any-emoji-32-light-hover.svg           |  6 ++++++
 images/any-emoji-32-light.svg                 |  6 ++++++
 stylesheets/_modules.scss                     | 19 +++++++++++++++++--
 5 files changed, 29 insertions(+), 2 deletions(-)
 rename images/{any-emoji-32-hover.svg => any-emoji-32-dark-hover.svg} (100%)
 rename images/{any-emoji-32.svg => any-emoji-32-dark.svg} (100%)
 create mode 100644 images/any-emoji-32-light-hover.svg
 create mode 100644 images/any-emoji-32-light.svg

diff --git a/images/any-emoji-32-hover.svg b/images/any-emoji-32-dark-hover.svg
similarity index 100%
rename from images/any-emoji-32-hover.svg
rename to images/any-emoji-32-dark-hover.svg
diff --git a/images/any-emoji-32.svg b/images/any-emoji-32-dark.svg
similarity index 100%
rename from images/any-emoji-32.svg
rename to images/any-emoji-32-dark.svg
diff --git a/images/any-emoji-32-light-hover.svg b/images/any-emoji-32-light-hover.svg
new file mode 100644
index 0000000000..96a9fab0d7
--- /dev/null
+++ b/images/any-emoji-32-light-hover.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#676767"/>
+<path d="M8 18C9.10457 18 10 17.1046 10 16C10 14.8954 9.10457 14 8 14C6.89543 14 6 14.8954 6 16C6 17.1046 6.89543 18 8 18Z" fill="#E9E9E9"/>
+<path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill="#E9E9E9"/>
+<path d="M24 18C25.1046 18 26 17.1046 26 16C26 14.8954 25.1046 14 24 14C22.8954 14 22 14.8954 22 16C22 17.1046 22.8954 18 24 18Z" fill="#E9E9E9"/>
+</svg>
diff --git a/images/any-emoji-32-light.svg b/images/any-emoji-32-light.svg
new file mode 100644
index 0000000000..a91e2651f4
--- /dev/null
+++ b/images/any-emoji-32-light.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#4A4A4A"/>
+<path d="M8 18C9.10457 18 10 17.1046 10 16C10 14.8954 9.10457 14 8 14C6.89543 14 6 14.8954 6 16C6 17.1046 6.89543 18 8 18Z" fill="#E9E9E9"/>
+<path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill="#E9E9E9"/>
+<path d="M24 18C25.1046 18 26 17.1046 26 16C26 14.8954 25.1046 14 24 14C22.8954 14 22 14.8954 22 16C22 17.1046 22.8954 18 24 18Z" fill="#E9E9E9"/>
+</svg>
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 54788f8823..2a51007acb 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -5162,16 +5162,31 @@ button.module-image__border-overlay:focus {
       background: rgba($color-white, 0.3);
     }
     &--more {
-      background: url('../images/any-emoji-32.svg') no-repeat center;
+      @include light-theme {
+        background: url('../images/any-emoji-32-light.svg') no-repeat center;
+      }
+
+      @include dark-theme {
+        background: url('../images/any-emoji-32-dark.svg') no-repeat center;
+      }
 
       &::after {
         content: '';
         display: block;
         width: 52px;
         height: 52px;
-        background: url('../images/any-emoji-32-hover.svg') no-repeat center;
         opacity: 0;
         transition: opacity 400ms $ease-out-expo;
+
+        @include light-theme {
+          background: url('../images/any-emoji-32-light-hover.svg') no-repeat
+            center;
+        }
+
+        @include dark-theme {
+          background: url('../images/any-emoji-32-dark-hover.svg') no-repeat
+            center;
+        }
       }
 
       &:hover::after {