Twemojified all text

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/atoms/avatar/Avatar.jsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './Avatar.scss';
 
+import { twemojify } from '../../../util/twemojify';
+
 import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 
@@ -29,7 +31,11 @@ function Avatar({
               {
                 iconSrc !== null
                   ? <RawIcon size={size} src={iconSrc} />
-                  : text !== null && <Text variant={textSize}>{[...text][0]}</Text>
+                  : text !== null && (
+                    <Text variant={textSize}>
+                      {twemojify([...text][0])}
+                    </Text>
+                  )
               }
             </span>
           )

src/app/atoms/text/Text.scss

@@ -4,12 +4,26 @@
   font-weight: $weight;
   letter-spacing: var(--ls-#{$type});
   line-height: var(--lh-#{$type});
+
+  & img.emoji,
+  & img[data-mx-emoticon] {
+    height: var(--fs-#{$type});
+  }
 }
 
 %text {
   margin: 0;
   padding: 0;
   color: var(--tc-surface-high);
+
+  & img.emoji,
+  & img[data-mx-emoticon] {
+    margin: 0 !important;
+    margin-right: 2px !important;
+    padding: 0 !important;
+    position: relative;
+    top: 2px;
+  }
 }
 
 .text-h1 {