From ab463adbe1197604daed80f74386b5fe64e6deb7 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Wed, 14 Oct 2020 14:47:02 -0700
Subject: [PATCH] simplify modals

---
 src/components/Board/CreateBoard.vue    | 16 +++-----
 src/components/Game/GameModal.vue       | 52 ++++++++++++-------------
 src/components/Game/GameNotes.vue       | 43 +++++++++++---------
 src/components/Game/GameProgress.vue    | 12 ++----
 src/components/Game/GameScreenshots.vue | 11 +-----
 src/components/GameCards/GameCard.js    |  2 +-
 src/components/Lists/AddGameModal.vue   | 11 +-----
 7 files changed, 61 insertions(+), 86 deletions(-)

diff --git a/src/components/Board/CreateBoard.vue b/src/components/Board/CreateBoard.vue
index 0594dcdd..e51d0c8e 100644
--- a/src/components/Board/CreateBoard.vue
+++ b/src/components/Board/CreateBoard.vue
@@ -14,21 +14,15 @@
       :body-text-variant="nightMode ? 'white' : null"
       :footer-bg-variant="nightMode ? 'dark' : null"
       :footer-text-variant="nightMode ? 'white' : null"
+      footer-class="d-flex justify-content-between"
       @show="resetBoard"
       @hidden="resetBoard"
     >
       <template v-slot:modal-header="{ close }">
         <modal-header
-          title="Create board"
-        >
-          <b-button
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
+          :title="$t('boards.create')"
+          @close="close"
+        />
       </template>
 
       <form ref="createBoardForm" @submit.stop.prevent="submit">
@@ -85,7 +79,7 @@
       </form>
 
       <template v-slot:modal-footer="{ cancel }">
-        <b-button @click="cancel">
+        <b-button @click="cancel" variant="light">
           Cancel
         </b-button>
 
diff --git a/src/components/Game/GameModal.vue b/src/components/Game/GameModal.vue
index fc02f524..c99f1a84 100644
--- a/src/components/Game/GameModal.vue
+++ b/src/components/Game/GameModal.vue
@@ -5,6 +5,12 @@
     size="lg"
     footer-class="p-2 justify-content-center"
     header-class="align-items-center pb-0 border-0"
+    :header-bg-variant="nightMode ? 'dark' : null"
+    :header-text-variant="nightMode ? 'white' : null"
+    :body-bg-variant="nightMode ? 'dark' : null"
+    :body-text-variant="nightMode ? 'white' : null"
+    :footer-bg-variant="nightMode ? 'dark' : null"
+    :footer-text-variant="nightMode ? 'white' : null"
     @show="load"
     @hidden="reset"
   >
@@ -15,38 +21,27 @@
       <modal-header
         :title="game.name"
         :subtitle="gameModalData.list.name"
-        header-class="border-0"
-      >
-        <b-button-toolbar key-nav aria-label="Toolbar with button groups">
-          <b-button-group class="mr-2">
-            <b-button
-              size="sm"
-              variant="light"
-              :disabled="prevDisabled"
-              @click="previousGame"
-            >
-              <icon name="triangle-left" />
-            </b-button>
-
-            <b-button
-              size="sm"
-              variant="light"
-              :disabled="nextDisabled"
-              @click="nextGame"
-            >
-              <icon name="triangle-right" />
-            </b-button>
-          </b-button-group>
+        @close="close"
+      />
+        <b-button-group>
+          <b-button
+            size="sm"
+            :variant="nightMode ? 'dark' : 'light'"
+            :disabled="prevDisabled"
+            @click="previousGame"
+          >
+            <icon name="triangle-left" />
+          </b-button>
 
           <b-button
-            variant="light"
             size="sm"
-            @click="close"
+            :variant="nightMode ? 'dark' : 'light'"
+            :disabled="nextDisabled"
+            @click="nextGame"
           >
-            <icon name="x" />
+            <icon name="triangle-right" />
           </b-button>
-        </b-button-toolbar>
-      </modal-header>
+        </b-button-group>
     </template>
 
     <b-container v-if="game.name" class="m-0 p-0">
@@ -151,7 +146,7 @@
 
 <script>
 import moment from 'moment';
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import GameDetailPlaceholder from '@/components/Game/GameDetailPlaceholder';
 import GameDetails from '@/components/Game/GameDetails';
 import GameNotesTab from '@/components/Game/GameNotesTab';
