Allow to change board bg color

src/components/Board/MiniBoard.vue

@@ -1,11 +1,10 @@
 <template lang="html">
   <div
-    class="mini-board p-1 rounded bg-secondary"
-    :style="`background-image: url(${background})`"
+    class="mini-board p-1 rounded"
+    :style="miniBoardStyles"
   >
     <small>
       {{ board.name }}
-      /
       {{ board.platforms.length }} {{ $t('boards.platforms') }}
     </small>
 
@@ -42,7 +41,20 @@
 export default {
   props: {
     board: Object,
-    background: String,
+    backgroundImage: String,
+  },
+
+  computed: {
+      miniBoardStyles() {
+        if (this.backgroundImage) {
+          return `background-image: url(${this.backgroundImage});`;
+        }
+
+        // TODO: use optional chaining
+        if (this.board && this.board.backgroundColor) {
+          return `background-color: ${this.board.backgroundColor};`;
+        }
+      },
   },
 };
 </script>

src/components/Boards.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div>
+  <b-container class="pt-3">
     <!-- TODO: allow board settings to be accessed here -->
     <template v-if="showPlaceholder">
       <b-card
@@ -29,9 +29,9 @@
       <create-board />
     </empty-state>
 
-    <template v-else>
-      <div class="d-flex justify-content-between align-items-center">
-        <h2>{{ $t('boards.title') }}</h2>
+    <b-row v-else>
+      <div class="d-flex w-100 justify-content-between align-items-center mb-3">
+        <h3 class="m-0 mr-a">{{ $t('boards.title') }}</h3>
 
         <create-board />
       </div>
@@ -48,12 +48,12 @@
         >
           <mini-board
             :board="board"
-            :background="getWallpaper(board)"
+            :background-image="getWallpaper(board)"
           />
         </b-card>
       </div>
-    </template>
-  </div>
+    </b-row>
+  </b-container>
 </template>
 
 <script>

src/pages/Board.vue

@@ -1,7 +1,7 @@
 <template lang="html">
   <div
     :class="['board py-2', boardBackground, { dragging, 'empty': isEmptyBoard }]"
-    :style="wallpaper"
+    :style="boardStyles"
   >
     <board-placeholder v-if="loading" />
 
@@ -55,10 +55,15 @@ export default {
     ...mapState(['user', 'dragging', 'board', 'wallpapers']),
     ...mapGetters(['nightMode']),
 
-    wallpaper() {
-      return this.wallpaperUrl
-        ? `background-image: url('${this.wallpaperUrl}');`
-        : '';
+    boardStyles() {
+      if (this.wallpaperUrl) {
+        return `background: url('${this.wallpaperUrl}');`;
+      }
+
+      // TODO: use optional chaining
+      if (this.board && this.board.backgroundColor) {
+        return `background-color: ${this.board.backgroundColor};`;
+      }
     },
 
     boardId() {
@@ -76,6 +81,10 @@ export default {
     },
 
     boardBackground() {
+      if (this.board.backgroundColor) {
+        return null;
+      }
+
       return this.nightMode
         ? 'bg-dark'
         : 'bg-light';