projectgroupsettings: use panels to split different parts

src/components/projectgroupsettings.vue

@@ -1,7 +1,15 @@
 <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>
           <div>
             <h4 class="title is-4">Delete This Project Group</h4>
 
@@ -34,6 +42,9 @@
             >Delete Project Group</button>
           </div>
         </div>
+      </div>
+    </nav>
+  </div>
 </template>
 
 <script>
@@ -108,5 +119,9 @@ export default {
 
 <style scoped lang="scss">
 @import "@/css/_variables.scss";
+
+.panel-heading {
+  font-weight: 700;
+}
 </style>