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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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` `; + const userIcon = html` + + `; return html`
@@ -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}${isModerator ? moderatorFlag : userIcon}${username}
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;