From a7bbb06ea5848d41c23a511cb82e0f97786e86e3 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 10 Aug 2022 21:41:56 -0700
Subject: [PATCH] Fix mod menu showing. Closes #1990

---
 web/components/chat/ChatContainer/ChatContainer.tsx         | 1 +
 .../chat/ChatUserMessage/ChatUserMessage.module.scss        | 6 ++----
 web/components/chat/ChatUserMessage/ChatUserMessage.tsx     | 4 +++-
 web/stories/ChatUserMessage.stories.tsx                     | 1 +
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 5afeee2f3..3d998a776 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -87,6 +87,7 @@ export default function ChatContainer(props: Props) {
             highlightString={usernameToHighlight} // What to highlight in the message
             sentBySelf={message.user?.id === chatUserId} // The local user sent this message
             sameUserAsLast={isSameUserAsLast(messages, index)}
+            isAuthorModerator={(message as ChatMessage).user.scopes.includes('MODERATOR')}
             key={message.id}
           />
         );
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
index 974bba474..e304077e2 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
@@ -1,6 +1,7 @@
 .root {
   * {
-    z-index: 100; }
+    z-index: 100;
+  }
   position: relative;
   font-size: 0.9rem;
   padding: 5px 15px 5px 5px;
@@ -10,9 +11,6 @@
     align-items: center;
     font-family: var(--theme-header-font-family);
     font-weight: bold;
-    .userName {
-      margin-left: 0.3rem;
-    }
   }
   .message {
     color: var(--theme-text-primary);
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
index e8136e91b..30f812c75 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
@@ -16,6 +16,7 @@ interface Props {
   highlightString: string;
   sentBySelf: boolean;
   sameUserAsLast: boolean;
+  isAuthorModerator: boolean;
 }
 
 export default function ChatUserMessage({
@@ -24,6 +25,7 @@ export default function ChatUserMessage({
   showModeratorMenu,
   sentBySelf, // Move the border to the right and render a background
   sameUserAsLast,
+  isAuthorModerator,
 }: Props) {
   const { body, user, timestamp } = message;
   const { displayName, displayColor } = user;
@@ -47,8 +49,8 @@ export default function ChatUserMessage({
       >
         {!sameUserAsLast && (
           <div className={s.user} style={{ color }}>
-            {showModeratorMenu && <ModIcon />}
             <span className={s.userName}>{displayName}</span>
+            {isAuthorModerator && <ModIcon />}
           </div>
         )}
         <Highlight search={highlightString}>
diff --git a/web/stories/ChatUserMessage.stories.tsx b/web/stories/ChatUserMessage.stories.tsx
index a2c60beab..659bd6369 100644
--- a/web/stories/ChatUserMessage.stories.tsx
+++ b/web/stories/ChatUserMessage.stories.tsx
@@ -85,6 +85,7 @@ export const FromModeratorUser = Template.bind({});
 FromModeratorUser.args = {
   message: moderatorMessage,
   showModeratorMenu: false,
+  isAuthorModerator: true,
 };
 
 export const FromAuthenticatedUser = Template.bind({});