From 6f21905a8bd90e0bac76707e256633de5cf54b82 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 2 Dec 2022 14:15:59 -0600
Subject: [PATCH] Improve display of emojis

---
 app/soapbox/components/markup.css       |  2 +-
 app/styles/basics.scss                  |  2 +-
 app/styles/components/buttons.scss      |  6 ------
 app/styles/components/display-name.scss |  6 ------
 app/styles/ui.scss                      | 14 --------------
 5 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/app/soapbox/components/markup.css b/app/soapbox/components/markup.css
index 09669fbd7..3e6bf1c3d 100644
--- a/app/soapbox/components/markup.css
+++ b/app/soapbox/components/markup.css
@@ -61,7 +61,7 @@
 
 /* Emojis */
 [data-markup] img.emojione {
-  @apply w-5 h-5;
+  @apply w-5 h-5 m-0;
 }
 
 /* Hide Markdown images (Pleroma) */
diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index 9a9eac717..705b240bc 100644
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@@ -100,7 +100,7 @@ noscript {
 }
 
 .emojione {
-  @apply w-5 h-5 -mt-[3px] inline;
+  @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
 }
 
 // Virtuoso empty placeholder fix.
diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss
index dc5bce4f4..dcb8e2343 100644
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@@ -113,9 +113,3 @@ a.button {
     margin-right: 0.6em;
   }
 }
-
-.button--welcome {
-  .emojione {
-    margin: -1px 6px 0 -4px;
-  }
-}
diff --git a/app/styles/components/display-name.scss b/app/styles/components/display-name.scss
index e5625d109..72d36903a 100644
--- a/app/styles/components/display-name.scss
+++ b/app/styles/components/display-name.scss
@@ -8,12 +8,6 @@
   }
 }
 
-.muted {
-  .emojione {
-    opacity: 0.5;
-  }
-}
-
 a.account__display-name {
   &:hover strong {
     text-decoration: underline;
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 80884e2b5..c49c54562 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -155,20 +155,6 @@
   transition: height 0.4s ease, opacity 0.4s ease;
 }
 
-.emojione {
-  display: inline-block;
-  font-size: inherit;
-  vertical-align: middle;
-  object-fit: contain;
-  margin: -0.2ex 0.15em 0.2ex;
-  width: 16px;
-  height: 16px;
-
-  img {
-    width: auto;
-  }
-}
-
 .image-loader {
   position: relative;
   width: 100%;