From 2e2ae339e04b28d1b2b4bc6ce0fd565ddac47750 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Mon, 4 Jan 2021 13:33:12 -0700
Subject: [PATCH] update notes page layout and icon

---
 src/components/PageHeader.vue |  2 +-
 src/pages/Notes.vue           | 27 ++++++++++++++++++---------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index a5059c0b..eb22821b 100755
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -34,7 +34,7 @@
         :to="{ name: 'notes' }"
         v-b-tooltip.hover.right
       >
-        <i class="far fa-sticky-note fa-fw" aria-hidden />
+        <i class="fas fa-sticky-note fa-fw" aria-hidden />
       </b-button>
 
       <b-button
diff --git a/src/pages/Notes.vue b/src/pages/Notes.vue
index e805e933..abcb1719 100644
--- a/src/pages/Notes.vue
+++ b/src/pages/Notes.vue
@@ -30,17 +30,26 @@
         v-for="(note, gameId) in notes"
         :key="gameId"
         class="mb-3 w-100 note"
-        :img-src="getCoverUrl(gameId)"
-        :img-alt="games[gameId].name"
-        img-left
+        body-class="p-2"
         @click="openGame(gameId)"
       >
-        <div v-if="games[gameId]">
-          <h5>{{ games[gameId] && games[gameId].name ? games[gameId].name : '' }}</h5>
+        <div class="d-flex">
+          <b-img
+            :src="getCoverUrl(gameId)"
+            :alt="games[gameId].name"
+            class="rounded"
+            width="70"
+          />
 
-          <b-alert show variant="warning" class="mt-2">
-            <vue-markdown :source="note" />
-          </b-alert>
+          <div class="ml-2">
+            <h5 v-if="games[gameId]">
+              {{ games[gameId] && games[gameId].name ? games[gameId].name : '' }}
+            </h5>
+
+            <b-alert show variant="warning" class="m-0">
+              <vue-markdown :source="note" />
+            </b-alert>
+          </div>
         </div>
       </b-card>
     </template>
@@ -134,7 +143,7 @@ export default {
 </style>
 
 <style lang="scss" rel="stylesheet/scss">
-img {
+img, pre {
   max-width: 100%;
 }
 </style>