make font larger for emoji-only messages

css/base.css

@@ -2007,6 +2007,24 @@ video {
   padding: 0 0.75rem 0 0.75rem;
 }
 
+/* Increase font size when the message contains only emojis.
+Font from largest to normal, from 1 to 5 emojis in a message */
+.bubble div.message-content.emoji-1 {
+  font-size: xxx-large;
+}
+.bubble div.message-content.emoji-2 {
+  font-size: xx-large;
+}
+.bubble div.message-content.emoji-3 {
+  font-size: x-large;
+}
+.bubble div.message-content.emoji-4 {
+  font-size: large;
+}
+.bubble div.message-content.emoji-5 {
+  font-size: larger;
+}
+
 /* The timestamp is a floating element. Need to ensure div.message-content is expanded
  * to accomodate it. It's usually called clearfix. */
 .bubble div.message-content:after {

src/widgets/chat-message.jsx

@@ -148,6 +148,7 @@ class BaseChatMessage extends React.PureComponent {
     const sideClass = this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');
     const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';
     const avatar = this.props.userAvatar || true;
+    let textSizeClass = 'message-content';
     const fullDisplay = (this.props.isGroup && this.props.response &&
       (this.props.sequence == 'single' || this.props.sequence == 'last'));
 
@@ -174,7 +175,14 @@ class BaseChatMessage extends React.PureComponent {
       }, this);
       const tree = Drafty.format(content, fullFormatter, this.formatterContext);
       content = React.createElement(React.Fragment, null, tree);
-    } else if (typeof content != 'string') {
+    } else if (typeof content == 'string') {
+      // Make font bigger for emoji-only messages.
+      // Must use 'new RegExp(...)' because React does not like /{1-5}/.
+      if (new RegExp('^[\p{RGI_Emoji}]{1-5}$', 'v').test(content || '')) {
+        // Content consists of 1-5 emoji characters. Count how many and use it to increase the font size.
+        textSizeClass += ' emoji-' + (content || '').match(/\p{RGI_Emoji}/vg).length;
+      }
+    } else {
       content = <><i className="material-icons gray">warning_amber</i> <i className="gray">
         <FormattedMessage id="invalid_content"
           defaultMessage="invalid content" description="Shown when the message is unreadable" /></i></>
@@ -196,7 +204,7 @@ class BaseChatMessage extends React.PureComponent {
         <div>
           <div className={bubbleClass}>
             <div className="content-meta">
-              <div className="message-content">
+              <div className={textSizeClass}>
                 {content}
                 {attachments}
               </div>