Styled chat messages

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -5,8 +5,8 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { ChatState } from '../../../interfaces/application-state';
 import { MessageType } from '../../../interfaces/socket-events';
-import ChatUserMessage from '../ChatUserMessage';
 import s from './ChatContainer.module.scss';
+import { ChatUserMessage } from '..';
 
 interface Props {
   messages: ChatMessage[];

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -0,0 +1,15 @@
+
+.root {
+  font-size: 0.9rem;
+  padding: 5px;
+  padding-left: 1rem;
+  margin: 8px 5px;
+  border-left: 2px solid;
+  .user {
+    font-weight: bold;
+    color: var(--color-owncast-grey-100);
+  }
+  .message {
+    color: var(--color-owncast-grey-100);
+  }
+}

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -1,4 +1,5 @@
-import { ChatMessage } from '../../interfaces/chat-message.model';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
+import s from './ChatUserMessage.module.scss';
 
 interface Props {
   message: ChatMessage;
@@ -12,12 +13,14 @@ export default function ChatUserMessage(props: Props) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { displayName, displayColor } = user;
 
-  // TODO: Convert displayColor (a hue) to a usable color.
+  const color = `hsl(${displayColor}, 100%, 70%)`;
 
   return (
-    <div>
-      <div>{displayName}</div>
-      <div>{body}</div>
+    <div className={s.root} style={{ borderColor: color }}>
+      <div className={s.user} style={{ color }}>
+        {displayName}
+      </div>
+      <div className={s.message}>{body}</div>
       {showModeratorMenu && <div>Moderator menu</div>}
     </div>
   );

web/components/chat/ChatUserMessage/index.ts

@@ -0,0 +1 @@
+export { default } from './ChatUserMessage';

web/components/chat/index.ts

@@ -1,2 +1,3 @@
 export { default as ChatContainer } from './ChatContainer';
+export { default as ChatUserMessage } from './ChatUserMessage';
 export { default as ChatTextField } from './ChatTextField/ChatTextField';