Display moderator status in chat messages

2 files changed, 19 insertions, 4 deletions

diff --git a/webroot/js/components/chat/chat-message-view.js b/webroot/js/components/chat/chat-message-view.js
index 9705d4fdd..acad4192b 100644
--- a/webroot/js/components/chat/chat-message-view.js
+++ b/webroot/js/components/chat/chat-message-view.js
@@ -75,6 +75,14 @@ export default class ChatMessageView extends Component {
           isMessageModeratable ? 'moderatable' : ''
         }`;
 
+    const messageAuthorFlair = isModerator
+      ? html`<img
+          class="flair"
+          title="Moderator"
+          src="/img/moderator-nobackground.svg"
+        />`
+      : null;
+
     return html`
       <div
         style=${backgroundStyle}
@@ -84,12 +92,10 @@ export default class ChatMessageView extends Component {
         <div class="message-content break-words w-full">
           <div
             style=${authorTextColor}
-            class="message-author font-bold${isAuthorModerator
-              ? ' moderator-flag'
-              : ''}"
+            class="message-author font-bold"
             title=${userMetadata}
           >
-            ${displayName}
+            ${messageAuthorFlair} ${displayName}
           </div>
           ${isMessageModeratable &&
           html`<${ModeratorActions}
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index b22e5380a..12bc3dc64 100644
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -270,7 +270,16 @@
   top: 0;
   bottom: unset;
 }
+.message-author {
+  display: flex;
+  height: 20px;
+  align-items: center;
+}
 
+.message-author .flair {
+  height: 70%;
+  margin-right: 5px;
+}
 
 .moderator-menu-item {
   font-size: .875rem;