Style user address (with username seperate from host)

app/components/account-info/component.js

@@ -0,0 +1,18 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+
+  classNames: ['account-info'],
+
+  userAddress: null,
+
+  username: computed('userAddress', function() {
+    return this.get('userAddress').split('@')[0];
+  }),
+
+  host: computed('userAddress', function() {
+    return '@' + this.get('userAddress').split('@')[1];
+  })
+
+});

app/components/account-info/template.hbs

@@ -0,0 +1,2 @@
+<span class="username">{{username}}</span>
+<br><span class="host">{{host}}</span>

app/styles/_layout.scss

@@ -43,15 +43,15 @@
     > aside {
       flex: 0 0 16rem;
       overflow: auto;
-      padding: 3rem 2rem;
+      padding: 2rem;
     }
   }
 
   > aside {
     transition: flex 0.2s ease-in;
 
-    #account {
-      height: 4em;
+    .account-info {
+      height: 5rem;
     }
 
     // nav {
@@ -66,7 +66,7 @@
     padding: 3rem 4rem;
 
     > header {
-      height: 4em;
+      height: 4rem;
     }
   }
 }

app/styles/app.scss

@@ -16,6 +16,7 @@ body {
   padding: 0;
 }
 
+@import "components/account-info";
 @import "components/breadcrumb-nav";
 @import "components/categories-nav";
 @import "components/directory-listing";

app/styles/components/_account-info.scss

@@ -0,0 +1,12 @@
+.account-info {
+
+  .username {
+    font-size: 1.4rem;
+  }
+
+  .host {
+    font-size: 0.8rem;
+    opacity: 0.7;
+  }
+
+}

app/templates/application.hbs

@@ -1,9 +1,7 @@
 <div id="app-container" class={{connectedClass}}>
   <aside>
     {{#if connected}}
-      <div id="account">
-        <span class="user-address">{{userAddress}}</span>
-      </div>
+      {{account-info userAddress=userAddress}}
       {{categories-nav categories=categories}}
     {{/if}}
   </aside>