Merge branch 'master' into new-list-spike2

6 years ago · 6aba0e4ee2
50 changed files with 547 additions and 373 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/packages/builder/assets/budibase-emblem-white.svg
+++ b/packages/builder/assets/budibase-emblem-white.svg
@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{fill:#6A78D1;}
-	.st2{fill:#49C39E;}
-	.st3{fill:#F2545B;}
-	.st4{fill:#F5C26B;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M215,14.1l136.2,79.8c9.3,5.4,15,15.5,15,26.4v159.5c0,10.9-5.7,20.9-15,26.4L215,385.9
-			c-9.3,5.4-20.7,5.4-30,0L48.8,306.2c-9.3-5.4-15-15.5-15-26.4V120.2c0-10.9,5.7-20.9,15-26.4L185,14.1
-			C194.3,8.6,205.7,8.6,215,14.1z"/>
-	</g>
-	<g>
-		<path class="st1" d="M288.8,273.7l-83,43.6c-3.6,1.9-8,1.9-11.6,0l-83-43.6c-8.2-4.3-8.2-15.5,0-19.8l83-43.6
-			c3.6-1.9,8-1.9,11.6,0l83,43.6C297.1,258.3,297.1,269.4,288.8,273.7z"/>
-		<path class="st2" d="M288.8,231.2l-83,43.6c-3.6,1.9-8,1.9-11.6,0l-83-43.6c-8.2-4.3-8.2-15.5,0-19.8l83-43.6
-			c3.6-1.9,8-1.9,11.6,0l83,43.6C297.1,215.7,297.1,226.9,288.8,231.2z"/>
-		<path class="st3" d="M288.8,188.6l-83,43.6c-3.6,1.9-8,1.9-11.6,0l-83-43.6c-8.2-4.3-8.2-15.5,0-19.8l83-43.6
-			c3.6-1.9,8-1.9,11.6,0l83,43.6C297.1,173.1,297.1,184.3,288.8,188.6z"/>
-		<path class="st4" d="M288.8,146l-83,43.6c-3.6,1.9-8,1.9-11.6,0l-83-43.6c-8.2-4.3-8.2-15.5,0-19.8l83-43.6c3.6-1.9,8-1.9,11.6,0
-			l83,43.6C297.1,130.6,297.1,141.7,288.8,146z"/>
-	</g>
-</g>
-</svg>
--- a/packages/builder/assets/budibase-logo-only.png
+++ b/packages/builder/assets/budibase-logo-only.png
--- a/packages/builder/assets/budibase-logo-white.png
+++ b/packages/builder/assets/budibase-logo-white.png
--- a/packages/builder/assets/budibase-logo.png
+++ b/packages/builder/assets/budibase-logo.png
--- a/packages/builder/src/builderStore/api.js
+++ b/packages/builder/src/builderStore/api.js
@ -3,6 +3,7 @@ const apiCall = method => async (url, body) => {
    method: method,
    headers: {
      "Content-Type": "application/json",
+      "x-user-agent": "Budibase Builder",
    },
    body: body && JSON.stringify(body),
  })
@ -14,11 +15,11 @@ const apiCall = method => async (url, body) => {
  return response
 }

-const post = apiCall("POST")
-const get = apiCall("GET")
-const patch = apiCall("PATCH")
-const del = apiCall("DELETE")
-const put = apiCall("PUT")
+export const post = apiCall("POST")
+export const get = apiCall("GET")
+export const patch = apiCall("PATCH")
+export const del = apiCall("DELETE")
+export const put = apiCall("PUT")

 export default {
  post,
--- a/packages/builder/src/builderStore/loadComponentLibraries.js
+++ b/packages/builder/src/builderStore/loadComponentLibraries.js
@ -1,3 +1,5 @@
+import { get } from "builderStore/api"
+
 /**
 * Fetches the definitions for component library components. This includes
 * their props and other metadata from components.json.
@ -6,7 +8,7 @@
 export const fetchComponentLibDefinitions = async appId => {
  const LIB_DEFINITION_URL = `/${appId}/components/definitions`
  try {
-    const libDefinitionResponse = await fetch(LIB_DEFINITION_URL)
+    const libDefinitionResponse = await get(LIB_DEFINITION_URL)
    return await libDefinitionResponse.json()
  } catch (err) {
    console.error(`Error fetching component definitions for ${appId}`, err)
--- a/packages/builder/src/components/common/Select.svelte
+++ b/packages/builder/src/components/common/Select.svelte
@ -22,7 +22,6 @@
    font-size: 14px;
    position: relative;
    border: var(--grey-dark) 1px solid;
-    max-width: 256px;
  }

  .adjusted {
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -5,6 +5,7 @@
  import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
  import { getContext } from "svelte"
  import { fade } from "svelte/transition"
+  import { post } from "builderStore/api"

  const { open, close } = getContext("simple-modal")

@ -33,15 +34,7 @@
      const data = { name, description }
      loading = true
      try {
-        const response = await fetch("/api/applications", {
-          method: "POST", // *GET, POST, PUT, DELETE, etc.
-          credentials: "same-origin", // include, *same-origin, omit
-          headers: {
-            "Content-Type": "application/json",
-            // 'Content-Type': 'application/x-www-form-urlencoded',
-          },
-          body: JSON.stringify(data), // body data type must match "Content-Type" header
-        })
+        const response = await post("/api/applications", data)

        const res = await response.json()

--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@ -17,6 +17,7 @@ export default ({

      body, html {
        height: 100%!important;
+        font-family: Roboto !important;
      }
      .lay-__screenslot__text {
          width: 100%;
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@ -1,5 +1,6 @@
 <script>
  import { store } from "builderStore"
+  import { Button } from "@budibase/bbui"
  import Modal from "../../common/Modal.svelte"
  import HandlerSelector from "./HandlerSelector.svelte"
  import IconButton from "../../common/IconButton.svelte"
@ -8,12 +9,12 @@
  import Select from "../../common/Select.svelte"
  import Input from "../../common/Input.svelte"
  import getIcon from "../../common/icon"
+  import { CloseIcon } from "components/common/Icons/"

  import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"

  export let event
  export let eventOptions = []
-  export let open
  export let onClose

  let eventType = ""
@ -62,105 +63,111 @@
  }
 </script>

-<Modal bind:isOpen={open} onClosed={closeModal}>
-  <h2>
-    {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
-  </h2>
-  <a href="https://docs.budibase.com/" target="_blank">
-    Click here to learn more about component events
-  </a>
-
-  <div class="event-options">
-    <div>
-      <header>
-        <h5>Event Type</h5>
-        {@html getIcon('info', 20)}
-      </header>
-      <Select bind:value={eventType}>
-        {#each eventOptions as option}
-          <option value={option.name}>{option.name}</option>
-        {/each}
-      </Select>
+<div class="container">
+  <div class="body">
+    <div class="heading">
+      <h3>
+        {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
+      </h3>
+    </div>
+    <div class="event-options">
+      <div class="section">
+        <h4>Event Type</h4>
+        <Select bind:value={eventType}>
+          {#each eventOptions as option}
+            <option value={option.name}>{option.name}</option>
+          {/each}
+        </Select>
+      </div>
    </div>
-  </div>

-  <header>
-    <h5>Event Action(s)</h5>
-    {@html getIcon('info', 20)}
-  </header>
-  <HandlerSelector
-    newHandler
-    onChanged={updateDraftEventHandler}
-    onCreate={() => {
-      createNewEventHandler(draftEventHandler)
-      draftEventHandler = { parameters: [] }
-    }}
-    handler={draftEventHandler} />
-  {#if eventData}
-    {#each eventData.handlers as handler, index}
+    <div class="section">
+      <h4>Event Action(s)</h4>
      <HandlerSelector
-        {index}
-        onChanged={updateEventHandler}
-        onRemoved={() => deleteEventHandler(index)}
-        {handler} />
-    {/each}
-  {/if}
-
-  <div class="actions">
-    <ActionButton
-      alert
-      disabled={eventData.handlers.length === 0}
-      hidden={!eventData.name}
-      on:click={deleteEvent}>
-      Delete
-    </ActionButton>
-    <ActionButton
-      disabled={eventData.handlers.length === 0}
-      on:click={saveEventData}>
-      Save
-    </ActionButton>
+        newHandler
+        onChanged={updateDraftEventHandler}
+        onCreate={() => {
+          createNewEventHandler(draftEventHandler)
+          draftEventHandler = { parameters: [] }
+        }}
+        handler={draftEventHandler} />
+    </div>
+    {#if eventData}
+      {#each eventData.handlers as handler, index}
+        <HandlerSelector
+          {index}
+          onChanged={updateEventHandler}
+          onRemoved={() => deleteEventHandler(index)}
+          {handler} />
+      {/each}
+    {/if}
+
+  </div>
+  <div class="footer">
+    {#if eventData.name}
+      <Button
+        outline
+        on:click={deleteEvent}
+        disabled={eventData.handlers.length === 0}>
+        Delete
+      </Button>
+    {/if}
+    <div class="save">
+      <Button
+        primary
+        on:click={saveEventData}
+        disabled={eventData.handlers.length === 0}>
+        Save
+      </Button>
+    </div>
  </div>
-</Modal>
+  <div class="close-button" on:click={closeModal}>
+    <CloseIcon />
+  </div>
+</div>

 <style>
-  h2 {
-    color: var(--primary100);
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 0;
-  }
-
-  h5 {
-    color: rgba(22, 48, 87, 0.6);
-    font-size: 15px;
-    margin: 0;
+  .container {
+    position: relative;
  }
-
-  .event-options {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 10px;
+  .heading {
+    margin-bottom: 20px;
  }

-  .actions,
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  .close-button {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
  }
-
-  .actions {
-    margin-top: auto;
+  .close-button :global(svg) {
+    width: 24px;
+    height: 24px;
  }

-  header {
-    margin-top: 30px;
+  h4 {
    margin-bottom: 10px;
  }

-  a {
-    color: rgba(22, 48, 87, 0.6);
-    font-size: 13px;
-    margin-top: 0;
+  h3 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: bold;
+  }
+  .body {
+    padding: 40px;
+    display: grid;
+    grid-gap: 20px;
+  }
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 30px 40px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 50px;
+    background-color: var(--grey-light);
+  }
+  .save {
+    margin-left: 20px;
  }
 </style>
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@ -1,4 +1,5 @@
 <script>
+  import { getContext } from "svelte"
  import {
    keys,
    map,
@ -17,7 +18,6 @@
  import PlusButton from "components/common/PlusButton.svelte"
  import IconButton from "components/common/IconButton.svelte"
  import EventEditorModal from "./EventEditorModal.svelte"
-  import HandlerSelector from "./HandlerSelector.svelte"

  import { PencilIcon } from "components/common/Icons"
  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@ -26,7 +26,6 @@

  export let component

-  let modalOpen = false
  let events = []
  let selectedEvent = null

@ -40,14 +39,28 @@
      }))
  }

+  // Handle create app modal
+  const { open, close } = getContext("simple-modal")
+
  const openModal = event => {
    selectedEvent = event
-    modalOpen = true
-  }
-
-  const closeModal = () => {
-    selectedEvent = null
-    modalOpen = false
+    open(
+      EventEditorModal,
+      {
+        eventOptions: events,
+        event: selectedEvent,
+        onClose: () => {
+          close()
+          selectedEvent = null
+        },
+      },
+      {
+        closeButton: false,
+        closeOnEsc: false,
+        styleContent: { padding: 0 },
+        closeOnOuterClick: true,
+      }
+    )
  }
 </script>

@ -71,11 +84,6 @@
    {/each}
  </form>
 </div>
-<EventEditorModal
-  open={modalOpen}
-  onClose={closeModal}
-  eventOptions={events}
-  event={selectedEvent} />

 <style>
  h3 {
--- a/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
@ -1,4 +1,5 @@
 <script>
+  import { Button } from "@budibase/bbui"
  import IconButton from "components/common/IconButton.svelte"
  import PlusButton from "components/common/PlusButton.svelte"
  import Select from "components/common/Select.svelte"
@ -85,27 +86,28 @@
      </Select>
    </div>
    {#if parameters}
+      <br />
      {#each parameters as parameter, idx}
-        <StateBindingCascader onChange={onParameterChanged(idx)} {parameter} />
+        <StateBindingCascader on:change={onParameterChanged(idx)} {parameter} />
      {/each}
    {/if}
-  </div>
-  <div class="event-action-button">
    {#if parameters.length > 0}
-      {#if newHandler}
-        <PlusButton on:click={onCreate} />
-      {:else}
-        <IconButton icon="x" on:click={onRemoved} />
-      {/if}
+      <div class="button-container">
+        {#if newHandler}
+          <Button primary thin on:click={onCreate}>Add Action</Button>
+        {:else}
+          <Button outline thin on:click={onRemoved}>Remove Action</Button>
+        {/if}
+      </div>
    {/if}
  </div>
 </div>

 <style>
  .type-selector-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    display: grid;
+    grid-gap: 20px;
+    width: 100%;
    background: rgba(223, 223, 223, 0.5);
    border: 1px solid #dfdfdf;
    margin-bottom: 18px;
@ -122,17 +124,19 @@

  .handler-controls {
    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 10px;
+    grid-template-columns: 1fr;
+    grid-gap: 20px;
    padding: 22px;
  }

-  .event-action-button {
-    margin-right: 20px;
+  .button-container {
+    display: grid;
+    justify-items: end;
  }

  span {
-    font-size: 13px;
-    margin-bottom: 5px;
+    font-size: 18px;
+    margin-bottom: 10px;
+    font-weight: 500;
  }
 </style>
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@ -1,8 +1,8 @@
 <script>
+  import { Input } from "@budibase/bbui"
  import IconButton from "components/common/IconButton.svelte"
  import PlusButton from "components/common/PlusButton.svelte"
  import Select from "components/common/Select.svelte"
-  import Input from "components/common/Input.svelte"
  import { find, map, keys, reduce, keyBy } from "lodash/fp"
  import { pipe } from "components/common/core"
  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@ -10,64 +10,43 @@
  import { ArrowDownIcon } from "components/common/Icons/"

  export let parameter
-  export let onChange

  let isOpen = false
+
+  const capitalize = s => {
+    if (typeof s !== "string") return ""
+    return s.charAt(0).toUpperCase() + s.slice(1)
+  }
 </script>

 <div class="handler-option">
-  <span>{parameter.name}</span>
-  <div class="handler-input">
-    {#if parameter.name === 'workflow'}
-      <select
-        class="budibase__input"
-        on:change={onChange}
-        bind:value={parameter.value}>
-        {#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
-          <option value={workflow._id}>{workflow.name}</option>
-        {/each}
-      </select>
-    {:else}
-      <Input on:change={onChange} value={parameter.value} />
-      <button on:click={() => (isOpen = !isOpen)}>
-        <div class="icon" style={`transform: rotate(${isOpen ? 0 : 90}deg);`}>
-          <ArrowDownIcon size={36} />
-        </div>
-      </button>
-    {/if}
-  </div>
+  {#if parameter.name === 'workflow'}
+    <span>{parameter.name}</span>
+  {/if}
+  {#if parameter.name === 'workflow'}
+    <Select on:change bind:value={parameter.value}>
+      {#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
+        <option value={workflow._id}>{workflow.name}</option>
+      {/each}
+    </Select>
+  {:else}
+    <Input
+      name={parameter.name}
+      label={capitalize(parameter.name)}
+      on:change
+      value={parameter.value} />
+  {/if}
 </div>

 <style>
-  button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    background: rgba(249, 249, 249, 1);
-
-    font-size: 1.6rem;
-    font-weight: 700;
-    color: rgba(22, 48, 87, 1);
-    margin-left: 5px;
-  }
-
-  .icon {
-    width: 24px;
-  }
-
  .handler-option {
    display: flex;
    flex-direction: column;
  }

-  .handler-input {
-    position: relative;
-    display: flex;
-  }
-
  span {
-    font-size: 13px;
-    margin-bottom: 5px;
+    font-size: 18px;
+    margin-bottom: 10px;
+    font-weight: 500;
  }
 </style>
--- a/packages/builder/src/components/userInterface/ModelSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelSelect.svelte
@ -7,7 +7,7 @@
 <div class="uk-margin block-field">
  <div class="uk-form-controls">
    <select class="budibase__input" on:change {value}>
-      <option value=""></option>
+      <option value="" />
      {#each $backendUiStore.models as model}
        <option value={model._id}>{model.name}</option>
      {/each}
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@ -16,7 +16,7 @@
  }
 </script>

-{#if panelDefinition.length > 0}
+{#if panelDefinition && panelDefinition.length > 0}
  {#each panelDefinition as definition}
    {#if propExistsOnComponentDef(definition.key)}
      <PropertyControl
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@ -267,7 +267,21 @@ export default {
            "A component that automatically generates a login screen for your app.",
          icon: "ri-login-box-fill",
          children: [],
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Name",
+                key: "name",
+                control: Input,
+              },
+              {
+                label: "Logo",
+                key: "logo",
+                control: Input,
+              },
+            ],
+          },
        },
        {
          name: "Table",
@ -303,7 +317,28 @@ export default {
          icon: "ri-bar-chart-fill",
          properties: {
            design: { ...all },
-            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+            settings: [
+              { label: "Model", key: "model", control: ModelSelect },
+              {
+                label: "Chart Type",
+                key: "type",
+                control: OptionSelect,
+                options: [
+                  "column2d",
+                  "column3d",
+                  "line",
+                  "area2d",
+                  "bar2d",
+                  "bar3d",
+                  "pie2d",
+                  "pie3d",
+                  "doughnut2d",
+                  "doughnut3d",
+                  "pareto2d",
+                  "pareto3d",
+                ],
+              },
+            ],
          },
          children: [],
        },
@ -360,7 +395,15 @@ export default {
            "A component for handling the navigation within your app.",
          icon: "ri-navigation-fill",
          children: [],
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [
+              { label: "Logo URL", key: "logoUrl", control: Input },
+              { label: "Title", key: "title", control: Input },
+              { label: "Color", key: "color", control: Input },
+              { label: "Background", key: "backgroundColor", control: Input },
+            ],
+          },
        },
      ],
    },
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
@ -7,6 +7,7 @@
 <div class="uk-margin block-field">
  <div class="uk-form-controls">
    <select class="budibase__input" bind:value>
+      <option value="" />
      {#each $backendUiStore.models as model}
        <option value={model}>{model.name}</option>
      {/each}
--- 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/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@ -1,6 +1,7 @@
 <script>
  import Modal from "svelte-simple-modal"
  import { store } from "builderStore"
+  import { get } from "builderStore/api"

  import { fade } from "svelte/transition"
  import { isActive, goto, layout } from "@sveltech/routify"
@ -14,7 +15,7 @@
  let promise = getPackage()

  async function getPackage() {
-    const res = await fetch(`/api/${application}/appPackage`)
+    const res = await get(`/api/${application}/appPackage`)
    const pkg = await res.json()

    if (res.ok) {
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -5,14 +5,14 @@
  import { onMount } from "svelte"
  import ActionButton from "components/common/ActionButton.svelte"
  import IconButton from "components/common/IconButton.svelte"
-
+  import { get } from "builderStore/api"
  import Spinner from "components/common/Spinner.svelte"
  import CreateAppModal from "components/start/CreateAppModal.svelte"

  let promise = getApps()

  async function getApps() {
-    const res = await fetch(`/api/applications`)
+    const res = await get("/api/applications")
    const json = await res.json()

    if (res.ok) {
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@ -3,7 +3,7 @@
  "version": "0.0.32",
  "description": "Budibase CLI",
  "repository": "https://github.com/Budibase/Budibase",
-  "homepage": "https://budibase.com",
+  "homepage": "https://www.budibase.com",
  "main": "src/cli.js",
  "bin": {
    "budi": "bin/budi"
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@ -56,8 +56,30 @@ export const screenRouter = ({ screens, onScreenSelected, appRootPath }) => {
    }
  }

+  function click(e) {
+    const x = e.target.closest("a")
+    const y = x && x.getAttribute("href")
+
+    if (
+      e.ctrlKey ||
+      e.metaKey ||
+      e.altKey ||
+      e.shiftKey ||
+      e.button ||
+      e.defaultPrevented
+    )
+      return
+
+    const target = x.target || "_self"
+    if (!y || target !== "_self" || x.host !== location.host) return
+
+    e.preventDefault()
+    route(y)
+  }
+
  addEventListener("popstate", route)
  addEventListener("pushstate", route)
+  addEventListener("click", click)

  return route
 }
--- a/packages/client/src/state/bbComponentApi.js
+++ b/packages/client/src/state/bbComponentApi.js
@ -23,10 +23,11 @@ export const bbFactory = ({
  }

  const apiCall = method => (url, body) =>
-    fetch(relativeUrl(url), {
+    fetch(url, {
      method: method,
      headers: {
        "Content-Type": "application/json",
+        "x-user-agent": "Budibase Builder",
      },
      body: body && JSON.stringify(body),
    })
--- a/packages/server/builder/assets/10-1.png
+++ b/packages/server/builder/assets/10-1.png
--- a/packages/server/builder/assets/budibase-emblem-white.svg
+++ b/packages/server/builder/assets/budibase-emblem-white.svg
@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{fill:#6A78D1;}
-	.st2{fill:#49C39E;}
-	.st3{fill:#F2545B;}
-	.st4{fill:#F5C26B;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M215,14.1l136.2,79.8c9.3,5.4,15,15.5,15,26.4v159.5c0,10.9-5.7,20.9-15,26.4L215,385.9
-			c-9.3,5.4-20.7,5.4-30,0L48.8,306.2c-9.3-5.4-15-15.5-15-26.4V120.2c0-10.9,5.7-20.9,15-26.4L185,14.1
-			C194.3,8.6,205.7,8.6,215,14.1z"/>
-	</g>
-	<g>
-		<path class="st1" d="M288.8,273.7l-83,43.6c-3.6,1.9-8,1.9-11.6,0l-83-43.6c-8.2-4.3-8.2-15.5,0-19.8l83-43.6
-			c3.6-1.9,8-1.9,11.6,0l83,43.6C297.1,258.3,297.1,269.4,288.8,273.7z"/>
-		<path class="st2" d="M288.8,231.2l-83,43.6c-3.6,1.9-8,1.9-11.6,0l-83-43.6c-8.2-4.3-8.2-15.5,0-19.8l83-43.6
-			c3.6-1.9,8-1.9,11.6,0l83,43.6C297.1,215.7,297.1,226.9,288.8,231.2z"/>
-		<path class="st3" d="M288.8,188.6l-83,43.6c-3.6,1.9-8,1.9-11.6,0l-83-43.6c-8.2-4.3-8.2-15.5,0-19.8l83-43.6
-			c3.6-1.9,8-1.9,11.6,0l83,43.6C297.1,173.1,297.1,184.3,288.8,188.6z"/>
-		<path class="st4" d="M288.8,146l-83,43.6c-3.6,1.9-8,1.9-11.6,0l-83-43.6c-8.2-4.3-8.2-15.5,0-19.8l83-43.6c3.6-1.9,8-1.9,11.6,0
-			l83,43.6C297.1,130.6,297.1,141.7,288.8,146z"/>
-	</g>
-</g>
-</svg>
--- a/packages/server/builder/assets/budibase-logo-only.png
+++ b/packages/server/builder/assets/budibase-logo-only.png
--- a/packages/server/builder/assets/budibase-logo-white.png
+++ b/packages/server/builder/assets/budibase-logo-white.png
--- a/packages/server/builder/assets/budibase-logo.png
+++ b/packages/server/builder/assets/budibase-logo.png
--- a/packages/server/builder/assets/space.jpeg
+++ b/packages/server/builder/assets/space.jpeg
--- a/packages/server/builder/assets/space.jpg
+++ b/packages/server/builder/assets/space.jpg
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@ -5,8 +5,10 @@ const newid = require("../../db/newid")
 const env = require("../../environment")
 const instanceController = require("./instance")
 const { resolve, join } = require("path")
-const { copy, readJSON, writeJSON, exists } = require("fs-extra")
+const { copy, exists, readFile, writeFile } = require("fs-extra")
+const { budibaseAppsDir } = require("../../utilities/budibaseDir")
 const { exec } = require("child_process")
+const sqrl = require("squirrelly")

 exports.fetch = async function(ctx) {
  const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
@ -72,7 +74,7 @@ const createEmptyAppPackage = async (ctx, app) => {
    "appDirectoryTemplate"
  )

-  const appsFolder = env.BUDIBASE_DIR
+  const appsFolder = budibaseAppsDir()
  const newAppFolder = resolve(appsFolder, app._id)

  if (await exists(newAppFolder)) {
@ -82,16 +84,27 @@ const createEmptyAppPackage = async (ctx, app) => {

  await copy(templateFolder, newAppFolder)

-  const packageJsonPath = join(appsFolder, app._id, "package.json")
-  const packageJson = await readJSON(packageJsonPath)
-
-  packageJson.name = npmFriendlyAppName(app.name)
-
-  await writeJSON(packageJsonPath, packageJson)
+  await updateJsonFile(join(appsFolder, app._id, "package.json"), {
+    name: npmFriendlyAppName(app.name),
+  })
+  await updateJsonFile(
+    join(appsFolder, app._id, "pages", "main", "page.json"),
+    app
+  )
+  await updateJsonFile(
+    join(appsFolder, app._id, "pages", "unauthenticated", "page.json"),
+    app
+  )

  return newAppFolder
 }

+const updateJsonFile = async (filePath, app) => {
+  const json = await readFile(filePath, "utf8")
+  const newJson = sqrl.Render(json, app)
+  await writeFile(filePath, newJson, "utf8")
+}
+
 const runNpmInstall = async newAppFolder => {
  return new Promise((resolve, reject) => {
    const cmd = `cd ${newAppFolder} && npm install`
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@ -10,12 +10,9 @@ exports.authenticate = async ctx => {
  if (!username) ctx.throw(400, "Username Required.")
  if (!password) ctx.throw(400, "Password Required")

-  // TODO: Don't use this. It can't be relied on
-  const referer = ctx.request.headers.referer.split("/")
-  const appId = referer[3]
-
  // find the instance that the user is associated with
  const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
+  const appId = ctx.params.appId
  const app = await db.get(appId)
  const instanceId = app.userInstanceMap[username]

--- a/packages/server/src/api/controllers/model.js
+++ b/packages/server/src/api/controllers/model.js
@ -10,6 +10,12 @@ exports.fetch = async function(ctx) {
  ctx.body = body.rows.map(row => row.doc)
 }

+exports.find = async function(ctx) {
+  const db = new CouchDB(ctx.params.instanceId)
+  const model = await db.get(ctx.params.id)
+  ctx.body = model
+}
+
 exports.create = async function(ctx) {
  const db = new CouchDB(ctx.params.instanceId)
  const newModel = {
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@ -13,7 +13,6 @@ exports.serveBuilder = async function(ctx) {
 }

 exports.serveApp = async function(ctx) {
-  // TODO: update homedir stuff to wherever budi is run
  // default to homedir
  const appPath = resolve(
    budibaseAppsDir(),
@ -26,7 +25,6 @@ exports.serveApp = async function(ctx) {
 }

 exports.serveComponentLibrary = async function(ctx) {
-  // TODO: update homedir stuff to wherever budi is run
  // default to homedir
  let componentLibraryPath = resolve(
    budibaseAppsDir(),
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@ -38,6 +38,7 @@ router
    ctx.config = {
      latestPackagesFolder: budibaseAppsDir(),
      jwtSecret: env.JWT_SECRET,
+      useAppRootPath: true,
    }
    ctx.isDev = env.NODE_ENV !== "production" && env.NODE_ENV !== "jest"
    await next()
--- a/packages/server/src/api/routes/auth.js
+++ b/packages/server/src/api/routes/auth.js
@ -3,6 +3,6 @@ const controller = require("../controllers/auth")

 const router = Router()

-router.post("/api/authenticate", controller.authenticate)
+router.post("/:appId/api/authenticate", controller.authenticate)

 module.exports = router
--- a/packages/server/src/api/routes/model.js
+++ b/packages/server/src/api/routes/model.js
@ -43,6 +43,7 @@ router

 router
  .get("/api/:instanceId/models", authorized(BUILDER), modelController.fetch)
+  .get("/api/:instanceId/models/:id", authorized(BUILDER), modelController.find)
  .post("/api/:instanceId/models", authorized(BUILDER), modelController.create)
  // .patch("/api/:instanceId/models", controller.update)
  .delete(
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@ -22,6 +22,7 @@ exports.supertest = async () => {
 exports.defaultHeaders = {
  Accept: "application/json",
  Cookie: ["builder:token=test-admin-secret"],
+  "x-user-agent": "Budibase Builder",
 }

 exports.createModel = async (request, instanceId, model) => {
@ -175,8 +176,7 @@ const createUserWithPermissions = async (
  const designDoc = await db.get("_design/database")

  const loginResult = await request
-    .post(`/api/authenticate`)
-    .set("Referer", `http://localhost:4001/${designDoc.metadata.applicationId}`)
+    .post(`/${designDoc.metadata.applicationId}/api/authenticate`)
    .send({ username, password })

  // returning necessary request headers
--- a/packages/server/src/middleware/authenticated.js
+++ b/packages/server/src/middleware/authenticated.js
@ -13,23 +13,31 @@ module.exports = async (ctx, next) => {
    return
  }

-  if (ctx.cookies.get("builder:token") === env.ADMIN_SECRET) {
-    ctx.isAuthenticated = true
-    ctx.isBuilder = true
+  const appToken = ctx.cookies.get("budibase:token")
+  const builderToken = ctx.cookies.get("builder:token")
+  const isBuilderAgent = ctx.headers["x-user-agent"] === "Budibase Builder"
+
+  // all admin api access should auth with buildertoken and 'Budibase Builder user agent
+  const shouldAuthAsBuilder = isBuilderAgent && builderToken
+
+  if (shouldAuthAsBuilder) {
+    const builderTokenValid = builderToken === env.ADMIN_SECRET
+
+    ctx.isAuthenticated = builderTokenValid
+    ctx.isBuilder = builderTokenValid
+
    await next()
    return
  }

-  const token = ctx.cookies.get("budibase:token")
-
-  if (!token) {
+  if (!appToken) {
    ctx.isAuthenticated = false
    await next()
    return
  }

  try {
-    const jwtPayload = jwt.verify(token, ctx.config.jwtSecret)
+    const jwtPayload = jwt.verify(appToken, ctx.config.jwtSecret)

    ctx.user = {
      ...jwtPayload,
--- a/packages/server/src/utilities/appDirectoryTemplate/package.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/package.json
@ -1,5 +1,5 @@
 {
-  "name": "name",
+  "name": "{{ name }}",
  "version": "1.0.0",
  "description": "",
  "author": "",
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@ -1,5 +1,5 @@
 {
-	"title": "Test App",
+	"title": "{{ name }}",
 	"favicon": "./_shared/favicon.png",
 	"stylesheets": [],
 	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
@ -1,21 +1,45 @@
 {
-	"title": "Test App",
-	"favicon": "./_shared/favicon.png",
-	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
-	"props" : {
-		"_component": "@budibase/standard-components/container",
-		"_children": [],
-		"_id": 1,
-		"type": "div",
-		"_styles": {
-			"active": {},
-			"hover": {},
-			"normal": {},
-			"selected": {}
-		},
-		"_code": ""
-	},
-	"_css": "",
-	"uiFunctions": ""
+  "componentLibraries": [
+    "@budibase/standard-components",
+    "@budibase/materialdesign-components"
+  ],
+  "title": "{{ name }}",
+  "favicon": "./_shared/favicon.png",
+  "stylesheets": [],
+  "props": {
+    "_component": "@budibase/standard-components/container",
+    "_children": [
+      {
+        "_id": "686c252d-dbf2-4e28-9078-414ba4719759",
+        "_component": "@budibase/standard-components/login",
+        "_styles": {
+          "normal": {},
+          "hover": {},
+          "active": {},
+          "selected": {}
+        },
+        "_code": "",
+        "loginRedirect": "",
+        "usernameLabel": "Username",
+        "passwordLabel": "Password",
+        "loginButtonLabel": "Login",
+        "buttonClass": "",
+        "inputClass": "",
+        "_children": [],
+        "name": "{{ name }}",
+        "logo": ""
+      }
+    ],
+    "_id": 1,
+    "type": "div",
+    "_styles": {
+      "layout": {},
+      "position": {}
+    },
+    "_code": "",
+    "className": "",
+    "onLoad": []
+  },
+  "_css": "",
+  "uiFunctions": ""
 }
--- a/packages/server/src/utilities/builder/buildPage.js
+++ b/packages/server/src/utilities/builder/buildPage.js
@ -28,8 +28,7 @@ module.exports = async (config, appId, pageName, pkg) => {
  await savePageJson(appPath, pageName, pkg)
 }

-const rootPath = (config, appname) =>
-  config.useAppRootPath ? `/${appname}` : ""
+const rootPath = (config, appId) => (config.useAppRootPath ? `/${appId}` : "")

 const copyClientLib = async (appPath, pageName) => {
  const sourcepath = require.resolve("@budibase/client")
@ -46,7 +45,7 @@ const copyClientLib = async (appPath, pageName) => {

 const buildIndexHtml = async (config, appId, pageName, appPath, pkg) => {
  const appPublicPath = publicPath(appPath, pageName)
-  const appRootPath = appId
+  const appRootPath = rootPath(config, appId)

  const stylesheetUrl = s =>
    s.startsWith("http") ? s : `/${rootPath(config, appId)}/${s}`
--- a/packages/server/src/utilities/builder/index.template.html
+++ b/packages/server/src/utilities/builder/index.template.html
@ -1,14 +1,17 @@
 <!doctype html>
 <html>
+
 <head>
-	<meta charset='utf8'>
-	<meta name='viewport' content='width=device-width'>
+    <meta charset='utf8'>
+    <meta name='viewport' content='width=device-width'>

-	<title>{{ title }}</title>
+    <title>{{ title }}</title>
    <link rel='icon' type='image/png' href='{{ favicon }}'>
-    
+
    <style>
-        html, body {
+        html,
+        body {
+            font-family: Roboto;
            height: 100%;
            width: 100%;
            margin: 0px;
@ -30,13 +33,14 @@

    <script src='{{ appRootPath }}/clientFrontendDefinition.js'></script>
    <script src='{{ appRootPath }}/budibase-client.js'></script>
-    
+
 </head>

 <body id="app">
-	
+
    <script>
        loadBudibase();
    </script>
 </body>
+
 </html>
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@ -59,6 +59,7 @@
 		"props": {
 			"logo": "asset",
 			"loginRedirect": "string",
+			"name": "string",
 			"usernameLabel": {
 				"type": "string",
 				"default": "Username"
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@ -17,7 +17,7 @@

 <button
  bind:this={theButton}
-  class={className}
+  class="default"
  disabled={disabled || false}
  on:click={clickHandler}>
  {#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
@ -25,23 +25,21 @@

 <style>
  .default {
-    font-family: inherit;
-    font-size: inherit;
-    padding: 0.4em;
-    margin: 0 0 0.5em 0;
+    align-items: center;
+    font-family: Inter;
+    font-size: 16px;
+    padding: 0px 16px;
    box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 2px;
-    color: #000333;
+    border-radius: 4px;
    outline: none;
-  }
-
-  .default:active {
-    background-color: #f9f9f9;
-  }
-
-  .default:focus {
-    border-color: #666;
+    height: 40px;
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    overflow: hidden;
+    outline: none;
+    user-select: none;
+    white-space: nowrap;
+    text-align: center;
  }

  .border {
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@ -8,19 +8,32 @@
  let username
  let password
  let newModel = {
-    modelId: model._id,
+    modelId: model,
  }
  let store = _bb.store
+  let schema = {}
+  let modelDef = {}

-  $: fields = Object.keys(model.schema)
+  $: if (model && model.length !== 0) {
+    fetchModel()
+  }
+
+  $: fields = Object.keys(schema)
+
+  async function fetchModel() {
+    const FETCH_MODEL_URL = `/api/${_instanceId}/models/${model}`
+    const response = await _bb.api.get(FETCH_MODEL_URL)
+    modelDef = await response.json()
+    schema = modelDef.schema
+  }

  async function save() {
-    const SAVE_RECORD_URL = `/api/${_instanceId}/records`
+    const SAVE_RECORD_URL = `/api/${_instanceId}/${model}/records`
    const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
    const json = await response.json()

    store.update(state => {
-      state[model._id] = [...state[model._id], json]
+      state[model._id] = [...state[model], json]
      return state
    })
  }
@ -45,24 +58,95 @@
  }
 </script>

-<form class="uk-form" on:submit|preventDefault>
-  <h4>{model.name}</h4>
-  <div>
+<form class="form" on:submit|preventDefault>
+  <div class="form-content">
    {#each fields as field}
-      <div class="uk-margin">
+      <div class="form-item">
        <label class="form-label" for="form-stacked-text">{field}</label>
        <input
-          class="uk-input"
-          type={model.schema[field].type === 'string' ? 'text' : model.schema[field].type}
+          class="input"
+          placeholder={field}
+          type={schema[field].type === 'string' ? 'text' : schema[field].type}
          on:change={handleInput(field)} />
      </div>
+      <hr />
    {/each}
+    <div class="button-block">
+      <button on:click={save}>Submit Form</button>
+    </div>
  </div>
-  <button on:click={save}>SAVE</button>
 </form>

 <style>
+  .form {
+    align-items: center;
+    width: 100%;
+  }
+
+  .form-content {
+    margin-bottom: 20px;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .input {
+    width: 600px;
+    height: 40px;
+    border-radius: 5px;
+    border: 1px solid #e6e6e6;
+    padding: 6px 12px 6px 12px;
+    font-size: 16px;
+  }
+
+  .form-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
  .form-label {
    font-weight: bold;
+    margin-bottom: 8px;
+  }
+
+  hr {
+    border: 1px solid #fafafa;
+    margin: 20px 0px;
+  }
+
+  hr:nth-last-child(2) {
+    border: 1px solid #fff;
+    margin: 20px 0px;
+  }
+
+  .button-block {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  button {
+    font-family: Inter;
+    font-size: 16px;
+    padding: 0.4em;
+    box-sizing: border-box;
+    border-radius: 4px;
+    color: white;
+    background-color: #393c44;
+    outline: none;
+    width: 300px;
+    height: 40px;
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    overflow: hidden;
+    outline: none;
+    user-select: none;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  button:hover {
+    background-color: white;
+    border-color: #393c44;
+    color: #393c44;
  }
 </style>
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@ -1,10 +1,9 @@
 <script>
  import Button from "./Button.svelte"

-  export let usernameLabel = "Username"
-  export let passwordLabel = "Password"
  export let loginButtonLabel = "Login"
  export let logo = ""
+  export let name = ""
  export let buttonClass = ""
  export let inputClass = ""

@ -26,9 +25,16 @@

  const login = async () => {
    loading = true
-    const response = await _bb.api.post("/api/authenticate", {
-      username,
-      password,
+    const response = await fetch(_bb.relativeUrl("/api/authenticate"), {
+      body: JSON.stringify({
+        username,
+        password,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+        "x-user-agent": "Budibase Builder",
+      },
+      method: "POST",
    })

    if (response.status === 200) {
@ -51,14 +57,23 @@
      </div>
    {/if}

+    <h1 class="header-content">Log in to {name}</h1>
+
    <div class="form-root">
-      <div class="label">{usernameLabel}</div>
      <div class="control">
-        <input bind:value={username} type="text" class={_inputClass} />
+        <input
+          bind:value={username}
+          type="text"
+          placeholder="Username"
+          class={_inputClass} />
      </div>
-      <div class="label">{passwordLabel}</div>
+
      <div class="control">
-        <input bind:value={password} type="password" class={_inputClass} />
+        <input
+          bind:value={password}
+          type="password"
+          placeholder="Password"
+          class={_inputClass} />
      </div>
    </div>

@ -77,28 +92,42 @@
 <style>
  .root {
    height: 100%;
-    display: grid;
-    grid-template-columns: [left] 1fr [middle] auto [right] 1fr;
-    grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
  }

  .content {
-    grid-column-start: middle;
-    grid-row-start: center;
-    width: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
  }

  .logo-container {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
  }

  .logo-container > img {
-    max-width: 100%;
+    max-width: 200px;
  }

  .login-button-container {
-    text-align: right;
-    margin-top: 20px;
+    margin-top: 6px;
+    max-width: 100%;
+  }
+
+  .header-content {
+    font-family: Inter;
+    font-weight: 700;
+    color: #1f1f1f;
+    font-size: 48px;
+    line-height: 72px;
+    margin-bottom: 30px;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    font-feature-settings: "case" "rlig" "calt" 0;
  }

  .incorrect-details-panel {
@ -114,48 +143,55 @@
  }

  .form-root {
-    display: grid;
-    grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 300px;
  }

-  .label {
-    grid-column-start: label;
-    padding: 5px 10px;
-    vertical-align: middle;
-  }
  .control {
-    grid-column-start: control;
-    padding: 5px 10px;
+    padding: 6px 0px;
+    width: 100%;
  }

  .default-input {
-    font-family: inherit;
-    font-size: inherit;
-    padding: 0.4em;
+    font-family: Inter;
+    font-size: 14px;
+    color: #393c44;
+    padding: 2px 6px 2px 12px;
    margin: 0 0 0.5em 0;
    box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 2px;
+    border: 0.5px solid #d8d8d8;
+    border-radius: 4px;
    width: 100%;
+    height: 40px;
+    transition: border-color 100ms ease-in 0s;
+    outline-color: #797979;
  }

  .default-button {
-    font-family: inherit;
-    font-size: inherit;
+    font-family: Inter;
+    font-size: 16px;
    padding: 0.4em;
-    margin: 0 0 0.5em 0;
    box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 2px;
-    color: #000333;
+    border-radius: 4px;
+    color: white;
+    background-color: #393c44;
    outline: none;
+    width: 300px;
+    height: 40px;
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    overflow: hidden;
+    outline: none;
+    user-select: none;
+    white-space: nowrap;
+    text-align: center;
  }

-  .default-button:active {
-    background-color: #f9f9f9;
-  }
-
-  .default-button:focus {
-    border-color: #f9f9f9;
+  .default-button:hover {
+    background-color: white;
+    border-color: #393c44;
+    color: #393c44;
  }
 </style>