Align with amazon branding

src/components/Game/AmazonLinks.vue

@@ -1,67 +1,36 @@
 <template lang="html">
-  <div>
-    <b-button
-      v-if="amazonLink"
-      variant="warning"
-      class="mb-3"
-      :href="amazonLink"
-      target="_blank"
+  <b-link
+    v-if="amazonLink"
+    v-b-tooltip.hover.auto="{ delay: { show: 500, hide: 50 } }"
+    title="Using this link helps support Gamebrary at to extra cost to you."
+    :href="amazonLink"
+    target="_blank"
+  >
+    <img
+      :src="`/img/available-at-amazon-${darkTheme ? 'light' : 'dark'}.png`"
+      width="90"
     >
-      <i class="fab fa-amazon fa-fw" aria-hidden />
-      Available on Amazon
-    </b-button>
-
-
-    <!-- <b-modal
-      :id="modalId"
-      hide-footer
-    >
-      <template v-slot:modal-header="{ close }">
-        <modal-header
-          :title="`Find ${game.name} on Amazon`"
-          @close="close"
-        />
-      </template>
-
-      <b-alert show variant="success">
-        Support Gamebrary by using these affiliate links to purchase games from Amazon.
-      </b-alert>
-
-      <a
-        v-for="link in amazonLinks"
-        :key="link.url"
-        :href="`https://amazon.com/dp/${link.uid}`"
-        target="_blank"
-        class="mr-2 mb-2"
-      >
-        <b-img
-          :src="`http://images.amazon.com/images/P/${link.uid}.01._SCMZZZZZZZ_.jpg`"
-          thumbnail
-        />
-      </a>
-    </b-modal> -->
-  </div>
+  </b-link>
 </template>
 
 <script>
 import { WEBSITE_CATEGORIES } from '@/constants';
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 
 export default {
   computed: {
     ...mapState(['game']),
+    ...mapGetters(['darkTheme']),
 
     amazonLink() {
-      return this.amazonAsins
-        ? `https://www.amazon.com/s?k=${this.amazonAsins}?tag=gamebrary0e-20`
-        : null;
-    },
-
-    amazonAsins() {
-      return this.game?.external_games?.filter(({ category, uid }) => uid && category === WEBSITE_CATEGORIES.AMAZON)
+      const amazonAsins = this.game?.external_games?.filter(({ category, uid }) => uid && category === WEBSITE_CATEGORIES.AMAZON)
         .map(({ uid }) => uid)
         .join('|');
+
+      return amazonAsins
+        ? `https://www.amazon.com/s?k=${amazonAsins}?tag=gamebrary0e-20`
+        : null;
     },
   },
 };

src/pages/GamePage.vue

@@ -23,7 +23,7 @@
         lg="4"
       >
         <div class="position-relative">
-          <game-ratings class="position-absolute d-flex" style="bottom: 1rem; right: 1rem;" />
+          <GameRatings class="position-absolute d-flex" style="bottom: 1rem; right: 1rem;" />
 
           <b-img
             :src="$options.getImageUrl(cachedGame)"
@@ -142,6 +142,8 @@
             </template>
           </div>
 
+          <AmazonLinks />
+
           <div class="d-inline-block w-100">
             <div v-if="gameGenres" class="float-left mr-3">
               <h5>Genres</h5>
@@ -413,8 +415,6 @@
           style="z-index: 1"
           class="text-center pt-3 pt-md-0"
         >
-
-          <!-- <amazon-links class="mt-2" /> -->
           <!-- <template v-if="highlightedAchievements">
             <h3 :class="['mt-5']">Achievements</h3>
 
@@ -462,7 +462,7 @@
 import { setPageTitle } from '@/utils';
 import { mapState, mapGetters } from 'vuex';
 import { WEBSITE_CATEGORIES, GAME_CATEGORIES, PLATFORMS, GAME_DESC_SM_CHAR_COUNT } from '@/constants';
-// import AmazonLinks from '@/components/Game/AmazonLinks';
+import AmazonLinks from '@/components/Game/AmazonLinks';
 // import GameDetails from '@/components/Game/GameDetails';
 import GameMedia from '@/components/Game/GameMedia';
 import GamePageTile from '@/components/Game/GamePageTile';
@@ -484,7 +484,7 @@ export default {
     GameTagsModal,
     GameHeader,
     GameProgress,
-    // AmazonLinks,
+    AmazonLinks,
     // GameDetails,
     GameMedia,
     GamePageTile,