Add username and anonymous profile picture

components/DropdownMenuContent/index.scss

@@ -14,6 +14,13 @@
   }
 }
 
+.MenuLabel {
+  color: var(--text-tertiary);
+  padding: $unit * 1.5 $unit * 1.5;
+  font-size: $font-small;
+  font-weight: $medium;
+}
+
 .MenuItem {
   color: var(--text-tertiary);
   font-weight: $normal;

components/Header/index.tsx

@@ -19,6 +19,7 @@ import {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  DropdownMenuLabel,
 } from '~components/DropdownMenuContent'
 import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'
@@ -248,7 +249,15 @@ const Header = () => {
         />
       )
     } else {
-      image = <div className="profile placeholder" />
+      image = (
+        <img
+          alt={t('no_user')}
+          className={`profile anonymous`}
+          srcSet={`/profile/npc.png, 
+                      /profile/npc@2x.png 2x`}
+          src={`/profile/npc.png`}
+        />
+      )
     }
 
     return image
@@ -473,6 +482,9 @@ const Header = () => {
       items = (
         <>
           <DropdownMenuGroup className="MenuGroup">
+            <DropdownMenuLabel className="MenuLabel">
+              {account.user ? `@${account.user.username}` : t('no_user')}
+            </DropdownMenuLabel>
             <DropdownMenuItem className="MenuItem">
               <Link href="/new">
                 <a onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}>

styles/globals.scss

@@ -249,6 +249,10 @@ img.profile {
   &.light {
     background: $light-bg-20;
   }
+
+  &.anonymous {
+    background: var(--anonymous-bg);
+  }
 }
 
 i.tag {

styles/themes.scss

@@ -25,7 +25,7 @@
 
   --selected-item-bg: #{$selected--item--bg--light};
   --selected-item-bg-hover: #{$selected--item--bg--light--hover};
-
+  --anonymous-bg: #{$anonymous--bg--light};
   --placeholder-bg: #{$grey-80};
 
   // Light - Menus
@@ -164,6 +164,7 @@
   --selected-item-bg: #{$selected--item--bg--dark};
   --selected-item-bg-hover: #{$selected--item--bg--dark--hover};
 
+  --anonymous-bg: #{$anonymous--bg--dark};
   --placeholder-bg: #{$grey-40};
 
   // Dark - Dialogs

styles/variables.scss

@@ -148,6 +148,9 @@ $page--element--bg--dark: $grey-40;
 $separator--bg--light: $grey-90;
 $separator--bg--dark: $grey-15;
 
+$anonymous--bg--light: $grey-80;
+$anonymous--bg--dark: $grey-40;
+
 // Color Definitions: Dialog
 $dialog--bg--light: $grey-100;
 $dialog--bg--dark: $grey-25;