From f2bc182c847306449e8ff6273d3b8f708da7d3c1 Mon Sep 17 00:00:00 2001
From: clairekuang <kuang.claire@gmail.com>
Date: Thu, 27 May 2021 08:45:57 +0100
Subject: [PATCH] =?UTF-8?q?styling=20=F0=9F=92=87=E2=80=8D=E2=99=80?=
 =?UTF-8?q?=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/GlobalsBuilder.vue         |  7 +-
 .../frontend/src/components/GlobalsEntry.vue  | 66 +++++++++++++------
 2 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index 8ef42acbe..a661e9738 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container>
-    <v-row>
-      <v-btn color="primary" small rounded @click="resetGlobals">reset</v-btn>
+    <v-row justify="end" class="ma-3">
+      <v-btn color="primary" small  @click="resetGlobals">reset globals</v-btn>
     </v-row>
     <globals-entry v-if="!$apollo.loading" :entries="globalsArray" />
   </v-container>
@@ -115,4 +115,5 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+</style>
diff --git a/packages/frontend/src/components/GlobalsEntry.vue b/packages/frontend/src/components/GlobalsEntry.vue
index 542a706b5..1764af757 100644
--- a/packages/frontend/src/components/GlobalsEntry.vue
+++ b/packages/frontend/src/components/GlobalsEntry.vue
@@ -3,28 +3,28 @@
     <draggable :list="entries" class="dragArea" tag="ul" group="globals" @change="log">
       <div v-for="(entry, index) in entries" :key="index">
         <div v-if="!entry.globals">
-          <v-row>
-            <v-col cols="12" sm="3">
-              <v-text-field v-model="entry.key" filled rounded />
-            </v-col>
-            <v-col cols="12" sm="8">
-              <v-text-field v-model="entry.value" />
-            </v-col>
-            <v-col cols="12" sm="1">
-              <v-btn icon x-small @click="fieldToObject(index, entry)">
-                <v-icon>mdi-cube-outline</v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
+            <v-row align="center">
+              <v-col cols="12" sm="4">
+                <v-text-field class="entry-key" v-model="entry.key" hint="property name" filled dense rounded/>
+              </v-col>
+              <v-col cols="12" sm="7">
+                <v-text-field v-model="entry.value" hint="property value" />
+              </v-col>
+              <v-col cols="12" sm="1">
+                <v-btn icon small @click="fieldToObject(index, entry)">
+                  <v-icon color="primary">mdi-cube-outline</v-icon>
+                </v-btn>
+              </v-col>
+            </v-row>
         </div>
-        <v-card v-if="entry.globals" rounded="lg" class="pa-4 mb-4" elevation="4">
-          <v-row>
+        <v-card v-if="entry.globals" rounded="lg" class="pa-3 my-6" elevation="4">
+          <v-row align="center">
             <v-col>
-              <b>{{ entry.key }}</b>
+               <v-card-title>{{ entry.key }}</v-card-title>
             </v-col>
             <v-col cols="auto">
-              <v-btn icon x-small @click="objectToField(entry)">
-                <v-icon>mdi-compare-horizontal</v-icon>
+              <v-btn icon small @click="objectToField(entry)">
+                <v-icon color="primary">mdi-compare-horizontal</v-icon>
               </v-btn>
             </v-col>
           </v-row>
@@ -34,12 +34,14 @@
     </draggable>
     <div
       slot="footer"
-      class="btn-group list-group-item"
+      class="btn-group list-group-item ml-6 mt-3"
       role="group"
       aria-label="Basic example"
       key="footer"
     >
-      <v-btn color="primary" rounded @click="addProp">Add</v-btn>
+      <v-btn color="primary" rounded fab small @click="addProp">
+        <v-icon>mdi-plus</v-icon>
+      </v-btn>
     </div>
   </v-container>
 </template>
@@ -89,4 +91,26 @@ export default {
   }
 }
 </script>
-<style scoped></style>
+<style scoped>
+.v-card{
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.v-card__title {
+  font-weight: 500;
+  font-size: large;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.v-text-field{
+font-weight: 300;
+}
+
+.entry-key{
+font-weight: 500;
+position: relative;
+top: 0.6rem;
+}
+
+</style>