Rename justEmojis to onlyEmoji

app/soapbox/components/status_content.js

@@ -9,7 +9,7 @@ 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';
+import { onlyEmoji } from 'soapbox/utils/rich_content';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
 const BIG_EMOJI_LIMIT = 10;
@@ -90,16 +90,16 @@ class StatusContent extends React.PureComponent {
     }
   }
 
-  setJustEmojis = () => {
+  setOnlyEmoji = () => {
-    if (this.node && this.state.justEmojis === undefined) {
+    if (this.node && this.state.onlyEmoji === undefined) {
-      this.setState({ justEmojis: justEmojis(this.node, BIG_EMOJI_LIMIT) });
+      this.setState({ onlyEmoji: onlyEmoji(this.node, BIG_EMOJI_LIMIT) });
     }
   }
 
   refresh = () => {
     this.setCollapse();
     this._updateStatusLinks();
-    this.setJustEmojis();
+    this.setOnlyEmoji();
   }
 
   componentDidMount() {
@@ -183,7 +183,7 @@ class StatusContent extends React.PureComponent {
 
   render() {
     const { status } = this.props;
-    const { justEmojis } = this.state;
+    const { onlyEmoji } = this.state;
 
     if (status.get('content').length === 0) {
       return null;
@@ -198,7 +198,7 @@ class StatusContent extends React.PureComponent {
       'status__content--with-action': this.props.onClick && this.context.router,
       'status__content--with-spoiler': status.get('spoiler_text').length > 0,
       'status__content--collapsed': this.state.collapsed === true,
-      'status__content--big': justEmojis,
+      'status__content--big': onlyEmoji,
     });
 
     if (isRtl(status.get('search_index'))) {
@@ -265,7 +265,7 @@ class StatusContent extends React.PureComponent {
           tabIndex='0'
           ref={this.setRef}
           className={classnames('status__content', {
-            'status__content--big': justEmojis,
+            'status__content--big': onlyEmoji,
           })}
           style={directionStyle}
           dangerouslySetInnerHTML={content}

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

@@ -15,7 +15,7 @@ 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';
+import { onlyEmoji } from 'soapbox/utils/rich_content';
 
 const BIG_EMOJI_LIMIT = 1;
 
@@ -124,8 +124,10 @@ class ChatMessageList extends ImmutablePureComponent {
       link.setAttribute('target', '_blank');
     });
 
-    if (justEmojis(c, BIG_EMOJI_LIMIT)) {
+    if (onlyEmoji(c, BIG_EMOJI_LIMIT)) {
       c.classList.add('chat-message__bubble--onlyEmoji');
+    } else {
+      c.classList.remove('chat-message__bubble--onlyEmoji');
     }
   }
 

app/soapbox/utils/rich_content.js

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

app/styles/chats.scss

@@ -165,7 +165,7 @@
     }
 
     &--onlyEmoji {
-      background: transparent;
+      background: transparent !important;
 
       img.emojione {
         width: 36px !important;