wip: adds gap to apps

packages/builder/package.json

@@ -38,7 +38,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^0.3.1",
+    "@budibase/bbui": "^0.3.5",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",

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

@@ -0,0 +1,70 @@
+<script>
+  import Button from "components/common/Button.svelte"
+  export let name, description =`A minimalist CRM which removes the noise and allows you to focus
+              on your business.`, _id;
+</script>
+
+<div class="apps-card">
+  <h3 class="app-title">{name}</h3>
+  <p class="app-desc">
+    {description}
+  </p>
+  <div class="card-footer">
+    <div class="modified-date">Last Edited - 25th May 2020</div>
+    <a href={`/_builder/${_id}`} class="app-button">
+      Open Web App
+    </a>
+  </div>
+</div>
+          
+<style>
+  .apps-card {
+    background-color: var(--white);
+    padding: 20px;
+    max-width: 400px;
+    max-height: 150px;
+    border-radius: 5px;
+    border: 1px solid var(--grey-medium);
+  }
+
+  .app-button:hover {
+    background-color: var(--grey-light);
+    text-decoration: none;
+  }
+          
+                .app-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--ink);
+    text-transform: capitalize;
+  }
+
+  .app-desc {
+    color: var(--ink-light);
+  }
+
+  .card-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+
+  .modified-date {
+    font-size: 14px;
+    color: var(--ink-light);
+  }
+
+  .app-button {
+    background-color: var(--white);
+    color: var(--ink);
+    padding: 12px 20px;
+    border-radius: 5px;
+    border: 1px var(--grey) solid;
+    font-size: 14px;
+    font-weight: 400;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-sizing: border-box;
+  }
+</style>

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

@@ -1,5 +1,5 @@
 <script>
-  import Button from "components/common/Button.svelte"
+  import AppCard from "./AppCard.svelte"
   export let apps
 
   function myFunction() {
@@ -13,27 +13,22 @@
     <div>
       <div>
         <div class="app-section-title">Your Web Apps</div>
-        {#each apps as app}
-          <div class="apps-card">
-            <h3 class="app-title">{app.name}</h3>
-            <p class="app-desc">
-              A minimalist CRM which removes the noise and allows you to focus
-              on your business.
-            </p>
-            <div class="card-footer">
-              <div class="modified-date">Last Edited - 25th May 2020</div>
-              <a href={`/_builder/${app._id}`} class="app-button">
-                Open Web App
-              </a>
-            </div>
+          <div class="apps">
+            {#each apps as app}
+              <AppCard {...app} />
+            {/each}
           </div>
-        {/each}
       </div>
     </div>
   </div>
 </div>
 
 <style>
+  .apps {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400, 1fr));
+    gap: 85px;
+  }
   .root {
     margin: 40px 80px;
   }
@@ -44,59 +39,4 @@
     font-weight: 700;
     margin-bottom: 20px;
   }
-
-  .apps {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 40px;
-  }
-  .apps-card {
-    background-color: var(--white);
-    padding: 20px;
-    max-width: 400px;
-    max-height: 150px;
-    border-radius: 5px;
-    border: 1px solid var(--grey-medium);
-  }
-
-  .app-button:hover {
-    background-color: var(--grey-light);
-    text-decoration: none;
-  }
-
-  .app-title {
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--ink);
-    text-transform: capitalize;
-  }
-
-  .app-desc {
-    color: var(--ink-light);
-  }
-
-  .card-footer {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    justify-content: space-between;
-  }
-
-  .modified-date {
-    font-size: 14px;
-    color: var(--ink-light);
-  }
-
-  .app-button {
-    background-color: var(--white);
-    color: var(--ink);
-    padding: 12px 20px;
-    border-radius: 5px;
-    border: 1px var(--grey) solid;
-    font-size: 14px;
-    font-weight: 400;
-    cursor: pointer;
-    transition: all 0.2s;
-    box-sizing: border-box;
-  }
 </style>

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

@@ -1,6 +1,5 @@
 <script>
-  import Button from "components/common/Button.svelte"
-  import { Input, TextArea } from "@budibase/bbui"
+  import { Input, TextArea, Button } from "@budibase/bbui"
   import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
   import { getContext } from "svelte"
   export let onCancel = () => {}
@@ -38,11 +37,11 @@
   </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 outline thin on:click={_onCancel}>
+      Cancel
     </Button>
-    <Button color="primary" on:click={_onOkay}>
-      <span class="button-text">Create</span>
+    <Button primary thin on:click={_onOkay}>
+      Save
     </Button>
   </div>
   <div class="close-button" on:click={_onCancel}><CloseIcon /></div>
@@ -68,6 +67,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    margin-bottom: 20px;
   }
   h3 {
     margin: 0;
@@ -102,6 +102,7 @@
   }
   .footer {
     display: grid;
+    grid-gap: 20px;
     align-items: center;
     grid-template-columns: 1fr auto auto;
     padding: 30px 40px;
@@ -109,10 +110,4 @@
     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/pages/index.svelte

@@ -48,6 +48,7 @@
         closeOnEsc: false,
         closeOnOuterClick: false,
         styleContent: { padding: 0 },
+        closeOnOuterClick: true
       }
     )
   }