Refactor to use Buefy’s b-modal instead of sweet-modal

pages/index.vue

@@ -110,32 +110,42 @@
       <b-tab-item label="…"></b-tab-item>
     </b-tabs>
 
-    <!-- Modal: compose panel -->
-    <sweet-modal ref="compose" title="Compose" overlay-theme="dark">
-      <b-tabs position="is-centered" class="block">
-        <b-tab-item label="Text">
-          <section>
-            <textarea style='width: 100%;'>What’s on your mind?</textarea>
-          </section>
-        </b-tab-item>
-        <b-tab-item label="Photo"></b-tab-item>
-      </b-tabs>
-      <!-- <sweet-modal-tab title="Text" id="tab1">Contents of Tab 1</sweet-modal-tab>
-      <sweet-modal-tab title="Photo" id="tab2">Contents of Tab 2</sweet-modal-tab> -->
-    </sweet-modal>
+    <!-- Compose Panel Modal -->
+    <b-modal :active.sync="isComposePanelModalActive" :width="960" scroll="keep">
+      <div class="card">
+        <b-tabs position="is-centered" class="block card-content">
+          <b-tab-item label="Text">
+            <section>
+              <textarea placeholder='What’s on your mind?' class='composeText' style='width: 100%; height: 20vmax;'></textarea>
+              <button ref="postButton" @click="closeComposePanel" class='button is-medium is-primary'>Post</button>
+            </section>
+          </b-tab-item>
+          <b-tab-item label="Photo"></b-tab-item>
+        </b-tabs>
+    </div>
+    </b-modal>
 
   </div>
 </template>
 
 <script>
+
 export default {
   computed: {
     name () { return this.$store.state.name },
     bio () { return this.$store.state.bio }
   },
+  data() {
+    return {
+      isComposePanelModalActive: false
+    }
+  },
   methods: {
     openComposePanel: function (event) {
-      this.$refs.compose.open()
+      this.isComposePanelModalActive = true
+    },
+    closeComposePanel: function (event) {
+      this.isComposePanelModalActive = false
     }
   }
 }
@@ -162,14 +172,20 @@ nav {
   font-size: 3vmax;
 }
 
-.sweet-content .tabs {
+.modal .tabs {
   font-size: 2vmax;
 }
 
-.sweet-content nav {
+.modal nav {
   margin-top: 0;
 }
 
+/* The component doesn’t set its own z-index high. We need to so as to
+   cover the Add button. */
+.modal {
+  z-index: 9001;
+}
+
 .header-material {
   text-align: center;
   z-index: 2;
@@ -259,4 +275,14 @@ header {
   bottom: 2vmax;
   right: 2vmax;
 }
+
+.composeText {
+  font-size: 2vmax;
+}
+
+.button.is-medium {
+  font-size: 2vmax;
+  float: right;
+}
+
 </style>