more work on settings modal

packages/builder/package.json

@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.8.1",
+    "@budibase/bbui": "^1.10.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",

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

@@ -1,5 +1,5 @@
 <script>
-  import { General, Permissions, Users, Integrations, DangerZone } from "./tabs"
+  import { General, Users, DangerZone } from "./tabs"
 
   import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
   import { SettingsIcon, CloseIcon } from "components/common/Icons/"
@@ -15,21 +15,11 @@
       key: "GENERAL",
       component: General,
     },
-    {
-      title: "Permissions",
-      key: "PERMISSIONS",
-      component: Permissions,
-    },
     {
       title: "Users",
       key: "USERS",
       component: Users,
     },
-    {
-      title: "Integrations",
-      key: "INTEGRATIONS",
-      component: Integrations,
-    },
     {
       title: "Danger Zone",
       key: "DANGERZONE",

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

@@ -0,0 +1,13 @@
+<h3>
+  <slot />
+</h3>
+
+<style>
+  h3 {
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--ink);
+    margin-top: var(--space-lg);
+    margin-bottom: var(--space-md);
+  }
+</style>

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

@@ -1,5 +1,7 @@
 <script>
   import { Input, TextArea, Button } from "@budibase/bbui"
+  import Title from "../TabTitle.svelte"
+
   let value = ""
   let loading = false
 
@@ -10,6 +12,7 @@
   }
 </script>
 
+<Title>Danger Zone</Title>
 <div class="background">
   <Input
     on:change={e => (value = e.target.value)}
@@ -32,7 +35,7 @@
 <style>
   .background {
     display: grid;
-    grid-gap: 16px;
+    grid-gap: var(--space);
     border-radius: 5px;
     background-color: var(--light-grey);
     padding: 12px 12px 18px 12px;

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

@@ -1,7 +1,9 @@
 <script>
   import { Input, TextArea, Button } from "@budibase/bbui"
+  import Title from "../TabTitle.svelte"
 </script>
 
+<Title>General</Title>
 <div class="container">
   <div class="background">
     <Input thin edit placeholder="Enter your name" label="Name" />
@@ -14,7 +16,7 @@
 <style>
   .container {
     display: grid;
-    grid-gap: 16px;
+    grid-gap: var(--space);
   }
   .background {
     border-radius: 5px;

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

@@ -1 +1,64 @@
-Users
+<script>
+  import { Input, Select, Button } from "@budibase/bbui"
+  import Title from "../TabTitle.svelte"
+</script>
+
+<Title>Users</Title>
+<div class="container">
+  <div class="background">
+    <div class="title">Create new user</div>
+    <Input thin placeholder="Enter name" label="Name" />
+    <Input thin placeholder="Enter Password" label="Password" />
+    <div>
+      <label>Access Level</label>
+      <Select>
+        <option value="admin">Admin</option>
+        <option value="poweruser">Power User</option>
+      </Select>
+    </div>
+    <div class="create-button">
+      <Button attention>Create</Button>
+    </div>
+  </div>
+</div>
+
+<style>
+  label {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.17;
+    font: var(--ink);
+    margin-bottom: 12px;
+  }
+  .container {
+    display: grid;
+    grid-gap: var(--space);
+  }
+  .background {
+    display: grid;
+    grid-gap: var(--space-md);
+    position: relative;
+    border-radius: 5px;
+    background-color: var(--light-grey);
+    padding: 12px 12px 18px 12px;
+  }
+  .background :global(select) {
+    min-width: 100%;
+    padding: 12px 9px;
+    height: initial;
+  }
+  .create-button {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .title {
+    font-size: 14px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.14;
+    letter-spacing: 0.14px;
+    text-align: left;
+    color: var(--font);
+  }
+</style>