90% finished modal

packages/builder/package.json

@@ -38,6 +38,7 @@
     ]
   },
   "dependencies": {
+    "@budibase/bbui": "^0.3.1",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
@@ -82,4 +83,4 @@
     "svelte": "^3.0.0"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
+}

packages/builder/src/components/common/Icons/Close.svelte

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>

packages/builder/src/components/common/Icons/Info.svelte

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/></svg>

packages/builder/src/components/common/Icons/index.js

@@ -29,3 +29,5 @@ export { default as ContributionIcon } from "./Contribution.svelte"
 export { default as BugIcon } from "./Bug.svelte"
 export { default as EmailIcon } from "./Email.svelte"
 export { default as TwitterIcon } from "./Twitter.svelte"
+export { default as InfoIcon } from "./Info.svelte"
+export { default as CloseIcon } from "./Close.svelte"

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

@@ -1,51 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  export let message
-  export let hasForm = false
-  export let onCancel = () => {}
-  export let onOkay = () => {}
-
-  const { close } = getContext("simple-modal")
-
-  let value
-  let onChange = () => {}
-
-  function _onCancel() {
-    onCancel()
-    close()
-  }
-
-  function _onOkay() {
-    onOkay(value)
-    close()
-  }
-
-  $: onChange(value)
-</script>
-
-<h2>{message}</h2>
-
-{#if hasForm}
-  <input type="text" bind:value on:keydown={e => e.which === 13 && _onOkay()} />
-{/if}
-
-<div class="buttons">
-  <button on:click={_onCancel}>Cancel</button>
-  <button on:click={_onOkay}>Okay</button>
-</div>
-
-<style>
-  h2 {
-    font-size: 2rem;
-    text-align: center;
-  }
-
-  input {
-    width: 100%;
-  }
-
-  .buttons {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>

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

@@ -56,7 +56,7 @@
     max-width: 400px;
     max-height: 150px;
     border-radius: 5px;
-    border: 1px solid var(--grey-dark);
+    border: 1px solid var(--grey-medium);
   }
 
   .app-button:hover {

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

@@ -0,0 +1,118 @@
+<script>
+  import Button from "components/common/Button.svelte"
+  import { Input, TextArea } from "@budibase/bbui"
+  import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
+  import { getContext } from "svelte"
+  export let onCancel = () => {}
+  export let onOkay = () => {}
+
+  const { close } = getContext("simple-modal")
+
+  let value
+  let onChange = () => {}
+
+  function _onCancel() {
+    onCancel()
+    close()
+  }
+
+  function _onOkay() {
+    onOkay(value)
+    close()
+  }
+
+  $: onChange(value)
+</script>
+
+<div class="container">
+  <div class="body">
+    <div class="heading">
+      <span class="icon"><AppsIcon /></span>
+      <h3>Create new web app</h3>
+    </div>
+    <Input name="name" label="Name" placeholder="Enter application name" />
+    <TextArea
+      name="description"
+      label="Description"
+      placeholder="Describe your application" />
+  </div>
+  <div class="footer">
+    <a href="./#" class="info"><InfoIcon />How to get started</a>
+    <Button color="secondary" on:click={_onCancel}>
+      <span class="button-text">Cancel</span>
+    </Button>
+    <Button color="primary" on:click={_onOkay}>
+      <span class="button-text">Create</span>
+    </Button>
+  </div>
+  <div class="close-button" on:click={_onCancel}><CloseIcon /></div>
+</div>
+
+<style>
+
+.container {
+  position: relative;
+}
+
+  .close-button {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
+  .close-button :global(svg) {
+    width: 24px;
+    height: 24px;
+  }
+  .heading {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  h3 {
+    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);
+  }
+  .info {
+    color: var(--primary100);
+    text-decoration-color: var(--primary100);
+  }
+  .info :global(svg) {
+    fill: var(--primary100);
+    margin-right: 8px;
+    width: 24px;
+    height: 24px;
+  }
+  .body {
+    padding: 40px 40px 80px 40px;
+    display: grid;
+    grid-gap: 20px;
+  }
+  .footer {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr auto auto;
+    padding: 30px 40px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 50px;
+    background-color: var(--grey-light);
+  }
+  .button-text {
+    font-size: 18px;
+    line-height: 1.17;
+    letter-spacing: normal;
+    color: var(--white);
+  }
+</style>

packages/builder/src/global.css

@@ -13,6 +13,7 @@
     
     --grey: #F2F2F2;
     --grey-light: #FBFBFB;
+    --grey-medium: #e8e8ef;
     --grey-dark: #E6E6E6;
 
     --primary100: #0055ff;
@@ -125,6 +126,10 @@ h5 {
     color: var(--darkslate);
 }
 
+textarea {
+    font-family: var(--fontnormal);
+}
+
 .hoverable:hover {
     cursor: pointer;
 }

packages/builder/src/pages/_layout.svelte

@@ -142,7 +142,7 @@
     padding: 20px;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--grey-dark);
+    border-right: 1px solid var(--grey-medium);
   }
 
   .home-logo {

packages/builder/src/pages/index.svelte

@@ -7,6 +7,7 @@
   import IconButton from "components/common/IconButton.svelte"
 
   import Spinner from "components/common/Spinner.svelte"
+  import CreateAppModal from "components/start/CreateAppModal.svelte"
 
   let promise = getApps()
 
@@ -23,9 +24,19 @@
 
   // Handle create app modal
   const { open } = getContext("simple-modal")
+  const onCancel = text => {
+    name = ""
+    status = -1
+  }
+
+  const onOkay = text => {
+    name = text
+    status = 1
+  }
+
   const showCreateAppModal = () => {
     open(
-      Dialog,
+      CreateAppModal,
       {
         message: "What is your name?",
         hasForm: true,
@@ -36,6 +47,7 @@
         closeButton: false,
         closeOnEsc: false,
         closeOnOuterClick: false,
+        styleContent: { padding: 0 },
       }
     )
   }
@@ -47,7 +59,7 @@
     <div class="banner-header">
       Every accomplishment starts with a decision to try.
     </div>
-    <button class="banner-button" type="button">
+    <button class="banner-button" type="button" on:click={showCreateAppModal}>
       <i class="ri-add-circle-fill" />
       Create New Web App
     </button>