From a2a4a2d21de22b89842032de21d2b0e70fee0e2d Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 22:42:31 +0000
Subject: [PATCH 1/2] Minor ui updates

Padding and spacing improved
---
 packages/builder/package.json                 |  2 +-
 .../PropertiesPanel/BindingPanel.svelte       | 21 +++++++-------
 .../EventsEditor/EventEditor.svelte           | 28 ++++++++-----------
 .../EventsEditor/EventEditorModal.svelte      |  2 +-
 packages/builder/yarn.lock                    |  8 +++---
 5 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 41b98750e9..52fa846db3 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.54.1",
+    "@budibase/bbui": "^1.55.2",
     "@budibase/client": "^0.5.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/string-templates": "^0.5.3",
diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index 612dc9caa5..7e91759764 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -26,10 +26,8 @@
 <div class="drawer-contents">
   <div class="container" data-cy="binding-dropdown-modal">
     <div class="list">
-      <Heading extraSmall>Objects</Heading>
-      <Spacer medium />
       {#if context}
-        <Heading extraSmall>Tables</Heading>
+        <Heading extraSmall>Columns</Heading>
         <ul>
           {#each context as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
@@ -53,8 +51,8 @@
       <TextArea
         thin
         bind:value
-        placeholder="Add text, or click the objects on the left to add them to the
-        textbox." />
+        placeholder="Add text, or click the objects on the left to add them to
+        the textbox." />
     </div>
   </div>
 </div>
@@ -63,15 +61,14 @@
   .container {
     height: 100%;
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 260px 1fr;
   }
   .list {
-    width: 150px;
-    border-right: 1.5px solid var(--grey-4);
-    padding: var(--spacing-s);
+    border-right: var(--border-light);
+    padding: var(--spacing-l);
   }
   .text {
-    padding: var(--spacing-s);
+    padding: var(--spacing-xl);
     font-family: var(--font-sans);
   }
   .text :global(p) {
@@ -89,10 +86,12 @@
     font-family: var(--font-sans);
     font-size: var(--font-size-xs);
     color: var(--grey-7);
-    padding: var(--spacing-s) 0;
+    padding: var(--spacing-m) 0;
     margin: auto 0px;
     align-items: center;
     cursor: pointer;
+    border: var(--border-light);
+    border-width: 1px 0 1px 0;
   }
 
   li:hover {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index f15b87d867..701e416c2f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -1,10 +1,10 @@
 <script>
   import {
     Button,
-    TextButton,
     Body,
     DropdownMenu,
     ModalContent,
+    Spacer,
   } from "@budibase/bbui"
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
   import actionTypes from "./actions"
@@ -48,12 +48,11 @@
   <div class="actions-list">
     <div>
       <div bind:this={addActionButton}>
-        <TextButton text small blue on:click={addActionDropdown.show}>
-          <div style="height: 20px; width: 20px;">
-            <AddIcon />
-          </div>
+        <Spacer small />
+        <Button wide secondary on:click={addActionDropdown.show}>
           Add Action
-        </TextButton>
+        </Button>
+        <Spacer medium />
       </div>
       <DropdownMenu
         bind:this={addActionDropdown}
@@ -74,13 +73,12 @@
         <div class="action-container">
           <div class="action-header" on:click={selectAction(action)}>
             <span class:selected={action === selectedAction}>
-              {index + 1}.
-              {action[EVENT_TYPE_KEY]}
+              {index + 1}. {action[EVENT_TYPE_KEY]}
             </span>
           </div>
           <i
             class="ri-close-fill"
-            style="margin-left: var(--spacing-m);"
+            style="margin-left: auto;"
             on:click={() => deleteAction(index)} />
         </div>
       {/each}
@@ -107,7 +105,7 @@
 
   .action-header > span {
     margin-bottom: var(--spacing-m);
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-xs);
   }
 
   .action-header > span:hover,
@@ -123,7 +121,7 @@
 
   .available-action {
     padding: var(--spacing-s);
-    font-size: var(--font-size-m);
+    font-size: var(--font-size-xs);
     cursor: pointer;
   }
 
@@ -135,7 +133,7 @@
     height: 40vh;
     display: grid;
     grid-gap: var(--spacing-m);
-    grid-template-columns: 15% 1fr;
+    grid-template-columns: 260px 1fr;
     grid-auto-flow: column;
     min-height: 0;
     padding-top: 0;
@@ -143,15 +141,13 @@
   }
 
   .action-container {
-    border: var(--border-light);
-    border-width: 1px 0 0 0;
+    border-top: var(--border-light);
     display: flex;
     align-items: center;
   }
 
   .selected-action-container {
-    padding-bottom: var(--spacing-s);
-    padding-top: var(--spacing-s);
+    padding: var(--spacing-xl);
   }
 
   a {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditorModal.svelte
index ac976317ec..97c6a310fc 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditorModal.svelte
@@ -156,7 +156,7 @@
   }
 
   .available-action {
-    padding: var(--spacing-s);
+    padding: var(--spacing-m);
     font-size: var(--font-size-m);
     cursor: pointer;
   }
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 85bbdab526..fb269dda5e 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.54.1":
-  version "1.54.1"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.1.tgz#ad0439c0be6a4dc818cd9dacda00f053b0daa9d5"
-  integrity sha512-ZY2OP/tF+ReMSyzZIGZV6wpQ4eIEzYGxZV3n+C+oNjzK5u3rwWPCDEVDlZgJSqJ61z+sEf2zuIyAh88lq9RTaA==
+"@budibase/bbui@^1.55.2":
+  version "1.55.2"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.55.2.tgz#be636e8b86b7e516a08eb626bb50c4b1f9774bf8"
+  integrity sha512-CevH/olxDFIko9uwYUpUTevPmpShrLwJSR7+wn/JetZERwhTwbLhOXzpsyXaK226qQ8vWhm0U31HRSKI1HwDDg==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

From 051a2875b7e1ecf33f8703a6c0d79bfbeef4bb1b Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 Jan 2021 09:44:58 +0000
Subject: [PATCH 2/2] Further spacing improvements

Spacing improvements
Red color applied to X hover
List of bindable objects is now scrollable without a visual of the scrollbar
---
 .../components/design/PropertiesPanel/BindingPanel.svelte  | 7 +++++++
 .../PropertyControls/EventsEditor/EventEditor.svelte       | 7 ++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index 7e91759764..8bfae51337 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -28,6 +28,7 @@
     <div class="list">
       {#if context}
         <Heading extraSmall>Columns</Heading>
+        <Spacer small />
         <ul>
           {#each context as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
@@ -66,7 +67,13 @@
   .list {
     border-right: var(--border-light);
     padding: var(--spacing-l);
+    overflow: auto;
   }
+
+  .list::-webkit-scrollbar {
+    display: none;
+  }
+
   .text {
     padding: var(--spacing-xl);
     font-family: var(--font-sans);
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 701e416c2f..86e5174473 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -115,7 +115,7 @@
   }
 
   .actions-list {
-    border: var(--border-light);
+    border-right: var(--border-light);
     padding: var(--spacing-s);
   }
 
@@ -160,4 +160,9 @@
   a:hover {
     color: var(--blue);
   }
+
+  i:hover {
+    color: var(--red);
+    cursor: pointer;
+  }
 </style>