projectsettings: use panels to split different part

src/components/projectsettings.vue

@@ -1,7 +1,14 @@
 <template>
   <div>
+    <nav class="panel">
+      <p class="panel-heading">Variables</p>
+      <div class="panel-block is-block">
         <projectvars :variables="variables" :allvariables="allvariables"/>
-    <hr>
+      </div>
+    </nav>
+    <nav class="panel is-danger">
+      <p class="panel-heading is-danger">Danger Zone</p>
+      <div class="panel-block is-block">
         <div>
           <h4 class="title is-4">Delete This Project</h4>
 
@@ -34,6 +41,8 @@
           >Delete Project</button>
         </div>
       </div>
+    </nav>
+  </div>
 </template>
 
 <script>
@@ -106,4 +115,8 @@ export default {
 
 <style scoped lang="scss">
 @import "@/css/_variables.scss";
+
+.panel-heading {
+  font-weight: 700;
+}
 </style>