From 814c65eeb7ffcccfb48ccea0ef57cf14bfff6aba Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 12 Jan 2022 10:10:49 -0800
Subject: [PATCH] Add user icon next to username. Closes #1655

---
 webroot/img/user-icon.svg              | 38 ++++++++++++++++++++++++++
 webroot/js/components/chat/username.js |  5 +++-
 webroot/styles/chat.css                |  7 +++++
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 webroot/img/user-icon.svg

diff --git a/webroot/img/user-icon.svg b/webroot/img/user-icon.svg
new file mode 100644
index 000000000..a3c53df9d
--- /dev/null
+++ b/webroot/img/user-icon.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
+<g xmlns="http://www.w3.org/2000/svg">
+	<g>
+		<path d="M437.02,330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521,243.251,404,198.548,404,148    C404,66.393,337.607,0,256,0S108,66.393,108,148c0,50.548,25.479,95.251,64.262,121.962    c-36.21,12.495-69.398,33.136-97.281,61.018C26.629,379.333,0,443.62,0,512h40c0-119.103,96.897-216,216-216s216,96.897,216,216    h40C512,443.62,485.371,379.333,437.02,330.98z M256,256c-59.551,0-108-48.448-108-108S196.449,40,256,40    c59.551,0,108,48.448,108,108S315.551,256,256,256z" fill="#ffffff" data-original="#000000" class=""/>
+	</g>
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+</g></svg>
diff --git a/webroot/js/components/chat/username.js b/webroot/js/components/chat/username.js
index 3a76aa4b6..fb4be113e 100644
--- a/webroot/js/components/chat/username.js
+++ b/webroot/js/components/chat/username.js
@@ -95,6 +95,9 @@ export default class UsernameForm extends Component {
     const moderatorFlag = html`
       <img src="/img/moderator-nobackground.svg" class="moderator-flag" />
     `;
+    const userIcon = html`
+      <img src="/img/user-icon.svg" class="user-icon-flag" />
+    `;
 
     return html`
       <div id="user-info" class="whitespace-nowrap">
@@ -109,7 +112,7 @@ export default class UsernameForm extends Component {
             id="username-display"
             class="text-indigo-100 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator &&
             'moderator-flag'}"
-            >${isModerator && moderatorFlag}${username}</span
+            >${isModerator ? moderatorFlag : userIcon}${username}</span
           >
         </div>
 
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index ec773c951..a32d6f671 100644
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -201,6 +201,13 @@
   height: 1.5rem;
 }
 
+.user-icon-flag {
+  display: inline-block;
+  margin-right: .5rem;
+  vertical-align: middle;
+  height: 0.8rem;
+}
+
 .moderator-actions-group {
   position: absolute;
   top: 0;