From 1c63a93234b541d1bac524e7f8c31680f7d8166a Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 24 Jun 2020 15:04:01 +0200
Subject: [PATCH] more work on settings modal

---
 packages/builder/package.json                 |  2 +-
 .../src/components/settings/Modal.svelte      | 12 +---
 .../src/components/settings/TabTitle.svelte   | 13 ++++
 .../settings/tabs/DangerZone.svelte           |  5 +-
 .../components/settings/tabs/General.svelte   |  4 +-
 .../src/components/settings/tabs/Users.svelte | 65 ++++++++++++++++++-
 6 files changed, 86 insertions(+), 15 deletions(-)
 create mode 100644 packages/builder/src/components/settings/TabTitle.svelte

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 7067bafcba..cafbe6fa44 100644
--- a/packages/builder/package.json
+++ b/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",
diff --git a/packages/builder/src/components/settings/Modal.svelte b/packages/builder/src/components/settings/Modal.svelte
index bc7898442f..2d832481c3 100644
--- a/packages/builder/src/components/settings/Modal.svelte
+++ b/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",
diff --git a/packages/builder/src/components/settings/TabTitle.svelte b/packages/builder/src/components/settings/TabTitle.svelte
new file mode 100644
index 0000000000..e4d4aba217
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte
index 4cfa6cbb1e..ad243527ce 100644
--- a/packages/builder/src/components/settings/tabs/DangerZone.svelte
+++ b/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;
diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index 3128738cf1..bc0c17bc81 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/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;
diff --git a/packages/builder/src/components/settings/tabs/Users.svelte b/packages/builder/src/components/settings/tabs/Users.svelte
index f3d929a074..2bc175a6b1 100644
--- a/packages/builder/src/components/settings/tabs/Users.svelte
+++ b/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>