update empty board

src/components/Board/EmptyBoard.vue

@@ -1,24 +1,13 @@
 <template lang="html">
-  <b-jumbotron class="empty-board w-100 text-center">
+  <div class="m-2 bg-secondary p-4 rounded text-center">
     <p>This board is empty</p>
 
-    <b-button @click="openAddListModal">
+    <b-button v-b-modal.add-list variant="primary">
       Add list
     </b-button>
-  </b-jumbotron>
+  </div>
 </template>
 
-<script>
-export default {
-  methods: {
-    openAddListModal() {
-      // TODO: use directive instead
-      this.$bvModal.show('add-list');
-    },
-  },
-};
-</script>
-
 <style lang="scss" rel="stylesheet/scss" scoped>
 .empty-board {
   max-width: 300px;

src/pages/BoardPage.vue

@@ -28,8 +28,10 @@
         :key="list.name"
       />
 
+      <empty-board v-if="empty" class="mr-3" />
+
       <div
-        v-if="user && user.uid && user.uid === board.owner"
+        v-else-if="user && user.uid && user.uid === board.owner"
         class="d-flex flex-column pr-2"
       >
         <b-button
@@ -42,8 +44,6 @@
         </b-button>
       </div>
 
-      <empty-board v-if="empty" class="mr-3" />
-
       <add-list-modal />
       <edit-board-modal />
     </template>