file download icon + styling

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

@@ -32,11 +32,11 @@
     <TextButton text medium blue href="/_builder/{_id}">
       Open {name} →
     </TextButton>
-    <TextButton text medium blue on:click={exportApp}>
-      {#if appExportLoading}
-        <Spinner size="10" />
-      {:else}Export{/if}
-    </TextButton>
+    {#if appExportLoading}
+      <Spinner size="10" />
+    {:else}
+      <i class="ri-folder-download-line" on:click={exportApp} />
+    {/if}
   </div>
 </div>
 
@@ -54,7 +54,17 @@
   .card-footer {
     display: flex;
     flex-direction: row;
-    align-items: baseline;
+    align-items: center;
     justify-content: space-between;
   }
+
+  i {
+    font-size: var(--font-size-l);
+    cursor: pointer;
+    transition: 0.2s all;
+  }
+
+  i:hover {
+    color: var(--blue);
+  }
 </style>

packages/builder/src/components/start/Steps/Info.svelte

@@ -2,22 +2,48 @@
   import { Label, Heading, Input } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
 
+  const BYTES_IN_MB = 1000000
+  const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
+
   export let validationErrors
   export let template
 
   let blurred = { appName: false }
-  let files
+  let file
 
-  $: if (files) {
-    template.fileImportPath = files[0]
+  function handleFile(evt) {
+    const fileArray = Array.from(evt.target.files)
+    if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
+      notifier.danger(
+        `Files cannot exceed ${FILE_SIZE_LIMIT /
+          BYTES_IN_MB}MB. Please try again with smaller files.`
+      )
+      return
+    }
+    file = fileArray[0]
+    template.fileImportPath = file.path
   }
 </script>
 
-<h2>Create your Web App</h2>
+{#if template.fromFile}
+  <h2>Import Your Web App From A File</h2>
+{:else}
+  <h2>Create your Web App</h2>
+{/if}
 <div class="container">
   {#if template.fromFile}
     <div class="template">
-      <Dropzone bind:files />
+      <Label extraSmall grey>Import File</Label>
+      <div class="dropzone">
+        <input
+          id="file-upload"
+          accept=".txt"
+          type="file"
+          on:change={handleFile} />
+        <label for="file-upload" class:uploaded={file}>
+          {#if file}{file.name}{:else}Import{/if}
+        </label>
+      </div>
     </div>
   {:else if template}
     <div class="template">
@@ -44,4 +70,48 @@
     /*  Fix layout due to LH 0 on heading */
     margin-bottom: 16px;
   }
+
+  .dropzone {
+    text-align: center;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 10px;
+    transition: all 0.3s;
+  }
+
+  .uploaded {
+    color: var(--blue);
+  }
+
+  input[type="file"] {
+    display: none;
+  }
+
+  label {
+    font-family: var(--font-sans);
+    cursor: pointer;
+    font-weight: 500;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: var(--border-radius-s);
+    color: var(--ink);
+    padding: var(--spacing-m) var(--spacing-l);
+    transition: all 0.2s ease 0s;
+    display: inline-flex;
+    text-rendering: optimizeLegibility;
+    min-width: auto;
+    outline: none;
+    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
+    -webkit-box-align: center;
+    user-select: none;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background-color: var(--grey-2);
+    font-size: var(--font-size-xs);
+    line-height: normal;
+    border: var(--border-transparent);
+  }
 </style>

packages/builder/src/pages/index.svelte

@@ -3,7 +3,7 @@
   import AppList from "components/start/AppList.svelte"
   import { get } from "builderStore/api"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading, Modal } from "@budibase/bbui"
+  import { Button, Heading, Modal, Spacer } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
 
@@ -57,8 +57,11 @@
 <div class="container">
   <div class="header">
     <Heading medium black>Welcome to the Budibase Beta</Heading>
-    <Button secondary on:click={initiateAppImport}>Import Web App</Button>
-    <Button primary on:click={modal.show}>Create New Web App</Button>
+    <div class="button-group">
+      <Button secondary on:click={initiateAppImport}>Import Web App</Button>
+      <Spacer medium />
+      <Button primary on:click={modal.show}>Create New Web App</Button>
+    </div>
   </div>
 
   <div class="banner">
@@ -112,4 +115,9 @@
     color: white;
     font-weight: 500;
   }
+
+  .button-group {
+    display: flex;
+    flex-direction: row;
+  }
 </style>