Big emojis in chats, too

app/soapbox/components/status_content.js

@@ -9,18 +9,10 @@ import classnames from 'classnames';
 import Icon from 'soapbox/components/icon';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { addGreentext } from 'soapbox/utils/greentext';
+import { justEmojis } from 'soapbox/utils/rich_content';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
-
-const justEmojis = (node, limit = 10) => {
-  if (!node) return false;
-  if (node.textContent.replaceAll(' ', '') !== '') return false;
-  const emojis = [...node.querySelectorAll('img.emojione')];
-  if (emojis.length > limit) return false;
-  const images = [...node.querySelectorAll('img')];
-  if (images.length > emojis.length) return false;
-  return true;
-};
+const BIG_EMOJI_LIMIT = 10;
 
 const mapStateToProps = state => ({
   greentext: getSoapboxConfig(state).get('greentext'),
@@ -98,10 +90,16 @@ class StatusContent extends React.PureComponent {
     }
   }
 
+  setJustEmojis = () => {
+    if (this.node && this.state.justEmojis === undefined) {
+      this.setState({ justEmojis: justEmojis(this.node, BIG_EMOJI_LIMIT) });
+    }
+  }
+
   refresh = () => {
     this.setCollapse();
     this._updateStatusLinks();
-    this.setState({ justEmojis: justEmojis(this.node) });
+    this.setJustEmojis();
   }
 
   componentDidMount() {

app/soapbox/features/chats/components/chat_message_list.js

@@ -15,6 +15,9 @@ import Bundle from 'soapbox/features/ui/components/bundle';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { initReportById } from 'soapbox/actions/reports';
 import { createSelector } from 'reselect';
+import { justEmojis } from 'soapbox/utils/rich_content';
+
+const BIG_EMOJI_LIMIT = 1;
 
 const messages = defineMessages({
   today: { id: 'chats.dividers.today', defaultMessage: 'Today' },
@@ -120,6 +123,10 @@ class ChatMessageList extends ImmutablePureComponent {
       link.setAttribute('rel', 'ugc nofollow noopener');
       link.setAttribute('target', '_blank');
     });
+
+    if (justEmojis(c, BIG_EMOJI_LIMIT)) {
+      c.classList.add('chat-message__bubble--onlyEmoji');
+    }
   }
 
   isNearBottom = () => {

app/soapbox/utils/rich_content.js

@@ -0,0 +1,10 @@
+// Returns `true` if the node contains only emojis, up to a limit
+export const justEmojis = (node, limit = 1) => {
+  if (!node) return false;
+  if (node.textContent.replaceAll(' ', '') !== '') return false;
+  const emojis = [...node.querySelectorAll('img.emojione')];
+  if (emojis.length > limit) return false;
+  const images = [...node.querySelectorAll('img')];
+  if (images.length > emojis.length) return false;
+  return true;
+};

app/styles/chats.scss

@@ -163,6 +163,15 @@
         pointer-events: all;
       }
     }
+
+    &--onlyEmoji {
+      background: transparent;
+
+      img.emojione {
+        width: 36px !important;
+        height: 36px !important;
+      }
+    }
   }
 
   &--me .chat-message__bubble {