Info can now also be Array and will display the list elements in a column. Also made hader sticky and decreased some margin and increased the font.

src/components/ListHeader.vue

@@ -2,8 +2,11 @@
   <header :class="{ 'sticky': sticky }">
     <h2>{{ title }}</h2>
 
-    <span v-if="info" class="result-count">{{ info }}</span>
-    <router-link v-else-if="link" :to="link" class='view-more'>
+    <div v-if="info instanceof Array" class="flex flex-direction-column">
+      <span v-for="item in info" class="info">{{ item }}</span>
+    </div>
+    <span v-else class="info">{{ info }}</span>
+    <router-link v-if="link" :to="link" class='view-more' :aria-label="`View all ${title}`">
       View All
     </router-link>
   </header>  
@@ -19,10 +22,10 @@ export default {
     sticky: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     info: {
-      type: String,
+      type: [String, Array],
       required: false
     },
     link: {
@@ -37,12 +40,16 @@ export default {
 <style lang="scss" scoped>
 @import './src/scss/variables';
 @import './src/scss/media-queries';
+@import './src/scss/main';
 
 header {
   width: 100%;
+  min-height: 80px;
   display: flex;
   justify-content: space-between;
-  padding: 1.8rem 12px;
+  align-items: center;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 
   &.sticky {
     background-color: $background-color;
@@ -51,22 +58,19 @@ header {
     position: -webkit-sticky;
     top: $header-size;
     z-index: 4;
-
-    padding-bottom: 1rem;
-    margin-bottom: 1.5rem;
   }
 
   h2 {
-    font-size: 18px;
+    font-size: 1.4rem;
     font-weight: 300;
     text-transform: capitalize;
-    line-height: 18px;
+    line-height: 1.4rem;
     margin: 0;
     color: $text-color;
   }
 
   .view-more {
-    font-size: 13px;
+    font-size: 0.9rem;
     font-weight: 300;
     letter-spacing: .5px;
     color: $text-color-70;
@@ -82,12 +86,13 @@ header {
     }
   }
 
-  .result-count {
+  .info {
     font-size: 13px;
     font-weight: 300;
     letter-spacing: .5px;
     color: $text-color;
     text-decoration: none;
+    text-align: right;
   }
 
   @include tablet-min {

src/components/Profile.vue

@@ -2,7 +2,7 @@
   <section class="profile">
     <div class="profile__content" v-if="userLoggedIn">
       <header class="profile__header">
-        <h2 class="profile__title">{{ emoji }} Welcome {{ userName }}</h2>
+        <h2 class="profile__title">{{ emoji }} Welcome {{ username }}</h2>
 
         <div class="button--group">
           <seasoned-button @click="showSettings = !showSettings">{{ showSettings ? 'hide settings' : 'show settings' }}</seasoned-button>
@@ -43,7 +43,6 @@ export default {
   data(){
     return{
       userLoggedIn: '',
-      userName: '',
       emoji: '',
       results: undefined,
       totalResults: undefined,
@@ -58,25 +57,10 @@ export default {
       const loadedResults = this.results.length
       const totalResults = this.totalResults < 10000 ? this.totalResults : '∞'
       return `${loadedResults} of ${totalResults} results`
-    }
+    },
+    username: () => store.getters['userModule/username']
   },
   methods: {
-    createSession(token){
-      axios.get(`https://api.themoviedb.org/3/authentication/session/new?api_key=${storage.apiKey}&request_token=${token}`)
-      .then(function(resp){
-          let data = resp.data;
-          if(data.success){
-            let id = data.session_id;
-            localStorage.setItem('session_id', id);
-            eventHub.$emit('setUserStatus');
-            this.userLoggedIn = true;
-            this.getUserInfo();
-          }
-      }.bind(this));
-    },
-    getUserInfo(){
-      this.userName = localStorage.getItem('username'); 
-    },
     toggleSettings() {
       this.showSettings = this.showSettings ? false : true;
     },
@@ -91,7 +75,6 @@ export default {
       this.userLoggedIn = false;
     } else {
       this.userLoggedIn = true;
-      this.getUserInfo();
 
       getUserRequests()
         .then(results => {