Merge pull request #419 from Budibase/colorpicker/bugfixes

Minor bug fixes

packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte

@@ -154,7 +154,7 @@
   }
 
   function removeSwatch(idx) {
-    let removedSwatch = swatches.splice(idx, 1);
+    let [removedSwatch] = swatches.splice(idx, 1);
     swatches = swatches;
     dispatch("removeswatch", removedSwatch);
     if (swatchesSetFromLocalStore) {

packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte

@@ -114,8 +114,6 @@
     cursor: pointer;
     border-radius: 3px;
     border: 1px solid #dedada;
-    position: absolute;
-    left: 110px;
   }
 
   .preview-error {

packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte

@@ -1,39 +1,15 @@
 <script>
-  import { createEventDispatcher } from "svelte"
-  import { fade } from "svelte/transition"
-  import CheckedBackground from "./CheckedBackground.svelte"
-  import { keyevents } from "../actions"
+  import { createEventDispatcher } from "svelte";
+  import { fade } from "svelte/transition";
+  import CheckedBackground from "./CheckedBackground.svelte";
+  import { keyevents } from "../actions";
 
-  export let hovered = false
-  export let color = "#fff"
+  export let hovered = false;
+  export let color = "#fff";
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher();
 </script>
 
-<div class="space">
-  <CheckedBackground borderRadius="6px">
-    <div
-      tabindex="0"
-      use:keyevents={{ Enter: () => dispatch('click') }}
-      in:fade
-      title={color}
-      class="swatch"
-      style={`background: ${color};`}
-      on:click|self
-      on:mouseover={() => (hovered = true)}
-      on:mouseleave={() => (hovered = false)}>
-      {#if hovered}
-        <div
-          in:fade
-          class="remove-icon"
-          on:click|self={() => dispatch('removeswatch')}>
-          <span on:click|self={() => dispatch('removeswatch')}>&times;</span>
-        </div>
-      {/if}
-    </div>
-  </CheckedBackground>
-</div>
-
 <style>
   .swatch {
     position: relative;
@@ -50,18 +26,43 @@
     padding: 3px 5px;
   }
 
-  .remove-icon {
+  span {
+    cursor: pointer;
     position: absolute;
-    right: 0;
     top: -5px;
     right: -4px;
-    width: 10px;
-    height: 10px;
+    background: #800000;
+    color: white;
+    font-size: 12px;
     border-radius: 50%;
-    background-color: #800000;
-    color: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    text-align: center;
+    width: 13px;
+    height: 13px;
+  }
+
+  span:after {
+    content: "\00d7";
+    position: relative;
+    left: 0;
+    bottom: 3px;
   }
 </style>
+
+<div class="space">
+  <CheckedBackground borderRadius="6px">
+    <div
+      tabindex="0"
+      use:keyevents={{ Enter: () => dispatch('click') }}
+      in:fade
+      title={color}
+      class="swatch"
+      style={`background: ${color};`}
+      on:mouseover={() => (hovered = true)}
+      on:mouseleave={() => (hovered = false)}
+      on:click|self>
+      {#if hovered}
+        <span in:fade on:click={() => dispatch('removeswatch')} />
+      {/if}
+    </div>
+  </CheckedBackground>
+</div>