From 96ab51d9a69b9a571e5a629789cdf97695d3a456 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 30 Oct 2020 13:46:16 +0000
Subject: [PATCH] Standardise binding icon styles

---
 .../userInterface/BindableInput.svelte        | 35 ++++++++-----------
 .../userInterface/BindingDropdown.svelte      |  2 +-
 .../userInterface/PropertyControl.svelte      | 32 +++++++++--------
 3 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte
index bb73dfd80d..7a7a2cbb1d 100644
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/userInterface/BindableInput.svelte
@@ -18,9 +18,9 @@
 
 <div class="container" bind:this={anchor}>
   <Input {...inputProps} bind:value />
-  <button on:click={popover.show}>
+  <div class="icon" on:click={popover.show}>
     <Icon name="edit" />
-  </button>
+  </div>
 </div>
 <GenericBindingPopover
   {anchor}
@@ -34,25 +34,18 @@
     position: relative;
   }
 
-  button {
+  .icon {
+    right: 2px;
+    top: 2px;
+    bottom: 2px;
     position: absolute;
-    background: none;
-    border: none;
-    border-radius: 50%;
-    height: 24px;
-    width: 24px;
-    background: var(--grey-4);
-    right: var(--spacing-s);
-    bottom: 5px;
-  }
-  button:hover {
-    background: var(--grey-5);
-    cursor: pointer;
-  }
-  button :global(svg) {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%) !important;
+    align-items: center;
+    display: flex;
+    box-sizing: border-box;
+    padding-left: var(--spacing-xs);
+    border-left: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border-top-right-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-m);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index 10ccbd4256..e62f76e4b7 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -86,7 +86,7 @@
   .controls {
     margin-top: var(--spacing-m);
     display: grid;
-    align-items: baseline;
+    align-items: center;
     grid-gap: var(--spacing-l);
     grid-template-columns: 1fr auto auto;
   }
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 7491e83fbc..baf4b81dac 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -95,9 +95,12 @@
       name={key} />
   </div>
   {#if bindable && control === Input && !key.startsWith('_')}
-    <button data-cy={`${key}-binding-button`} on:click={dropdown.show}>
+    <div
+      class="icon"
+      data-cy={`${key}-binding-button`}
+      on:click={dropdown.show}>
       <Icon name="edit" />
-    </button>
+    </div>
   {/if}
 </div>
 {#if control == Input}
@@ -139,18 +142,19 @@
     padding-left: 2px;
     overflow: hidden;
   }
-  button {
+
+  .icon {
+    right: 2px;
+    top: 2px;
+    bottom: 2px;
     position: absolute;
-    cursor: pointer;
-    background: none;
-    border: none;
-    height: 90%;
-    width: 2rem;
-    background: var(--grey-2);
-    right: 4px;
-    --spacing-s: 0;
-    border-left: 0.5px solid var(--grey-3);
-    outline-color: var(--blue);
-    color: var(--ink);
+    align-items: center;
+    display: flex;
+    box-sizing: border-box;
+    padding-left: var(--spacing-xs);
+    border-left: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border-top-right-radius: var(--border-radius-m);
+    border-bottom-right-radius: var(--border-radius-m);
   }
 </style>