Add new icons and tweak styles of moderator actions

webroot/js/components/chat/message.js

@@ -17,7 +17,7 @@ function SystemMessage(props) {
         class="message-content flex flex-row items-center justify-center text-sm w-full"
       >
         <div
-          class="text-white text-center opacity-50 overflow-hidden break-words"
+          class="text-gray-300 text-center opacity-90 overflow-hidden break-words"
         >
           ${contents}
         </div>
@@ -57,9 +57,10 @@ export default function Message(props) {
     // moderator message
     const isModerator = checkIsModerator(message);
     if (isModerator) {
-      const contents = html`<span class="font-bold moderator-flag"
-        >You are now a moderator.</span
-      >`;
+      const contents = html`<div class="rounded-lg bg-gray-700 p-3">
+        <img src="/img/moderator.svg" class="moderator-flag" />You are now a
+        moderator.
+      </div>`;
       return html`<${SystemMessage} contents=${contents} />`;
     }
   } else {

webroot/js/components/chat/moderator-actions.js

@@ -5,10 +5,10 @@ import { URL_BAN_USER, URL_HIDE_MESSAGE } from '../../utils/constants.js';
 
 const html = htm.bind(h);
 
-const HIDE_MESSAGE_ICON = '🐵';
-const HIDE_MESSAGE_ICON_HOVER = '🙈';
-const BAN_USER_ICON = '👤';
-const BAN_USER_ICON_HOVER = '🚫';
+const HIDE_MESSAGE_ICON = `/img/hide-message-grey.svg`;
+const HIDE_MESSAGE_ICON_HOVER = '/img/hide-message.svg';
+const BAN_USER_ICON = '/img/ban-user-grey.svg';
+const BAN_USER_ICON_HOVER = '/img/ban-user.svg';
 
 export default class ModeratorActions extends Component {
   constructor(props) {
@@ -190,7 +190,7 @@ class ModeratorMenu extends Component {
         </li>
         <li>
           <${ModeratorMenuItem}
-            icon=${html`<img src="/img/menu.svg" alt="" />`}
+            icon="/img/menu.svg"
             label="More Info"
             onClick=${this.handleToggleMoreInfo}
           />
@@ -218,12 +218,12 @@ function ModeratorMenuItem({ icon, hoverIcon, label, onClick }) {
       ${icon &&
       html`<span
         className="moderator-menu-icon menu-icon-base inline-block align-bottom mr-4"
-        >${icon}</span
-      >`}
+        ><img src="${icon}"
+      /></span>`}
       <span
         className="moderator-menu-icon menu-icon-hover inline-block align-bottom mr-4"
-        >${hoverIcon || icon}</span
-      >
+        ><img src="${hoverIcon || icon}"
+      /></span>
       ${label}
     </button>
   `;

webroot/js/components/chat/username.js

@@ -105,7 +105,10 @@ export default class UsernameForm extends Component {
             id="username-display"
             class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator &&
             'moderator-flag'}"
-            >${username}</span
+            ><img
+              src="/img/moderator.svg"
+              class="moderator-flag rounded-lg"
+            />${username}</span
           >
         </div>