Added alternative styling for own messages in chat

Added alternative styling for messages sent by self in chat

Prettiered the file

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

@@ -1,10 +1,10 @@
-
 .root {
   font-size: 0.9rem;
   padding: 5px;
   padding-left: 1rem;
   margin: 8px 5px;
   border-left: 2px solid;
+  border-radius: 0.3rem;
   .user {
     font: var(--theme-header-font-family);
     color: var(--color-owncast-grey-100);
@@ -29,3 +29,9 @@
     }
   }
 }
+
+
+.ownMessage {
+  border-left: 0px;
+  border-right: 2px solid;
+}

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState } from 'react';
 import { Highlight } from 'react-highlighter-ts';
 import he from 'he';
+import cn from 'classnames';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { formatTimestamp } from './messageFmt';
 import s from './ChatUserMessage.module.scss';
@@ -17,12 +18,12 @@ export default function ChatUserMessage({
   message,
   highlightString,
   showModeratorMenu,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   renderAsPersonallySent, // Move the border to the right and render a background
 }: Props) {
   const { body, user, timestamp } = message;
   const { displayName, displayColor } = user;
-  const color = `hsl(${displayColor}, 100%, 70%)`;
+  const color = `hsl(${displayColor}, 100%, 65%)`;
+  const bgColor = `hsl(${displayColor}, 20%, 25%)`;
   const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`;
   const [formattedMessage, setFormattedMessage] = useState<string>(body);
 
@@ -31,7 +32,13 @@ export default function ChatUserMessage({
   }, [message]);
 
   return (
-    <div className={s.root} style={{ borderColor: color }} title={formattedTimestamp}>
+    <div
+      className={cn(s.root, {
+        [s.ownMessage]: renderAsPersonallySent,
+      })}
+      style={{ borderColor: color, backgroundColor: bgColor }}
+      title={formattedTimestamp}
+    >
       <div className={s.user} style={{ color }}>
         {displayName}
       </div>