feat: emoji-only messages have larger font size TryQuiet#519

packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx

@@ -4,11 +4,13 @@ import React, { ReactNode } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import theme from '../../../theme'
+import { isAllEmoji } from '../../../../../../common/src/emojis'
 
 const PREFIX = 'TextMessage'
 
 const classes = {
   message: `${PREFIX}message`,
+  emojiMessage: `${PREFIX}emojiMessage`,
   pending: `${PREFIX}pending`,
   blockquote: `${PREFIX}blockquote`,
   code: `${PREFIX}code`,
@@ -29,7 +31,10 @@ const StyledTypography = styled(Typography)(() => ({
     lineHeight: '21px',
     overflowWrap: 'anywhere',
   },
-
+  [`&.${classes.emojiMessage}`]: {
+    fontSize: '1.7rem', // Double the normal fontSize
+    lineHeight: '42px', // Double the normal lineHeight
+  },
   [`&.${classes.pending}`]: {
     color: theme.palette.colors.lightGray,
   },
@@ -127,6 +132,7 @@ export const TextMessageComponent: React.FC<TextMessageComponentProps> = ({ mess
       className={classNames({
         [classes.message]: true,
         [classes.pending]: pending,
+        [classes.emojiMessage]: isAllEmoji(message),
       })}
       data-testid={`messagesGroupContent-${messageId}`}
     >