From 5e4334ac010da145b21877e447b1e0c095db55c1 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 28 Jun 2022 20:40:18 -0700
Subject: [PATCH] Use user color for name change messages

---
 .../chat/ChatContainer/ChatContainer.tsx          | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 15585fbee..f690f6ea3 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -7,7 +7,6 @@ import { MessageType, NameChangeEvent } from '../../../interfaces/socket-events'
 import s from './ChatContainer.module.scss';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { ChatUserMessage } from '..';
-import ChatActionMessage from '../ChatActionMessage';
 
 interface Props {
   messages: ChatMessage[];
@@ -24,11 +23,15 @@ export default function ChatContainer(props: Props) {
   const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
 
   const getNameChangeViewForMessage = (message: NameChangeEvent) => {
-    const { oldName } = message;
-    const { user } = message;
-    const { displayName } = user;
-    const body = `<strong>${oldName}</strong> is now known as <strong>${displayName}</strong>`;
-    return <ChatActionMessage body={body} />;
+    const { oldName, user } = message;
+    const { displayName, displayColor } = user;
+    const color = `var(--theme-user-colors-${displayColor})`;
+
+    return (
+      <div>
+        <span style={{ color }}>{oldName}</span> is now known as {displayName}
+      </div>
+    );
   };
 
   const getViewForMessage = message => {