From 01a4aba4fa4a9e9c7a1a149090ff813b6ee30c74 Mon Sep 17 00:00:00 2001
From: Simone Gotti <simone.gotti@gmail.com>
Date: Mon, 13 May 2019 17:03:27 +0200
Subject: [PATCH] projectgroupsettings: use panels to split different parts

---
 src/components/projectgroupsettings.vue | 75 +++++++++++++++----------
 1 file changed, 45 insertions(+), 30 deletions(-)

diff --git a/src/components/projectgroupsettings.vue b/src/components/projectgroupsettings.vue
index 48ceec4..8450287 100644
--- a/src/components/projectgroupsettings.vue
+++ b/src/components/projectgroupsettings.vue
@@ -1,38 +1,49 @@
 <template>
   <div>
-    <projectvars :variables="variables" :allvariables="allvariables"/>
-    <hr>
-    <div>
-      <h4 class="title is-4">Delete This Project Group</h4>
+    <nav class="panel">
+      <p class="panel-heading">Variables</p>
+      <div class="panel-block is-block">
+        <projectvars :variables="variables" :allvariables="allvariables"/>
+      </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>
 
-      <div class="message is-danger">
-        <div class="message-body">
-          This operation
-          <strong>CANNOT</strong> be undone.
-          This operation will remove
-          <strong>{{projectGroupPath}}</strong>
+            <div class="message is-danger">
+              <div class="message-body">
+                This operation
+                <strong>CANNOT</strong> be undone.
+                This operation will remove
+                <strong>{{projectGroupPath}}</strong>
+              </div>
+            </div>
+            <label class="label">
+              Please type the project group name for confirmation:
+              <span
+                class="has-text-danger"
+              >{{ projectGroupName }}</span>
+            </label>
+            <div class="field">
+              <input
+                v-model="projectGroupNameToDelete"
+                class="input"
+                type="email"
+                placeholder="Project Group name to delete"
+              >
+            </div>
+            <button
+              class="button is-danger"
+              @click="deleteProjectGroup()"
+              :disabled="!deleteButtonEnabled"
+            >Delete Project Group</button>
+          </div>
         </div>
       </div>
-      <label class="label">
-        Please type the project group name for confirmation:
-        <span
-          class="has-text-danger"
-        >{{ projectGroupName }}</span>
-      </label>
-      <div class="field">
-        <input
-          v-model="projectGroupNameToDelete"
-          class="input"
-          type="email"
-          placeholder="Project Group name to delete"
-        >
-      </div>
-      <button
-        class="button is-danger"
-        @click="deleteProjectGroup()"
-        :disabled="!deleteButtonEnabled"
-      >Delete Project Group</button>
-    </div>
+    </nav>
   </div>
 </template>
 
@@ -108,5 +119,9 @@ export default {
 
 <style scoped lang="scss">
 @import "@/css/_variables.scss";
+
+.panel-heading {
+  font-weight: 700;
+}
 </style>