Add standalone join message with user badge

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -11,8 +11,9 @@ import s from './ChatContainer.module.scss';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { ChatTextField, ChatUserMessage } from '..';
 import ChatModeratorNotification from '../ChatModeratorNotification/ChatModeratorNotification';
-import ChatActionMessage from '../ChatAction/ChatActionMessage';
+// import ChatActionMessage from '../ChatAction/ChatActionMessage';
 import ChatSystemMessage from '../ChatSystemMessage/ChatSystemMessage';
+import ChatJoinMessage from '../ChatJoinMessage/ChatJoinMessage';
 
 interface Props {
   messages: ChatMessage[];
@@ -53,10 +54,12 @@ export default function ChatContainer(props: Props) {
   const getUserJoinedMessage = (message: ChatMessage) => {
     const { user } = message;
     const { displayName, displayColor } = user;
-    const color = `var(--theme-user-colors-${displayColor})`;
+    const isAuthorModerator = checkIsModerator(message);
     return (
-      <ChatActionMessage
-        body={`<span style="color: ${color}">${displayName}</span> joined the chat.`}
+      <ChatJoinMessage
+        displayName={displayName}
+        userColor={displayColor}
+        isAuthorModerator={isAuthorModerator}
       />
     );
   };

web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss

@@ -0,0 +1,4 @@
+.join {
+  margin: 5px;
+  text-align: center;
+}

web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx

@@ -0,0 +1,27 @@
+import s from './ChatJoinMessage.module.scss';
+import ChatUserBadge from '../ChatUserBadge/ChatUserBadge';
+
+interface Props {
+  isAuthorModerator: boolean;
+  userColor: number;
+  displayName: string;
+}
+
+export default function ChatJoinMessage(props: Props) {
+  const { isAuthorModerator, userColor, displayName } = props;
+  const color = `var(--theme-user-colors-${userColor})`;
+
+  return (
+    <div className={s.join}>
+      <span style={{ color }}>
+        {displayName}
+        {isAuthorModerator && (
+          <span>
+            <ChatUserBadge badge="mod" userColor={userColor} />
+          </span>
+        )}
+      </span>{' '}
+      joined the chat.
+    </div>
+  );
+}

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -7,7 +7,7 @@ import s from './ChatUserMessage.module.scss';
 import { formatTimestamp } from './messageFmt';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import ChatModerationActionMenu from '../ChatModerationActionMenu/ChatModerationActionMenu';
-import ChatUserBadge from './ChatUserBadge';
+import ChatUserBadge from '../ChatUserBadge/ChatUserBadge';
 
 interface Props {
   message: ChatMessage;