Styled chat messages

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

@@ -0,0 +1,27 @@
+import { ChatMessage } from '../../../interfaces/chat-message.model';
+import s from './ChatUserMessage.module.scss';
+
+interface Props {
+  message: ChatMessage;
+  showModeratorMenu: boolean;
+}
+
+export default function ChatUserMessage(props: Props) {
+  const { message, showModeratorMenu } = props;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { body, user, timestamp } = message;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { displayName, displayColor } = user;
+
+  const color = `hsl(${displayColor}, 100%, 70%)`;
+
+  return (
+    <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';