Update game card search layout

src/components/GameCards/GameCardSearch.vue

@@ -1,41 +1,51 @@
 <template lang="html">
-  <!-- no-body -->
-  <b-card
-    :title="game.name"
-    title-tag="span"
-    body-class="p-2"
-    :img-src="coverUrl"
-    class="game-card"
-  >
-    <b-button @click.stop="addGameToList" variant="primary" block>
-      <i class="fa fa-plus fa-fw" aria-hidden="true" />
-      Add to list
-    </b-button>
+  <b-card no-body class="mb-2">
+    <b-row no-gutters>
+      <b-col cols="2">
+        <b-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}">
+          <b-card-img
+            :src="coverUrl"
+            alt="Image"
+          />
+        </b-link>
+      </b-col>
+
+      <b-col cols="10">
+        <b-card-body :title="game.name" title-tag="h4">
+          <b-button
+            @click="addGameToList"
+            variant="primary"
+          >
+            <i class="fa fa-plus fa-fw" aria-hidden="true" />
+            Add to list
+          </b-button>
+        </b-card-body>
+      </b-col>
+    </b-row>
   </b-card>
 </template>
 
 <script>
-import gameCardMixin from '@/mixins/gameCardMixin';
+import { getGameCoverUrl } from '@/utils';
 
 export default {
-  mixins: [gameCardMixin],
+  props: {
+    game: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    coverUrl() {
+      return getGameCoverUrl(this.game);
+    }
+  },
 
   methods: {
     addGameToList() {
-      this.$bus.$emit('ADD_GAME', this.gameId);
+      this.$bus.$emit('ADD_GAME', this.game.id);
     },
   },
 };
 </script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-.image-toast {
-  display: grid;
-  grid-gap: .5rem;
-}
-
-.game-card {
-  cursor: pointer;
-}
-</style>
-