Add user icon

src/molecules/AppBar.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Link } from 'react-router'
 import classnames from 'classnames'
 import classes from './AppBar.local.scss'
+import Icon from '../atoms/Icon'
 
 const AppBar = ({ brandLink, brandName, loginLink, logoutLink, userName }) => (
   <div className={classes.root}>
@@ -10,7 +11,10 @@ const AppBar = ({ brandLink, brandName, loginLink, logoutLink, userName }) => (
 
     <div>
       {userName && (
-        <span className={classes.item}>{userName}</span>
+        <span className={classes.item}>
+          <Icon size={16}>user</Icon>
+          <span className={classes.username}>{userName}</span>
+        </span>
       )}
 
       {userName ? (

src/molecules/AppBar.local.scss

@@ -7,8 +7,6 @@
   color: var(--color-primary);
 
   &::before {
-    // while waiting for the user icon. :D
-    content: "ʕ•ᴥ•ʔ";
     text-align: center;
     color: #aaa;
     height: 1em;
@@ -27,7 +25,13 @@
 }
 
 .item {
-  padding: 1rem;
+  padding: 0 1rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+.username {
+  margin-left: 0.3em;
 }
 
 .logo::before {