From f3cc6aa28454ba2ad4c8d21a3b44aff1a255ba30 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 28 Mar 2022 16:56:42 +0100
Subject: [PATCH] Fix design of automation SchemaSetup

---
 .../automation/SetupPanel/SchemaSetup.svelte  | 53 ++-----------------
 1 file changed, 5 insertions(+), 48 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
index 730de6270a..71b10a3569 100644
--- a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Input, Select } from "@budibase/bbui"
+  import { Input, Select, Button } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()
@@ -62,9 +62,6 @@
 </script>
 
 <div class="root">
-  <div class="add-field">
-    <i class="ri-add-line" on:click={addField} />
-  </div>
   <div class="spacer" />
   {#each fieldsArray as field}
     <div class="field">
@@ -88,6 +85,7 @@
       />
     </div>
   {/each}
+  <Button quiet secondary icon="Add" on:click={addField}>Add field</Button>
 </div>
 
 <style>
@@ -103,52 +101,11 @@
 
   .field {
     max-width: 100%;
-    background-color: var(--grey-2);
     margin-bottom: var(--spacing-m);
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--grey-4);
     display: grid;
-    /*grid-template-rows: auto auto;
-    grid-template-columns: auto;*/
+    grid-template-columns: 1fr 1fr auto;
     position: relative;
-  }
-
-  .field :global(select) {
-    padding: var(--spacing-xs) 2rem var(--spacing-m) var(--spacing-s) !important;
-    font-size: var(--font-size-xs);
-    color: var(--grey-7);
-  }
-
-  .field :global(.pointer) {
-    padding-bottom: var(--spacing-m) !important;
-    color: var(--grey-2);
-  }
-
-  .field :global(input) {
-    padding: var(--spacing-m) var(--spacing-xl) var(--spacing-xs)
-      var(--spacing-m);
-    font-size: var(--font-size-s);
-    font-weight: bold;
-  }
-
-  .remove-field {
-    cursor: pointer;
-    color: var(--grey-6);
-    position: absolute;
-    top: var(--spacing-m);
-    right: 3px;
-  }
-
-  .remove-field:hover {
-    color: var(--black);
-  }
-
-  .add-field {
-    text-align: right;
-  }
-
-  .add-field > i {
-    cursor: pointer;
+    align-items: center;
+    gap: var(--spacing-m);
   }
 </style>