Update automation page with new form styles

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;

packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte

@@ -30,10 +30,8 @@
 {#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]}>
+        <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>
@@ -47,29 +45,17 @@
           type="string"
           {bindings} />
       {/if}
-      </div>
     {/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>

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);