Added background to own messages in chat and the rounded border.

Closes #1985

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

@@ -1,10 +1,9 @@
 .root {
+  position: relative;
   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);
@@ -28,10 +27,32 @@
       box-decoration-break: clone;
     }
   }
-}
-
+  .customBorder {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 5px;
+    height: 100%;
+    overflow: hidden;
+    &:after {
+      content: '';
+      width: 10px;
+      height: 100%;
+      position: absolute;
+      top: 0%;
+      right: 0px;
+      background-color: currentColor;
+      border-radius: 0.5rem;
+    }
+  }
 
-.ownMessage {
-  border-left: 0px;
-  border-right: 2px solid;
+  &.ownMessage {
+    .customBorder {
+      left: auto;
+      right: 0px;
+      &:after {
+        left: 0px;
+      }
+    }
+  }
 }

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -20,14 +20,18 @@ export default function ChatUserMessage({
   showModeratorMenu,
   renderAsPersonallySent, // Move the border to the right and render a background
 }: Props) {
+  const [bgColor, setBgColor] = useState<string>();
   const { body, user, timestamp } = message;
   const { displayName, displayColor } = user;
+
   const color = `var(--theme-user-colors-${displayColor})`;
-  // TODO: Need to convert the above color to a background color.
-  const bgColor = `hsl(100, 20%, 25%)`;
   const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`;
   const [formattedMessage, setFormattedMessage] = useState<string>(body);
 
+  useEffect(() => {
+    if (renderAsPersonallySent) setBgColor(getBgColor(displayColor));
+  }, []);
+
   useEffect(() => {
     setFormattedMessage(he.decode(body));
   }, [message]);
@@ -37,6 +41,7 @@ export default function ChatUserMessage({
       className={cn(s.root, {
         [s.ownMessage]: renderAsPersonallySent,
       })}
+      data-display-color={displayColor}
       style={{ borderColor: color, backgroundColor: bgColor }}
       title={formattedTimestamp}
     >
@@ -47,6 +52,14 @@ export default function ChatUserMessage({
         <div className={s.message}>{formattedMessage}</div>
       </Highlight>
       {showModeratorMenu && <div>Moderator menu</div>}
+      <div className={s.customBorder} style={{ color }} />
     </div>
   );
 }
+
+function getBgColor(displayColor: number, alpha = 13) {
+  const root = document.querySelector(':root');
+  const css = getComputedStyle(root);
+  const hexColor = css.getPropertyValue(`--theme-user-colors-${displayColor}`);
+  return hexColor.concat(alpha.toString());
+}