@@ -190,6 +185,7 @@ export default {
   computed: {
     // TODO: rename gameModalData
     ...mapState(['gameModalData', 'games', 'platform', 'progresses', 'tags']),
+    ...mapGetters(['nightMode']),
 
     releaseDate() {
       const releaseDate = this.game
diff --git a/src/components/Game/GameNotes.vue b/src/components/Game/GameNotes.vue
index c6ed2ee4..9f12db54 100644
--- a/src/components/Game/GameNotes.vue
+++ b/src/components/Game/GameNotes.vue
@@ -17,20 +17,14 @@
       :body-text-variant="nightMode ? 'white' : null"
       :footer-bg-variant="nightMode ? 'dark' : null"
       :footer-text-variant="nightMode ? 'white' : null"
+      footer-class="d-flex justify-content-between"
       @show="show"
     >
       <template v-slot:modal-header="{ close }">
         <modal-header
           title="Game notes"
-        >
-          <b-button
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
+          @close="close"
+        />
       </template>
 
       <b-form-textarea
@@ -46,24 +40,35 @@
         </a>
       </b-form-text>
 
-      <template v-slot:modal-footer>
+      <template v-slot:modal-footer="{ cancel }">
         <b-button
           variant="danger"
-          :disabled="deleting"
+          :disabled="deleting || !notes[game.id]"
           @click="deleteNote"
         >
           <b-spinner small v-if="deleting" />
           <span v-else>{{ $t('global.delete') }}</span>
         </b-button>
 
-        <b-button
-          variant="primary"
-          :disabled="saving"
-          @click="saveNote"
-        >
-          <b-spinner small v-if="saving" />
-          <span v-else>{{ $t('global.save') }}</span>
-        </b-button>
+        <div>
+          <b-button
+            variant="light"
+            class="mx-2"
+            :disabled="saving"
+            @click="cancel"
+          >
+            {{ $t('global.cancel') }}
+          </b-button>
+
+          <b-button
+            variant="primary"
+            :disabled="saving"
+            @click="saveNote"
+          >
+            <b-spinner small v-if="saving" />
+            <span v-else>{{ $t('global.save') }}</span>
+          </b-button>
+        </div>
       </template>
     </b-modal>
   </b-button>
diff --git a/src/components/Game/GameProgress.vue b/src/components/Game/GameProgress.vue
index a16698fb..78773bf3 100644
--- a/src/components/Game/GameProgress.vue
+++ b/src/components/Game/GameProgress.vue
@@ -15,20 +15,14 @@
       :body-text-variant="nightMode ? 'white' : null"
       :footer-bg-variant="nightMode ? 'dark' : null"
       :footer-text-variant="nightMode ? 'white' : null"
+      footer-class="d-flex justify-content-between"
       @show="show"
     >
       <template v-slot:modal-header="{ close }">
         <modal-header
           title="Set game progress"
-        >
-          <b-button
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
+          @close="close"
+        />
       </template>
 
       <b-input-group :prepend="`${localProgress}%`" class="mb-4" size="lg">
diff --git a/src/components/Game/GameScreenshots.vue b/src/components/Game/GameScreenshots.vue
index 8c5e7334..b3a7b63e 100644
--- a/src/components/Game/GameScreenshots.vue
+++ b/src/components/Game/GameScreenshots.vue
@@ -25,15 +25,8 @@
       <template v-slot:modal-header="{ close }">
         <modal-header
           :title="game.name"
-        >
-          <b-button
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
+          @close="close"
+        />
       </template>
 
       <b-carousel
diff --git a/src/components/GameCards/GameCard.js b/src/components/GameCards/GameCard.js
index 193e343d..55bd62f6 100644
--- a/src/components/GameCards/GameCard.js
+++ b/src/components/GameCards/GameCard.js
@@ -14,7 +14,7 @@ export default {
   computed: {
     ...mapState(['settings', 'games', 'tags', 'notes', 'progresses', 'board']),
     // TODO: remove getter
-    ...mapGetters(['gameTags']),
+    ...mapGetters(['gameTags', 'nightMode']),
 
     showCompletedBadge() {
       return this.gameProgress && Number(this.gameProgress) === 100;
diff --git a/src/components/Lists/AddGameModal.vue b/src/components/Lists/AddGameModal.vue
index 8d0fa531..1956c8b1 100755
--- a/src/components/Lists/AddGameModal.vue
+++ b/src/components/Lists/AddGameModal.vue
@@ -17,15 +17,8 @@
       <template v-slot:modal-header="{ close }">
         <modal-header
           :title="$t('board.addGame.title')"
-        >
-          <b-button
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
+          @close="close"
+        />
       </template>
 
       <b-form @submit.prevent="search" class="mb-2">