Style the StatusInteractionBar

app/gabsocial/features/status/components/status_interaction_bar.js

@@ -9,22 +9,37 @@ export class StatusInteractionBar extends React.Component {
     status: ImmutablePropTypes.map,
   }
 
-  render() {
+  getNormalizedReacts = () => {
     const { status } = this.props;
     const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']);
     const favouritesCount = status.get('favourites_count');
+    return reduceEmoji(emojiReacts, favouritesCount).reverse();
+  }
+
+  render() {
+    const emojiReacts = this.getNormalizedReacts();
+    const count = emojiReacts.reduce((acc, cur) => (
+      acc + cur.get('count')
+    ), 0);
+
+    if (count < 1) return null;
 
     return (
-      <div className='emoji-reacts'>
+      <div className='emoji-reacts-container'>
-        {reduceEmoji(emojiReacts, favouritesCount).map((e, i) => (
+        <div className='emoji-reacts'>
-          <span className='emoji-react' key={i}>
+          {emojiReacts.map((e, i) => (
-            <span
+            <span className='emoji-react' key={i}>
-              className='emoji-react--emoji'
+              <span
-              dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }}
+                className='emoji-react__emoji'
-            />
+                dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }}
-            <span className='emoji-react--count'>{e.get('count')}</span>
+              />
-          </span>
+              <span className='emoji-react__count'>{e.get('count')}</span>
-        ))}
+            </span>
+          ))}
+        </div>
+        <div className='emoji-reacts__count'>
+          {count}
+        </div>
       </div>
     );
   }

app/styles/application.scss

@@ -32,6 +32,7 @@
 @import 'gabsocial/components/group-sidebar-panel';
 @import 'gabsocial/components/sidebar-menu';
 @import 'gabsocial/components/hotkeys-modal';
+@import 'gabsocial/components/emoji-reacts';
 
 @import 'gabsocial/polls';
 @import 'gabsocial/introduction';

app/styles/gabsocial/components/emoji-reacts.scss

@@ -0,0 +1,49 @@
+.emoji-react {
+  display: inline-block;
+  transition: 0.1s;
+
+  &__emoji {
+    img {
+      width: 20px;
+      height: 20px;
+      filter: drop-shadow(2px 0 0 #fff); // FIXME: Use theme color
+    }
+  }
+
+  &__count {
+    display: none;
+  }
+
+  + .emoji-react {
+    margin-right: -8px;
+  }
+}
+
+.emoji-reacts {
+  display: inline-flex;
+  flex-direction: row-reverse;
+}
+
+.emoji-reacts-container {
+  display: inline-flex;
+
+  &:hover {
+    .emoji-react {
+      margin: 0;
+
+      &__count {
+        display: inline;
+      }
+    }
+
+    .emoji-reacts__count {
+      display: none;
+    }
+  }
+}
+
+.emoji-reacts__count,
+.emoji-react__count {
+  font-size: 12px;
+  font-weight: bold;
+}