Small UI update to the binding interface with automations

Heading fixed - size reduced. Spacing updating with the list section Placeholder added Link to docs added
6 years ago · d96ea9424c
2 changed files with 9 additions and 6 deletions
--- a/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
+++ b/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
@ -28,11 +28,12 @@
 <Popover {anchor} {align} bind:this={popover}>
  <div class="container">
    <div class="bindings">
-      <Label large>Available bindings</Label>
+      <Heading small>Available bindings</Heading>
      <div class="bindings__wrapper">
        <div class="bindings__list">
          {#each categories as [categoryName, bindings]}
            <Heading extraSmall>{categoryName}</Heading>
+            <Spacer extraSmall />
            {#each bindings as binding}
              <div class="binding" on:click={() => onClickBinding(binding)}>
                <span class="binding__label">{binding.label}</span>
@ -46,16 +47,17 @@
      </div>
    </div>
    <div class="editor">
-      <Heading large>Data binding</Heading>
-      <Spacer small />
+      <Heading small>Data binding</Heading>
      <Body small lh black>
        Binding connects one piece of data to another and makes it dynamic.
        Click the objects on the left to add them to the textbox.
      </Body>
-      <Spacer medium />
-      <TextArea thin bind:value placeholder="..." />
+      <TextArea
+        thin
+        bind:value
+        placeholder="Add options from the left, type text, or do both" />
      <div class="controls">
-        <a href="https://docs.budibase.com">
+        <a href="https://docs.budibase.com/design/binding">
          <Body small>Learn more about binding</Body>
        </a>
        <Button on:click={popover.hide} primary>Done</Button>
--- a/packages/builder/src/components/userInterface/ModelViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
@ -72,6 +72,7 @@
  }
  .dropdown {
    padding: var(--spacing-m) 0;
+    z-index: 99999999;
  }
  .title {
    padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);