From f6466711ded0ff958999c4e1859ae0a6f29c00d0 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 29 May 2020 10:45:19 +0100
Subject: [PATCH] Tidyup

---
 .../userInterface/OptionSelect.svelte         | 26 ++++++++++---------
 .../userInterface/SettingsView.svelte         |  4 ---
 packages/builder/src/helpers.js               | 13 ++++++++++
 3 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 packages/builder/src/helpers.js

diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index 8ac0ca4184..197d3e6a0d 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -1,7 +1,6 @@
 <script>
   import { onMount, beforeUpdate } from "svelte"
-  //Create utilities and move this in
-  import { buildStyle } from "../../../../standard-components/src/buildStyle.js"
+  import {buildStyle} from "../../helpers.js"
   export let options = []
   export let value = ""
   export let styleBindingProperty
@@ -73,8 +72,8 @@
   }
 
   $: menuStyle = buildStyle({
-    maxHeight,
-    transformOrigin: `center ${positionSide}`,
+    "max-height": maxHeight,
+    "transform-origin": `center ${positionSide}`,
     [positionSide]: "32px",
   })
 
@@ -142,8 +141,7 @@
   .bb-select-container {
     position: relative;
     outline: none;
-    margin: 5px;
-    width: 164px;
+    width: 189px;
     height: 32px;
     cursor: pointer;
   }
@@ -160,11 +158,16 @@
   .bb-select-anchor > span {
     color: #565a66;
     font-weight: 500;
-    flex: 1;
+    width: 145px;
+    overflow-x: hidden;
   }
 
   .bb-select-anchor > i {
-    flex: 0 0 20px;
+    transition: transform 0.13s ease;
+    transform-origin: center;
+    width: 25px;
+    height: 25px;
+    text-align: center;
   }
 
   .selected {
@@ -178,7 +181,7 @@
     box-sizing: border-box;
     flex-direction: column;
     opacity: 0;
-    width: 164px;
+    width: 189px;
     z-index: 2;
     color: #808192;
     font-weight: 500;
@@ -211,8 +214,7 @@
     cursor: pointer;
   }
 
-  i {
-    transition: transform 0.13s ease;
-    transform-origin: center;
+  li:hover {
+    background-color:#e6e6e6
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index e5b997b8aa..36b2ab9c75 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -3,7 +3,6 @@
   import InputGroup from "../common/Inputs/InputGroup.svelte"
   import Colorpicker from "../common/Colorpicker.svelte"
   import { excludeProps } from "./propertyCategories.js"
-  import OptionSelectNew from "./OptionSelectNew.svelte"
 
   export let panelDefinition = []
   export let componentDefinition = {}
@@ -17,9 +16,6 @@
   }
 </script>
 
-<OptionSelectNew
-  options={['arial enjfhewhfhw iejfiewj ewfnew', 'comicsans', 'tachoma', 'bla']} />
-
 {#if panelDefinition.length > 0}
   {#each panelDefinition as definition}
     {#if propExistsOnComponentDef(definition.key)}
diff --git a/packages/builder/src/helpers.js b/packages/builder/src/helpers.js
new file mode 100644
index 0000000000..ee2053d8e4
--- /dev/null
+++ b/packages/builder/src/helpers.js
@@ -0,0 +1,13 @@
+export const buildStyle = styles => {
+  let str = ""
+  for (let s in styles) {
+    if (styles[s]) {
+      str += `${s}: ${styles[s]}; `
+    }
+  }
+  return str
+}
+
+export const convertCamel = str => {
+  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+}