Give shield icon to moderators (#176)

This is useful for distinguishing them on the site and transparency. Took this from the some1 fork, it's a good idea.

To avoid this being too extraneous, I'm only showing the icons in chat now, not in the games table or lobby.

src/components/Chat.js

@@ -199,6 +199,7 @@ function Chat({
                         component={InternalLink}
                         to={`/profile/${item.user}`}
                         underline="none"
+                        showIcon
                       />
                       : {item.message}
                     </Typography>,

src/components/GameInfoRow.js

@@ -56,7 +56,7 @@ function GameInfoRow({ gameId, onClick }) {
     }
     return (
       <Tooltip title={title} arrow placement="top">
-        <Icon fontSize="small" />
+        <Icon fontSize="small" sx={{ display: "block" }} />
       </Tooltip>
     );
   };

src/components/ProfileGamesTable.js

@@ -29,9 +29,6 @@ const useStyles = makeStyles((theme) => ({
       paddingLeft: 12,
       paddingRight: 12,
     },
-    "& svg": {
-      display: "block",
-    },
     "& th": {
       background: theme.palette.background.panel,
     },
@@ -49,6 +46,11 @@ const useStyles = makeStyles((theme) => ({
       display: "none",
     },
   },
+  starIcon: {
+    display: "block",
+    color: amber[500],
+    marginBlock: -4,
+  },
 }));
 
 function ProfileGamesTable({ userId, gamesWithScores, handleClickGame }) {
@@ -115,9 +117,7 @@ function ProfileGamesTable({ userId, gamesWithScores, handleClickGame }) {
                     {game.scores &&
                       game.scores[userId] ===
                         Math.max(0, ...Object.values(game.scores)) && (
-                        <StarIcon
-                          style={{ color: amber[500], marginBlock: -4 }}
-                        />
+                        <StarIcon className={classes.starIcon} />
                       )}
                   </TableCell>
                 </TableRow>

src/components/ProfileName.js

@@ -60,6 +60,7 @@ function ProfileName({ userId }) {
   return (
     <User
       id={userId}
+      showIcon
       render={(player, userEl) => {
         const isOnline =
           player.connections && Object.keys(player.connections).length > 0;

src/components/User.js

@@ -1,13 +1,23 @@
+import SecurityIcon from "@mui/icons-material/Security";
 import WhatshotIcon from "@mui/icons-material/Whatshot";
 import { useTheme } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
+import clsx from "clsx";
 import { useNavigate } from "react-router-dom";
 
 import useFirebaseRef from "../hooks/useFirebaseRef";
 import useStats from "../hooks/useStats";
 import { colors } from "../util";
 
 const useStyles = makeStyles(() => ({
+  inlineIcon: {
+    fontSize: "inherit",
+    display: "inline",
+    position: "relative",
+    left: "-0.1em",
+    top: "0.15em",
+    color: "inherit",
+  },
   patronIcon: {
     cursor: "pointer",
     "&:hover": {
@@ -32,6 +42,7 @@ function User({
   component,
   render,
   forcePatron,
+  showIcon,
   showRating,
   ...other
 }) {
@@ -46,7 +57,7 @@ function User({
     return null;
   }
 
-  const handleClick = (e) => {
+  const handlePatronClick = (e) => {
     e.preventDefault();
     navigate("/donate");
   };
@@ -68,20 +79,16 @@ function User({
           {loadingStats ? "⋯" : Math.round(stats[showRating].rating)}
         </span>
       )}
-      {(user.patron || forcePatron) && (
-        <WhatshotIcon
-          className={classes.patronIcon}
-          onClick={handleClick}
-          fontSize="inherit"
-          style={{
-            display: "inline",
-            position: "relative",
-            left: "-0.1em",
-            top: "0.15em",
-            color: "inherit",
-          }}
-        />
-      )}
+      {showIcon &&
+        (user.admin ? (
+          // Moderator icon takes precedence over patron icon.
+          <SecurityIcon className={classes.inlineIcon} />
+        ) : user.patron || forcePatron ? (
+          <WhatshotIcon
+            className={clsx(classes.inlineIcon, classes.patronIcon)}
+            onClick={handlePatronClick}
+          />
+        ) : null)}
       <span>{user.name}</span>
     </Component>
   );

src/pages/DonatePage.js

@@ -76,7 +76,7 @@ function DonatePage() {
           <ul>
             <li>
               Bragging rights with a patron icon next to your name (e.g.,{" "}
-              <User id={user.id} forcePatron />
+              <User id={user.id} showIcon forcePatron />
               ).
             </li>
             <li>

src/pages/LobbyPage.js

@@ -45,9 +45,6 @@ const useStyles = makeStyles((theme) => ({
       paddingLeft: 12,
       paddingRight: 12,
     },
-    "& svg": {
-      display: "block",
-    },
     "& tbody > tr:hover": {
       background: theme.palette.action.hover,
       cursor: "pointer",

src/pages/ProfilePage.js

@@ -163,7 +163,7 @@ function ProfilePage() {
                 <Subheading className={classes.statsHeading}>
                   Statistics
                 </Subheading>
-                <EqualizerIcon />
+                <EqualizerIcon sx={{ mt: "1px" }} />
               </div>
               <div style={{ marginLeft: "auto" }}>
                 <Select