Add user icon next to username. Closes #1655

This commit is contained in:
Gabe Kangas 2022-01-12 10:10:49 -08:00
parent 5ff5c87674
commit 814c65eeb7
No known key found for this signature in database
GPG key ID: 9A56337728BC81EA
3 changed files with 49 additions and 1 deletions

38
webroot/img/user-icon.svg Normal file
View file

@ -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>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -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>

View file

@ -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;