Make emotes bigger (#2670)

npm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u-wave-web",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.22",
   "description": "Web client for üWave servers.",
   "author": "Renée Kooi <[email protected]>",
   "license": "MIT",

src/components/Chat/Markup/Emoji.css

@@ -1,15 +1,19 @@
 .Emoji {
   /* Same size as the surrounding text */
-  height: 1.3em;
+  height: 1.5rem;
+  margin: -.5rem 0;
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
   display: inline-block;
   position: relative;
 }
+.Emoji--large {
+  height: 2rem;
+}
 
 .Emoji-img {
   max-width: 200px;
-  max-height: 100%;
+  height: 100%;
   vertical-align: middle;
 }

src/components/Chat/Markup/Emoji.jsx

@@ -1,14 +1,20 @@
+import cx from 'clsx';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '@mui/material/Tooltip';
 import emojiUrl from '../../../utils/emojiUrl';
 
 const shortcode = (name) => `:${name}:`;
 
-function Emoji({ name, image, isCustom }) {
+function Emoji({
+  name,
+  image,
+  isCustom,
+  isLarge = false,
+}) {
   return (
     <Tooltip title={shortcode(name)} placement="top">
-      <span className="Emoji" data-emoji={name}>
+      <span className={cx('Emoji', isLarge && 'Emoji--large', isCustom && 'Emoji--custom')} data-emoji={name}>
         <img
           className="Emoji-img"
           src={emojiUrl(image, isCustom).href}
@@ -23,6 +29,7 @@ Emoji.propTypes = {
   name: PropTypes.string.isRequired,
   image: PropTypes.string.isRequired,
   isCustom: PropTypes.bool.isRequired,
+  isLarge: PropTypes.bool,
 };
 
 export default Emoji;

src/components/Chat/Markup/compile.jsx

@@ -15,6 +15,11 @@ export default function compile(tree, opts = {}) {
     emojiImages = {},
   } = opts;
 
+  // Display large emoji if a message only contains emoji and separating whitespace
+  const useLargeEmoji = tree.length < 10 && tree.every((node) => (
+    (typeof node === 'string' && /^\s*$/.test(node)) || node.type === 'emoji'
+  ));
+
   return tree.map((node, i) => {
     if (typeof node === 'string') {
       return node;
@@ -36,6 +41,7 @@ export default function compile(tree, opts = {}) {
               name={node.name}
               image={emojiImages[node.name]}
               isCustom={customEmojiNames.has(node.name)}
+              isLarge={useLargeEmoji}
             />
           );
         }

src/components/Chat/Message.css

@@ -1,7 +1,8 @@
 /* Message styles are still super hacky...
  * One day! */
 .ChatMessage {
-  min-height: 32px;
+  min-height: 2rem;
+  font-size: .875rem;
   position: relative;
 }
 
@@ -35,21 +36,23 @@
 
 .ChatMessage-avatar {
   position: absolute;
-  width: 24px;
-  height: 24px;
+  width: 1.5rem;
+  height: 1.5rem;
   top: 0;
   inset-inline-start: 12px;
-  margin: 4px 0;
+  margin: .25rem 0;
 }
 
 .ChatMessage-content {
   position: relative;
-  padding-inline-start: 50px;
+  padding-inline-start: 48px;
   padding-inline-end: 3px;
   width: 100%;
   display: inline-block;
-  margin: 6px 0;
   word-wrap: break-word;
+  margin: .25rem 0;
+  line-height: 1.25rem;
+  min-height: 1.5rem;
 }
 
 .ChatMessage-cardable {