UI changes

UI changes including: - button restyling - new font - nackend nav bar colour changed - font resizing - spacing adjusted
7 years ago · a06fa47e8a
43 changed files with 914 additions and 864 deletions
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@ -33,6 +33,6 @@
 	main {
 		height: 100%;
 		width: 100%;
-		font-family: "Lato", Helvetica, Arial, sans-serif;
+		font-family: "Roboto", Helvetica, Arial, sans-serif;
 	}
 </style>
--- a/packages/builder/src/actionsAndTriggers/ActionView.svelte
+++ b/packages/builder/src/actionsAndTriggers/ActionView.svelte
@ -94,7 +94,7 @@ const cancel = () => {

    <ButtonGroup>
        <Button color="primary" grouped on:click={save}>Save</Button>
-        <Button color="secondary" grouped on:click={cancel}>Cancel</Button>
+        <Button color="tertiary" grouped on:click={cancel}>Cancel</Button>
    </ButtonGroup>

    
--- a/packages/builder/src/actionsAndTriggers/ActionsAndTriggersRoot.svelte
+++ b/packages/builder/src/actionsAndTriggers/ActionsAndTriggersRoot.svelte
@ -87,7 +87,7 @@ let onTriggerDelete = (trigger) => {
 <div class="root">

 <ButtonGroup>
-    <Button color="secondary" 
+    <Button color="primary" 
            grouped
            on:click={newAction}>Create New Action</Button>
    <Button color="secondary" 
--- a/packages/builder/src/actionsAndTriggers/TriggerView.svelte
+++ b/packages/builder/src/actionsAndTriggers/TriggerView.svelte
@ -57,8 +57,8 @@ let save = () => {
    </form>

    <ButtonGroup>
-        <Button grouped on:click={save}>Save</Button>
-        <Button grouped on:click={cancel}>Cancel</Button>
+        <Button color="primary" grouped on:click={save}>Save</Button>
+        <Button color="tertiary" grouped on:click={cancel}>Cancel</Button>
    </ButtonGroup>

 </div>
--- a/packages/builder/src/assets/lato-latin-ext.woff2
+++ b/packages/builder/src/assets/lato-latin-ext.woff2
--- a/packages/builder/src/assets/lato-latin.woff2
+++ b/packages/builder/src/assets/lato-latin.woff2
--- a/packages/builder/src/assets/roboto-v20-latin-ext_latin-300.woff
+++ b/packages/builder/src/assets/roboto-v20-latin-ext_latin-300.woff
--- a/packages/builder/src/assets/roboto-v20-latin-ext_latin-300.woff2
+++ b/packages/builder/src/assets/roboto-v20-latin-ext_latin-300.woff2
--- a/packages/builder/src/assets/roboto-v20-latin-ext_latin-500.woff
+++ b/packages/builder/src/assets/roboto-v20-latin-ext_latin-500.woff
--- a/packages/builder/src/assets/roboto-v20-latin-ext_latin-500.woff2
+++ b/packages/builder/src/assets/roboto-v20-latin-ext_latin-500.woff2
--- a/packages/builder/src/assets/roboto-v20-latin-ext_latin-700.woff
+++ b/packages/builder/src/assets/roboto-v20-latin-ext_latin-700.woff
--- a/packages/builder/src/assets/roboto-v20-latin-ext_latin-700.woff2
+++ b/packages/builder/src/assets/roboto-v20-latin-ext_latin-700.woff2
--- a/packages/builder/src/assets/roboto-v20-latin-ext_latin-900.woff
+++ b/packages/builder/src/assets/roboto-v20-latin-ext_latin-900.woff
--- a/packages/builder/src/assets/roboto-v20-latin-ext_latin-900.woff2
+++ b/packages/builder/src/assets/roboto-v20-latin-ext_latin-900.woff2
--- a/packages/builder/src/assets/roboto-v20-latin-ext_latin-regular.woff
+++ b/packages/builder/src/assets/roboto-v20-latin-ext_latin-regular.woff
--- a/packages/builder/src/assets/roboto-v20-latin-ext_latin-regular.woff2
+++ b/packages/builder/src/assets/roboto-v20-latin-ext_latin-regular.woff2
--- a/packages/builder/src/common/Button.svelte
+++ b/packages/builder/src/common/Button.svelte
@ -27,8 +27,10 @@ $: borderClass = grouped

 button {  
    border-style: solid; 
-    padding: 7px 15px;
+    padding: 7.5px 15px;
    cursor:pointer;
+    margin:5px;
+    border-radius: 5px;
 }

 /* ---- PRIMARY ----*/
--- a/packages/builder/src/common/CodeArea.svelte
+++ b/packages/builder/src/common/CodeArea.svelte
@ -11,11 +11,14 @@ export let label = "";

 textarea {
    padding:3px;
-    background: var(--darkslate);
+    margin-top:5px;
+    margin-bottom:10px;
+    background: var(--lightslate);
    color: var(--white);
    font-family: 'Courier New', Courier, monospace;
    width:95%;
    height:100px;
+    border-radius: 5px;
 }

 </style>
--- a/packages/builder/src/common/DropdownButton.svelte
+++ b/packages/builder/src/common/DropdownButton.svelte
@ -46,7 +46,7 @@ let isDroppedDown = false;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-weight: normal;
-    border-style:solid;
+    border-style: solid;
    border-width: 1px;
    border-color: var(--secondary10);
 }
--- a/packages/builder/src/common/icon.js
+++ b/packages/builder/src/common/icon.js
@ -1,3 +1,3 @@
 import feather from "feather-icons";
-const getIcon = (icon, size) => feather.icons[icon].toSvg({height:size||"24", width:size||"24"});
+const getIcon = (icon, size) => feather.icons[icon].toSvg({height:size||"16", width:size||"16"});
 export default getIcon;
--- a/packages/builder/src/database/ActionsHeader.svelte
+++ b/packages/builder/src/database/ActionsHeader.svelte
@ -30,7 +30,7 @@ const deleteCurrentNode = () => {
        </Button>

        {#if !$store.currentNodeIsNew}
-        <Button color="secondary" grouped on:click={openConfirmDelete}>
+        <Button color="tertiary" grouped on:click={openConfirmDelete}>
            Delete
        </Button>
        {/if}
@ -54,9 +54,9 @@ const deleteCurrentNode = () => {
 <style>

 .root {
-    padding:5px;
-    top:0;
-    width:100%;
-}
+    padding: 1.5rem;
+    width: 100%;
+    align-items: right;
+    }

 </style>
--- a/packages/builder/src/database/FieldView.svelte
+++ b/packages/builder/src/database/FieldView.svelte
@ -109,7 +109,7 @@ const save = () => {

    <ButtonGroup style="float: right;">
        <Button color="primary" grouped on:click={save}>Save</Button>
-        <Button color="secondary" grouped on:click={() => onFinished(false)}>Cancel</Button>
+        <Button color="tertiary" grouped on:click={() => onFinished(false)}>Cancel</Button>
    </ButtonGroup>

 </div>
--- a/packages/builder/src/database/HierarchyRow.svelte
+++ b/packages/builder/src/database/HierarchyRow.svelte
@ -24,13 +24,13 @@ export let node;

 .root { 
    display: block;
-    font-size: 13pt;
+    font-size: 1rem;
    width: 100%;
    cursor: pointer;
 }

 .title {
-    font: var(--bodytext);
+    font: var(--fontblack);
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
--- a/packages/builder/src/database/RecordView.svelte
+++ b/packages/builder/src/database/RecordView.svelte
@ -85,18 +85,21 @@ let getTypeOptions = typeOptions =>
 <div class="root">

    <form class="uk-form-horizontal">
+        <h3 class="settings-title">
+        Settings 
+    </h3>
    
-        <Textbox label="Name" bind:text={record.name} />
-        <div>{record.nodeKey()}</div>
+        <Textbox label="Name:" bind:text={record.name} />
        {#if !record.isSingle}
-        <Textbox label="Collection Name" bind:text={record.collectionName} />
-        <Textbox label="Shard Factor" bind:text={record.allidsShardFactor} />
+        <Textbox label="Collection Name:" bind:text={record.collectionName} />
+        <Textbox label="Shard Factor:" bind:text={record.allidsShardFactor} />
        {/if}
+        <div class="recordkey">{record.nodeKey()}</div>

    </form>
-    <h4>
+    <h3 class="title">
        Fields <span class="add-field-button" on:click={newField}>{@html getIcon("plus")}</span>
-    </h4>
+    </h3>

    {#if record.fields.length > 0}
    <table class="fields-table uk-table">
@ -138,9 +141,9 @@ let getTypeOptions = typeOptions =>
    </Modal>
    {/if}

-    <h4>
+    <h3 class="title">
        Indexes 
-    </h4>
+    </h3>

    {#each record.indexes as index}
    <div class="index-container">
@ -166,7 +169,9 @@ let getTypeOptions = typeOptions =>
        {/if}
    </div>
    {:else}
-    (no indexes added)
+    <div class="no-indexes">
+        No indexes added.
+    </div>
    {/each}

 </div>
@ -176,16 +181,30 @@ let getTypeOptions = typeOptions =>

 .root {
    height: 100%;
-    padding: 15px;
+    padding: 2rem;
+}
+
+.settings-title {
+    font-weight: 600;
+}
+
+.title {
+    margin: 3rem 0rem 0rem 0rem;
+    font-weight: 600;
+}
+
+.recordkey {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--primary100);
 }

 .fields-table {
-    margin:10px;
+    margin: 1rem 1rem 0rem 0rem;
    border-collapse:collapse;
 }

 .add-field-button {
-    margin-left:15px;
    cursor:pointer;
 }

@ -203,7 +222,7 @@ th {
 }

 td {
-    padding: 5px 30px 5px 0px;
+    padding: 1rem 5rem 1rem 0rem;
    margin:0;
    
 }
@ -255,7 +274,12 @@ tbody > tr:hover .edit-button {
 }

 .index-field-row {
-    margin-top: 7px;
+    margin: 1rem 0rem 0rem 0rem;
 }

+.no-indexes {
+    margin: 1rem 0rem 0rem 0rem;
+    font-family: var(--fontnormal);
+    font-size: 14px;
+}
 </style>
--- a/packages/builder/src/favicon.ico
+++ b/packages/builder/src/favicon.ico
--- a/packages/builder/src/favicon.png
+++ b/packages/builder/src/favicon.png
--- a/packages/builder/src/fonts.css
+++ b/packages/builder/src/fonts.css
@ -1,61 +1,47 @@
 /* latin-ext */
-@font-face {
-    font-family: 'Lato';
-    font-weight: 400;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-  /* latin */
-@font-face {
-    font-family: 'Lato';
-    font-weight: 400;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-  
-
-/* Black latin-ext */
-@font-face {
-    font-family: 'Lato Black';
-    font-weight: 900;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-  /* Black latin */
-@font-face {
-    font-family: 'Lato Black';
-    font-weight: 900;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* Bold latin-ext */
-@font-face {
-    font-family: 'Lato Bold';
-    font-weight: 700;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-  /* Bold latin */
-@font-face {
-    font-family: 'Lato Bold';
-    font-weight: 700;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* Semi Bold latin-ext */
-@font-face {
-    font-family: 'Lato Semi Bold';
-    font-weight: 600;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-  /* Semi Bold latin */
-@font-face {
-    font-family: 'Lato Semi Bold';
-    font-weight: 600;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'),
+       url('/_builder/assets/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-300 - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'),
+       url('/_builder/assets/roboto-v20-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/roboto-v20-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-500 - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'),
+       url('/_builder/assets/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-700 - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'),
+       url('/_builder/assets/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-900 - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'),
+       url('/_builder/assets/roboto-v20-latin-ext_latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/roboto-v20-latin-ext_latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
  
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@ -4,6 +4,7 @@
    --primary50: #454CA080;
    --primary25: #454CA040;
    --primary10: #454CA01A;
+    --primary5: #454ca00c;
    --primarydark: #3F448A;
    
    --secondary100: #162B4DFF;
@ -11,6 +12,7 @@
    --secondary50: #162B4D80;
    --secondary25: #162B4D40;
    --secondary10: #162B4D1A;
+    --secondary5: rgba(22, 43, 77, 0.068);
    --secondarydark: #3F448A;

    --tertiary: #F2F5F7;
@ -30,17 +32,18 @@
    --deletiondark: #CF4046;

    --white: #FFFFFF;
-    --darkslate: #5C6B82;
-    --slate: #8B95A6;
-    --lightslate: rgb(203, 212, 228);
+    --darkslate: #1a202c;
+    --slate: #a0aec0;
+    --lightslate: #f7fafc;

    --borderradius: 2px;
    --borderradiusall: 2px 2px 2px 2px;

-    --fontblack: "Lato Black";
-    --fontbold: "Lato Bold";
-    --fontsemibold: "Lato Semi Bold";
-    --fontnormal: "Lato";
+    --fontblack: "Roboto Black";
+    --fontbold: "Roboto Bold";
+    --fontsemibold: "Roboto Medium";
+    --fontnormal: "Roboto";
+    --fontlight: "Roboto Light";

    --bodytext: var(--fontnormal) "regular" var(--secondary100) 16pt;
    --bigbodytext: var(--fontnormal) "regular" var(--secondary100) 20pt;
@ -79,7 +82,7 @@ h3 {
 }

 h4 {
-    font-family: var(--fontsemibold);
+    font-family: var(--fontbold);
    font-size: 18pt;
    color: var(--secondary100);
 }
--- a/packages/builder/src/main.js
+++ b/packages/builder/src/main.js
@ -1,8 +1,11 @@
 import App from "./App.svelte";
 import "./global.css";
 import "./fonts.css";
-import "/assets/lato-latin-ext.woff2";
-import "/assets/lato-latin.woff2";
+import "/assets/roboto-v20-latin-ext_latin-300";
+import "/assets/roboto-v20-latin-ext_latin-400";
+import "/assets/roboto-v20-latin-ext_latin-500";
+import "/assets/roboto-v20-latin-ext_latin-700";
+import "/assets/roboto-v20-latin-ext_latin-900";
 import "/assets/budibase-logo.png";
 import "/assets/budibase-logo-only.png";
 import "uikit/dist/css/uikit.min.css";
--- a/packages/builder/src/nav/BackendNav.svelte
+++ b/packages/builder/src/nav/BackendNav.svelte
@ -73,7 +73,7 @@ store.subscribe(db => {

 .root {
    height: 100%;
-    background-color: var(--primary10);
+    background-color: var(--secondary5);
 }

 .items-root {
@ -90,8 +90,8 @@ store.subscribe(db => {


 .hierarchy-title-row {
-    padding: 15px 7px;
-    font-size: 12pt;
+    padding: 2rem 1rem 0rem 1rem;
+    font-size: 10pt;
    display: flex;
    font-weight: bold;
 }
--- a/packages/builder/src/nav/HierarchyRow.svelte
+++ b/packages/builder/src/nav/HierarchyRow.svelte
@ -43,15 +43,14 @@ store.subscribe(s => {

 .root { 
    display: block;
-    font-size: 12pt;
+    font-size: 10pt;
    width: 100%;
    cursor: pointer;
 }

 .title {
-    padding-top: 5px;
-    padding-right: 5px;
-    padding-bottom: 5px;
+    padding-top: .5rem;
+    padding-right: .5rem;
    color: var(--secondary100);
 }

--- a/packages/builder/src/nav/NavItem.svelte
+++ b/packages/builder/src/nav/NavItem.svelte
@ -25,8 +25,8 @@ const setActive = () =>
 <style>

 .nav-item {
-    padding: 7px;
-    font-size: 12pt;
+    padding: 1rem 1rem 0rem 1rem;
+    font-size: 10pt;
    font-weight: bold;
    cursor: pointer;
    flex: 0 0 auto;
--- a/packages/server/appPackages/testApp/components/Button.json
+++ b/packages/server/appPackages/testApp/components/Button.json
@ -0,0 +1,11 @@
+{
+  "name": "Button",
+  "description": "PrimaryButton",
+  "inherits": "@budibase/standard-components/button",
+  "props": {
+    "contentText": "Save"
+  },
+  "tags": [
+    "button"
+  ]
+}
--- a/packages/server/appPackages/testApp/components/LoginForm.json
+++ b/packages/server/appPackages/testApp/components/LoginForm.json
@ -0,0 +1,15 @@
+{
+  "name": "LoginForm",
+  "description": "",
+  "inherits": "@budibase/standard-components/formControl",
+  "props": {
+    "label": "Joe",
+    "labelContainerClass": "Joe",
+    "controlContainerClass": "Joe",
+    "containerClass": "Joe",
+    "fullWidth": true
+  },
+  "tags": [
+    "login"
+  ]
+}
--- a/packages/server/appPackages/testApp/components/joeTextBox.json
+++ b/packages/server/appPackages/testApp/components/joeTextBox.json
@ -0,0 +1,9 @@
+{
+  "name": "joeTextBox",
+  "description": "",
+  "inherits": "subfolder/otherTextBox",
+  "props": {},
+  "tags": [
+    ""
+  ]
+}
--- a/packages/server/appPackages/testApp/components/myTextBox.json
+++ b/packages/server/appPackages/testApp/components/myTextBox.json
@ -1,9 +0,0 @@
-{
-    "inherits": "./customComponents/textbox",
-    "name": "myTextBox",
-    "tags": [],
-    "description": "A text input, with a label",
-    "props" : {
-        "label": "hello"
-    }
-}
--- a/packages/server/builder/bundle.css
+++ b/packages/server/builder/bundle.css
@ -1,43 +1,43 @@
-main.svelte-j8mzr7{height:100%;width:100%;font-family:"Lato", Helvetica, Arial, sans-serif}
-.root.svelte-fkeby9{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-fkeby9{flex:0 0 auto;height:25px;background:white;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);padding:5px;width:100%}.content.svelte-fkeby9{flex:1 1 auto;width:100%;height:100px}.content.svelte-fkeby9>div.svelte-fkeby9{height:100%;width:100%}.topnavitem.svelte-fkeby9{cursor:pointer;color:var(--slate);padding:0px 15px}.topnavitem.svelte-fkeby9:hover{color:var(--secondary75)}.active.svelte-fkeby9{color:var(--secondary100)}
-.root.svelte-e4n7zy{position:fixed;margin:0 auto;text-align:center;top:20%;width:100%}.inner.svelte-e4n7zy{display:inline-block;margin:auto}.logo.svelte-e4n7zy{width:300px;margin-bottom:40px}.root.svelte-e4n7zy .option{width:250px}.app-link.svelte-e4n7zy{margin-top:10px;display:block}
-.root.svelte-q8uz1n{height:100%;display:flex}.content.svelte-q8uz1n{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-q8uz1n{flex:0 1 auto;width:300px;height:100%}
-.border-normal.svelte-1lilfu7{border-radius:var(--borderradiusall)}.border-left.svelte-1lilfu7{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-1lilfu7{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-1lilfu7{border-radius:0}button.svelte-1lilfu7{border-style:solid;padding:7px 15px;cursor:pointer}.primary.svelte-1lilfu7{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-1lilfu7:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-1lilfu7:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-1lilfu7{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-1lilfu7:hover{background-color:var(--primary10)}.primary-outline.svelte-1lilfu7:pressed{background-color:var(--primary25)}.secondary.svelte-1lilfu7{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-1lilfu7:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-1lilfu7:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-1lilfu7{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-1lilfu7:hover{background-color:var(--secondary10)}.secondary-outline.svelte-1lilfu7:pressed{background-color:var(--secondary25)}.success.svelte-1lilfu7{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-1lilfu7:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-1lilfu7:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-1lilfu7{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-1lilfu7:hover{background-color:var(--success10)}.success-outline.svelte-1lilfu7:pressed{background-color:var(--success25)}.deletion.svelte-1lilfu7{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-1lilfu7:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-1lilfu7:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-1lilfu7{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-1lilfu7:hover{background-color:var(--deletion10)}.deletion-outline.svelte-1lilfu7:pressed{background-color:var(--deletion25)}
-.root.svelte-1dih19s{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%}.ui-nav.svelte-1dih19s{grid-column-start:uiNav;background-color:var(--primary10);height:100%}.properties-pane.svelte-1dih19s{grid-column-start:properties;background-color:var(--primary10);height:100%}.pages-list-container.svelte-1dih19s{padding-top:20px}.nav-group-header.svelte-1dih19s{font-size:10pt;padding-left:10px}.nav-items-container.svelte-1dih19s{padding-top:10px}.nav-group-header.svelte-1dih19s{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:10px 2px 0px 7px}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(1){padding:0px 7px 0px 0px;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1dih19s>span.svelte-1dih19s:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--slate)}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3):hover{color:var(--primary75)}
-button.svelte-bxuckr{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-bxuckr:hover{color:var(--hovercolor)}button.svelte-bxuckr:active{outline:none}
-h4.svelte-sqtlby{margin-top:20px}
-.root.svelte-zy9ybu{height:100%;background-color:var(--primary10)}.items-root.svelte-zy9ybu{display:flex;flex-direction:column;max-height:100%;height:10px}.hierarchy.svelte-zy9ybu{flex:1 1 auto}.hierarchy-title-row.svelte-zy9ybu{padding:15px 7px;font-size:12pt;display:flex;font-weight:bold}.hierarchy-title.svelte-zy9ybu{flex:auto 1 1}.space-filler.svelte-zy9ybu{flex:1 1 auto}
-.root.svelte-zzs4qg{padding:10px}
-.root.svelte-apja7r{height:100%;position:relative}.actions-header.svelte-apja7r{flex:0 1 auto}.node-view.svelte-apja7r{overflow-y:auto;flex:1 1 auto}
-.root.svelte-ffb307{padding-bottom:10px;padding-left:10px;font-size:16px;color:var(--secondary50)}.hierarchy-item.svelte-ffb307{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-ffb307:hover{color:var(--secondary75)}.component.svelte-ffb307{margin-left:5px}.selected.svelte-ffb307{color:var(--primary100)}.title.svelte-ffb307{margin-left:10px}
-.root.svelte-1qmjs65{padding:10px}.edit-button.svelte-1qmjs65{cursor:pointer;color:var(--white)}tr.svelte-1qmjs65:hover .edit-button.svelte-1qmjs65{color:var(--secondary75)}
-.root.svelte-1cnqtw{color:var(--secondary50)}.hierarchy-item.svelte-1cnqtw{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1cnqtw:hover{color:var(--secondary75)}.component.svelte-1cnqtw{margin-left:5px}.currentfolder.svelte-1cnqtw{color:var(--secondary100)}.selected.svelte-1cnqtw{color:var(--primary100)}.title.svelte-1cnqtw{margin-left:10px}
-.root.svelte-183dehm{height:100%;border-style:solid;border-color:var(--lightslate);border-width:0px 0px 0px 1px}.padding.svelte-183dehm{padding:0px 5px 0px 10px}.title.svelte-183dehm{background-color:white;padding:3px;display:grid;grid-template-columns:[name] 1fr [actions] auto}.title.svelte-183dehm>div.svelte-183dehm:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-183dehm>div.svelte-183dehm:nth-child(2){grid-column-start:actions}.section-header.svelte-183dehm{font-style:italic;color:var(--slate);border-style:solid;border-color:var(--lightslate);border-width:0px 0px 1px 0px}.section-header.svelte-183dehm{vertical-align:middle;margin-top:20px}
-h1.svelte-16jkjx9{font-size:1.2em}
-.component-preview.svelte-1jir83x{display:grid;grid-template-rows:[top] 1fr [middle] auto [bottom] 1fr;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-column-start:preview;height:100%}.component-container.svelte-1jir83x{grid-row-start:middle;grid-column-start:middle}
-.section-container.svelte-yk1mmr{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-yk1mmr:nth-child(1){margin-bottom:15px}.row-text.svelte-yk1mmr{margin-right:15px;color:var(--primary100)}input.svelte-yk1mmr{margin-right:15px}p.svelte-yk1mmr>span.svelte-yk1mmr{margin-left:30px}.header.svelte-yk1mmr{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(1){grid-column-start:title}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(2){grid-column-start:icon}
-.root.svelte-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt}
-.root.svelte-x3bf9z{display:flex}.root.svelte-x3bf9z:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-x3bf9z:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-x3bf9z:not(:first-child):not(:last-child){border-radius:0}
-.nav-item.svelte-1y614ns{padding:7px;font-size:12pt;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1y614ns:hover{background-color:var(--primary10)}.active.svelte-1y614ns{background-color:var(--primary10)}
-.dropdown-background.svelte-iyjmwx{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-iyjmwx{cursor:pointer;z-index:1}.dropdown-content.svelte-iyjmwx{position:absolute;background-color:var(--white);min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;font-weight:normal;border-style:solid;border-width:1px;border-color:var(--secondary10)}.dropdown-content.svelte-iyjmwx:not(:focus){display:none}.action-row.svelte-iyjmwx{padding:7px 10px;cursor:pointer}.action-row.svelte-iyjmwx:hover{background-color:var(--primary100);color:var(--white)}
-.root.svelte-1bn4xbe{display:block;font-size:12pt;width:100%;cursor:pointer}.title.svelte-1bn4xbe{padding-top:5px;padding-right:5px;padding-bottom:5px;color:var(--secondary100)}.title.svelte-1bn4xbe:hover{background-color:var(--secondary10)}.active.svelte-1bn4xbe{background-color:var(--primary10)}
-.edit-button.svelte-9z4fqi{cursor:pointer;color:var(--white)}tr.svelte-9z4fqi:hover .edit-button.svelte-9z4fqi{color:var(--secondary75)}
-.edit-button.svelte-neetem{cursor:pointer;color:var(--white)}tr.svelte-neetem:hover .edit-button.svelte-neetem{color:var(--secondary75)}
-.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
-.root.svelte-1tilbnf{padding:5px;top:0;width:100%}
-.root.svelte-1q40nqm{display:block;font-size:13pt;width:100%;cursor:pointer}.title.svelte-1q40nqm{font:var(--bodytext);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-1q40nqm:hover{background-color:var(--secondary10)}
-.root.svelte-kswv5p{height:100%;padding:15px}.fields-table.svelte-kswv5p{margin:10px;border-collapse:collapse}.add-field-button.svelte-kswv5p{margin-left:15px;cursor:pointer}.edit-button.svelte-kswv5p{cursor:pointer;color:var(--white)}.edit-button.svelte-kswv5p:hover{color:var(--secondary75)}th.svelte-kswv5p{text-align:left}td.svelte-kswv5p{padding:5px 30px 5px 0px;margin:0}thead.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-kswv5p>tr.svelte-kswv5p:hover{background-color:var(--primary10)}tbody.svelte-kswv5p>tr:hover .edit-button.svelte-kswv5p{color:var(--secondary75)}.index-container.svelte-kswv5p{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-kswv5p{color:var(--slate)}.index-name.svelte-kswv5p{font-weight:bold;color:var(--primary100)}.index-container.svelte-kswv5p code.svelte-kswv5p{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-kswv5p{margin-top:7px}
-.title.svelte-dhe1ge{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-dhe1ge>span.svelte-dhe1ge{margin-left:10px}
-.root.svelte-1sxai5n{font-size:10pt}.padding.svelte-1sxai5n{padding:0 10px}.inherited-title.svelte-1sxai5n{margin-top:40px;display:grid;grid-template-columns:[name] 1fr [actions] auto;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);font-style:italic}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(1){grid-column-start:name;color:var(--slate)}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
-.info-text.svelte-y0b7l0{font-size:0.8em;color:var(--slate)}
-.component.svelte-qxar5p{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-qxar5p:hover{background-color:var(--primary10)}.component.svelte-qxar5p>.title.svelte-qxar5p{font-size:13pt;color:var(--secondary100)}.component.svelte-qxar5p>.description.svelte-qxar5p{font-size:10pt;color:var(--primary75);font-style:italic}
-textarea.svelte-1qg56sa{padding:3px;background:var(--darkslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px}
-.root.svelte-bv289q{padding:10px}.option-container.svelte-bv289q{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
-.error-container.svelte-ole1mk{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-ole1mk{padding:5px 0px}
-input.svelte-9fre0g{margin-right:7px}
-.root.svelte-13ckvg1{padding:3px 5px 7px 10px;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary25)}
-.root.svelte-ogh8o0{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(2){grid-column-start:actions}.selectedname.svelte-ogh8o0{font-weight:bold;color:var(--secondary)}
-textarea.svelte-1kv2xk7{width:300px;height:200px}
-.addelement-container.svelte-199q8jr{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-199q8jr:hover{background-color:var(--primary25)}.item-container.svelte-199q8jr{padding-left:3px;background:var(--secondary10)}
+main.svelte-kajqu6{height:100%;width:100%;font-family:"Roboto", Helvetica, Arial, sans-serif}
+.root.svelte-h9y88z{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-h9y88z{flex:0 0 auto;height:25px;background:white;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);padding:5px;width:100%}.content.svelte-h9y88z{flex:1 1 auto;width:100%;height:100px}.content.svelte-h9y88z>div.svelte-h9y88z{height:100%;width:100%}.topnavitem.svelte-h9y88z{cursor:pointer;color:var(--slate);padding:0px 15px}.topnavitem.svelte-h9y88z:hover{color:var(--secondary75)}.active.svelte-h9y88z{color:var(--secondary100)}
+.root.svelte-jymnqv{position:fixed;margin:0 auto;text-align:center;top:20%;width:100%}.inner.svelte-jymnqv{display:inline-block;margin:auto}.logo.svelte-jymnqv{width:300px;margin-bottom:40px}.root.svelte-jymnqv .option{width:250px}.app-link.svelte-jymnqv{margin-top:10px;display:block}
+.root.svelte-tavaga{height:100%;display:flex}.content.svelte-tavaga{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-tavaga{flex:0 1 auto;width:300px;height:100%}
+.root.svelte-1rbfs7z{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%}.ui-nav.svelte-1rbfs7z{grid-column-start:uiNav;background-color:var(--primary10);height:100%}.properties-pane.svelte-1rbfs7z{grid-column-start:properties;background-color:var(--primary10);height:100%}.pages-list-container.svelte-1rbfs7z{padding-top:20px}.nav-group-header.svelte-1rbfs7z{font-size:10pt;padding-left:10px}.nav-items-container.svelte-1rbfs7z{padding-top:10px}.nav-group-header.svelte-1rbfs7z{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:10px 2px 0px 7px}.nav-group-header.svelte-1rbfs7z>div.svelte-1rbfs7z:nth-child(1){padding:0px 7px 0px 0px;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1rbfs7z>span.svelte-1rbfs7z:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-1rbfs7z>div.svelte-1rbfs7z:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--slate)}.nav-group-header.svelte-1rbfs7z>div.svelte-1rbfs7z:nth-child(3):hover{color:var(--primary75)}
+.border-normal.svelte-p1bw3l{border-radius:var(--borderradiusall)}.border-left.svelte-p1bw3l{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-p1bw3l{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-p1bw3l{border-radius:0}button.svelte-p1bw3l{border-style:solid;padding:7.5px 15px;cursor:pointer;margin:5px;border-radius:5px}.primary.svelte-p1bw3l{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-p1bw3l:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-p1bw3l:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-p1bw3l:hover{background-color:var(--primary10)}.primary-outline.svelte-p1bw3l:pressed{background-color:var(--primary25)}.secondary.svelte-p1bw3l{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-p1bw3l:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-p1bw3l:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-p1bw3l:hover{background-color:var(--secondary10)}.secondary-outline.svelte-p1bw3l:pressed{background-color:var(--secondary25)}.success.svelte-p1bw3l{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-p1bw3l:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-p1bw3l:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-p1bw3l:hover{background-color:var(--success10)}.success-outline.svelte-p1bw3l:pressed{background-color:var(--success25)}.deletion.svelte-p1bw3l{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-p1bw3l:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-p1bw3l:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-p1bw3l:hover{background-color:var(--deletion10)}.deletion-outline.svelte-p1bw3l:pressed{background-color:var(--deletion25)}
+button.svelte-4po3k2{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-4po3k2:hover{color:var(--hovercolor)}button.svelte-4po3k2:active{outline:none}
+h4.svelte-o0id5a{margin-top:20px}
+.root.svelte-85bkcq{height:100%;position:relative}.actions-header.svelte-85bkcq{flex:0 1 auto}.node-view.svelte-85bkcq{overflow-y:auto;flex:1 1 auto}
+.root.svelte-pdeftd{height:100%;background-color:var(--secondary5)}.items-root.svelte-pdeftd{display:flex;flex-direction:column;max-height:100%;height:10px}.hierarchy.svelte-pdeftd{flex:1 1 auto}.hierarchy-title-row.svelte-pdeftd{padding:2rem 1rem 0rem 1rem;font-size:10pt;display:flex;font-weight:bold}.hierarchy-title.svelte-pdeftd{flex:auto 1 1}.space-filler.svelte-pdeftd{flex:1 1 auto}
+.root.svelte-1y6dy5x{padding:10px}
+.root.svelte-1iwq1b2{padding-bottom:10px;padding-left:10px;font-size:16px;color:var(--secondary50)}.hierarchy-item.svelte-1iwq1b2{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1iwq1b2:hover{color:var(--secondary75)}.component.svelte-1iwq1b2{margin-left:5px}.selected.svelte-1iwq1b2{color:var(--primary100)}.title.svelte-1iwq1b2{margin-left:10px}
+.root.svelte-1be865r{padding:10px}.edit-button.svelte-1be865r{cursor:pointer;color:var(--white)}tr.svelte-1be865r:hover .edit-button.svelte-1be865r{color:var(--secondary75)}
+.root.svelte-1ba51k0{color:var(--secondary50)}.hierarchy-item.svelte-1ba51k0{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1ba51k0:hover{color:var(--secondary75)}.component.svelte-1ba51k0{margin-left:5px}.currentfolder.svelte-1ba51k0{color:var(--secondary100)}.selected.svelte-1ba51k0{color:var(--primary100)}.title.svelte-1ba51k0{margin-left:10px}
+.root.svelte-xai2hc{height:100%;border-style:solid;border-color:var(--lightslate);border-width:0px 0px 0px 1px}.padding.svelte-xai2hc{padding:0px 5px 0px 10px}.title.svelte-xai2hc{background-color:white;padding:3px;display:grid;grid-template-columns:[name] 1fr [actions] auto}.title.svelte-xai2hc>div.svelte-xai2hc:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-xai2hc>div.svelte-xai2hc:nth-child(2){grid-column-start:actions}.section-header.svelte-xai2hc{font-style:italic;color:var(--slate);border-style:solid;border-color:var(--lightslate);border-width:0px 0px 1px 0px}.section-header.svelte-xai2hc{vertical-align:middle;margin-top:20px}
+h1.svelte-2ukyrk{font-size:1.2em}
+.section-container.svelte-1t0x31f{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-1t0x31f:nth-child(1){margin-bottom:15px}.row-text.svelte-1t0x31f{margin-right:15px;color:var(--primary100)}input.svelte-1t0x31f{margin-right:15px}p.svelte-1t0x31f>span.svelte-1t0x31f{margin-left:30px}.header.svelte-1t0x31f{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(1){grid-column-start:title}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(2){grid-column-start:icon}
+.root.svelte-is81a4{padding:15px}.help-text.svelte-is81a4{color:var(--slate);font-size:10pt}
+.component-preview.svelte-1rf8xuh{display:grid;grid-template-rows:[top] 1fr [middle] auto [bottom] 1fr;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-column-start:preview;height:100%}.component-container.svelte-1rf8xuh{grid-row-start:middle;grid-column-start:middle}
+.dropdown-background.svelte-rq5j5s{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-rq5j5s{cursor:pointer;z-index:1}.dropdown-content.svelte-rq5j5s{position:absolute;background-color:var(--white);min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;font-weight:normal;border-style:solid;border-width:1px;border-color:var(--secondary10)}.dropdown-content.svelte-rq5j5s:not(:focus){display:none}.action-row.svelte-rq5j5s{padding:7px 10px;cursor:pointer}.action-row.svelte-rq5j5s:hover{background-color:var(--primary100);color:var(--white)}
+.root.svelte-17w6x7f{height:100%;padding:2rem}.settings-title.svelte-17w6x7f{font-weight:600}.title.svelte-17w6x7f{margin:3rem 0rem 0rem 0rem;font-weight:600}.recordkey.svelte-17w6x7f{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-17w6x7f{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-17w6x7f{cursor:pointer}.edit-button.svelte-17w6x7f{cursor:pointer;color:var(--white)}.edit-button.svelte-17w6x7f:hover{color:var(--secondary75)}th.svelte-17w6x7f{text-align:left}td.svelte-17w6x7f{padding:1rem 5rem 1rem 0rem;margin:0}thead.svelte-17w6x7f>tr.svelte-17w6x7f{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-17w6x7f>tr.svelte-17w6x7f{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-17w6x7f>tr.svelte-17w6x7f:hover{background-color:var(--primary10)}tbody.svelte-17w6x7f>tr:hover .edit-button.svelte-17w6x7f{color:var(--secondary75)}.index-container.svelte-17w6x7f{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-17w6x7f{color:var(--slate)}.index-name.svelte-17w6x7f{font-weight:bold;color:var(--primary100)}.index-container.svelte-17w6x7f code.svelte-17w6x7f{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-17w6x7f{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-17w6x7f{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px}
+.root.svelte-1fkfoam{height:100%;padding:15px}.allowed-records.svelte-1fkfoam{margin:20px 0px}.allowed-records.svelte-1fkfoam>span.svelte-1fkfoam{margin-right:30px}
+.root.svelte-1xd1rdl{display:block;font-size:1rem;width:100%;cursor:pointer}.title.svelte-1xd1rdl{font:var(--fontblack);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-1xd1rdl:hover{background-color:var(--secondary10)}
+.root.svelte-1k0qm{display:block;font-size:10pt;width:100%;cursor:pointer}.title.svelte-1k0qm{padding-top:.5rem;padding-right:.5rem;color:var(--secondary100)}.title.svelte-1k0qm:hover{background-color:var(--secondary10)}.active.svelte-1k0qm{background-color:var(--primary10)}
+.root.svelte-1qdntd{padding:1.5rem;width:100%;align-items:right}
+.nav-item.svelte-ys4cw{padding:1rem 1rem 0rem 1rem;font-size:10pt;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-ys4cw:hover{background-color:var(--primary10)}.active.svelte-ys4cw{background-color:var(--primary10)}
+.root.svelte-d6wwkb{display:flex}.root.svelte-d6wwkb:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-d6wwkb:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-d6wwkb:not(:first-child):not(:last-child){border-radius:0}
+.edit-button.svelte-1le5bpl{cursor:pointer;color:var(--white)}tr.svelte-1le5bpl:hover .edit-button.svelte-1le5bpl{color:var(--secondary75)}
+.edit-button.svelte-12jzg4k{cursor:pointer;color:var(--white)}tr.svelte-12jzg4k:hover .edit-button.svelte-12jzg4k{color:var(--secondary75)}
+.root.svelte-beukw7{font-size:10pt}.padding.svelte-beukw7{padding:0 10px}.inherited-title.svelte-beukw7{margin-top:40px;display:grid;grid-template-columns:[name] 1fr [actions] auto;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);font-style:italic}.inherited-title.svelte-beukw7>div.svelte-beukw7:nth-child(1){grid-column-start:name;color:var(--slate)}.inherited-title.svelte-beukw7>div.svelte-beukw7:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
+.info-text.svelte-um9cf7{font-size:0.8em;color:var(--slate)}
+.title.svelte-1pp53c5{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-1pp53c5>span.svelte-1pp53c5{margin-left:10px}
+.component.svelte-13tuzj8{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-13tuzj8:hover{background-color:var(--primary10)}.component.svelte-13tuzj8>.title.svelte-13tuzj8{font-size:13pt;color:var(--secondary100)}.component.svelte-13tuzj8>.description.svelte-13tuzj8{font-size:10pt;color:var(--primary75);font-style:italic}
+textarea.svelte-1iox4u1{padding:3px;margin-top:5px;margin-bottom:10px;background:var(--lightslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px;border-radius:5px}
+.error-container.svelte-jwy920{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-jwy920{padding:5px 0px}
+.root.svelte-emcy8y{padding:10px}.option-container.svelte-emcy8y{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
+.root.svelte-woqcuf{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(2){grid-column-start:actions}.selectedname.svelte-woqcuf{font-weight:bold;color:var(--secondary)}
+input.svelte-66516k{margin-right:7px}
+.root.svelte-w5on8s{padding:3px 5px 7px 10px;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary25)}
+textarea.svelte-1wfv4cc{width:300px;height:200px}
+.addelement-container.svelte-jliz3p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-jliz3p:hover{background-color:var(--primary25)}.item-container.svelte-jliz3p{padding-left:3px;background:var(--secondary10)}

 /*# sourceMappingURL=bundle.css.map */
--- a/packages/server/builder/bundle.css.map
+++ b/packages/server/builder/bundle.css.map
--- a/packages/server/builder/bundle.js
+++ b/packages/server/builder/bundle.js
--- a/packages/server/builder/bundle.js.map
+++ b/packages/server/builder/bundle.js.map
--- a/packages/server/builder/favicon.png
+++ b/packages/server/builder/favicon.png
--- a/packages/server/builder/fonts.css
+++ b/packages/server/builder/fonts.css
@ -1,61 +1,47 @@
 /* latin-ext */
-@font-face {
-    font-family: 'Lato';
-    font-weight: 400;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-  /* latin */
-@font-face {
-    font-family: 'Lato';
-    font-weight: 400;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-  
-
-/* Black latin-ext */
-@font-face {
-    font-family: 'Lato Black';
-    font-weight: 900;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-  /* Black latin */
-@font-face {
-    font-family: 'Lato Black';
-    font-weight: 900;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* Bold latin-ext */
-@font-face {
-    font-family: 'Lato Bold';
-    font-weight: 700;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-  /* Bold latin */
-@font-face {
-    font-family: 'Lato Bold';
-    font-weight: 700;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* Semi Bold latin-ext */
-@font-face {
-    font-family: 'Lato Semi Bold';
-    font-weight: 600;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-  /* Semi Bold latin */
-@font-face {
-    font-family: 'Lato Semi Bold';
-    font-weight: 600;
-    src: local('Lato Regular'), local('Lato-Regular'), url(/_builder/assets/lato-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'),
+       url('/_builder/assets/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-300 - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'),
+       url('/_builder/assets/roboto-v20-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/roboto-v20-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-500 - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'),
+       url('/_builder/assets/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-700 - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'),
+       url('/_builder/assets/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-900 - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'),
+       url('/_builder/assets/roboto-v20-latin-ext_latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/_builder/assets/roboto-v20-latin-ext_latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
  
--- a/packages/server/builder/global.css
+++ b/packages/server/builder/global.css
@ -4,6 +4,7 @@
    --primary50: #454CA080;
    --primary25: #454CA040;
    --primary10: #454CA01A;
+    --primary5: #454ca00c;
    --primarydark: #3F448A;
    
    --secondary100: #162B4DFF;
@ -11,6 +12,7 @@
    --secondary50: #162B4D80;
    --secondary25: #162B4D40;
    --secondary10: #162B4D1A;
+    --secondary5: rgba(22, 43, 77, 0.068);
    --secondarydark: #3F448A;

    --tertiary: #F2F5F7;
@ -30,17 +32,18 @@
    --deletiondark: #CF4046;

    --white: #FFFFFF;
-    --darkslate: #5C6B82;
-    --slate: #8B95A6;
-    --lightslate: rgb(203, 212, 228);
+    --darkslate: #1a202c;
+    --slate: #a0aec0;
+    --lightslate: #f7fafc;

    --borderradius: 2px;
    --borderradiusall: 2px 2px 2px 2px;

-    --fontblack: "Lato Black";
-    --fontbold: "Lato Bold";
-    --fontsemibold: "Lato Semi Bold";
-    --fontnormal: "Lato";
+    --fontblack: "Roboto Black";
+    --fontbold: "Roboto Bold";
+    --fontsemibold: "Roboto Medium";
+    --fontnormal: "Roboto";
+    --fontlight: "Roboto Light";

    --bodytext: var(--fontnormal) "regular" var(--secondary100) 16pt;
    --bigbodytext: var(--fontnormal) "regular" var(--secondary100) 20pt;
@ -79,7 +82,7 @@ h3 {
 }

 h4 {
-    font-family: var(--fontsemibold);
+    font-family: var(--fontbold);
    font-size: 18pt;
    color: var(--secondary100);
 }