more header and dark theme updates

src/components/Board/CreateBoard.vue

@@ -7,7 +7,6 @@
 
     <b-modal
       id="create-board"
-      title="Create board"
       size="lg"
       :header-bg-variant="nightMode ? 'dark' : null"
       :header-text-variant="nightMode ? 'white' : null"
@@ -18,6 +17,20 @@
       @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>
+      </template>
+
       <form ref="createBoardForm" @submit.stop.prevent="submit">
         <b-form-group
           label="Board name"

src/components/Lists/AddGameModal.vue

@@ -5,10 +5,29 @@
 
     <b-modal
       :id="`game-modal-${list.name}`"
-      :title="$t('board.addGame.title')"
-      footer-class="p-2 justify-content-center"
+      :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"
+      footer-class="justify-content-center"
       @show="clear"
     >
+      <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>
+      </template>
+
       <b-form @submit.prevent="search" class="mb-2">
         <b-input-group>
           <b-form-input
@@ -63,7 +82,7 @@
 <script>
 import GameCardSearch from '@/components/GameCards/GameCardSearch';
 import IgdbLogo from '@/components/IgdbLogo';
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -87,6 +106,7 @@ export default {
 
   computed: {
     ...mapState(['results']),
+    ...mapGetters(['nightMode']),
 
     noResults() {
       return !this.loading

src/components/Lists/ChangeListView.vue

@@ -5,18 +5,30 @@
 
     <b-modal
       :id="modalId"
-      :title="$t('board.list.view')"
       @show="load"
     >
+      <template v-slot:modal-header="{ close }">
+        <modal-header
+          :title="$t('board.list.view')"
+        >
+          <b-button
+            variant="light"
+            size="sm"
+            @click="close"
+          >
+            <icon name="x" />
+          </b-button>
+        </modal-header>
+      </template>
+
       <form ref="renameListForm" @submit.prevent="save">
-        <b-form-group :label="$t('board.list.view')">
-          <b-form-radio-group
-            v-model="view"
-            required
-            :options="listViews"
-            buttons
-          />
-        </b-form-group>
+        <b-form-radio-group
+          v-model="view"
+          required
+          :options="listViews"
+          class="mb-2"
+          buttons
+        />
 
         <!-- TODO: use dynamic named component -->
         <template v-if="randomGameId">

src/components/Lists/ListPreferences.vue

@@ -5,9 +5,22 @@
 
     <b-modal
       :id="modalId"
-      :title="$t('board.list.settings')"
       @show="getSettings"
     >
+      <template v-slot:modal-header="{ close }">
+        <modal-header
+          :title="$t('board.list.settings')"
+        >
+          <b-button
+            variant="light"
+            size="sm"
+            @click="close"
+          >
+            <icon name="x" />
+          </b-button>
+        </modal-header>
+      </template>
+
       <form ref="renameListForm" @submit.stop.prevent="save">
         <b-form-checkbox
           v-model="showReleaseDates"

src/components/Lists/RenameList.vue

@@ -11,9 +11,22 @@
       :body-text-variant="nightMode ? 'white' : null"
       :footer-bg-variant="nightMode ? 'dark' : null"
       :footer-text-variant="nightMode ? 'white' : null"
-      :title="$t('board.list.renameList')"
       @show="getListName"
     >
+      <template v-slot:modal-header="{ close }">
+        <modal-header
+          :title="$t('board.list.renameList')"
+        >
+          <b-button
+            variant="light"
+            size="sm"
+            @click="close"
+          >
+            <icon name="x" />
+          </b-button>
+        </modal-header>
+      </template>
+
       <form ref="renameListForm" @submit.stop.prevent="submit">
         <b-form-input
           ref="listNameField"

src/pages/Dashboard.vue

@@ -5,6 +5,9 @@
       header-level="5"
       fluid
       :lead="$t('dashboard.subtitle')"
+      :bg-variant="nightMode ? 'dark' : ''"
+      :text-variant="nightMode ? 'white' : ''"
+      :border-variant="nightMode ? 'dark' : ''"
     />
     <!-- background-image: linear-gradient(transparent, #222 50%), url(${ coverScreenshot }); -->
     <b-container>
@@ -17,7 +20,7 @@
 <script>
 import PageFooter from '@/components/PageFooter';
 import Boards from '@/components/Boards';
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -33,7 +36,8 @@ export default {
   },
 
   computed: {
-    ...mapState(['user']),
+    ...mapState(['user', 'settings']),
+    ...mapGetters(['nightMode']),
 
     coverScreenshot() {
       const baseUrl = 'https://images.igdb.com/igdb/image/upload/t_1080p_2x/';

src/pages/Languages.vue

@@ -3,6 +3,9 @@
     <b-jumbotron
       :header="$t('languages.title')"
       header-level="5"
+      :bg-variant="nightMode ? 'dark' : ''"
+      :text-variant="nightMode ? 'white' : ''"
+      :border-variant="nightMode ? 'dark' : ''"
       fluid
     />
 
@@ -32,7 +35,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import { SUPPORTED_LANGUAGES } from '@/constants';
 
 export default {
@@ -46,6 +49,7 @@ export default {
 
   computed: {
     ...mapState(['settings']),
+    ...mapGetters(['nightMode']),
   },
 
   mounted() {

src/pages/Releases.vue

@@ -4,6 +4,9 @@
       :header="$t('releases.title')"
       header-level="5"
       fluid
+      :bg-variant="nightMode ? 'dark' : ''"
+      :text-variant="nightMode ? 'white' : ''"
+      :border-variant="nightMode ? 'dark' : ''"
       class="position-sticky"
     />
 
@@ -16,6 +19,7 @@
               class="d-flex justify-content-between align-items-center"
               v-for="release in releases"
               :key="release.id"
+              :variant="nightMode ? 'dark' : null"
               :active="selectedRelease && release.id === selectedRelease.id"
               @click="selectedRelease = release"
             >
@@ -29,6 +33,8 @@
 
         <b-col cols="9">
           <b-card
+            :bg-variant="nightMode ? 'dark' : null"
+            :text-variant="nightMode ? 'white' : null"
             v-if="selectedRelease"
             hide-footer
             class="mb-3"
@@ -55,7 +61,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import VueMarkdown from 'vue-markdown';
 import moment from 'moment';
 
@@ -72,6 +78,7 @@ export default {
 
   computed: {
     ...mapState(['releases', 'notification', 'settings']),
+    ...mapGetters(['nightMode']),
   },
 
   mounted() {

src/pages/Tags.vue

@@ -3,6 +3,9 @@
     <b-jumbotron
       :header="$t('tags.title')"
       :lead="$t('tags.subtitle')"
+      :bg-variant="nightMode ? 'dark' : ''"
+      :text-variant="nightMode ? 'white' : ''"
+      :border-variant="nightMode ? 'dark' : ''"
       header-level="5"
       fluid
     />
@@ -108,9 +111,27 @@
           </b-list-group>
 
           <!-- TODO: move to component -->
-          <b-modal id="editTag">
-            <template v-slot:modal-title>
-              Edit <strong>{{ editingOriginalTagName }}</strong> tag
+          <b-modal
+            id="editTag"
+            :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"
+          >
+            <template v-slot:modal-header="{ close }">
+              <modal-header
+                :title="`Edit ${editingOriginalTagName} tag`"
+              >
+                <b-button
+                  variant="light"
+                  size="sm"
+                  @click="close"
+                >
+                  <icon name="x" />
+                </b-button>
+              </modal-header>
             </template>
 
             <form
@@ -186,7 +207,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   data() {
@@ -205,6 +226,7 @@ export default {
 
   computed: {
     ...mapState(['tags', 'platform']),
+    ...mapGetters(['nightMode']),
 
     isDuplicate() {
       const { tagName, localTags } = this;

src/pages/Wallpapers.vue

@@ -3,6 +3,9 @@
     <b-jumbotron
       :header="$t('wallpapers.title')"
       :lead="$t('wallpapers.subtitle')"
+      :bg-variant="nightMode ? 'dark' : ''"
+      :text-variant="nightMode ? 'white' : ''"
+      :border-variant="nightMode ? 'dark' : ''"
       header-level="5"
       fluid
     />
@@ -12,10 +15,11 @@
       <!-- TODO: convert to form -->
       <!-- TODO: translate "browse" -->
       <!-- TODO: display file names -->
+      <h5>{{ $t('wallpapers.form.label') }}</h5>
+
       <b-row class="mb-3">
-        <b-col cols="12" lg="6">
+        <b-col cols="12" lg="6" class="mb-4">
           <b-form-group
-            :label="$t('wallpapers.form.label')"
             :description="$t('wallpapers.form.helperText')"
           >
             <b-form-file
@@ -40,11 +44,38 @@
         </b-col>
       </b-row>
 
-      <b-form-row v-if="wallpapers.length">
-        <b-col cols="12">
-          <h5>{{ $t('wallpapers.list.title') }}</h5>
+      <h5>{{ $t('wallpapers.list.title') }}</h5>
+
+      <b-row
+        v-if="wallpapers.length"
+        v-for="wallpaper in wallpapers"
+        :key="wallpaper.name"
+        no-gutters
+        class="mb-4 border-bottom pb-4"
+      >
+        <b-col cols="6" lg="3" class="pr-3">
+          <b-img
+           :src="wallpaper.url"
+           thumbnail
+           class="rounded-0"
+         />
         </b-col>
 
+        <b-col cols="6">
+          <p>{{ wallpaper.name }}</p>
+          <b-button
+            variant="danger"
+            size="sm"
+            @click="confirmDeleteWallpaper(wallpaper)"
+          >
+            <icon name="trash" white />
+          </b-button>
+        </b-col>
+      </b-row>
+
+      <!-- <b-form-row v-if="wallpapers.length">
+        <b-col cols="12">
+        </b-col>
         <b-col
           v-for="wallpaper in wallpapers"
           :key="wallpaper.name"
@@ -58,23 +89,11 @@
             body-class="d-flex p-0 text-center justify-content-center align-items-center"
             header-tag="small"
           >
-            <b-img
-              :src="wallpaper.url"
-              :alt="wallpaper.name"
-              fluid
-            />
 
-            <b-button
-              class="position-absolute delete-file"
-              variant="danger"
-              size="sm"
-              @click="confirmDeleteWallpaper(wallpaper)"
-            >
-              <icon name="trash" white />
-            </b-button>
+
           </b-card>
         </b-col>
-      </b-form-row>
+      </b-form-row> -->
 
       <b-alert show v-else>You don't have any wallpapers.</b-alert>
     </b-container>
@@ -82,7 +101,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   data() {
@@ -96,6 +115,7 @@ export default {
 
   computed: {
     ...mapState(['user', 'board', 'wallpapers']),
+    ...mapGetters(['nightMode']),
 
     existingFiles() {
       return this.wallpapers.map(({ name }) => name);