Various minor UI updates including the settings modal

Settings modal update includies, improved spacing, element sizing. Working with this part of the platform felt a little brittle. It might be the fact it's a modal.

The frontend component section had a different layout that the block section in the backend and workflow section - updated to follow suit.

Dataform button updated and improved.

Settings button color updated

Additonal data blocks added which are pretty popular (not essential but took me mew a seconds to add and will save me a decent bit in the future)

packages/builder/src/budibase.css

@@ -63,7 +63,7 @@
 
 .budibase__nav-item.selected {
     color: var(--ink);
-    background: var(--blue-light);
+    background: var(--grey-2);
 }
 
 .budibase__nav-item:hover {

packages/builder/src/components/common/Block.svelte

@@ -28,12 +28,15 @@
   }
 
   i {
-    font-size: 30px;
+    font-size: 24px;
+    color: var(--grey-7);
   }
 
   span {
     font-size: 14px;
     text-align: center;
+    margin-top: 8px;
+    line-height: 1.25;
   }
 
   div:hover {

packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte

@@ -3,7 +3,7 @@
   import { store, backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import { compose, map, get, flatten } from "lodash/fp"
-  import { Button } from "@budibase/bbui"
+  import { Input, TextArea, Button } from "@budibase/bbui"
   import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
   import Select from "components/common/Select.svelte"
   import RecordFieldControl from "./RecordFieldControl.svelte"
@@ -70,7 +70,7 @@
 <div class="actions">
   <header>
     <i class="ri-file-user-fill" />
-    <h4 class="budibase__title--4">Create / Edit Record</h4>
+    <h4>Create / Edit Record</h4>
   </header>
   <ErrorsBox {errors} />
   <form on:submit|preventDefault class="uk-form-stacked">
@@ -117,15 +117,16 @@
     align-items: center;
     justify-content: center;
     background: var(--blue-light);
-    color: var(--ink);
+    color: var(--grey-7);
     font-size: 20px;
-    border-radius: 3px;
+    border-radius: 5px;
   }
 
   h4 {
     display: inline-block;
     font-size: 24px;
-    font-weight: bold;
+    font-weight: 600;
+    font-family: sans-serif;
     color: var(--ink);
     margin: 0;
   }

packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte

@@ -52,17 +52,28 @@
   }
 
   span {
+    cursor: pointer;
+    display: grid;
+    justify-content: center;
+    align-content: center;
+    padding: 0px 16px;
+    height: 36px;
     text-align: center;
-    padding: 10px;
-    font-weight: 500;
-    border-radius: 3px;
-    color: var(--ink-lighter);
+    background: #ffffff;
+    color: var(--grey-7);
+    border-radius: 5px;
+    font-family: inter;
     font-size: 14px;
-    background: var(--grey-1);
+    font-weight: 400;
+    transition: all 0.3s;
+    text-rendering: optimizeLegibility;
+    border: none !important;
+    transition: 0.2s;
+    outline: none;
   }
 
   span:hover {
-    background: var(--blue-light);
+    color: var(--ink);
     cursor: pointer;
   }
 

packages/builder/src/components/nav/ModelNavigator/ListItem.svelte

@@ -31,11 +31,11 @@
   }
 
   .selected {
-    background-color: var(--blue-light);
+    background-color: var(--grey-2);
   }
 
   div:hover {
-    background-color: var(--blue-light);
+    background-color: var(--grey-1);
     cursor: pointer;
   }
 

packages/builder/src/components/settings/Link.svelte

