PLT-4300 Switched emoji to use a background-image (#4631)

webapp/sass/components/_emoticons.scss

@@ -1,11 +1,14 @@
 @charset 'UTF-8';
 
 .emoticon {
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
     background-size: contain;
     display: inline-block;
-    height: 1.5em;
+    font-size: 19px;
-    margin-bottom: .25em;
+    height: 1em;
-    width: 1.5em;
+    vertical-align: text-top;
+    width: 1em;
 }
 
 .emoticon-suggestion {

webapp/utils/emoticons.jsx

@@ -38,7 +38,7 @@ export function handleEmoticons(text, tokens, emojis) {
 
             // we have an image path so we found a matching emoticon
             tokens.set(alias, {
-                value: `<img align="absmiddle" alt="${matchText}" class="emoticon" src="${path}" title="${matchText}" />`,
+                value: `<span alt="${matchText}" class="emoticon" title="${matchText}" style="background-image:url(${path})"></span>`,
                 originalText: fullMatch
             });