update modal headers

src/components/Game/GameModal.vue

@@ -4,42 +4,49 @@
     scrollable
     size="lg"
     footer-class="p-2 justify-content-center"
-    header-class="align-items-center py-2"
+    header-class="align-items-center pb-0 border-0"
     @show="load"
     @hidden="reset"
   >
+  <!-- header-bg-variant="dark"
+  body-bg-variant="dark"
+  footer-bg-variant="dark" -->
     <template v-slot:modal-header="{ close }">
-      <h5 class="mb-0">{{ game.name }}</h5>
+      <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-toolbar key-nav aria-label="Toolbar with button groups">
+            <b-button
-        <b-button-group class="mx-2">
+              size="sm"
-          <b-button
+              variant="light"
-            size="sm"
+              :disabled="nextDisabled"
-            variant="light"
+              @click="nextGame"
-            :disabled="prevDisabled"
+            >
-            @click="previousGame"
+              <icon name="triangle-right" />
-          >
+            </b-button>
-            <icon name="triangle-left" />
+          </b-button-group>
-          </b-button>
 
           <b-button
-            size="sm"
             variant="light"
-            :disabled="nextDisabled"
+            size="sm"
-            @click="nextGame"
+            @click="close"
           >
-            <icon name="triangle-right" />
+            <icon name="x" />
           </b-button>
-        </b-button-group>
+        </b-button-toolbar>
-
+      </modal-header>
-        <b-button
-          variant="light"
-          size="sm"
-          @click="close"
-        >
-          <icon name="x" />
-        </b-button>
-      </b-button-toolbar>
     </template>
 
     <b-container v-if="game.name" class="m-0 p-0">
@@ -100,8 +107,17 @@
             class="mt-2"
           />
 
-          <div v-if="loading" class="my-2 d-flex justify-content-md-start justify-content-center">
+          <div
-            <b-skeleton type="button" width="45px" v-for="n in 4" :key="n" class="mr-1" />
+            v-if="loading"
+            class="my-2 d-flex justify-content-md-start justify-content-center"
+          >
+            <b-skeleton
+              v-for="n in 4"
+              :key="n"
+              type="button"
+              width="45px"
+              class="mr-1"
+            />
           </div>
 
           <div v-else class="my-2">

src/components/Game/GameNotes.vue

@@ -1,3 +1,5 @@
+<!-- TODO: translate -->
+
 <template lang="html">
   <b-button
     v-b-modal.notes
@@ -9,7 +11,6 @@
 
     <b-modal
       id="notes"
-      title="Game notes"
       :header-bg-variant="nightMode ? 'dark' : null"
       :header-text-variant="nightMode ? 'white' : null"
       :body-bg-variant="nightMode ? 'dark' : null"
@@ -18,6 +19,20 @@
       :footer-text-variant="nightMode ? 'white' : null"
       @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>
+      </template>
+
       <b-form-textarea
         v-model.trim="localNote"
         placeholder="Type note here"

src/components/Game/GameProgress.vue

@@ -9,7 +9,6 @@
 
     <b-modal
       id="progress"
-      title="Set game progress"
       :header-bg-variant="nightMode ? 'dark' : null"
       :header-text-variant="nightMode ? 'white' : null"
       :body-bg-variant="nightMode ? 'dark' : null"
@@ -18,6 +17,20 @@
       :footer-text-variant="nightMode ? 'white' : null"
       @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>
+      </template>
+
       <b-input-group :prepend="`${localProgress}%`" class="mb-4" size="lg">
         <b-form-input
           size="lg"

src/components/Game/GameScreenshots.vue

@@ -19,10 +19,23 @@
 
     <b-modal
       id="screenshots"
-      :title="game.name"
       size="xl"
       hide-footer
     >
+      <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>
+      </template>
+
       <b-carousel
         ref="screenshots"
         v-model="activeImage"