fix: remove disable emoji props and add custom style

apps/meteor/app/theme/client/imports/components/emojiPicker.css

@@ -284,7 +284,17 @@
 	image-rendering: auto;
 }
 
-.emoji.big {
+/* Move this style to fuselage */
+.emoji.big,
+.emojione.big {
 	width: 44px;
 	height: 44px;
 }
+
+.rcx-message-thread__message {
+	& .emoji,
+	& .emojione {
+		width: 1em;
+		height: 1em;
+	}
+}

apps/meteor/client/components/Emoji.tsx

@@ -1,16 +1,16 @@
-import React, { ReactElement, CSSProperties } from 'react';
+import React, { ReactElement } from 'react';
 
 import { getEmojiClassNameAndDataTitle } from '../lib/utils/renderEmoji';
 
 type EmojiProps = {
 	emojiHandle: string; // :emoji:
-	style?: CSSProperties;
+	className?: string;
 };
 
-function Emoji({ emojiHandle, style }: EmojiProps): ReactElement {
-	const { image: backgroundImage, ...emojiProps } = getEmojiClassNameAndDataTitle(emojiHandle);
+function Emoji({ emojiHandle, className }: EmojiProps): ReactElement {
+	const { image: backgroundImage, className: emojiClassName, ...emojiProps } = getEmojiClassNameAndDataTitle(emojiHandle);
 
-	return <span style={{ backgroundImage, ...style }} {...emojiProps} />;
+	return <span style={{ backgroundImage }} className={`${emojiClassName} ${className || ''}`} {...emojiProps} />;
 }
 
 export default Emoji;

apps/meteor/client/components/Message/MessageBodyRender/BigEmoji.tsx

@@ -1,28 +1,17 @@
-import { Box } from '@rocket.chat/fuselage';
 import { BigEmoji as ASTBigEmoji } from '@rocket.chat/message-parser';
 import React, { FC } from 'react';
 
 import Emoji from '../../Emoji';
 
 type BigEmojiProps = {
 	value: ASTBigEmoji['value'];
-	disableBigEmoji: boolean;
 };
 
-const emojiStyle = { width: '100%', height: '100%' };
-
-// TODO ENGINEERING DAY:
-// Create new parser renderer for threadPreview instead of
-// disabling big emoji via disableBigEmoji prop
-const BigEmoji: FC<BigEmojiProps> = ({ value, disableBigEmoji }) => (
+const BigEmoji: FC<BigEmojiProps> = ({ value }) => (
 	<>
-		{disableBigEmoji
-			? value.map((block, index) => <Emoji key={index} emojiHandle={`:${block.value.value}:`} />)
-			: value.map((block, index) => (
-					<Box size='x44' key={index}>
-						<Emoji emojiHandle={`:${block.value.value}:`} style={emojiStyle} />
-					</Box>
-			  ))}
+		{value.map((block, index) => (
+			<Emoji emojiHandle={`:${block.value.value}:`} className='big' key={index} />
+		))}
 	</>
 );
 

apps/meteor/client/views/room/MessageList/components/MessageRender.tsx

@@ -7,7 +7,7 @@ import MessageBodyRender from '../../../../components/Message/MessageBodyRender'
 import { useMessageActions } from '../../contexts/MessageContext';
 import EncryptedMessageRender from './EncryptedMessageRender';
 
-const MessageRender: FC<{ message: IMessage; disableBigEmoji?: boolean }> = ({ message, disableBigEmoji = false }) => {
+const MessageRender: FC<{ message: IMessage }> = ({ message }) => {
 	const {
 		actions: { openRoom, openUserCard },
 	} = useMessageActions();
@@ -23,7 +23,6 @@ const MessageRender: FC<{ message: IMessage; disableBigEmoji?: boolean }> = ({ m
 					mentions={message?.mentions || []}
 					channels={message?.channels || []}
 					tokens={message.md}
-					disableBigEmoji={disableBigEmoji}
 				/>
 			)}
 

apps/meteor/client/views/room/MessageList/components/ThreadMessagePreview.tsx

@@ -59,9 +59,7 @@ export const ThreadMessagePreview: FC<{ message: IThreadMessage; sequential: boo
 					{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}
 				</ThreadMessageLeftContainer>
 				<ThreadMessageContainer>
-					<ThreadMessageBody>
-						{message.ignored ? t('Message_Ignored') : <MessageRender message={message} disableBigEmoji />}
-					</ThreadMessageBody>
+					<ThreadMessageBody>{message.ignored ? t('Message_Ignored') : <MessageRender message={message} />}</ThreadMessageBody>
 				</ThreadMessageContainer>
 			</ThreadMessageRow>
 		</ThreadMessageTemplate>