Merge pull request #19203 from Scroody/chat-system-msg

Client: Chat message highlight on system messages

bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/component.tsx

@@ -144,6 +144,7 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
             <ChatMessageTextContent
               emphasizedMessage
               text={intl.formatMessage(intlMessages.chatClear)}
+              systemMsg
             />
           ),
         };
@@ -155,6 +156,7 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
           isSystemSender: true,
           component: (
             <ChatMessageTextContent
+              systemMsg
               emphasizedMessage
               text={message.message}
             />
@@ -170,6 +172,7 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
             <ChatMessageTextContent
               emphasizedMessage
               text={(away) ? intl.formatMessage(intlMessages.userAway) : intl.formatMessage(intlMessages.userNotAway)}
+              systemMsg
             />
           ),
         };
@@ -185,6 +188,7 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
             <ChatMessageTextContent
               emphasizedMessage={message.chatEmphasizedText}
               text={message.message}
+              systemMsg={false}
             />
           ),
         };

bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/component.tsx

@@ -5,17 +5,19 @@ import Styled from './styles';
 interface ChatMessageTextContentProps {
   text: string;
   emphasizedMessage: boolean;
+  systemMsg: boolean;
 }
 const ChatMessageTextContent: React.FC<ChatMessageTextContentProps> = ({
   text,
   emphasizedMessage,
+  systemMsg,
 }) => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore - temporary, while meteor exists in the project
   const { allowedElements } = Meteor.settings.public.chat;
 
   return (
-    <Styled.ChatMessage emphasizedMessage={emphasizedMessage} data-test="messageContent">
+    <Styled.ChatMessage systemMsg={systemMsg} emphasizedMessage={emphasizedMessage} data-test="messageContent">
       <ReactMarkdown
         linkTarget="_blank"
         allowedElements={allowedElements}

bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/styles.ts

@@ -1,8 +1,18 @@
 import styled from 'styled-components';
-import { colorText } from '/imports/ui/stylesheets/styled-components/palette';
+import {
+  systemMessageBackgroundColor,
+  systemMessageBorderColor,
+  systemMessageFontColor,
+  colorText,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import {
+  borderRadius,
+} from '/imports/ui/stylesheets/styled-components/general';
+import { fontSizeBase, btnFontWeight } from '/imports/ui/stylesheets/styled-components/typography';
 
 interface ChatMessageProps {
   emphasizedMessage: boolean;
+  systemMsg?: boolean;
 }
 
 export const ChatMessage = styled.div<ChatMessageProps>`
@@ -12,6 +22,17 @@ export const ChatMessage = styled.div<ChatMessageProps>`
   flex-direction: column;
   color: ${colorText};
   word-break: break-word;
+  ${({ systemMsg }) => systemMsg && `
+  background: ${systemMessageBackgroundColor};
+  border: 1px solid ${systemMessageBorderColor};
+  border-radius: ${borderRadius};
+  font-weight: ${btnFontWeight};
+  padding: ${fontSizeBase};
+  color: ${systemMessageFontColor};
+  margin-top: 0;
+  margin-bottom: 0;
+  overflow-wrap: break-word;
+  `}
   ${({ emphasizedMessage }) => emphasizedMessage && `
     font-weight: bold;
   `}