@@ -34,7 +34,7 @@
   }
   .topnavitemright {
     cursor: pointer;
-    color: var(--ink-light);
+    color: var(--grey-7);
     margin: 0px 20px 0px 0px;
     padding-top: 4px;
     font-weight: 500;

packages/builder/src/components/settings/Modal.svelte

@@ -55,6 +55,7 @@
 <style>
   .container {
     position: relative;
+    height: 36rem;
   }
 
   .close-button {
@@ -88,9 +89,10 @@
     width: 20px;
     padding: 10px;
     background-color: var(--blue-light);
+    color: var(--grey-7);
   }
   .body {
-    padding: 40px 40px 80px 40px;
+    padding: 40px 40px 40px 40px;
     display: grid;
     grid-gap: 20px;
   }

packages/builder/src/components/settings/tabs/APIKeys.svelte

@@ -2,7 +2,6 @@
   import { Input, Button } from "@budibase/bbui"
   import { store } from "builderStore"
   import api from "builderStore/api"
-  import Title from "../TabTitle.svelte"
 
   let keys = { budibase: "", sendGrid: "" }
 
@@ -22,7 +21,6 @@
   fetchKeys()
 </script>
 
-<Title>API Keys</Title>
 <div class="container">
   <div class="background">
     <Input
@@ -49,7 +47,6 @@
   }
   .background {
     border-radius: 5px;
-    background-color: var(--light-grey);
-    padding: 12px 12px 18px 12px;
+    padding: 12px 0px;
   }
 </style>

packages/builder/src/components/settings/tabs/DangerZone.svelte

@@ -1,7 +1,6 @@
 <script>
   import { params, goto } from "@sveltech/routify"
   import { Input, TextArea, Button } from "@budibase/bbui"
-  import Title from "../TabTitle.svelte"
   import { del } from "builderStore/api"
 
   let value = ""
@@ -23,20 +22,21 @@
   }
 </script>
 
-<Title>Danger Zone</Title>
 <div class="background">
+  <p>
+    Type DELETE into the textbox, then click the following button to delete your
+    web app:
+  </p>
   <Input
     on:change={e => (value = e.target.value)}
     on:input={e => (value = e.target.value)}
     thin
     disabled={loading}
-    placeholder=""
-    label="Type DELETE into the textbox, then click the following button to
-    delete your web app:" />
+    placeholder="" />
 
   <Button
     disabled={value !== 'DELETE' || loading}
-    primary
+    red
     wide
     on:click={deleteApp}>
     Delete Entire Web App
@@ -48,8 +48,10 @@
     display: grid;
     grid-gap: 16px;
     border-radius: 5px;
