Merge template and index page styles with new BBUI

6 years ago · 380c44fdd2
6 changed files with 93 additions and 79 deletions
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@ -19,7 +19,7 @@
 </script>

 <div class="root">
-  <Heading medium black>Your Apps</Heading>
+  <Heading lh medium black>Your Apps</Heading>
  {#await promise}
    <div class="spinner-container">
      <Spinner size="30" />
@ -48,8 +48,4 @@
    grid-gap: var(--layout-m);
    justify-content: start;
  }
-
-  .root {
-    margin: 20px 80px;
-  }
 </style>
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -216,38 +216,43 @@
          step={i + 1} />
      {/each}
    </div>
-    <div class="step">
-      <Form bind:values={$createAppStore.values}>
-        {#each steps as step, i (i)}
-          <div class:hidden={$createAppStore.currentStep !== i}>
-            <svelte:component
-              this={step.component}
-              {template}
-              {validationErrors}
-              options={step.options}
-              name={step.name} />
-          </div>
-        {/each}
-      </Form>
-    </div>
-    <div class="footer">
-      {#if $createAppStore.currentStep > 0}
-        <Button medium secondary on:click={back}>Back</Button>
-      {/if}
-      {#if $createAppStore.currentStep < steps.length - 1}
-        <Button medium blue on:click={next} disabled={!currentStepIsValid}>
-          Next
-        </Button>
-      {/if}
-      {#if $createAppStore.currentStep === steps.length - 1}
-        <Button
-          medium
-          blue
-          on:click={signUp}
-          disabled={!fullFormIsValid || submitting}>
-          {submitting ? 'Loading...' : 'Submit'}
-        </Button>
-      {/if}
+    <div class="body">
+      <div class="heading">
+        <h3 class="header">Get Started with Budibase</h3>
+      </div>
+      <div class="step">
+        <Form bind:values={$createAppStore.values}>
+          {#each steps as step, i (i)}
+            <div class:hidden={$createAppStore.currentStep !== i}>
+              <svelte:component
+                this={step.component}
+                {template}
+                {validationErrors}
+                options={step.options}
+                name={step.name} />
+            </div>
+          {/each}
+        </Form>
+      </div>
+      <div class="footer">
+        {#if $createAppStore.currentStep > 0}
+          <Button medium secondary on:click={back}>Back</Button>
+        {/if}
+        {#if $createAppStore.currentStep < steps.length - 1}
+          <Button medium blue on:click={next} disabled={!currentStepIsValid}>
+            Next
+          </Button>
+        {/if}
+        {#if $createAppStore.currentStep === steps.length - 1}
+          <Button
+            medium
+            blue
+            on:click={signUp}
+            disabled={!fullFormIsValid || submitting}>
+            {submitting ? 'Loading...' : 'Submit'}
+          </Button>
+        {/if}
+      </div>
    </div>
    <img src="/_builder/assets/bb-logo.svg" alt="budibase icon" />
    {#if submitting}
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ b/packages/builder/src/components/start/Steps/Info.svelte
@ -1,20 +1,22 @@
 <script>
-  import { Input, Heading, Body } from "@budibase/bbui"
+  import { Label, Heading, Input } from "@budibase/bbui"
  export let validationErrors
  export let template

  let blurred = { appName: false }
 </script>

-{#if template}
-  <Heading small black>Selected Template</Heading>
-  <Body>{template.name}</Body>
-{/if}
 <h2>Create your web app</h2>
 <div class="container">
+  {#if template}
+    <div class="template">
+      <Label extraSmall grey>Selected Template</Label>
+      <Heading small>{template.name}</Heading>
+    </div>
+  {/if}
  <Input
    on:input={() => (blurred.appName = true)}
-    label="Web app name"
+    label="Web App Name"
    name="applicationName"
    placeholder="Enter name of your web application"
    type="name"
@ -24,6 +26,11 @@
 <style>
  .container {
    display: grid;
-    grid-gap: 40px;
+    grid-gap: var(--spacing-xl);
+  }
+
+  .template :global(label) {
+    /*  Fix layout due to LH 0 on heading */
+    margin-bottom: 16px;
  }
 </style>
--- a/packages/builder/src/components/start/Steps/User.svelte
+++ b/packages/builder/src/components/start/Steps/User.svelte
@ -21,7 +21,7 @@
    placeholder="Password"
    type="pasword"
    error={blurred.password && validationErrors.password} />
-  <Select secondary name="accessLevelId">
+  <Select label="Access Level" secondary name="accessLevelId">
    <option value="ADMIN">Admin</option>
    <option value="POWER_USER">Power User</option>
  </Select>
@ -30,6 +30,6 @@
 <style>
  .container {
    display: grid;
-    grid-gap: 40px;
+    grid-gap: var(--spacing-xl);
  }
 </style>
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Button, Heading, Body } from "@budibase/bbui"
+  import { Button, Heading, Body, Spacer } from "@budibase/bbui"
  import AppCard from "./AppCard.svelte"
  import Spinner from "components/common/Spinner.svelte"
  import api from "builderStore/api"
@ -15,7 +15,7 @@
 </script>

 <div class="root">
-  <Heading medium black>Start With a Template</Heading>
+  <Heading lh medium black>Start With a Template</Heading>
  {#await templatesPromise}
    <div class="spinner-container">
      <Spinner size="30" />
@ -24,11 +24,12 @@
    <div class="templates">
      {#each templates as template}
        <div class="templates-card">
-          <Heading black medium>{template.name}</Heading>
+          <Heading black small>{template.name}</Heading>
+          <Spacer small />
          <Body medium grey>{template.category}</Body>
-          <Body small black>{template.description}</Body>
+          <Body lh small black>{template.description}</Body>
          <div>
-            <img src={template.image} width="300" />
+            <img src={template.image} width="100%" />
          </div>
          <div class="card-footer">
            <Button secondary on:click={() => onSelect(template)}>
@ -68,8 +69,4 @@
    color: var(--ink);
    text-transform: capitalize;
  }
-
-  .root {
-    margin: 20px 80px;
-  }
 </style>
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -4,6 +4,7 @@
  import AppList from "components/start/AppList.svelte"
  import { onMount } from "svelte"
  import ActionButton from "components/common/ActionButton.svelte"
+  import { get } from "builderStore/api"
  import Spinner from "components/common/Spinner.svelte"
  import CreateAppModal from "components/start/CreateAppModal.svelte"
  import { Button, Heading } from "@budibase/bbui"
@ -13,6 +14,7 @@

  let promise = getApps()
  let hasKey
+  let template
  let modalVisible = false

  async function getApps() {
@ -44,41 +46,49 @@
    }
  }

+  function selectTemplate(newTemplate) {
+    template = newTemplate
+    modalVisible = true
+  }
+
  checkIfKeysAndApps()
 </script>

-<div class="header">
-  <Heading medium black>Welcome to the Budibase Beta</Heading>
-  <Button primary purple on:click={() => (modalVisible = true)}>
-    Create New Web App
-  </Button>
-</div>
+<div class="container">
+  <div class="header">
+    <Heading medium black>Welcome to the Budibase Beta</Heading>
+    <Button primary purple on:click={() => (modalVisible = true)}>
+      Create New Web App
+    </Button>
+  </div>

-<div class="banner">
-  <img src="/_builder/assets/orange-landscape.png" alt="rocket" />
-  <div class="banner-content">
-    Every accomplishment starts with a decision to try.
+  <div class="banner">
+    <img src="/_builder/assets/orange-landscape.png" alt="rocket" />
+    <div class="banner-content">
+      Every accomplishment starts with a decision to try.
+    </div>
  </div>
-</div>

-<TemplateList onSelect={() => (modalVisible = true)} />
-<AppList />
-{#if modalVisible}
-  <CreateAppModal bind:visible={modalVisible} {hasKey} {template} />
-{/if}
+  <TemplateList onSelect={selectTemplate} />
+
+  <AppList />
+
+  {#if modalVisible}
+    <CreateAppModal bind:visible={modalVisible} {hasKey} {template} />
+  {/if}
+</div>

 <style>
+  .container {
+    display: grid;
+    gap: var(--spacing-xl);
+    margin: 40px 80px;
+  }
+
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    margin: 40px 80px 0px 80px;
-  }
-
-  .welcome {
-    font-size: var(--font-size-3xl);
-    color: var(--ink);
-    font-weight: 600;
  }

  .banner {
@ -88,7 +98,6 @@
    position: relative;
    text-align: center;
    color: white;
-    margin: 20px 80px 40px 80px;
    border-radius: 16px;
  }