more UI tidy up

packages/builder/src/builderStore/store.js

@@ -274,13 +274,13 @@ const saveCurrentNode = store => () => {
     const cloned = cloneDeep(s.currentNode)
     templateApi(s.hierarchy).constructNode(parentNode, cloned)
 
-    const newIndexOfchild = child => {
+    const newIndexOfChild = child => {
       if (child === cloned) return index
       const currentIndex = parentNode.children.indexOf(child)
       return currentIndex >= index ? currentIndex + 1 : currentIndex
     }
 
-    parentNode.children = pipe(parentNode.children, [sortBy(newIndexOfchild)])
+    parentNode.children = pipe(parentNode.children, [sortBy(newIndexOfChild)])
 
     if (!existingNode && s.currentNode.type === "record") {
       const defaultIndex = templateApi(s.hierarchy).getNewIndexTemplate(

packages/builder/src/database/ActionsHeader.svelte

@@ -19,9 +19,11 @@
 </script>
 
 <div class="root" style="left: {left}">
-
   <ButtonGroup>
-    <ActionButton color="secondary" grouped on:click={store.saveCurrentNode}>
+    <ActionButton
+      color="secondary"
+      grouped
+      on:click={store.saveCurrentNode}>
       {#if $store.currentNodeIsNew}Create{:else}Update{/if}
     </ActionButton>
 

packages/builder/src/nav/HierarchyRow.svelte

@@ -9,10 +9,11 @@
   let navActive = ""
   $: icon = type === "index" ? "list" : "file"
 
-  store.subscribe(s => {
-    if (s.currentNode)
+  store.subscribe(state => {
+    if (state.currentNode) {
       navActive =
-        s.activeNav === "database" && node.nodeId === s.currentNode.nodeId
+        state.activeNav === "database" && node.nodeId === state.currentNode.nodeId
+    }
   })
 </script>
 

packages/builder/src/userInterface/CodeEditor.svelte

@@ -1,7 +1,7 @@
 <script>
   import { store } from "../builderStore/store"
   import UIkit from "uikit"
-  import Button from "../common/Button.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import ButtonGroup from "../common/ButtonGroup.svelte"
   import CodeMirror from "codemirror"
   import "codemirror/mode/javascript/javascript.js"
@@ -74,12 +74,14 @@
       </div>
     </div>
 
-    <ButtonGroup style="float: right;">
-      <Button color="primary" grouped on:click={save}>Save</Button>
-      <Button color="tertiary" grouped on:click={cancel}>Close</Button>
+    <div class="uk-modal-footer">
+      <ButtonGroup>
+        <ActionButton primary on:click={save}>Save</ActionButton>
+        <ActionButton alert on:click={cancel}>Close</ActionButton>
       </ButtonGroup>
     </div>
   </div>
+</div>
 
 <style>
   h3 {