Fix all styles in settings modal

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

@@ -5,7 +5,7 @@
   import { isActive, goto, layout } from "@sveltech/routify"
 
   // Handle create app modal
-  const { open } = getContext("simple-modal")
+  const { open, close } = getContext("simple-modal")
 
   const showSettingsModal = () => {
     open(
@@ -15,7 +15,6 @@
         description: "This is a hardcoded description that needs to change",
       },
       {
-        closeButton: false,
         closeOnEsc: true,
         styleContent: { padding: 0 },
         closeOnOuterClick: true,

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

@@ -6,7 +6,6 @@
   import { getContext } from "svelte"
   import { post } from "builderStore/api"
 
-  const { open, close } = getContext("simple-modal")
   export let name = ""
   export let description = ""
   const tabs = [
@@ -36,64 +35,40 @@
 </script>
 
 <div class="container">
-  <div class="body">
-    <div class="heading">
-      <span class="icon">
-        <SettingsIcon />
-      </span>
-      <h3>Settings</h3>
-    </div>
-    <Switcher headings={tabs} bind:value>
-      <svelte:component this={selectedTab} />
-    </Switcher>
-  </div>
-  <div class="close-button" on:click={close}>
-    <CloseIcon />
+  <div class="heading">
+    <i class="ri-settings-2-fill" />
+    <h3>Settings</h3>
   </div>
+  <Switcher headings={tabs} bind:value>
+    <svelte:component this={selectedTab} />
+  </Switcher>
 </div>
 
 <style>
   .container {
-    position: relative;
-    height: 36rem;
-  }
-
-  .close-button {
-    cursor: pointer;
-    position: absolute;
-    top: 20px;
-    right: 20px;
+    padding: var(--spacing-xl);
+    display: grid;
+    grid-gap: var(--spacing-xl);
   }
-  .close-button :global(svg) {
-    width: 24px;
-    height: 24px;
+  .container :global(section > header) {
+    /* Fix margin defined in BBUI as L rather than XL */
+    margin-bottom: var(--spacing-xl);
   }
+
   .heading {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-bottom: 20px;
   }
-  h3 {
+  .heading h3 {
+    font-size: var(--font-size-xl);
+    color: var(--ink);
+    font-weight: 600;
     margin: 0;
-    font-size: 24px;
-    font-weight: bold;
-  }
-  .icon {
-    display: grid;
-    border-radius: 3px;
-    align-content: center;
-    justify-content: center;
-    margin-right: 12px;
-    height: 20px;
-    width: 20px;
-    padding: 10px;
-    background-color: var(--blue-light);
-    color: var(--grey-7);
   }
-  .body {
-    padding: 40px 40px 40px 40px;
-    display: grid;
-    grid-gap: 20px;
+  .heading i {
+    margin-right: var(--spacing-m);
+    font-size: 28px;
+    color: var(--grey-6);
   }
 </style>

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

@@ -14,7 +14,7 @@
     bind:value={user.username}
     name="Name"
     placeholder="Username" />
-  <Select disabled={!editMode} bind:value={user.accessLevelId} thin>
+  <Select disabled={!editMode} bind:value={user.accessLevelId} thin secondary>
     <option value="ADMIN">Admin</option>
     <option value="POWER_USER">Power User</option>
   </Select>
@@ -36,19 +36,7 @@
   .inputs {
     display: grid;
     justify-items: stretch;
-    grid-gap: 18px;
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  .inputs :global(input) {
-    padding: 10px 12px;
-    border-radius: var(--rounded-small);
-  }
-  .inputs :global(select) {
-    padding: 9px 12px;
-    border-radius: var(--rounded-small);
-  }
-  .inputs :global(button) {
-    border-radius: var(--rounded-small);
-    height: initial;
+    grid-gap: var(--spacing-m);
+    grid-template-columns: 1fr 1fr 140px;
   }
 </style>

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

@@ -24,31 +24,23 @@
 </script>
 
 <div class="container">
-  <div class="background">
-    <Input
-      on:save={e => updateKey(['budibase', e.detail])}
-      thin
-      edit
-      value={keys.budibase}
-      label="Budibase" />
-  </div>
-  <div class="background">
-    <Input
-      on:save={e => updateKey(['sendgrid', e.detail])}
-      thin
-      edit
-      value={keys.sendgrid}
-      label="Sendgrid" />
-  </div>
+  <Input
+    on:save={e => updateKey(['budibase', e.detail])}
+    thin
+    edit
+    value={keys.budibase}
+    label="Budibase API Key" />
+  <Input
+    on:save={e => updateKey(['sendgrid', e.detail])}
+    thin
+    edit
+    value={keys.sendgrid}
+    label="Sendgrid API Key" />
 </div>
 
 <style>
   .container {
     display: grid;
-    grid-gap: var(--space);
-  }
-  .background {
-    border-radius: 5px;
-    padding: 12px 0px;
+    grid-gap: var(--spacing-xl);
   }
 </style>

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

@@ -1,6 +1,6 @@
 <script>
   import { params, goto } from "@sveltech/routify"
-  import { Input, TextArea, Button } from "@budibase/bbui"
+  import { Input, TextArea, Button, Body } from "@budibase/bbui"
   import { del } from "builderStore/api"
 
   let value = ""
@@ -23,17 +23,18 @@
 </script>
 
 <div class="background">
-  <p>
-    Type DELETE into the textbox, then click the following button to delete your
-    web app:
-  </p>
+  <Body>
+    Type
+    <b>DELETE</b>
+    into the textbox, then click the following button to delete your entire web
+    app.
+  </Body>
   <Input
     on:change={e => (value = e.target.value)}
     on:input={e => (value = e.target.value)}
     thin
     disabled={loading}
     placeholder="" />
-
   <Button
     disabled={value !== 'DELETE' || loading}
     red
@@ -46,11 +47,10 @@
 <style>
   .background {
     display: grid;
-    grid-gap: 16px;
-    border-radius: 5px;
-    padding: 12px 0px;
+    grid-gap: var(--spacing-xl);
   }
-  p {
+  .background :global(p) {
+    line-height: 1.2;
     margin: 0;
   }
   .background :global(button) {

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

@@ -22,19 +22,18 @@
     thin
     edit
     value={$store.name}
-    label="Name" />
+    label="App Name" />
   <TextArea
     on:save={e => updateApplication({ description: e.detail })}
     thin
     edit
     value={$store.description}
-    label="Description" />
+    label="App Description" />
 </div>
 
 <style>
   .container {
     display: grid;
-    grid-gap: 32px;
-    margin-top: 32px;
+    grid-gap: var(--spacing-xl);
   }
 </style>

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

@@ -1,5 +1,5 @@
 <script>
-  import { Input, Select, Button } from "@budibase/bbui"
+  import { Input, Select, Button, Label } from "@budibase/bbui"
   import UserRow from "../UserRow.svelte"
 
   import { store, backendUiStore } from "builderStore"
@@ -8,7 +8,7 @@
 
   let username = ""
   let password = ""
-  let accessLevelId
+  let accessLevelId = "ADMIN"
 
   $: valid = username && password && accessLevelId
   $: appId = $store.appId
@@ -52,8 +52,8 @@
 </script>
 
 <div class="container">
-  <div class="background">
-    <div class="title">Create new user</div>
+  <div>
+    <Label extraSmall grey>Create New User</Label>
     <div class="inputs">
       <Input thin bind:value={username} name="Name" placeholder="Username" />
       <Input
@@ -61,19 +61,17 @@
         bind:value={password}
         name="Password"
         placeholder="Password" />
-      <Select bind:value={accessLevelId} thin>
+      <Select secondary bind:value={accessLevelId} thin>
         <option value="ADMIN">Admin</option>
         <option value="POWER_USER">Power User</option>
       </Select>
-    </div>
-    <div class="create-button">
-      <Button on:click={createUser} small primary>Create</Button>
+      <Button on:click={createUser} primary>Create</Button>
     </div>
   </div>
-  <div class="background-users">
-    <div class="title">Current Users</div>
+  <div>
+    <Label extraSmall grey>Current Users</Label>
     {#await fetchUsersPromise}
-      Loading state!
+      Loading...
     {:then users}
       <ul>
         {#each users as user}
@@ -94,57 +92,21 @@
 <style>
   .container {
     display: grid;
-    grid-gap: 32px;
-    margin-top: 32px;
-  }
-  .background {
-    position: relative;
-    display: grid;
-    grid-gap: 12px;
-    border-radius: 5px;
-  }
-
-  .background-users {
-    position: relative;
-    display: grid;
-    grid-gap: 12px;
-    border-radius: 5px;
+    grid-gap: var(--spacing-xl);
   }
 
-  .create-button {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-  }
-  .create-button :global(button) {
-    font-size: var(--font-size-sm);
-    min-width: 100px;
-    border-radius: var(--rounded-small);
-  }
-  .title {
-    font-size: 14px;
-    font-weight: 500;
-  }
   .inputs {
     display: grid;
-    margin-top: 12px;
-    grid-gap: 18px;
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  .inputs :global(input) {
-    padding: 10px 12px;
-    border-radius: var(--rounded-small);
-  }
-  .inputs :global(select) {
-    padding: 10px 12px;
-    border-radius: var(--rounded-small);
-    background-color: var(--grey-2);
+    justify-items: stretch;
+    grid-gap: var(--spacing-m);
+    grid-template-columns: 1fr 1fr 1fr 140px;
   }
+
   ul {
     list-style: none;
     padding: 0;
     display: grid;
-    grid-gap: 8px;
-    margin-top: 0;
+    grid-gap: var(--spacing-m);
+    margin: 0;
   }
 </style>