Merge pull request #389 from Budibase/Backend-UI-update

General UI fixing previous styling issues
2020-06-25 16:07:36 +01:00 · 2020-06-25 16:07:36 +01:00 · 2a5d8cebd0
parent d53b889ad9 919412df8c
commit 2a5d8cebd0
23 changed files with 142 additions and 300 deletions
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -50,7 +50,7 @@
    ]
  },
  "dependencies": {
-    "@budibase/bbui": "^1.10.2",
+    "@budibase/bbui": "^1.13.0",
    "@budibase/client": "^0.0.32",
    "@nx-js/compiler-util": "^2.0.0",
    "codemirror": "^5.51.0",
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@ -78,12 +78,17 @@

 .budibase__input {
    height: 36px;
-    width: 220px;
-    border-radius: 3px;
-    border: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border: none;
+    border-radius: 5px;
+    width: 100%;
    text-align: left;
    color: var(--ink);
    font-size: 14px;
+    padding-left: 8px;
+    -moz-box-sizing: border-box; 
+    -webkit-box-sizing: border-box; 
+     box-sizing: border-box; 
 }

 .uk-text-right {
--- a/packages/builder/src/components/common/Block.svelte
+++ b/packages/builder/src/components/common/Block.svelte
@ -15,16 +15,16 @@
 <style>
  div {
    height: 80px;
-    border-radius: 3px;
+    border-radius: 5px;
    color: var(--ink);
-    font-weight: 500;
+    font-weight: 400;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: 0.3s transform;
-    background: var(--light-grey);
+    background: var(--grey-1);
  }

  i {
@ -38,7 +38,7 @@

  div:hover {
    cursor: pointer;
-    transform: scale(1.1);
+    background: var(--grey-2);
  }

  .primary {
--- a/packages/builder/src/components/common/NumberBox.svelte
+++ b/packages/builder/src/components/common/NumberBox.svelte
@ -26,12 +26,12 @@
  .numberbox {
    display: grid;
    align-items: center;
-    grid-template-columns: 40% 1fr;
-    margin-top: 8px;
-    margin-bottom: 8px;
+    margin-bottom: 16px;
  }

  label {
-    font-size: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
  }
 </style>
--- a/packages/builder/src/components/common/ValuesList.svelte
+++ b/packages/builder/src/components/common/ValuesList.svelte
@ -15,16 +15,34 @@
  $: valuesText = join("\n")(values)
 </script>

-<div class="uk-margin">
-  <label class="uk-form-label">{label}</label>
+<div class="margin">
+  <label class="label">{label}</label>
  <div class="uk-form-controls">
    <textarea value={valuesText} on:change={inputChanged} />
  </div>
 </div>

 <style>
+  .margin {
+    margin-bottom: 16px;
+    display: grid;
+  }
+  .label {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
  textarea {
+    font-size: 14px;
+    height: 200px;
    width: 100%;
-    height: 100px;
+    border-radius: 5px;
+    border: none;
+    cursor: text;
+    background: var(--grey-2);
+    padding: 12px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
  }
 </style>
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@ -86,10 +86,7 @@
  <div class="table-controls">
    <h2 class="title">{$backendUiStore.selectedModel.name}</h2>
    <Button primary on:click={createNewRecord}>
-      <span class="button-inner">
-        <i class="ri-add-circle-fill" />
-        Create New Record
-      </span>
+      <span class="button-inner">Create New Record</span>
    </Button>
  </div>
  <table class="uk-table">
@ -207,9 +204,4 @@
    display: flex;
    align-items: center;
  }
-
-  .button-inner i {
-    margin-right: 5px;
-    font-size: 20px;
-  }
 </style>
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@ -93,8 +93,12 @@
  </form>
 </div>
 <footer>
-  <Button secondary on:click={onClosed}>Cancel</Button>
-  <Button attention on:click={saveRecord}>Save</Button>
+  <div class="button-margin-3">
+    <Button secondary on:click={onClosed}>Cancel</Button>
+  </div>
+  <div class="button-margin-4">
+    <Button blue on:click={saveRecord}>Save</Button>
+  </div>
 </footer>

 <style>
@ -131,8 +135,22 @@
  }

  footer {
-    padding: 20px;
+    padding: 20px 30px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 20px;
    background: var(--grey-1);
-    border-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .button-margin-3 {
+    grid-column-start: 3;
+    display: grid;
+  }
+
+  .button-margin-4 {
+    grid-column-start: 4;
+    display: grid;
  }
 </style>
--- a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
@ -48,7 +48,6 @@
    margin-top: 20px;
    margin-bottom: 20px;
    display: grid;
-    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }

@ -68,7 +67,7 @@
  }

  .selected {
-    background: var(--blue-light);
+    background: var(--grey-3);
    color: var(--ink);
  }

--- a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
@ -18,15 +18,14 @@

  div {
    padding: 0 10px 0 10px;
-    width: 90%;
-    height: 40px;
-    border-radius: 3px;
+    height: 36px;
+    border-radius: 5px;
    display: flex;
    align-items: center;
    transition: 0.3s background-color;
    color: var(--ink);
-    font-weight: 500;
-    font-size: 16px;
+    font-weight: 400;
+    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 4px;
  }
@ -41,7 +40,7 @@
  }

  i {
-    color: var(--dark-grey);
+    color: var(--grey-7);
    font-size: 20px;
    margin-right: 8px;
  }
--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
@ -52,7 +52,7 @@
          headings={HEADINGS}
          bind:value={$backendUiStore.tabs.NAVIGATION_PANEL}>
          {#if selectedTab === 'NAVIGATE'}
-            <Button secondary wide on:click={setupForNewModel}>
+            <Button purple wide on:click={setupForNewModel}>
              Create New Model
            </Button>
            <div class="hierarchy-items-container">
--- a/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte
+++ b/packages/builder/src/components/nav/ModelSetupNav/ModelFieldEditor.svelte
@ -95,30 +95,38 @@

 <style>
  .info {
-    background: var(--light-grey);
-    padding: 12px;
-    margin-bottom: 5px;
-    border-radius: 3px;
+    margin-bottom: 16px;
+    border-radius: 5px;
  }

  label {
-    font-size: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
  }

  .field {
    display: grid;
    align-items: center;
-    grid-template-columns: 40% 1fr;
-    margin-top: 8px;
+    margin-bottom: 16px;
  }

  .field-box header {
    font-size: 14px;
    font-weight: 500;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
  }

  .field-box span {
-    font-weight: bold;
+    background: var(--grey-2);
+    color: var(--grey-6);
+    font-weight: 400;
+    height: 36px;
+    display: grid;
+    align-items: center;
+    padding-left: 12px;
+    text-transform: capitalize;
+    border-radius: 5px;
+    cursor: not-allowed;
  }
 </style>
--- a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
+++ b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
@ -81,14 +81,14 @@
        </div>
      {/if}
      <footer>
-        <Button disabled={!edited} attention={edited} wide on:click={saveModel}>
+        <Button disabled={!edited} green={edited} wide on:click={saveModel}>
          Save
        </Button>
      </footer>
    {:else if selectedTab === 'DELETE'}
      <div class="titled-input">
        <header>Danger Zone</header>
-        <Button error wide on:click={deleteModel}>Delete</Button>
+        <Button red wide on:click={deleteModel}>Delete</Button>
      </div>
    {/if}
  </Switcher>
@ -115,14 +115,13 @@
  }

  .titled-input {
-    padding: 12px;
-    background: var(--light-grey);
-    margin-bottom: 5px;
+    margin-bottom: 16px;
+    display: grid;
  }

  .titled-input header {
    display: block;
    font-size: 14px;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
  }
 </style>
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@ -30,7 +30,10 @@
  let selectedCategory = categories[0]

  $: components = $store.components
-  $: componentInstance = $store.currentView !== "component" ? {...$store.currentPreviewItem, ...$store.currentComponentInfo} : $store.currentComponentInfo
+  $: componentInstance =
+    $store.currentView !== "component"
+      ? { ...$store.currentPreviewItem, ...$store.currentComponentInfo }
+      : $store.currentComponentInfo
  $: componentDefinition = $store.components[componentInstance._component]
  $: componentPropDefinition =
    flattenedPanel.find(
@ -46,18 +49,21 @@

  const onStyleChanged = store.setComponentStyle

-   function onPropChanged(key, value) {
-    if($store.currentView !== "component") {
+  function onPropChanged(key, value) {
+    if ($store.currentView !== "component") {
      store.setPageOrScreenProp(key, value)
      return
    }
    store.setComponentProp(key, value)
  }

-  $: isComponentOrScreen =  $store.currentView === "component" || $store.currentFrontEndType === "screen" 
+  $: isComponentOrScreen =
+    $store.currentView === "component" ||
+    $store.currentFrontEndType === "screen"
  $: isNotScreenslot = componentInstance._component !== "##builtin/screenslot"

-  $: displayName = isComponentOrScreen && componentInstance._instanceName && isNotScreenslot
+  $: displayName =
+    isComponentOrScreen && componentInstance._instanceName && isNotScreenslot

  function walkProps(component, action) {
    action(component)
@ -92,11 +98,11 @@
    {categories}
    {selectedCategory} />

-    {#if displayName}
-      <div class="instance-name">
-        <strong>{componentInstance._instanceName}</strong>
-      </div>
-    {/if}
+  {#if displayName}
+    <div class="instance-name">
+      <strong>{componentInstance._instanceName}</strong>
+    </div>
+  {/if}

  <div class="component-props-container">
    {#if selectedCategory.value === 'design'}
@ -108,8 +114,7 @@
        {panelDefinition}
        displayNameField={displayName}
        onChange={onPropChanged}
-        screenOrPageInstance={$store.currentView !== "component" && $store.currentPreviewItem} />
-
+        screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
    {:else if selectedCategory.value === 'events'}
      <EventsEditor component={componentInstance} />
    {/if}
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@ -7,7 +7,7 @@
  import { store } from "builderStore"
  import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"

-  export let screens = []  
+  export let screens = []

  let confirmDeleteDialog
  let componentToDelete = ""
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@ -43,7 +43,7 @@
        style="padding-left: {level * 20 + 40}px">
        <div class="nav-item">
          <i class="icon ri-arrow-right-circle-fill" />
-          {isScreenslot(component._component) ? "Screenslot" : component._instanceName}
+          {isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
        </div>
        <div class="actions">
          <ComponentDropdownMenu {component} />
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@ -8,7 +8,7 @@
  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
  import { store, workflowStore } from "builderStore"
  import { ArrowDownIcon } from "components/common/Icons/"
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher } from "svelte"

  export let parameter

@ -26,7 +26,7 @@
  {/if}
  {#if parameter.name === 'workflow'}
    <Select on:change bind:value={parameter.value}>
-      <option value=""></option>
+      <option value="" />
      {#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
        <option value={workflow._id}>{workflow.name}</option>
      {/each}
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@ -13,9 +13,10 @@
  export let displayNameField = false
  export let screenOrPageInstance

-  let pageScreenProps = ["title","favicon", "description", "route"]
-  
-  const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props
+  let pageScreenProps = ["title", "favicon", "description", "route"]
+
+  const propExistsOnComponentDef = prop =>
+    pageScreenProps.includes(prop) || prop in componentDefinition.props

  function handleChange(key, data) {
    data.target ? onChange(key, data.target.value) : onChange(key, data)
@ -38,18 +39,23 @@
 {#if screenOrPageInstance}
  {#each screenOrPageDefinition as def}
    <PropertyControl
-        control={def.control}
-        label={def.label}
-        key={def.key}
-        value={screenOrPageInstance[def.key]}
-        {onChange}
-        props={{ ...excludeProps(def, ['control', 'label']) }} />
+      control={def.control}
+      label={def.label}
+      key={def.key}
+      value={screenOrPageInstance[def.key]}
+      {onChange}
+      props={{ ...excludeProps(def, ['control', 'label']) }} />
  {/each}
  <hr />
 {/if}

 {#if displayNameField}
-  <PropertyControl control={Input} label="Name" key="_instanceName" value={componentInstance._instanceName} {onChange} />
+  <PropertyControl
+    control={Input}
+    label="Name"
+    key="_instanceName"
+    value={componentInstance._instanceName}
+    {onChange} />
 {/if}

 {#if panelDefinition && panelDefinition.length > 0}
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@ -199,6 +199,6 @@
  }

  .components-list-container {
-    padding: 20px 0px 0 0;
+    padding: 10px 0px 0 0;
  }
 </style>
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@ -130,7 +130,11 @@
              {#each ACCESS_LEVELS as level}
                <span class="access-level">
                  <label>{level.name}</label>
-                  <input class="uk-checkbox" type="checkbox" disabled={!level.editable} bind:checked={level.canExecute}/>
+                  <input
+                    class="uk-checkbox"
+                    type="checkbox"
+                    disabled={!level.editable}
+                    bind:checked={level.canExecute} />
                </span>
              {/each}
            </div>
--- a/packages/builder/src/pages/[application]/backend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/_layout.svelte
@ -24,6 +24,7 @@
    height: 100%;
    display: flex;
    background: var(--grey-1);
+    line-height: 1;
  }

  .content {
@ -32,7 +33,6 @@
  }

  .nav {
-    overflow: auto;
    flex: 0 1 auto;
    width: 300px;
    height: 100%;
--- a/packages/builder/src/pages/[application]/workflow/_layout.svelte
+++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte
@ -29,6 +29,7 @@
    height: 100%;
    display: flex;
    background: var(--grey-1);
+    line-height: 1;
  }

  .content {
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@ -194,20 +194,6 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

-"@budibase/client@^0.0.32":
-  version "0.0.32"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496"
-  integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A==
-  dependencies:
-    "@nx-js/compiler-util" "^2.0.0"
-    bcryptjs "^2.4.3"
-    deep-equal "^2.0.1"
-    lodash "^4.17.15"
-    lunr "^2.3.5"
-    regexparam "^1.3.0"
-    shortid "^2.2.8"
-    svelte "^3.9.2"
-
 "@budibase/core@^0.0.32":
  version "0.0.32"
  resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa"
@ -863,11 +849,6 @@ array-equal@^1.0.0:
  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
  integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=

-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
 array-unique@^0.3.2:
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@ -940,13 +921,6 @@ atomic-sleep@^1.0.0:
  resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
  integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==

-available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sign2@~0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@ -1669,26 +1643,6 @@ decompress-response@^3.3.0:
  dependencies:
    mimic-response "^1.0.0"

-deep-equal@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
-  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
-  dependencies:
-    es-abstract "^1.17.5"
-    es-get-iterator "^1.1.0"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.0.5"
-    isarray "^2.0.5"
-    object-is "^1.1.2"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.2"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-equal@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@ -2064,36 +2018,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
    string.prototype.trimleft "^2.1.1"
    string.prototype.trimright "^2.1.1"

-es-abstract@^1.17.4:
-  version "1.17.6"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
-  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.0"
-    is-regex "^1.1.0"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
-es-get-iterator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@ -3086,21 +3010,11 @@ is-accessor-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
 is-arrayish@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=

-is-bigint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
-
 is-binary-path@~2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@ -3108,11 +3022,6 @@ is-binary-path@~2.1.0:
  dependencies:
    binary-extensions "^2.0.0"

-is-boolean-object@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
-
 is-buffer@^1.1.5:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@ -3123,11 +3032,6 @@ is-callable@^1.1.4, is-callable@^1.1.5:
  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
  integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==

-is-callable@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
-  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
-
 is-ci@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@ -3154,7 +3058,7 @@ is-data-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@ -3229,21 +3133,11 @@ is-installed-globally@^0.3.1:
    global-dirs "^2.0.1"
    is-path-inside "^3.0.1"

-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
 is-npm@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
  integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==

-is-number-object@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@ -3280,28 +3174,11 @@ is-regex@^1.0.5:
  dependencies:
    has "^1.0.3"

-is-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
-  integrity sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==
-  dependencies:
-    has-symbols "^1.0.1"
-
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
 is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=

-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
 is-symbol@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@ -3318,31 +3195,11 @@ is-type-of@^1.0.0:
    is-class-hotfix "~0.0.6"
    isstream "~0.1.2"

-is-typed-array@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
-  dependencies:
-    available-typed-arrays "^1.0.0"
-    es-abstract "^1.17.4"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=

-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@ -3368,11 +3225,6 @@ isarray@1.0.0, isarray@~1.0.0:
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=

-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbinaryfile@^4.0.6:
  version "4.0.6"
  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@ -4785,14 +4637,6 @@ object-inspect@^1.7.0:
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
  integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==

-object-is@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
-  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@ -5514,19 +5358,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
    extend-shallow "^3.0.2"
    safe-regex "^1.1.0"

-regexp.prototype.flags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpp@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@ -5855,14 +5686,6 @@ shortid@^2.2.8:
  dependencies:
    nanoid "^2.1.0"

-side-channel@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
-  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    object-inspect "^1.7.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@ -6115,7 +5938,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
    is-fullwidth-code-point "^3.0.0"
    strip-ansi "^6.0.0"

-string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
+string.prototype.trimend@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
  integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
@ -6141,7 +5964,7 @@ string.prototype.trimright@^2.1.1:
    es-abstract "^1.17.5"
    string.prototype.trimend "^1.0.0"

-string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
+string.prototype.trimstart@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
  integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
@ -6271,11 +6094,6 @@ supports-color@^7.1.0:
  dependencies:
    has-flag "^4.0.0"

-svelte@^3.9.2:
-  version "3.23.2"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.23.2.tgz#f3e500384261a2e77b29681ee744c3c790fbcdc3"
-  integrity sha512-hE8GeTM83YVR4GY6/6PeDEcGct4JS5aCi+IYbCAa76oaPSfuF7L85DQYULQxlTK/KPWzw3L1GRGmC3oPG/PQoA==
-
 symbol-tree@^3.2.2:
  version "3.2.4"
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@ -6761,44 +6579,11 @@ whatwg-url@^7.0.0:
    tr46 "^1.0.1"
    webidl-conversions "^4.0.2"

-which-boxed-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
-  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
-  dependencies:
-    is-bigint "^1.0.0"
-    is-boolean-object "^1.0.0"
-    is-number-object "^1.0.3"
-    is-string "^1.0.4"
-    is-symbol "^1.0.2"
-
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=

-which-typed-array@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
-  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    es-abstract "^1.17.5"
-    foreach "^2.0.5"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.1"
-    is-typed-array "^1.1.3"
-
 which@^1.2.9, which@^1.3.0:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@ -23,7 +23,10 @@

  const login = async () => {
    loading = true
-    const response = await _bb.api.post("/api/authenticate", { username, password })
+    const response = await _bb.api.post("/api/authenticate", {
+      username,
+      password,
+    })
    if (response.status === 200) {
      const json = await response.json()
      localStorage.setItem("budibase:token", json.token)