From 49ccf8ebc8ed80e2ebf4f7a962537e0090d90980 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 30 Sep 2020 09:28:18 +0100
Subject: [PATCH] Update automation page with new form styles

---
 .../SetupPanel/AutomationBlockSetup.svelte    | 11 +---
 .../ParamInputs/RecordSelector.svelte         | 50 +++++++------------
 .../userInterface/BindableInput.svelte        |  4 +-
 3 files changed, 21 insertions(+), 44 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 950df5cd19..808001bb91 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -48,7 +48,7 @@
   <div class="block-label">{block.name}</div>
   {#each inputs as [key, value]}
     <div class="bb-margin-xl block-field">
-      <div class="field-label">{value.title}</div>
+      <Label extraSmall grey>{value.title}</Label>
       {#if value.type === 'string' && value.enum}
         <Select bind:value={block.inputs[key]} thin secondary>
           <option value="">Choose an option</option>
@@ -80,15 +80,6 @@
     display: grid;
   }
 
-  .field-label {
-    color: var(--ink);
-    margin-bottom: 12px;
-    display: flex;
-    font-size: 14px;
-    font-weight: 500;
-    font-family: sans-serif;
-  }
-
   .block-label {
     font-weight: 500;
     font-size: 14px;
diff --git a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte b/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte
index 87ff341f3b..d002aaa0a1 100644
--- a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte
@@ -30,46 +30,32 @@
 {#if schemaFields.length}
   <div class="schema-fields">
     {#each schemaFields as [field, schema]}
-      <div class="capitalise">
-        {#if schemaHasOptions(schema)}
-          <div class="field-label">{field}</div>
-          <Select thin secondary bind:value={value[field]}>
-            <option value="">Choose an option</option>
-            {#each schema.constraints.inclusion as option}
-              <option value={option}>{option}</option>
-            {/each}
-          </Select>
-        {:else if schema.type === 'string' || schema.type === 'number'}
-          <BindableInput
-            thin
-            bind:value={value[field]}
-            label={field}
-            type="string"
-            {bindings} />
-        {/if}
-      </div>
+      {#if schemaHasOptions(schema)}
+        <Select label={field} thin secondary bind:value={value[field]}>
+          <option value="">Choose an option</option>
+          {#each schema.constraints.inclusion as option}
+            <option value={option}>{option}</option>
+          {/each}
+        </Select>
+      {:else if schema.type === 'string' || schema.type === 'number'}
+        <BindableInput
+          thin
+          bind:value={value[field]}
+          label={field}
+          type="string"
+          {bindings} />
+      {/if}
     {/each}
   </div>
 {/if}
 
 <style>
-  .field-label {
-    color: var(--ink);
-    margin-bottom: 12px;
-    display: flex;
-    font-size: 14px;
-    font-weight: 500;
-    font-family: sans-serif;
-  }
-
-  .capitalise :global(label),
-  .field-label {
-    text-transform: capitalize;
-  }
-
   .schema-fields {
     display: grid;
     grid-gap: var(--spacing-xl);
     margin-top: var(--spacing-xl);
   }
+  .schema-fields :global(label) {
+    text-transform: capitalize;
+  }
 </style>
diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte
index 166c486fa1..5ba0798718 100644
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/userInterface/BindableInput.svelte
@@ -42,8 +42,8 @@
     height: 24px;
     width: 24px;
     background: var(--grey-4);
-    right: 7px;
-    bottom: 7px;
+    right: var(--spacing-s);
+    bottom: 9px;
   }
   button:hover {
     background: var(--grey-5);