Break out name change message to own component + fix text color. Closes #2718

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -14,23 +14,6 @@
   }
 }
 
-.nameChangeView {
-  display: flex;
-  font-size: 0.9rem;
-  border-radius: var(--theme-rounded-corners);
-  padding: 5px 15px;
-  color: var(--theme-color-components-text-on-light);
-  background-color: var(--color-owncast-background);
-  & .nameChangeText {
-    font-weight: bold;
-    font-family: var(--theme-text-display-font-family);
-    & .plain {
-      font-weight: normal;
-      font-family: var(--theme-text-body-font-family) !important;
-    }
-  }
-}
-
 .chatContainer {
   display: flex;
   flex-direction: column;

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -1,6 +1,5 @@
 import { Virtuoso } from 'react-virtuoso';
 import { useState, useMemo, useRef, CSSProperties, FC, useEffect } from 'react';
-import dynamic from 'next/dynamic';
 import {
   ConnectedClientInfoEvent,
   FediverseEvent,
@@ -17,12 +16,7 @@ import { ChatJoinMessage } from '../ChatJoinMessage/ChatJoinMessage';
 import { ScrollToBotBtn } from './ScrollToBotBtn';
 import { ChatActionMessage } from '../ChatActionMessage/ChatActionMessage';
 import { ChatSocialMessage } from '../ChatSocialMessage/ChatSocialMessage';
-
-// Lazy loaded components
-
-const EditFilled = dynamic(() => import('@ant-design/icons/EditFilled'), {
-  ssr: false,
-});
+import { ChatNameChangeMessage } from '../ChatNameChangeMessage/ChatNameChangeMessage';
 
 export type ChatContainerProps = {
   messages: ChatMessage[];
@@ -108,25 +102,6 @@ export const ChatContainer: FC<ChatContainerProps> = ({
     [],
   );
 
-  const getNameChangeViewForMessage = (message: NameChangeEvent) => {
-    const { oldName, user } = message;
-    const { displayName, displayColor } = user;
-    const color = `var(--theme-color-users-${displayColor})`;
-
-    return (
-      <div className={styles.nameChangeView}>
-        <div style={{ marginRight: 5, height: 'max-content', margin: 'auto 5px auto 0' }}>
-          <EditFilled />
-        </div>
-        <div className={styles.nameChangeText}>
-          <span style={{ color }}>{oldName}</span>
-          <span className={styles.plain}> is now known as </span>
-          <span style={{ color }}>{displayName}</span>
-        </div>
-      </div>
-    );
-  };
-
   const getFediverseMessage = (message: FediverseEvent) => <ChatSocialMessage message={message} />;
 
   const getUserJoinedMessage = (message: ChatMessage) => {
@@ -181,7 +156,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
           />
         );
       case MessageType.NAME_CHANGE:
-        return getNameChangeViewForMessage(message as NameChangeEvent);
+        return <ChatNameChangeMessage message={message as NameChangeEvent} />;
       case MessageType.CONNECTED_USER_INFO:
         return getConnectedInfoMessage(message as ConnectedClientInfoEvent);
       case MessageType.USER_JOINED:

web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.module.scss

@@ -0,0 +1,15 @@
+.nameChangeView {
+  display: flex;
+  font-size: 0.9rem;
+  border-radius: var(--theme-rounded-corners);
+  padding: 5px 15px;
+  color: var(--theme-color-components-chat-text);
+  & .nameChangeText {
+    font-weight: bold;
+    font-family: var(--theme-text-display-font-family);
+    & .plain {
+      font-weight: normal;
+      font-family: var(--theme-text-body-font-family) !important;
+    }
+  }
+}

web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ChatNameChangeMessage } from './ChatNameChangeMessage';
+
+export default {
+  title: 'owncast/Chat/Messages/Chat name change',
+  component: ChatNameChangeMessage,
+} as ComponentMeta<typeof ChatNameChangeMessage>;
+
+const Template: ComponentStory<typeof ChatNameChangeMessage> = args => (
+  <ChatNameChangeMessage {...args} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  message: {
+    oldName: 'JohnnyOldName',
+    user: {
+      displayName: 'JohnnyNewName',
+      displayColor: '3',
+    },
+  },
+};

web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.tsx

@@ -0,0 +1,35 @@
+// export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
+
+import dynamic from 'next/dynamic';
+import { FC } from 'react';
+import { NameChangeEvent } from '../../../interfaces/socket-events';
+import styles from './ChatNameChangeMessage.module.scss';
+
+export interface ChatNameChangeMessageProps {
+  message: NameChangeEvent;
+}
+
+// Lazy loaded components
+
+const EditFilled = dynamic(() => import('@ant-design/icons/EditFilled'), {
+  ssr: false,
+});
+
+export const ChatNameChangeMessage: FC<ChatNameChangeMessageProps> = ({ message }) => {
+  const { oldName, user } = message;
+  const { displayName, displayColor } = user;
+  const color = `var(--theme-color-users-${displayColor})`;
+
+  return (
+    <div className={styles.nameChangeView}>
+      <div style={{ marginRight: 5, height: 'max-content', margin: 'auto 5px auto 0' }}>
+        <EditFilled />
+      </div>
+      <div className={styles.nameChangeText}>
+        <span style={{ color }}>{oldName}</span>
+        <span className={styles.plain}> is now known as </span>
+        <span style={{ color }}>{displayName}</span>
+      </div>
+    </div>
+  );
+};