pro

src/components/Game/GameDetails.vue

@@ -60,6 +60,7 @@
           v-for="releaseDate in timeline"
         >
           {{ releaseDate.platform }}
+          <pre>{{ releaseDate.date }}</pre>
         </li>
       </ul>
     </b-alert>

src/components/PageHeader.vue

@@ -25,6 +25,11 @@
       <div class="global-actions">
         <portal-target name="headerActions" />
 
+        <b-button class="mr-2" variant="success">
+          <i class="fa-solid fa-crown" />
+          Upgrade
+        </b-button>
+
         <search-box class="d-none d-md-block" />
 
         <b-button
@@ -36,17 +41,11 @@
 
         <b-button
           :to="{ name: 'settings' }"
+          variant="transparent"
           class="ml-1"
         >
           <i class="fas fa-cog fa-fw" />
         </b-button>
-
-        <b-avatar
-          size="38"
-          class="ml-1"
-          rounded
-          :src="user && user.photoURL ? user.photoURL : null"
-        />
       </div>
     </div>
   </header>
@@ -67,7 +66,7 @@ export default {
   },
 
   computed: {
-    ...mapState(['board', 'boards', 'user']),
+    ...mapState(['board', 'boards']),
 
     showBackButton() {
       return this.$route.name === 'game' && this.board && this.board.id;

src/components/SearchBox.vue

@@ -10,7 +10,10 @@
       />
 
       <b-input-group-append>
-        <b-button @click="search">
+        <b-button
+          variant="light"
+          @click="search"
+        >
           <i class="fa-solid fa-magnifying-glass" />
           Search
         </b-button>

src/pages/SettingsPage.vue

@@ -1,5 +1,17 @@
 <template lang="html">
   <b-container fluid class="p-2">
+    <div>
+      <b-avatar
+        size="38"
+        class="ml-1"
+        rounded
+        :src="user && user.photoURL ? user.photoURL : null"
+      />
+
+      <pre>{{ user }}</pre>
+
+    </div>
+
     <b-row no-gutters>
       <b-col cols="3">
         <b-list-group>
@@ -88,6 +100,7 @@ import ProfileSettingsPage from '@/pages/ProfileSettingsPage';
 import AccountSettingsPage from '@/pages/AccountSettingsPage';
 import SteamSettingsPage from '@/pages/SteamSettingsPage';
 import GeneralSettingsPage from '@/pages/GeneralSettingsPage';
+import { mapState } from 'vuex';
 
 export default {
   components: {
@@ -96,6 +109,10 @@ export default {
     SteamSettingsPage,
     GeneralSettingsPage,
   },
+
+  computed: {
+    ...mapState(['user']),
+  },
 };
 </script>