Update merged files to use spectrum

packages/bbui/src/Link/Link.svelte

@@ -3,15 +3,18 @@
 
   export let href = "#"
   export let size = "M"
-    export let quiet = false;
-    export let primary = false;
-    export let secondary = false;
+  export let quiet = false
+  export let primary = false
+  export let secondary = false
   export let overBackground = false
+  export let target
 </script>
 
-<a {href}
+<a
+  {href}
+  {target}
   class:spectrum-Link--primary={primary}
   class:spectrum-Link--secondary={secondary}
   class:spectrum-Link--overBackground={overBackground}
   class:spectrum-Link--quiet={quiet}
-class="spectrum-Link spectrum-Link--size{size}"><slot /></a>
+  class="spectrum-Link spectrum-Link--size{size}"><slot /></a>

packages/bbui/src/Modal/Modal.svelte

@@ -5,10 +5,11 @@
   import { fade, fly } from "svelte/transition"
   import Portal from "svelte-portal"
   import Context from "../context"
-  import clickOutside from "../Actions/click_outside"
+
+  export let fixed = false
 
   const dispatch = createEventDispatcher()
-  let visible = false
+  let visible = !!fixed
   $: dispatch(visible ? "show" : "hide")
 
   export function show() {
@@ -19,7 +20,7 @@
   }
 
   export function hide() {
-    if (!visible) {
+    if (!visible || fixed) {
       return
     }
     visible = false

packages/bbui/src/Modal/ModalContent.svelte

@@ -2,7 +2,6 @@
   import "@spectrum-css/dialog/dist/index-vars.css"
   import { getContext } from "svelte"
   import Button from "../Button/Button.svelte"
-  import Heading from "../Typography/Heading.svelte"
   import Divider from "../Divider/Divider.svelte"
   import Icon from "../Icon/Icon.svelte"
   import Context from "../context"
@@ -35,8 +34,7 @@
   style="position: relative;"
   role="dialog"
   tabindex="-1"
-  aria-modal="true"
->
+  aria-modal="true">
   <div class="spectrum-Dialog-grid">
     <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">
       {title}
@@ -49,8 +47,7 @@
     </section>
     {#if showCancelButton || showConfirmButton}
       <div
-        class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter"
-      >
+        class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
         <slot name="footer" />
         {#if showCancelButton}
           <Button group secondary on:click={hide}>{cancelText}</Button>
@@ -61,8 +58,7 @@
             cta
             {...$$restProps}
             disabled={confirmDisabled}
-            on:click={confirm}
-          >
+            on:click={confirm}>
             {confirmText}
           </Button>
         {/if}

packages/builder/src/components/login/LoginForm.svelte

@@ -1,6 +1,12 @@
 <script>
-  import { Button, Label, Input, Spacer } from "@budibase/bbui"
-  import { notifier } from "builderStore/store/notifications"
+  import {
+    notifications,
+    Button,
+    Link,
+    Input,
+    Modal,
+    ModalContent,
+  } from "@budibase/bbui"
   import { auth } from "stores/backend"
 
   let username = ""
@@ -12,39 +18,51 @@
         username,
         password,
       })
-      notifier.success("Logged in successfully.")
+      notifications.success("Logged in successfully.")
     } catch (err) {
       console.error(err)
-      notifier.danger("Invalid credentials")
+      notifications.error("Invalid credentials")
     }
   }
 
   async function createTestUser() {
     try {
       await auth.firstUser()
-      notifier.success("Test user created")
+      notifications.success("Test user created")
     } catch (err) {
       console.error(err)
-      notifier.danger("Could not create test user")
+      notifications.error("Could not create test user")
     }
   }
 </script>
 
-<form on:submit|preventDefault data-cy="login-form">
-  <Spacer large />
-  <Label small>Email</Label>
-  <Input outline bind:value={username} />
-  <Spacer large />
-  <Label small>Password</Label>
-  <Input outline type="password" on:change bind:value={password} />
-  <Spacer large />
-  <Button primary on:click={login}>Login</Button>
-  <a target="_blank" href="/api/admin/auth/google">Sign In With Google</a>
+<Modal fixed>
+  <ModalContent
+    size="L"
+    title="Log In"
+    onConfirm={login}
+    confirmText="Log In"
+    showCancelButton={false}
+    showCloseIcon={false}>
+    <Input label="Email" bind:value={username} />
+    <Input label="Password" type="password" on:change bind:value={password} />
+    <div class="footer" slot="footer">
+      <Link target="_blank" href="/api/admin/auth/google">
+        Sign In With Google
+      </Link>
       <Button secondary on:click={createTestUser}>Create Test User</Button>
-</form>
+    </div>
+  </ModalContent>
+</Modal>
 
 <style>
-  form {
-    width: 60%;
+  .footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .footer :global(a) {
+    margin-right: var(--spectrum-global-dimension-static-size-200);
   }
 </style>

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

@@ -29,7 +29,7 @@
     {
       roleId: string()
         .nullable()
-        .required("You need to select a role for your user"),
+        .required("You need to select a role for this app"),
     },
   ]
 

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

@@ -1,28 +1,6 @@
 <script>
-  import { TextButton as Button, Modal } from "@budibase/bbui"
+  import { Button } from "@budibase/bbui"
   import { auth } from "stores/backend"
 </script>
 
-<div>
-  <Button text on:click={auth.logout}>
-    <i class="ri-logout-box-line" />
-    <p>Logout</p>
-  </Button>
-</div>
-
-<style>
-  div i {
-    font-size: 26px;
-    color: var(--grey-7);
-    margin-left: 12px;
-    margin-top: 10px;
-  }
-
-  div p {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    color: var(--ink);
-    font-weight: 400;
-    margin: 0 0 0 12px;
-  }
-</style>
+<Button primary quiet text icon="LogOut" on:click={auth.logout}>Log Out</Button>

packages/builder/src/pages/builder/_layout.svelte

@@ -105,4 +105,8 @@
     justify-content: space-between;
     height: 100%;
   }
+
+  .nav-bottom :global(> *) {
+    margin-top: 5px;
+  }
 </style>