simplify modals

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"
+          :title="$t('boards.create')"
-        >
+          @close="close"
-          <b-button
+        />
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
       </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>
 

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"
+        @close="close"
-      >
+      />
-        <b-button-toolbar key-nav aria-label="Toolbar with button groups">
+        <b-button-group>
-          <b-button-group class="mr-2">
+          <b-button
-            <b-button
+            size="sm"
-              size="sm"
+            :variant="nightMode ? 'dark' : 'light'"
-              variant="light"
+            :disabled="prevDisabled"
-              :disabled="prevDisabled"
+            @click="previousGame"
-              @click="previousGame"
+          >
-            >
+            <icon name="triangle-left" />
-              <icon name="triangle-left" />
+          </b-button>
-            </b-button>
-
-            <b-button
-              size="sm"
-              variant="light"
-              :disabled="nextDisabled"
-              @click="nextGame"
-            >
-              <icon name="triangle-right" />
-            </b-button>
-          </b-button-group>
 
           <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>
+        </b-button-group>
-      </modal-header>
     </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

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"
-        >
+          @close="close"
-          <b-button
+        />
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
       </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
+        <div>
-          variant="primary"
+          <b-button
-          :disabled="saving"
+            variant="light"
-          @click="saveNote"
+            class="mx-2"
-        >
+            :disabled="saving"
-          <b-spinner small v-if="saving" />
+            @click="cancel"
-          <span v-else>{{ $t('global.save') }}</span>
+          >
-        </b-button>
+            {{ $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>

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"
-        >
+          @close="close"
-          <b-button
+        />
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
       </template>
 
       <b-input-group :prepend="`${localProgress}%`" class="mb-4" size="lg">

src/components/Game/GameScreenshots.vue

@@ -25,15 +25,8 @@
       <template v-slot:modal-header="{ close }">
         <modal-header
           :title="game.name"
-        >
+          @close="close"
-          <b-button
+        />
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
       </template>
 
       <b-carousel

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;

src/components/Lists/AddGameModal.vue

@@ -17,15 +17,8 @@
       <template v-slot:modal-header="{ close }">
         <modal-header
           :title="$t('board.addGame.title')"
-        >
+          @close="close"
-          <b-button
+        />
-            variant="light"
-            size="sm"
-            @click="close"
-          >
-            <icon name="x" />
-          </b-button>
-        </modal-header>
       </template>
 
       <b-form @submit.prevent="search" class="mb-2">