From f167ea44ac6d807e97ddaa31032cd4f8cc569402 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Wed, 14 Oct 2020 14:48:55 -0700
Subject: [PATCH] dark theme updates

---
 src/components/GameCards/GameCardCompact.vue |  8 ++++-
 src/components/GameCards/GameCardDefault.vue |  8 ++++-
 src/components/GameCards/GameCardGrid.vue    |  2 ++
 src/components/GameCards/GameCardSearch.vue  |  7 ++++-
 src/components/GameCards/GameCardText.vue    |  8 ++++-
 src/components/Lists/ChangeListView.vue      | 31 ++++++++++++--------
 6 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/components/GameCards/GameCardCompact.vue b/src/components/GameCards/GameCardCompact.vue
index 02ddbcd9..daff58d6 100644
--- a/src/components/GameCards/GameCardCompact.vue
+++ b/src/components/GameCards/GameCardCompact.vue
@@ -1,5 +1,11 @@
 <template lang="html">
-  <b-card no-body class="clickable mb-2" @click="openDetails">
+  <b-card
+    no-body
+    class="clickable mb-2"
+    :bg-variant="nightMode ? 'dark' : ''"
+    :text-variant="nightMode ? 'white' : ''"
+    @click="openDetails"
+  >
     <b-row no-gutters v-if="game && game.name">
       <b-col cols="3">
         <icon name="check-circle"
diff --git a/src/components/GameCards/GameCardDefault.vue b/src/components/GameCards/GameCardDefault.vue
index e0f4223f..9d9de820 100644
--- a/src/components/GameCards/GameCardDefault.vue
+++ b/src/components/GameCards/GameCardDefault.vue
@@ -1,5 +1,11 @@
 <template lang="html">
-  <b-card no-body class="clickable mb-2" @click="openDetails">
+  <b-card
+    no-body
+    class="clickable mb-2"
+    :bg-variant="nightMode ? 'dark' : ''"
+    :text-variant="nightMode ? 'white' : ''"
+    @click="openDetails"
+  >
     <b-row
       no-gutters
       v-if="game && game.name"
diff --git a/src/components/GameCards/GameCardGrid.vue b/src/components/GameCards/GameCardGrid.vue
index bf5bf6aa..56576264 100644
--- a/src/components/GameCards/GameCardGrid.vue
+++ b/src/components/GameCards/GameCardGrid.vue
@@ -3,6 +3,8 @@
     no-body
     class="clickable mb-2"
     :img-src="coverUrl"
+    :bg-variant="nightMode ? 'dark' : ''"
+    :text-variant="nightMode ? 'white' : ''"
     img-top
     @click="openDetails"
   >
diff --git a/src/components/GameCards/GameCardSearch.vue b/src/components/GameCards/GameCardSearch.vue
index 69ca9b2e..59878220 100644
--- a/src/components/GameCards/GameCardSearch.vue
+++ b/src/components/GameCards/GameCardSearch.vue
@@ -1,5 +1,10 @@
 <template lang="html">
-  <b-card no-body class="game-card mb-1">
+  <b-card
+    no-body
+    class="game-card mb-1"
+    :bg-variant="nightMode ? 'dark' : ''"
+    :text-variant="nightMode ? 'white' : ''"
+  >
     <b-row no-gutters v-if="game && game.name">
       <b-col cols="3">
         <b-card-img
diff --git a/src/components/GameCards/GameCardText.vue b/src/components/GameCards/GameCardText.vue
index 56a0aaca..9bd5cfcc 100644
--- a/src/components/GameCards/GameCardText.vue
+++ b/src/components/GameCards/GameCardText.vue
@@ -1,5 +1,11 @@
 <template lang="html">
-  <b-card no-body class="clickable mb-2" @click="openDetails">
+  <b-card
+    no-body
+    class="clickable mb-2"
+    :bg-variant="nightMode ? 'dark' : ''"
+    :text-variant="nightMode ? 'white' : ''"
+    @click="openDetails"
+  >
     <b-row no-gutters v-if="game && game.name">
         <b-card-body body-class="pt-0 pb-1 px-2">
           <small>
diff --git a/src/components/Lists/ChangeListView.vue b/src/components/Lists/ChangeListView.vue
index f5da3f5f..94f9593f 100644
--- a/src/components/Lists/ChangeListView.vue
+++ b/src/components/Lists/ChangeListView.vue
@@ -5,20 +5,20 @@
 
     <b-modal
       :id="modalId"
+      :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="d-flex justify-content-between"
       @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>
+          @close="close"
+        />
       </template>
 
       <form ref="renameListForm" @submit.prevent="save">
@@ -69,8 +69,11 @@
       </form>
 
       <template v-slot:modal-footer="{ cancel }">
-        <b-button @click="cancel">
-          Cancel
+        <b-button
+          variant="light"
+          @click="cancel"
+        >
+          {{ $t('global.cancel') }}
         </b-button>
 
         <b-button
@@ -79,7 +82,7 @@
           @click="save"
         >
           <b-spinner small v-if="saving" />
-          <span v-else>Save</span>
+          <span v-else>{{ $t('global.save') }}</span>
         </b-button>
       </template>
     </b-modal>
@@ -87,7 +90,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import GameCardDefault from '@/components/GameCards/GameCardDefault';
 import GameCardGrid from '@/components/GameCards/GameCardGrid';
 import GameCardCompact from '@/components/GameCards/GameCardCompact';
@@ -100,6 +103,7 @@ export default {
     GameCardCompact,
     GameCardText,
   },
+
   props: {
     listIndex: Number,
     list: Object,
@@ -122,6 +126,7 @@ export default {
 
   computed: {
     ...mapState(['games']),
+    ...mapGetters(['nightMode']),
 
     modalId() {
       return `add-game-${this.listIndex}`;