StatusInteractionBar: fix emoji react styles

app/soapbox/features/status/components/status-interaction-bar.tsx

@@ -5,11 +5,10 @@ import { FormattedNumber } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { openModal } from 'soapbox/actions/modals';
-import emojify from 'soapbox/features/emoji/emoji';
 import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
 import { reduceEmoji } from 'soapbox/utils/emoji_reacts';
 
-import { HStack, IconButton, Text } from '../../../components/ui';
+import { HStack, IconButton, Text, Emoji } from '../../../components/ui';
 
 import type { Status } from 'soapbox/types/entities';
 
@@ -135,39 +134,28 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
 
     if (count > 0) {
       return (
-        <div className='emoji-reacts-container'>
+        <HStack space={0.5} className='emoji-reacts-container' alignItems='center'>
           <div className='emoji-reacts'>
             {emojiReacts.map((e, i) => {
-              const emojiReact = (
-                <>
-                  <span
-                    className='emoji-react__emoji'
-                    dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }}
-                  />
-                  <span className='emoji-react__count'>{e.get('count')}</span>
-                </>
-              );
-
-              if (features.exposableReactions) {
               return (
-                  <span
+                <HStack space={0.5} className='emoji-react p-1' alignItems='center' key={i}>
-                    className='emoji-react'
+                  <Emoji
-                    role='presentation'
+                    className='emoji-react__emoji w-5 h-5 flex-none'
-                    key={i}
+                    emoji={e.get('name')}
-                    onClick={handleOpenReactionsModal(e)}
+                    onClick={features.exposableReactions ? handleOpenReactionsModal(e) : undefined}
-                  >
+                  />
-                    {emojiReact}
+                  <Text theme='muted' size='sm' className='emoji-react__count'>
-                  </span>
+                    <FormattedNumber value={e.get('count')} />
+                  </Text>
+                </HStack>
               );
-              }
-
-              return <span className='emoji-react' key={i}>{emojiReact}</span>;
             })}
           </div>
-          <div className='emoji-reacts__count'>
+
-            {count}
+          <Text theme='muted' size='sm' className='emoji-reacts__count'>
-          </div>
+            <FormattedNumber value={count} />
-        </div>
+          </Text>
+        </HStack>
       );
     }
 

app/styles/components/emoji-reacts.scss

@@ -1,5 +1,6 @@
 .emoji-react {
   @apply inline-block text-gray-900 dark:text-gray-300 no-underline;
+  transition: 0.2s;
 
   &__emoji {
     img {
@@ -13,7 +14,7 @@
   }
 
   + .emoji-react {
-    margin-right: -8px;
+    @apply -mr-3;
   }
 
   &[type='button'] {
@@ -64,7 +65,6 @@
 
 .emoji-reacts-container {
   display: inline-flex;
-  margin-right: 0.4em;
 
   &:hover {
     .emoji-react {
@@ -81,13 +81,6 @@
   }
 }
 
-.emoji-reacts__count,
-.emoji-react__count {
-  font-size: 12px;
-  font-weight: bold;
-  transform: translateY(2px);
-}
-
 .emoji-react-selector-container {
   &:hover,
   &:focus {