From d692a2bb5c51422402ec6b08d4a8af0849e21cb0 Mon Sep 17 00:00:00 2001
From: t1enne <nasir.taov@gmail.com>
Date: Sun, 22 May 2022 16:10:34 +0200
Subject: [PATCH] Styled chat messages

---
 .../chat/ChatContainer/ChatContainer.tsx          |  2 +-
 .../ChatUserMessage/ChatUserMessage.module.scss   | 15 +++++++++++++++
 .../{ => ChatUserMessage}/ChatUserMessage.tsx     | 13 ++++++++-----
 web/components/chat/ChatUserMessage/index.ts      |  1 +
 web/components/chat/index.ts                      |  1 +
 5 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
 rename web/components/chat/{ => ChatUserMessage}/ChatUserMessage.tsx (57%)
 create mode 100644 web/components/chat/ChatUserMessage/index.ts

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 37b02dc45..4c10a5754 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/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[];
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
new file mode 100644
index 000000000..90558f747
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/web/components/chat/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
similarity index 57%
rename from web/components/chat/ChatUserMessage.tsx
rename to web/components/chat/ChatUserMessage/ChatUserMessage.tsx
index 9a1df22af..30498c78f 100644
--- a/web/components/chat/ChatUserMessage.tsx
+++ b/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>
   );
diff --git a/web/components/chat/ChatUserMessage/index.ts b/web/components/chat/ChatUserMessage/index.ts
new file mode 100644
index 000000000..d715649d0
--- /dev/null
+++ b/web/components/chat/ChatUserMessage/index.ts
@@ -0,0 +1 @@
+export { default } from './ChatUserMessage';
diff --git a/web/components/chat/index.ts b/web/components/chat/index.ts
index 4835610ba..e7149bbc5 100644
--- a/web/components/chat/index.ts
+++ b/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';