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

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',
+    },
+  },
+};