From 2a151821f9c75afeb9afeaaab31e6526c6c265a0 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 26 May 2020 16:25:37 +0200
Subject: [PATCH] 90% finished modal

---
 packages/builder/package.json                 |   3 +-
 .../src/components/common/Icons/Close.svelte  |   1 +
 .../src/components/common/Icons/Info.svelte   |   1 +
 .../src/components/common/Icons/index.js      |   2 +
 .../src/components/common/ModalDialog.svelte  |  51 --------
 .../src/components/start/AppList.svelte       |   2 +-
 .../components/start/CreateAppModal.svelte    | 118 ++++++++++++++++++
 packages/builder/src/global.css               |   5 +
 packages/builder/src/pages/_layout.svelte     |   2 +-
 packages/builder/src/pages/index.svelte       |  16 ++-
 10 files changed, 145 insertions(+), 56 deletions(-)
 create mode 100644 packages/builder/src/components/common/Icons/Close.svelte
 create mode 100644 packages/builder/src/components/common/Icons/Info.svelte
 delete mode 100644 packages/builder/src/components/common/ModalDialog.svelte
 create mode 100644 packages/builder/src/components/start/CreateAppModal.svelte

diff --git a/packages/builder/package.json b/packages/builder/package.json
index cb91f2ce42..3e76ac87d8 100644
--- a/packages/builder/package.json
+++ b/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"
-}
\ No newline at end of file
+}
diff --git a/packages/builder/src/components/common/Icons/Close.svelte b/packages/builder/src/components/common/Icons/Close.svelte
new file mode 100644
index 0000000000..e39564d9ad
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/builder/src/components/common/Icons/Info.svelte b/packages/builder/src/components/common/Icons/Info.svelte
new file mode 100644
index 0000000000..162a9b3887
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/builder/src/components/common/Icons/index.js b/packages/builder/src/components/common/Icons/index.js
index c7e4da29da..69b78421da 100644
--- a/packages/builder/src/components/common/Icons/index.js
+++ b/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"
diff --git a/packages/builder/src/components/common/ModalDialog.svelte b/packages/builder/src/components/common/ModalDialog.svelte
deleted file mode 100644
index 121714cd85..0000000000
--- a/packages/builder/src/components/common/ModalDialog.svelte
+++ /dev/null
@@ -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>
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index 22ba16c45d..e53b1f93bf 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/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 {
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
new file mode 100644
index 0000000000..07f53cc1b3
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 3ad5851157..dea20e4d26 100644
--- a/packages/builder/src/global.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index b807c1737b..98bae8aa7d 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/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 {
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 6c77059739..8ef61f68cd 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/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>