Added moderator menu to messages and some other styling.

created new ant overrides file.

Ignore the static directory

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -9,6 +9,7 @@
 
 .toBottomWrap {
   display: flex;
+  opacity: 0.9;
   width: 100%;
   justify-content: center;
   position: absolute;

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -43,7 +43,8 @@ export default function ChatContainer(props: Props) {
             message={message as ChatMessage}
             showModeratorMenu={isModerator} // Moderators have access to an additional menu
             highlightString={usernameToHighlight} // What to highlight in the message
-            renderAsPersonallySent={message.user?.id === chatUserId} // The local user sent this message
+            sentBySelf={message.user?.id === chatUserId} // The local user sent this message
+            sameUserAsLast={message.user?.id === messages[messages.length - 1].user?.id}
             key={message.id}
           />
         );
@@ -70,7 +71,7 @@ export default function ChatContainer(props: Props) {
         {!atBottom && (
           <div className={s.toBottomWrap}>
             <Button
-              ghost
+              type="default"
               icon={<VerticalAlignBottomOutlined />}
               onClick={() =>
                 chatContainerRef.current.scrollToIndex({

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

@@ -6,6 +6,7 @@
   // animation: chatFadeIn .1s ease-in;
   .background {
     position: absolute;
+    z-index: -1;
     top: 0px;
     left: 0px;
     width: 100%;
@@ -16,8 +17,7 @@
     overflow: hidden;
   }
   .user {
-    font: var(--theme-header-font-family);
-    color: var(--color-owncast-grey-100);
+    font-family: var(--theme-header-font-family);
     font-weight: bold;
   }
   .message {
@@ -38,6 +38,7 @@
       box-decoration-break: clone;
     }
   }
+
   .customBorder {
     position: absolute;
     top: 0px;
@@ -53,7 +54,7 @@
       top: 0%;
       right: 0px;
       background-color: currentColor;
-      border-radius: 0.5rem;
+      border-radius: var(--theme-rounded-corners);
     }
   }
 
@@ -66,6 +67,17 @@
       }
     }
   }
+
+  .modMenuWrapper {
+    position: absolute;
+    display: none;
+    top: 0;
+    right: 10px;
+  }
+
+  &:hover .modMenuWrapper {
+    display: block;
+  }
 }
 
 

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -3,22 +3,26 @@ 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 { Button, Dropdown, Menu } from 'antd';
+import { DeleteOutlined, EllipsisOutlined, StopOutlined } from '@ant-design/icons';
 import s from './ChatUserMessage.module.scss';
+import { formatTimestamp } from './messageFmt';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
 
 interface Props {
   message: ChatMessage;
   showModeratorMenu: boolean;
   highlightString: string;
-  renderAsPersonallySent: boolean;
+  sentBySelf: boolean;
+  sameUserAsLast: boolean;
 }
 
 export default function ChatUserMessage({
   message,
   highlightString,
   showModeratorMenu,
-  renderAsPersonallySent, // Move the border to the right and render a background
+  sentBySelf, // Move the border to the right and render a background
+  sameUserAsLast,
 }: Props) {
   const { body, user, timestamp } = message;
   const { displayName, displayColor } = user;
@@ -32,24 +36,62 @@ export default function ChatUserMessage({
   }, [message]);
 
   return (
-    <div style={{ padding: 5 }}>
+    <div style={{ padding: 3.5 }}>
       <div
         className={cn(s.root, {
-          [s.ownMessage]: renderAsPersonallySent,
+          [s.ownMessage]: sentBySelf,
         })}
         style={{ borderColor: color }}
         title={formattedTimestamp}
       >
-        <div className={s.user} style={{ color }}>
-          {displayName}
-        </div>
+        {!sameUserAsLast && (
+          <div className={s.user} style={{ color }}>
+            {displayName}
+          </div>
+        )}
         <Highlight search={highlightString}>
           <div className={s.message}>{formattedMessage}</div>
         </Highlight>
-        {showModeratorMenu && <div>Moderator menu</div>}
+        {showModeratorMenu && <ModeratorMenu />}
         <div className={s.customBorder} style={{ color }} />
         <div className={s.background} style={{ color }} />
       </div>
     </div>
   );
 }
+
+function ModeratorMenu() {
+  const menu = (
+    <Menu
+      items={[
+        {
+          label: (
+            <div>
+              <DeleteOutlined style={{ marginRight: 5 }} />
+              Hide message
+            </div>
+          ),
+          key: 0,
+        },
+
+        {
+          label: (
+            <div>
+              <StopOutlined style={{ marginRight: 5 }} />
+              Ban User
+            </div>
+          ),
+          key: 1,
+        },
+      ]}
+    />
+  );
+
+  return (
+    <div className={s.modMenuWrapper}>
+      <Dropdown overlay={menu} trigger={['click']}>
+        <Button ghost icon={<EllipsisOutlined />} />
+      </Dropdown>
+    </div>
+  );
+}