style abstraction

packages/builder/src/App.svelte

@@ -5,6 +5,7 @@
   import { store, initialise } from "./builderStore"
   import { onMount } from "svelte"
   import IconButton from "./common/IconButton.svelte"
+  import Spinner from "./common/Spinner.svelte"
 
   let init = initialise()
 </script>
@@ -12,9 +13,9 @@
 <main>
 
   {#await init}
-
+    <div class="spinner-container">
-    <h1>loading</h1>
+      <Spinner />
-
+    </div>
   {:then result}
 
     {#if $store.hasAppPackage}
@@ -52,4 +53,13 @@
     bottom: 25px;
     right: 25px;
   }
+
+  .spinner-container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
 </style>

packages/builder/src/accessLevels/AccessLevelView.svelte

@@ -4,6 +4,7 @@
   import Checkbox from "../common/Checkbox.svelte"
   import ButtonGroup from "../common/ButtonGroup.svelte"
   import Button from "../common/Button.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import { validateAccessLevels } from "../common/core"
   import ErrorsBox from "../common/ErrorsBox.svelte"
 
@@ -64,7 +65,7 @@
 
   <form class="uk-form-horizontal">
 
-    <Textbox label="Name" bind:text={clonedLevel.name} />
+    <Textbox label="Access Level Name" bind:text={clonedLevel.name} />
 
     {#each permissionMatrix as permission}
       <div>
@@ -78,10 +79,10 @@
   </form>
 
   <ButtonGroup style="margin-top: 10px">
-    <Button color="primary" grouped on:click={save}>Save</Button>
+    <ActionButton primary grouped on:click={save}>Save</ActionButton>
-    <Button color="secondary" grouped on:click={() => onFinished()}>
+    <ActionButton alert grouped on:click={() => onFinished()}>
       Cancel
-    </Button>
+    </ActionButton>
   </ButtonGroup>
 
 </div>

packages/builder/src/accessLevels/AccessLevelsRoot.svelte

@@ -1,6 +1,7 @@
 <script>
   import ButtonGroup from "../common/ButtonGroup.svelte"
   import Button from "../common/Button.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import { store } from "../builderStore"
   import { generateFullPermissions, getNewAccessLevel } from "../common/core"
   import getIcon from "../common/icon"
@@ -47,11 +48,10 @@
 </script>
 
 <div class="root">
-
   <ButtonGroup>
-    <Button grouped color="secondary" on:click={createNewLevel}>
+    <ActionButton primary on:click={createNewLevel}>
       Create New Access Level
-    </Button>
+    </ActionButton>
   </ButtonGroup>
 
   {#if $store.accessLevels}

packages/builder/src/actionsAndTriggers/ActionView.svelte

@@ -1,6 +1,7 @@
 <script>
   import Textbox from "../common/Textbox.svelte"
   import Button from "../common/Button.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import ButtonGroup from "../common/ButtonGroup.svelte"
   import { cloneDeep, filter, keys, map, isUndefined } from "lodash/fp"
   import ErrorsBox from "../common/ErrorsBox.svelte"
@@ -10,16 +11,15 @@
   export let action
   export let onFinished = action => {}
   export let allActions
-  export let isNew = true
 
   let optKey = ""
   let optValue = ""
 
   let clonedAction = cloneDeep(action)
-  let initialOptions = pipe(action.initialOptions, [
+  let initialOptions = pipe(
-    keys,
+    action.initialOptions,
-    map(k => ({ key: k, value: action.initialOptions[k] })),
+    [keys, map(k => ({ key: k, value: action.initialOptions[k] }))]
-  ])
+  )
   let errors = []
 
   const addNewOption = () => {
@@ -44,17 +44,26 @@
   const removeOption = opt => {
     if (opt) {
       delete clonedAction.initialOptions[opt.key]
-      initialOptions = pipe(initialOptions, [filter(o => o.key !== opt.key)])
+      initialOptions = pipe(
+        initialOptions,
+        [filter(o => o.key !== opt.key)]
+      )
     }
   }
 
   const save = () => {
     const newActionsList = [
-      ...pipe(allActions, [filter(a => a !== action)]),
+      ...pipe(
+        allActions,
+        [filter(a => a !== action)]
+      ),
       clonedAction,
     ]
 
-    errors = pipe(newActionsList, [validateActions, map(e => e.error)])
+    errors = pipe(
+      newActionsList,
+      [validateActions, map(e => e.error)]
+    )
 
     if (errors.length === 0) onFinished(clonedAction)
   }
@@ -89,9 +98,7 @@
         class="uk-input uk-width-1-4 uk-margin-right"
         placeholder="value"
         bind:value={optValue} />
-      <Button color="primary-outline uk-width-1-4" on:click={addNewOption}>
+      <ActionButton primary on:click={addNewOption}>Add</ActionButton>
-        Add
-      </Button>
     </div>
     <div style="margin-top: 10px">
       {#each initialOptions as option}
@@ -107,11 +114,12 @@
     </div>
   </div>
 
+  <div class="uk-modal-footer uk-text-right">
     <ButtonGroup>
-    <Button color="secondary" grouped on:click={save}>Save</Button>
+      <ActionButton primary grouped on:click={save}>Save</ActionButton>
-    <Button color="tertiary" grouped on:click={cancel}>Cancel</Button>
+      <ActionButton alert grouped on:click={cancel}>Cancel</ActionButton>
     </ButtonGroup>
-
+  </div>
 </div>
 
 <style>

packages/builder/src/actionsAndTriggers/Actions.svelte

@@ -43,7 +43,7 @@
   }
 </script>
 
-<h3 class="title">Actions</h3>
+<h3 class="budibase__title--3">Actions</h3>
 
 {#if actionsArray}
   <table class="fields-table uk-table uk-table-small uk-table-striped">
@@ -99,11 +99,6 @@
     color: var(--secondary75);
   }
 
-  .title {
-    margin: 3rem 0rem 0rem 0rem;
-    font-weight: 700;
-  }
-
   .table-content {
     font-weight: 500;
     font-size: 0.9rem;

packages/builder/src/actionsAndTriggers/ActionsAndTriggersRoot.svelte

@@ -2,6 +2,7 @@
   import getIcon from "../common/icon"
   import { store } from "../builderStore"
   import Button from "../common/Button.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import ButtonGroup from "../common/ButtonGroup.svelte"
   import Actions from "./Actions.svelte"
   import Triggers from "./Triggers.svelte"
@@ -83,12 +84,12 @@
 <div class="root">
   <div class="actions-header">
     <ButtonGroup>
-      <Button color="secondary" grouped on:click={newAction}>
+      <ActionButton color="secondary" grouped on:click={newAction}>
         Create New Action
-      </Button>
+      </ActionButton>
-      <Button color="tertiary" grouped on:click={newTrigger}>
+      <ActionButton color="tertiary" grouped on:click={newTrigger}>
         Create New Trigger
-      </Button>
+      </ActionButton>
     </ButtonGroup>
   </div>
 
@@ -121,6 +122,7 @@
 
   .actions-header {
     flex: 0 1 auto;
+    margin-bottom: 10px;
   }
 
   .node-view {

packages/builder/src/actionsAndTriggers/TriggerView.svelte

@@ -1,6 +1,7 @@
 <script>
   import Textbox from "../common/Textbox.svelte"
   import Button from "../common/Button.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import Dropdown from "../common/Dropdown.svelte"
   import ButtonGroup from "../common/ButtonGroup.svelte"
   import CodeArea from "../common/CodeArea.svelte"
@@ -22,7 +23,10 @@
   let cancel = () => onFinished()
   let save = () => {
     const newTriggersList = [
-      ...pipe(allTriggers, [filter(t => t !== trigger)]),
+      ...pipe(
+        allTriggers,
+        [filter(t => t !== trigger)]
+      ),
       clonedTrigger,
     ]
 
@@ -59,11 +63,12 @@
 
   </form>
 
+  <div class="uk-modal-footer uk-text-right">
     <ButtonGroup>
-    <Button color="primary" grouped on:click={save}>Save</Button>
+      <ActionButton primary on:click={save}>Save</ActionButton>
-    <Button color="tertiary" grouped on:click={cancel}>Cancel</Button>
+      <ActionButton alert on:click={cancel}>Cancel</ActionButton>
     </ButtonGroup>
-
+  </div>
 </div>
 
 <style>

packages/builder/src/actionsAndTriggers/Triggers.svelte

@@ -23,7 +23,7 @@
   }
 </script>
 
-<h3 class="title">Triggers</h3>
+<h3 class="budibase__title--3">Triggers</h3>
 
 {#if $store.triggers}
   <table class="fields-table uk-table uk-table-small uk-table-striped">

packages/builder/src/common/ActionButton.svelte

@@ -29,12 +29,12 @@
   }
 
   .button {
-    font-size: 18px;
+    font-size: 14px;
     font-weight: bold;
     border-radius: 5px;
     border: none;
-    width: 167px;
+    width: 120px;
-    height: 64px;
+    height: 45px;
   }
 
   .button:hover {

packages/builder/src/common/ButtonGroup.svelte

@@ -8,18 +8,9 @@
 
 <style>
   .root {
-    display: flex;
+    display: grid;
-  }
+    grid-auto-flow: column;
-
+    grid-gap: 5px;
-  .root:last-child {
+    width: 10%;
-    border-radius: 0 var(--borderradius) var(--borderradius) 0;
-  }
-
-  .root:first-child {
-    border-radius: var(--borderradius) 0 0 var(--borderradius);
-  }
-
-  .root:not(:first-child):not(:last-child) {
-    border-radius: 0;
   }
 </style>

packages/builder/src/common/CodeArea.svelte

@@ -4,7 +4,7 @@
   export let label = ""
 </script>
 
-<div>{label}</div>
+<div class="header">{label}</div>
 <textarea class="uk-textarea" bind:value={text} />
 
 <style>

packages/builder/src/common/ConfirmDialog.svelte

@@ -1,5 +1,6 @@
 <script>
   import Button from "./Button.svelte"
+  import ActionButton from "./ActionButton.svelte"
   import ButtonGroup from "./ButtonGroup.svelte"
   import UIkit from "uikit"
 
@@ -18,7 +19,7 @@ export const hide = () => {
     UIkit.modal(theModal).hide()
   }
 
-let theModal;
+  let theModal
 
   const cancel = () => {
     hide()
@@ -29,13 +30,11 @@ const ok = () => {
     hide()
     onOk()
   }
-
 </script>
 
-
 <div id="my-id" uk-modal bind:this={theModal}>
   <div class="uk-modal-dialog">
-    <button class="uk-modal-close-default" type="button" uk-close></button>
+    <button class="uk-modal-close-default" type="button" uk-close />
     <div class="uk-modal-header">
       <h2 class="uk-modal-title">{title}</h2>
     </div>
@@ -44,14 +43,9 @@ const ok = () => {
     </div>
     <div class="uk-modal-footer">
       <ButtonGroup>
-        <Button grouped color="primary" on:click={ok}>
+        <ActionButton primary on:click={ok}>{okText}</ActionButton>
-          {okText}
+        <ActionButton error on:click={cancel}>{cancelText}</ActionButton>
-        </Button>
-        <Button grouped color="secondary" on:click={cancel}>
-          {cancelText}
-        </Button>
       </ButtonGroup>
     </div>
   </div>
 </div>
-

packages/builder/src/common/Dropdown.svelte

@@ -1,5 +1,6 @@
 <script>
   import { createEventDispatcher } from "svelte"
+  import Select from "../common/Select.svelte";
 
   export let selected
   export let label
@@ -17,7 +18,7 @@
   <label class="uk-form-label">{label}</label>
   <div class="uk-form-controls">
     {#if multiple}
-      <select
+      <Select
         class="uk-select uk-form-width-{width} uk-form-{size}"
         multiple
         bind:value={selected}
@@ -27,9 +28,9 @@
             {!textMember ? option : textMember(option)}
           </option>
         {/each}
-      </select>
+      </Select>
     {:else}
-      <select
+      <Select
         class="uk-select uk-form-width-{width} uk-form-{size}"
         bind:value={selected}
         on:change>
@@ -38,7 +39,7 @@
             {!textMember ? option : textMember(option)}
           </option>
         {/each}
-      </select>
+      </Select>
     {/if}
   </div>
 </div>

packages/builder/src/common/DropdownButton.svelte

@@ -17,7 +17,7 @@
     class="dropdown-content"
     style="display: {isDroppedDown ? 'inline-block' : 'none'}">
     {#each actions as action}
-      <div class="action-row" on:click={action.onclick}>{action.label}</div>
+      <div class="budibase__nav-item" on:click={action.onclick}>{action.label}</div>
     {/each}
   </div>
 

packages/builder/src/common/Modal.svelte

@@ -1,5 +1,6 @@
 <script>
   import UIkit from "uikit"
+  import ActionButton from "../common/ActionButton.svelte"
 
   export let isOpen = false
   export let onClosed = () => {}

packages/builder/src/common/Spinner.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let ratio = "4.5"
+</script>
+
+<span uk-spinner={`ratio: ${ratio}`} />

packages/builder/src/common/Textbox.svelte

@@ -13,7 +13,7 @@
   <label class="uk-form-label">{label}</label>
   <div class="uk-form-controls">
     <input
-      class="uk-input uk-form-width-{width} uk-form-{size}"
+      class="budibase__input"
       class:uk-form-danger={hasError}
       on:change
       bind:value={text}

packages/builder/src/database/ActionsHeader.svelte

@@ -1,5 +1,6 @@
 <script>
   import Button from "../common/Button.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import ButtonGroup from "../common/ButtonGroup.svelte"
   import { store } from "../builderStore"
   import Modal from "../common/Modal.svelte"
@@ -20,14 +21,14 @@
 <div class="root" style="left: {left}">
 
   <ButtonGroup>
-    <Button color="secondary" grouped on:click={store.saveCurrentNode}>
+    <ActionButton color="secondary" grouped on:click={store.saveCurrentNode}>
       {#if $store.currentNodeIsNew}Create{:else}Update{/if}
-    </Button>
+    </ActionButton>
 
     {#if !$store.currentNodeIsNew}
-      <Button color="tertiary" grouped on:click={openConfirmDelete}>
+      <ActionButton alert grouped on:click={openConfirmDelete}>
         Delete
-      </Button>
+      </ActionButton>
     {/if}
   </ButtonGroup>
 
@@ -38,14 +39,14 @@
   {/if}
 
   <Modal bind:isOpen={confirmDelete}>
-    <div style="margin: 10px 0px 20px 0px">
+    <div class="actions-modal-body">
       Are you sure you want to delete {$store.currentNode.name} ?
     </div>
-    <div style="float:right">
+    <div class="uk-modal-footer uk-text-right">
-      <Button color="primary" on:click={deleteCurrentNode}>Yes</Button>
+      <ActionButton alert on:click={deleteCurrentNode}>Yes</ActionButton>
-      <Button color="secondary" on:click={() => (confirmDelete = false)}>
+      <ActionButton primary on:click={() => (confirmDelete = false)}>
         No
-      </Button>
+      </ActionButton>
     </div>
   </Modal>
 </div>
@@ -56,4 +57,11 @@
     width: 100%;
     align-items: right;
   }
+
+  .actions-modal-body {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 </style>

packages/builder/src/database/FieldView.svelte

@@ -7,6 +7,7 @@
   import ValuesList from "../common/ValuesList.svelte"
   import ErrorsBox from "../common/ErrorsBox.svelte"
   import Checkbox from "../common/Checkbox.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import DatePicker from "../common/DatePicker.svelte"
   import {
     cloneDeep,
@@ -141,18 +142,14 @@
         label="Max Length"
         bind:value={clonedField.typeOptions.maxLength} />
     {/if}
-
   </form>
 
-  <ButtonGroup style="float: right;">
+  <div class="uk-modal-footer uk-text-right">
-    <Button color="primary" grouped on:click={save}>Save</Button>
+    <ButtonGroup>
-    <Button color="tertiary" grouped on:click={() => onFinished(false)}>
+      <ActionButton primary on:click={save}>Save</ActionButton>
+      <ActionButton alert on:click={() => onFinished(false)}>
         Cancel
-    </Button>
+      </ActionButton>
     </ButtonGroup>
-
   </div>
-
+</div>
-<style>
-
-</style>

packages/builder/src/database/RecordView.svelte

@@ -94,7 +94,7 @@
 <div class="root">
 
   <form class="uk-form-horizontal">
-    <h3 class="settings-title">Settings</h3>
+    <h3 class="budibase__title--3">Settings</h3>
 
     <Textbox label="Name:" bind:text={record.name} on:change={nameChanged} />
     {#if !record.isSingle}
@@ -104,7 +104,7 @@
     <div class="recordkey">{record.nodeKey()}</div>
 
   </form>
-  <h3 class="title">
+  <h3 class="budibase__title--3">
     Fields
     <span class="add-field-button" on:click={newField}>
       {@html getIcon('plus')}
@@ -160,7 +160,7 @@
     </Modal>
   {/if}
 
-  <h3 class="title">Indexes</h3>
+  <h3 class="budibase__title--3">Indexes</h3>
 
   {#each record.indexes as index}
     <div class="index-container">
@@ -199,15 +199,6 @@
     padding: 2rem;
   }
 
-  .settings-title {
-    font-weight: 700;
-  }
-
-  .title {
-    margin: 3rem 0rem 0rem 0rem;
-    font-weight: 700;
-  }
-
   .recordkey {
     font-size: 14px;
     font-weight: 600;

packages/builder/src/global.css

@@ -101,3 +101,90 @@ h5 {
     font-size: 12pt;
     color: var(--darkslate);
 }
+
+
+/* Budibase Component Styles */
+.header {
+    font-size: 0.75rem;
+    color: #999;
+    text-transform: uppercase;
+    margin-top: 1rem;
+    font-weight: 500;
+}
+
+.budibase__title {
+    font-weight: 900;
+    font-size: 42px;
+}
+
+.budibase__title--2 {
+    font-weight: 700;
+    font-size: 32px;
+}
+
+.budibase__title--3 {
+    font-weight: 700;
+    font-size: 24px;
+}
+
+.budibase__title--4 {
+    font-weight: 700;
+    font-size: 18px;
+}
+
+.budibase__label--big {
+    font-weight: 400;
+    font-size: 14px;
+    opacity: 0.6;
+    text-transform: uppercase;
+}
+
+.budibase__label--medium {
+    font-weight: 500;
+    font-size: 12px;
+    opacity: 0.6;
+    text-transform: uppercase;
+}
+
+.budibase__label--small {
+    font-weight: 500;
+    font-size: 10px;
+    opacity: 0.6;
+    text-transform: uppercase;
+}
+
+.budibase__sub-heading {
+
+}
+
+.budibase__nav-item {
+    cursor: pointer;
+    padding: 0 7px 0 3px;
+    height: 35px;
+    margin: 5px 0;
+    border-radius: 0 5px 5px 0;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+}
+
+.budibase__nav-item.selected {
+    color: var(--button-text);
+    background: var(--background-button) !important;
+}
+
+.budibase__nav-item:hover {
+    background: #fafafa;
+}
+
+.budibase__input {
+    width: 250px;
+    height: 50px;
+    border-radius: 3px;
+    border: 1px solid #DBDBDB;
+    text-align: left;
+    letter-spacing: 0.7px;
+    color: #163057;
+    font-size: 16px;
+    padding-left: 5px;
+}

packages/builder/src/nav/BackendNav.svelte

@@ -105,9 +105,8 @@
   .nav-group-header {
     display: grid;
     grid-template-columns: [icon] auto [title] 1fr [button] auto;
-    padding: 2rem 1rem 0rem 1rem;
+    padding: 2rem 1rem 1rem 1rem;
     font-size: 0.9rem;
-    font-weight: bold;
   }
 
   .nav-group-header > div:nth-child(1) {
@@ -137,6 +136,7 @@
 
   .hierarchy-title {
     flex: auto 1 1;
+    text-transform: uppercase;
   }
 
   .hierarchy {

packages/builder/src/nav/HierarchyRow.svelte

@@ -13,16 +13,14 @@
     if (s.currentNode)
       navActive =
         s.activeNav === "database" && node.nodeId === s.currentNode.nodeId
-          ? "active"
-          : ""
   })
 </script>
 
-<div class="root">
 <div
-    class="title {navActive}"
+  class="budibase__nav-item"
   on:click={() => store.selectExistingNode(node.nodeId)}
-    style="padding-left: {20 + level * 20}px">
+  class:selected={navActive}>
+  <div style="padding-left: {20 + level * 20}px">
     {@html getIcon(icon, 12)}
     <span style="margin-left: 1rem">{node.name}</span>
   </div>
@@ -37,27 +35,3 @@
     {/each}
   {/if}
 </div>
-
-<style>
-  .root {
-    display: block;
-    font-size: 0.9rem;
-    width: 100%;
-    cursor: pointer;
-    color: var(--secondary50);
-    font-weight: 500;
-  }
-
-  .title {
-    padding-top: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .title:hover {
-    background-color: var(--secondary10);
-  }
-
-  .active {
-    background-color: var(--primary10);
-  }
-</style>

packages/builder/src/nav/NavItem.svelte

@@ -8,28 +8,10 @@
   let navActive = ""
 
   store.subscribe(db => {
-    navActive = db.activeNav === name ? "active" : ""
+    navActive = db.activeNav === name
   })
 
   const setActive = () => store.setActiveNav(name)
 </script>
 
-<div class="nav-item {navActive}" on:click={setActive}>{label}</div>
+<div class="budibase__nav-item" class:selected={navActive} on:click={setActive}>{label}</div>
-
-<style>
-  .nav-item {
-    padding: 1.5rem 1rem 0rem 1rem;
-    font-size: 0.9rem;
-    font-weight: bold;
-    cursor: pointer;
-    flex: 0 0 auto;
-  }
-
-  .nav-item:hover {
-    background-color: var(--primary10);
-  }
-
-  .active {
-    background-color: var(--primary10);
-  }
-</style>

packages/builder/src/userInterface/ComponentsHierarchy.svelte

@@ -56,7 +56,7 @@
 
   {#each _screens as screen}
     <div
-      class="hierarchy-item component"
+      class="budibase__nav-item component"
       class:selected={$store.currentComponentInfo._id === screen.component.props._id}
       on:click|stopPropagation={() => store.setCurrentScreen(screen.title)}>
 
@@ -99,30 +99,9 @@
 <style>
   .root {
     font-weight: 400;
-    font-size: 0.8rem;
     color: #333;
   }
 
-  .hierarchy-item {
-    cursor: pointer;
-    padding: 0 7px 0 3px;
-    height: 35px;
-    margin: 5px 0;
-    border-radius: 0 5px 5px 0;
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-  }
-
-  .hierarchy-item:hover {
-    background: #fafafa;
-  }
-
-  .selected {
-    color: var(--button-text);
-    background: var(--background-button) !important;
-  }
-
   .title {
     margin-left: 10px;
     margin-top: 2px;

packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte

@@ -38,7 +38,7 @@
   {#each components as component, index (component._id)}
     <li on:click|stopPropagation={() => onSelect(component)}>
       <div
-        class="item"
+        class="budibase__nav-item item"
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 53}px">
         <div>{get_capitalised_name(component._component)}</div>
@@ -98,7 +98,6 @@
     border-radius: 3px;
     height: 35px;
     align-items: center;
-    font-size: 0.8rem;
     font-weight: normal;
   }
 
@@ -129,12 +128,6 @@
     color: var(--button-text);
   }
 
-  .selected {
-    color: var(--button-text);
-    background: var(--background-button) !important;
-    font-weight: 500;
-  }
-
   .reorder-buttons {
     display: flex;
     flex-direction: column;

packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte

@@ -34,10 +34,17 @@
   let selectedEvent = null
 
   $: {
-    const componentDefinition = components.find(c => c.name === component._component)
+    const componentDefinition = components.find(
+      c => c.name === component._component
+    )
     events = Object.keys(componentDefinition.props)
-      .filter(propName => componentDefinition.props[propName].type === EVENT_TYPE)
+      .filter(
-      .map(propName => ({ name: propName, handlers: (component[propName] || []) }))
+        propName => componentDefinition.props[propName].type === EVENT_TYPE
+      )
+      .map(propName => ({
+        name: propName,
+        handlers: component[propName] || [],
+      }))
   }
 
   const openModal = event => {
@@ -61,7 +68,8 @@
     {#each events as event, index}
       {#if event.handlers.length > 0}
         <div
-          class="handler-container hierarchy-item {selectedEvent && selectedEvent.index === index ? 'selected' : ''}"
+          class:selected={selectedEvent && selectedEvent.index === index}
+          class="handler-container budibase__nav-item"
           on:click={() => openModal({ ...event, index })}>
           <span class="event-name">{event.name}</span>
           <span class="edit-text">EDIT</span>
@@ -109,19 +117,6 @@
     height: 80px;
   }
 
-  .hierarchy-item {
-    cursor: pointer;
-    padding: 11px 7px;
-    margin: 5px 0;
-    border-radius: 5px;
-    font-size: 1.5em;
-    width: 100%;
-  }
-
-  .hierarchy-item:hover {
-    background: #f9f9f9;
-  }
-
   .event-name {
     margin-top: 5px;
     font-weight: bold;

packages/builder/src/userInterface/MasterLayout.svelte

@@ -51,12 +51,12 @@
   }
 </script>
 
-<div class="root">
 <div
-    class="hierarchy-item component"
+  class="budibase__nav-item"
   class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
   on:click|stopPropagation={() => store.setScreenType('page')}>
 
+  <div class="component">
     <span
       class="icon"
       class:rotate={$store.currentPreviewItem.name !== _layout.title}>
@@ -92,32 +92,6 @@
   onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
-  .root {
-    font-weight: 400;
-    font-size: 0.8rem;
-    color: #333;
-  }
-
-  .hierarchy-item {
-    cursor: pointer;
-    padding: 0 7px 0 3px;
-    height: 35px;
-    margin: 5px 0;
-    border-radius: 0 5px 5px 0;
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-  }
-
-  .hierarchy-item:hover {
-    background: #fafafa;
-  }
-
-  .selected {
-    color: var(--button-text);
-    background: var(--background-button) !important;
-  }
-
   .title {
     margin-left: 10px;
     margin-top: 2px;