use new list component

apps/meteor/app/theme/client/imports/general/base_old.css

@@ -1661,7 +1661,7 @@
 		padding-bottom: 24px;
 	}
 
-	& ul {
+	& ul.messages-list {
 		padding: 21px 0 10px;
 	}
 

apps/meteor/app/ui/client/views/app/room.html

@@ -77,7 +77,7 @@
 							</div>
 						{{/with}}
 						<div class="wrapper {{#if hasMoreNext}}has-more-next{{/if}} {{hideUsername}} {{hideAvatar}}">
-							<ul aria-live="polite">
+							<ul class="messages-list" aria-live="polite">
 								{{#if canPreview}}
 									{{#if hasMore}}
 										<li class="load-more">

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

@@ -1,16 +1,17 @@
+import { MessageOrderedList, MessageOrderedListItem } from '@rocket.chat/fuselage';
 import { OrderedList as ASTOrderedList } from '@rocket.chat/message-parser';
 import React, { FC } from 'react';
 
 import Inline from './Inline';
 
 const OrderedList: FC<{ value: ASTOrderedList['value'] }> = ({ value }) => (
-	<ol>
+	<MessageOrderedList>
 		{value.map((item, index) => (
-			<li key={index}>
+			<MessageOrderedListItem key={index}>
 				<Inline value={item.value} />
-			</li>
+			</MessageOrderedListItem>
 		))}
-	</ol>
+	</MessageOrderedList>
 );
 
 export default OrderedList;

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

@@ -1,12 +1,13 @@
+import { MessageParagraph } from '@rocket.chat/fuselage';
 import { Paragraph as ASTParagraph } from '@rocket.chat/message-parser';
 import React, { FC } from 'react';
 
 import Inline from './Inline';
 
 const Paragraph: FC<{ value: ASTParagraph['value'] }> = ({ value = [] }) => (
-	<p>
+	<MessageParagraph>
 		<Inline value={value} />
-	</p>
+	</MessageParagraph>
 );
 
 export default Paragraph;

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

@@ -12,10 +12,10 @@ const PlainText: FC<PlainTextType> = ({ value: text }) => {
 	const highlights = useMessageListHighlights();
 	const katex = useMessageListKatex();
 
-	// TODO ENG DAY:
-	// Add style for empty paragraphs in fuselage
+	// TODO
+	// Add line break token in the parser
 	if (!text.trim()) {
-		return <br />;
+		return <></>;
 	}
 
 	if (highlights || katex) {

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

@@ -1,16 +1,17 @@
+import { MessageUnorderedList, MessageUnorderedListItem } from '@rocket.chat/fuselage';
 import { UnorderedList as ASTUnorderedList } from '@rocket.chat/message-parser';
 import React, { FC } from 'react';
 
 import Inline from './Inline';
 
 const UnorderedList: FC<{ value: ASTUnorderedList['value'] }> = ({ value }) => (
-	<ul>
+	<MessageUnorderedList>
 		{value.map((item) => (
-			<li>
+			<MessageUnorderedListItem>
 				<Inline value={item.value} />
-			</li>
+			</MessageUnorderedListItem>
 		))}
-	</ul>
+	</MessageUnorderedList>
 );
 
 export default UnorderedList;

apps/meteor/ee/app/auditing/client/templates/audit/audit.html

@@ -3,7 +3,7 @@
 		{{> loading class="loading-animation--primary"}}
 	{{else}}
 		{{#if hasResults}}
-			<ul aria-live="polite">
+			<ul class="messages-list" aria-live="polite">
 				{{#with messageContext}}
 					{{#each msg in messages}}
 						{{> nrr nrrargs 'message' shouldCollapseReplies=true msg=msg room=room subscription=subscription settings=settings u=u}}