dark theme updates

src/components/Game/GameModal.vue

@@ -61,6 +61,25 @@
 
         <b-col cols="12" md="8" class="mt-md-0 mt-3 text-md-left text-center">
           <h3 class="mb-0">{{ game.name }}</h3>
+
+          <b-progress
+            v-if="progress"
+            :value="progress"
+            variant="success"
+            height="8px"
+            class="my-1 w-50"
+          />
+
+          <b-form-rating
+            v-if="rating"
+            :value="rating"
+            :class="['p-0 mt-1', { 'bg-dark': nightMode }]"
+            inline
+            readonly
+            variant="warning"
+            size="lg"
+            no-border
+          />
           <!-- <h6>
             <b-badge
               v-if="releaseDate"
@@ -71,16 +90,7 @@
             </b-badge>
           </h6> -->
 
-          <b-form-rating
-            v-if="rating"
-            :value="rating"
-            class="p-0 mt-1 border-0 shadow-none"
-            inline
-            readonly
-            variant="warning"
-            size="lg"
-            no-border
-          />
+          <br />
 
           <b-badge
             v-for="({ games, hex, tagTextColor }, name) in tags"
@@ -94,14 +104,6 @@
             {{ name }}
           </b-badge>
 
-          <b-progress
-            v-if="progress"
-            :value="progress"
-            variant="success"
-            height="8px"
-            class="mt-2"
-          />
-
           <div
             v-if="loading"
             class="my-2 d-flex justify-content-md-start justify-content-center"

src/components/Lists/ListSettings.vue

@@ -4,6 +4,7 @@
     class="m-1"
     right
     variant="transparent"
+    :menu-class="nightMode ? 'bg-dark' : ''"
     no-caret
   >
     <template v-slot:button-content>
@@ -62,7 +63,7 @@ import RenameList from '@/components/Lists/RenameList';
 import ListPreferences from '@/components/Lists/ListPreferences';
 import SortList from '@/components/Lists/SortList';
 import AddGameModal from '@/components/Lists/AddGameModal';
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -86,6 +87,7 @@ export default {
 
   computed: {
     ...mapState(['user', 'platform', 'board']),
+    ...mapGetters(['nightMode']),
 
     isFirst() {
       return this.listIndex === 0;

src/components/PageHeader.vue

@@ -18,6 +18,7 @@
         boundary="viewport"
         v-b-tooltip.hover.right
         :title="$t('navMenu.changeBoard')"
+        :menu-class="nightMode ? 'bg-dark' : ''"
         variant="transparent"
       >
         <template v-slot:button-content>
@@ -28,6 +29,7 @@
           :to="`/board/${id}`"
           :key="id"
           v-for="{ name, id } in sortedBoards"
+          variant="transparent"
           :active="board.id === id"
         >
           {{ name }}
@@ -88,7 +90,7 @@
 
       <b-button
         variant="link"
-        :title="$t('navMenu.about')"
+        :title="$t('navMenu.theme')"
         v-b-tooltip.hover.right
         @click="toggleTheme"
       >

src/i18n/en.json

@@ -26,7 +26,8 @@
         "language": "Language",
         "releases": "Releases",
         "about": "About",
-        "account": "Account"
+        "account": "Account",
+        "theme": "Switch theme"
     },
     "gitHub": {
         "watch": "Watch",