-    background-color: var(--light-grey);
-    padding: 12px 12px 18px 12px;
+    padding: 12px 0px;
+  }
+  p {
+    margin: 0;
   }
   .background :global(button) {
     max-width: 100%;

packages/builder/src/components/settings/tabs/General.svelte

@@ -2,7 +2,6 @@
   import { Input, TextArea, Button } from "@budibase/bbui"
   import { store } from "builderStore"
   import api from "builderStore/api"
-  import Title from "../TabTitle.svelte"
 
   async function updateApplication(data) {
     const response = await api.put(`/api/${$store.appId}`, data)
@@ -17,34 +16,25 @@
   }
 </script>
 
-<Title>General</Title>
 <div class="container">
-  <div class="background">
   <Input
     on:save={e => updateApplication({ name: e.detail })}
     thin
     edit
     value={$store.name}
     label="Name" />
-  </div>
-  <div class="background">
   <TextArea
     on:save={e => updateApplication({ description: e.detail })}
     thin
     edit
     value={$store.description}
-      label="Name" />
-  </div>
+    label="Description" />
 </div>
 
 <style>
   .container {
     display: grid;
-    grid-gap: 16px;
-  }
-  .background {
-    border-radius: 5px;
-    background-color: var(--grey-1);
-    padding: 12px 12px 18px 12px;
+    grid-gap: 32px;
+    margin-top: 32px;
   }
 </style>

packages/builder/src/components/settings/tabs/Users.svelte

@@ -1,6 +1,5 @@
 <script>
   import { Input, Select, Button } from "@budibase/bbui"
-  import Title from "../TabTitle.svelte"
   import UserRow from "../UserRow.svelte"
 
   import { store, backendUiStore } from "builderStore"
@@ -52,9 +51,8 @@
   let fetchUsersPromise = fetchUsers()
 </script>
 
-<Title>Users</Title>
 <div class="container">
-  <div class="background create">
+  <div class="background">
     <div class="title">Create new user</div>
     <div class="inputs">
       <Input thin bind:value={username} name="Name" placeholder="Username" />
@@ -69,10 +67,10 @@
       </Select>
     </div>
     <div class="create-button">
-      <Button on:click={createUser} small blue>Create</Button>
+      <Button on:click={createUser} small primary>Create</Button>
     </div>
   </div>
-  <div class="background">
+  <div class="background-users">
     <div class="title">Current Users</div>
     {#await fetchUsersPromise}
       Loading state!
@@ -96,23 +94,27 @@
 <style>
   .container {
     display: grid;
-    grid-gap: 14px;
+    grid-gap: 32px;
+    margin-top: 32px;
   }
   .background {
     position: relative;
     display: grid;
     grid-gap: 12px;
     border-radius: 5px;
-    background-color: var(--grey-1);
-    padding: 12px 12px 18px 12px;
   }
-  .background.create {
-    background-color: var(--blue-light);
+
+  .background-users {
+    position: relative;
+    display: grid;
+    grid-gap: 12px;
+    border-radius: 5px;
   }
+
   .create-button {
     position: absolute;
-    top: 12px;
-    right: 12px;
+    top: 0px;
+    right: 0px;
   }
   .create-button :global(button) {
     font-size: var(--font-size-sm);
@@ -125,6 +127,7 @@
   }
   .inputs {
     display: grid;
+    margin-top: 12px;
     grid-gap: 18px;
     grid-template-columns: 1fr 1fr 1fr;
   }
@@ -133,13 +136,15 @@
     border-radius: var(--rounded-small);
   }
   .inputs :global(select) {
-    padding: 9px 12px;
+    padding: 10px 12px;
     border-radius: var(--rounded-small);
+    background-color: var(--grey-2);
   }
   ul {
     list-style: none;
     padding: 0;
     display: grid;
     grid-gap: 8px;
+    margin-top: 0;
   }
 </style>

packages/builder/src/components/start/AppCard.svelte

@@ -10,18 +10,19 @@
   <h3 class="app-title">{name}</h3>
   <p class="app-desc">{description}</p>
   <div class="card-footer">
-    <a href={`/_builder/${_id}`} class="app-button">Open Web App</a>
+    <a href={`/_builder/${_id}`} class="app-button">Open {name}</a>
   </div>
 </div>
 
 <style>
   .apps-card {
     background-color: var(--white);
-    padding: 20px 20px 30px 20px;
+    padding: 20px 20px 20px 20px;
     max-width: 400px;
     max-height: 150px;
     border-radius: 5px;
     border: 1px solid var(--grey-4);
+    font-family: Inter;
   }
 
   .app-button:hover {
@@ -34,12 +35,15 @@
     font-weight: 600;
     color: var(--ink);
     text-transform: capitalize;
-    font-family: Inter;
   }
 
   .app-desc {
     color: var(--grey-7);
-    font-family: Inter;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .card-footer {

packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte

@@ -72,7 +72,7 @@
               },
               _code: "",
               className: "",
-              text: "Screenslot",
+              text: "Screen Slot",
               type: "h1",
               _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
               _instanceName: "Heading",

packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js

@@ -5,7 +5,7 @@ export default `<html>
     <style>
       body, html {
         height: 100%!important;
-        font-family: Roboto !important;
+        font-family: Inter !important;
       }
       *, *:before, *:after {
         box-sizing: border-box;
@@ -26,13 +26,16 @@ export default `<html>
         }
 
         .container-screenslot-placeholder {
+          display: flex;
+          align-items: center;
+          justify-content: center;
           padding: 20px;
           text-align: center;
           border-style: dashed !important;
           border-width: 1px;
-          color: #806fde;
-          background: #e9e6ff44;
-          height: 100%;
+          color: #000000;
+          background: #fafafa;
+          height: 94%;
         }
 
         .container-screenslot-placeholder span {

packages/builder/src/components/userInterface/Colorpicker/components/Input.svelte

@@ -15,7 +15,7 @@
 
   input {
     width: 175px;
-    font-size: 13px;
+    font-size: 14px;
     background: #f1f3f4;
     border-radius: 8px;
     height: 20px;
@@ -24,5 +24,6 @@
     text-align: center;
     border: 1px solid #dadada;
     font-weight: 550;
+    font-family: sans-serif;
   }
 </style>

packages/builder/src/components/userInterface/ComponentSelectionList.svelte

@@ -61,8 +61,9 @@
 
 <style>
   .panel {
-    padding: 20px 0px;
-    display: flex;
-    flex-wrap: wrap;
+    margin-top: 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
   }
 </style>

packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte

@@ -73,7 +73,7 @@
     grid-template-columns: 1fr auto auto auto;
     padding: 0px 5px 0px 15px;
     margin: auto 0px;
-    border-radius: 3px;
+    border-radius: 5px;
     height: 36px;
     align-items: center;
   }

packages/builder/src/components/userInterface/ItemTab/Item.svelte

@@ -21,21 +21,17 @@
     display: flex;
     flex-direction: column;
     cursor: pointer;
-    margin-bottom: 8px;
-    padding: 8px 0px 16px 0px;
-    width: 110px;
+    padding: 12px 16px 16px 16px;
     height: 80px;
     justify-content: center;
     align-items: center;
-    margin-right: 8px;
     background-color: var(--grey-1);
-    border-radius: 3px;
+    border-radius: 5px;
   }
 
   .item-item:hover {
     background: var(--grey-2);
-    border-radius: 3px;
-    transition: all 0.2s;
+    transition: all 0.3s;
   }
 
   .item-icon {
@@ -51,6 +47,7 @@
   .item-name {
     font-size: 14px;
     font-weight: 400;
+    text-align: center;
   }
 
   i {

packages/builder/src/components/userInterface/ItemTab/Tab.svelte

@@ -23,21 +23,26 @@
 {#if !list.isCategory}
   <button class="back-button" on:click={() => (list = category)}>Back</button>
 {/if}
-
 {#each list.children as item}
   <Item {item} on:click={() => handleClick(item)} />
 {/each}
 
 <style>
   .back-button {
-    font-size: 16px;
-    width: 100%;
+    grid-column: 1 / span 2;
+    font-size: 14px;
     text-align: center;
-    height: 40px;
-    border-radius: 3px;
-    border: solid 1px #e8e8ef;
+    height: 36px;
+    border-radius: 5px;
+    border: solid 1px var(--grey-3);
     background: white;
-    margin-bottom: 20px;
     cursor: pointer;
+    font-weight: 500;
+    font-family: Inter;
+    transition: all 0.3ms;
+  }
+
+  .back-button:hover {
+    background: var(--grey-1);
   }
 </style>

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -472,7 +472,7 @@ export default {
       children: [
         {
           _component: "##builtin/screenslot",
-          name: "Screenslot",
+          name: "Screen Slot",
           description:
             "This component is a placeholder for the rendering of a screen within a page.",
           icon: "ri-crop-2-fill",

packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte

@@ -91,7 +91,7 @@
   }
 
   .workflow-item.selected {
-    background: var(--blue-light);
+    background: var(--grey-2);
   }
 
   .new-workflow-button {

packages/builder/src/constants/backend/index.js

@@ -87,8 +87,38 @@ export const BLOCKS = {
       presence: false,
     },
   },
+  COMPANY: {
+    name: "Company",
+    icon: "ri-text",
+    type: "string",
+    constraints: {
+      type: "string",
+      length: {},
+      presence: false,
+    },
+  },
+  EMAIL: {
+    name: "Email",
+    icon: "ri-text",
+    type: "string",
+    constraints: {
+      type: "string",
+      length: {},
+      presence: false,
+    },
+  },
   PHONE_NUMBER: {
-    name: "Phone Number",
+    name: "Phone No.",
+    icon: "ri-number-1",
+    type: "number",
+    constraints: {
+      type: "number",
+      presence: false,
+      numericality: {},
+    },
+  },
+  VALUE: {
+    name: "Value",
     icon: "ri-number-1",
     type: "number",
     constraints: {

packages/standard-components/public/global.css

@@ -12,6 +12,13 @@ body {
 	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 
+h4 {
+	color: #000000;
+	font-size: 24px;
+	box-sizing: border-box;
+	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
 a {
 	color: rgb(0,100,200);
 	text-decoration: none;

packages/standard-components/src/DataForm.svelte

@@ -166,9 +166,7 @@
       <button on:click={save} class:saved>
         {#if saved}
           <div in:fade>
-            <span class:saved style="margin-right: 5px">🎉</span>
-            Success
-            <span class:saved style="margin-left: 5px">🎉</span>
+            <span class:saved>Success</span>
           </div>
         {:else}
           <div>{buttonText || 'Submit Form'}</div>
@@ -187,14 +185,13 @@
 
   .form-content {
     margin-bottom: 20px;
+    width: 100%;
   }
 
   .input {
-    width: 600px;
-    height: 40px;
     border-radius: 5px;
     border: 1px solid #e6e6e6;
-    padding: 6px 12px 6px 12px;
+    padding: 1rem;
     font-size: 16px;
   }
 
@@ -244,7 +241,8 @@
   }
 
   button.saved {
-    background-color: green;
+    background-color: #84c991;
+    border: none;
   }
 
   button:hover {

packages/standard-components/src/DataFormWide.svelte

@@ -166,9 +166,7 @@
       <button on:click={save} class:saved>
         {#if saved}
           <div in:fade>
-            <span class:saved style="margin-right: 5px">🎉</span>
-            Success
-            <span class:saved style="margin-left: 5px">🎉</span>
+            <span class:saved>Success</span>
           </div>
         {:else}
           <div>{buttonText || 'Submit Form'}</div>
@@ -235,7 +233,8 @@
   }
 
   button.saved {
-    background-color: green;
+    background-color: #84c991;
+    border: none;
   }
 
   button:hover {

packages/standard-components/src/Heading.svelte

@@ -8,7 +8,11 @@
 
   let containerElement
 
-  $: containerElement && !text && _bb.props.children && _bb.props.children.length && _bb.attachChildren(containerElement)
+  $: containerElement &&
+    !text &&
+    _bb.props.children &&
+    _bb.props.children.length &&
+    _bb.attachChildren(containerElement)
 </script>
 
 {#if type === 'h1'}

packages/standard-components/src/Navigation.svelte

@@ -37,7 +37,7 @@
 
 <nav use:cssVars={cssVariables}>
   <a href="/">
-    <img class="logo" alt="logo" src={logoUrl} height="30" />
+    <img class="logo" alt="logo" src={logoUrl} height="48" />
     <span>{title}</span>
   </a>
   <div class="menu-items" bind:this={itemContainer} />
@@ -51,7 +51,7 @@
     display: flex;
     font-weight: bold;
     justify-content: space-between;
-    padding: 20px 0 20px 40px;
+    padding: 20px 0px;
   }
 
   nav > a {
@@ -63,8 +63,7 @@
   }
 
   nav a img {
-    border-radius: 15px;
-    margin-right: 15px;
+    margin-right: 16px;
   }
   .menu-items {
     display: flex;