Fix spacing and make consistent in all portal pages

5 years ago · 5c8c663935
12 changed files with 151 additions and 181 deletions
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@ -40,8 +40,8 @@
        <Heading>Sign in to Budibase</Heading>
      </Layout>
      <GoogleButton />
+      <Divider noGrid />
      <Layout gap="XS" noPadding>
-        <Divider noGrid />
        <Body size="S" textAlign="center">Sign in with email</Body>
        <Input label="Email" bind:value={username} />
        <Input
@ -51,7 +51,7 @@
          bind:value={password}
        />
      </Layout>
-      <Layout gap="S" noPadding>
+      <Layout gap="XS" noPadding>
        <Button cta on:click={login}>Sign in to Budibase</Button>
        <ActionButton quiet on:click={() => $goto("./forgot")}>
          Forgot password?
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@ -48,7 +48,7 @@
      </ActionMenu>
    </div>
    <div class="status">
-      <Body noPadding size="S">
+      <Body size="S">
        Edited {Math.floor(1 + Math.random() * 10)} months ago
      </Body>
      {#if app.lockedBy}
--- a/packages/builder/src/pages/builder/admin/index.svelte
+++ b/packages/builder/src/pages/builder/admin/index.svelte
@ -36,7 +36,7 @@
      <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
      <Layout gap="XS" justifyItems="center" noPadding>
        <Heading size="M">Create an admin user</Heading>
-        <Body size="M" textAlign="center" noPadding>
+        <Body size="M" textAlign="center">
          The admin user has access to everything in Budibase.
        </Body>
      </Layout>
--- a/packages/builder/src/pages/builder/invite/index.svelte
+++ b/packages/builder/src/pages/builder/invite/index.svelte
@ -27,7 +27,7 @@
      <img src={$organisation.logoUrl || "https://i.imgur.com/ZKyklgF.png"} />
      <Layout gap="XS" justifyItems="center" noPadding>
        <Heading size="M">Accept Invitation</Heading>
-        <Body textAlign="center" size="M" noPadding>
+        <Body textAlign="center" size="M">
          Please enter a password to set up your user.
        </Body>
      </Layout>
--- a/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
@ -59,44 +59,42 @@
  })
 </script>

-<Page>
-  <Layout noPadding>
-    <div>
-      <Heading size="M">OAuth</Heading>
-      <Body>
-        Every budibase app comes with basic authentication (email/password)
-        included. You can add additional authentication methods from the options
-        below.
-      </Body>
-    </div>
+<Layout>
+  <Layout gap="XS" noPadding>
+    <Heading size="M">OAuth</Heading>
+    <Body>
+      Every budibase app comes with basic authentication (email/password)
+      included. You can add additional authentication methods from the options
+      below.
+    </Body>
+  </Layout>
+  {#if google}
    <Divider />
-    {#if google}
-      <div>
-        <Heading size="S">
-          <span>
-            <GoogleLogo />
-            Google
-          </span>
-        </Heading>
-        <Body>
-          To allow users to authenticate using their Google accounts, fill out
-          the fields below.
-        </Body>
-      </div>
-
+    <Layout gap="XS" noPadding>
+      <Heading size="S">
+        <span>
+          <GoogleLogo />
+          Google
+        </span>
+      </Heading>
+      <Body size="S">
+        To allow users to authenticate using their Google accounts, fill out the
+        fields below.
+      </Body>
+    </Layout>
+    <Layout gap="XS" noPadding>
      {#each ConfigFields.Google as field}
        <div class="form-row">
          <Label size="L">{field}</Label>
          <Input bind:value={google.config[field]} />
        </div>
      {/each}
-      <div>
-        <Button primary on:click={() => save(google)}>Save</Button>
-      </div>
-      <Divider />
-    {/if}
-  </Layout>
-</Page>
+    </Layout>
+    <div>
+      <Button cta on:click={() => save(google)}>Save</Button>
+    </div>
+  {/if}
+</Layout>

 <style>
  .form-row {
--- a/packages/builder/src/pages/builder/portal/manage/email/_components/TemplateBindings.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/_components/TemplateBindings.svelte
@ -16,7 +16,7 @@
  {#each bindings as binding}
    <MenuItem on:click={() => onBindingClick(binding)}>
      <Detail size="M">{binding.name}</Detail>
-      <Body size="XS" noPadding>{binding.description}</Body>
+      <Body size="XS">{binding.description}</Body>
    </MenuItem>
  {/each}
 </Menu>
--- a/packages/builder/src/pages/builder/portal/manage/email/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/index.svelte
@ -102,59 +102,57 @@
  })
 </script>

-<Page>
-  <header>
+<Layout>
+  <Layout noPadding gap="XS">
    <Heading size="M">Email</Heading>
-    <Body size="S">
+    <Body>
      Sending email is not required, but highly recommended for processes such
      as password recovery. To setup automated auth emails, simply add the
      values below and click activate.
    </Body>
-  </header>
+  </Layout>
  <Divider />
  {#if smtpConfig}
-    <div class="config-form">
+    <Layout gap="XS" noPadding>
      <Heading size="S">SMTP</Heading>
      <Body size="S">
        To allow your app to benefit from automated auth emails, add your SMTP
        details below.
      </Body>
-      <Layout gap="S">
-        <Heading size="S">
-          <span />
-        </Heading>
-        <div class="form-row">
-          <Label>Host</Label>
-          <Input bind:value={smtpConfig.config.host} />
-        </div>
-        <div class="form-row">
-          <Label>Port</Label>
-          <Input type="number" bind:value={smtpConfig.config.port} />
-        </div>
-        <div class="form-row">
-          <Label>User</Label>
-          <Input bind:value={smtpConfig.config.auth.user} />
-        </div>
-        <div class="form-row">
-          <Label>Password</Label>
-          <Input type="password" bind:value={smtpConfig.config.auth.pass} />
-        </div>
-        <div class="form-row">
-          <Label>From email address</Label>
-          <Input type="email" bind:value={smtpConfig.config.from} />
-        </div>
-      </Layout>
+    </Layout>
+    <Layout gap="XS" noPadding>
+      <div class="form-row">
+        <Label size="L">Host</Label>
+        <Input bind:value={smtpConfig.config.host} />
+      </div>
+      <div class="form-row">
+        <Label size="L">Port</Label>
+        <Input type="number" bind:value={smtpConfig.config.port} />
+      </div>
+      <div class="form-row">
+        <Label size="L">User</Label>
+        <Input bind:value={smtpConfig.config.auth.user} />
+      </div>
+      <div class="form-row">
+        <Label size="L">Password</Label>
+        <Input type="password" bind:value={smtpConfig.config.auth.pass} />
+      </div>
+      <div class="form-row">
+        <Label size="L">From email address</Label>
+        <Input type="email" bind:value={smtpConfig.config.from} />
+      </div>
+    </Layout>
+    <div>
      <Button cta on:click={saveSmtp}>Save</Button>
    </div>
    <Divider />
-
-    <div class="config-form">
+    <Layout gap="XS" noPadding>
      <Heading size="S">Templates</Heading>
      <Body size="S">
        Budibase comes out of the box with ready-made email templates to help
        with user onboarding. Please refrain from changing the links.
      </Body>
-    </div>
+    </Layout>
    <Table
      {customRenderers}
      data={$email.templates}
@ -165,27 +163,13 @@
      allowEditColumns={false}
    />
  {/if}
-</Page>
+</Layout>

 <style>
-  .config-form {
-    margin-top: 42px;
-    margin-bottom: 42px;
-  }
-
  .form-row {
    display: grid;
-    grid-template-columns: 20% 1fr;
+    grid-template-columns: 25% 1fr;
    grid-gap: var(--spacing-l);
-  }
-
-  span {
-    display: flex;
    align-items: center;
-    gap: var(--spacing-s);
-  }
-
-  header {
-    margin-bottom: 42px;
  }
 </style>
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
@ -30,18 +30,18 @@
 <ModalContent
  onConfirm={createUserFlow}
  size="M"
-  title="Add new user options"
+  title="Add new user"
  confirmText="Add user"
  confirmDisabled={disabled}
  cancelText="Cancel"
  disabled={$error}
  showCloseIcon={false}
 >
-  <Body noPadding
-    >If you have SMTP configured and an email for the new user, you can use the
+  <Body size="S">
+    If you have SMTP configured and an email for the new user, you can use the
    automated email onboarding flow. Otherwise, use our basic onboarding process
-    with autogenerated passwords.</Body
-  >
+    with autogenerated passwords.
+  </Body>
  <Select
    placeholder={null}
    bind:value={selected}
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
@ -26,10 +26,10 @@
  error={$touched && $error}
  showCloseIcon={false}
 >
-  <Body noPadding
-    >Below you will find the user’s username and password. The password will not
-    be accessible from this point. Please download the credentials.</Body
-  >
+  <Body size="S">
+    Below you will find the user’s username and password. The password will not
+    be accessible from this point. Please save the credentials.
+  </Body>
  <Input
    type="email"
    label="Username"
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte
@ -37,7 +37,7 @@
  size="M"
  showCloseIcon={false}
 >
-  <Body noPadding>
+  <Body>
    Update {user.email}'s role for <strong>{app.name}</strong>.
  </Body>
  <Select
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -44,28 +44,27 @@
 </script>

 <Layout>
-  <div class="heading">
+  <Layout gap="XS" noPadding>
    <Heading>Users</Heading>
-    <Body
-      >Users are the common denominator in Budibase. Each user is assigned to a
+    <Body>
+      Users are the common denominator in Budibase. Each user is assigned to a
      group that contains apps and permissions. In this section, you can add
-      users, or edit and delete an existing user.</Body
-    >
-  </div>
+      users, or edit and delete an existing user.
+    </Body>
+  </Layout>
  <Divider size="S" />
-
-  <div class="users">
-    <Heading size="S">Users</Heading>
-    <div class="field">
-      <Label size="L">Search / filter</Label>
-      <Search bind:value={search} placeholder="" />
-    </div>
-    <div class="buttons">
+  <Layout gap="S" noPadding>
+    <div class="users-heading">
+      <Heading size="S">Users</Heading>
      <ButtonGroup>
        <Button disabled secondary>Import users</Button>
        <Button primary on:click={createUserModal.show}>Add user</Button>
      </ButtonGroup>
    </div>
+    <div class="field">
+      <Label size="L">Search / filter</Label>
+      <Search bind:value={search} placeholder="" />
+    </div>
    <Table
      on:click={({ detail }) => $goto(`./${detail._id}`)}
      {schema}
@ -75,31 +74,28 @@
      allowSelectRows={false}
      customRenderers={[{ column: "group", component: TagsRenderer }]}
    />
-  </div>
+  </Layout>
 </Layout>

-<Modal bind:this={createUserModal}
-  ><AddUserModal on:change={openBasicOnoboardingModal} /></Modal
->
+<Modal bind:this={createUserModal}>
+  <AddUserModal on:change={openBasicOnoboardingModal} />
+</Modal>
 <Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>

 <style>
-  .users {
-    position: relative;
-  }
  .field {
    display: flex;
    align-items: center;
    flex-direction: row;
    grid-gap: var(--spacing-m);
-    margin: var(--spacing-xl) 0;
  }
  .field > :global(*) + :global(*) {
    margin-left: var(--spacing-m);
  }
-  .buttons {
-    position: absolute;
-    top: 0;
-    right: 0;
+  .users-heading {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
  }
 </style>
--- a/packages/builder/src/pages/builder/portal/settings/general.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/general.svelte
@ -57,78 +57,76 @@
  }
 </script>

-<div class="container">
-  <Layout noPadding>
-    <div class="intro">
-      <Heading size="M">General</Heading>
-      <Body>
-        General is the place where you edit your organisation name, logo. You
-        can also configure your platform URL as well as turn on or off
-        analytics.
-      </Body>
+<Layout>
+  <Layout gap="XS" noPadding>
+    <Heading size="M">General</Heading>
+    <Body>
+      General is the place where you edit your organisation name, logo. You can
+      also configure your platform URL as well as turn on or off analytics.
+    </Body>
+  </Layout>
+  <Divider size="S" />
+  <Layout gap="XS" noPadding>
+    <Heading size="S">Information</Heading>
+    <Body size="S">Here you can update your logo and organization name.</Body>
+  </Layout>
+  <div class="fields">
+    <div class="field">
+      <Label size="L">Organization name</Label>
+      <Input thin bind:value={$organisation.company} />
    </div>
-    <Divider size="S" />
-    <div class="information">
-      <Heading size="S">Information</Heading>
-      <Body>Here you can update your logo and organization name.</Body>
-      <div class="fields">
-        <div class="field">
-          <Label size="L">Organization name</Label>
-          <Input thin bind:value={$organisation.company} />
-        </div>
-        <div class="field logo">
-          <Label size="L">Logo</Label>
-          <div class="file">
-            <Dropzone
-              value={[file]}
-              on:change={e => {
-                file = e.detail?.[0]
-              }}
-            />
-          </div>
-        </div>
+    <div class="field logo">
+      <Label size="L">Logo</Label>
+      <div class="file">
+        <Dropzone
+          value={[file]}
+          on:change={e => {
+            file = e.detail?.[0]
+          }}
+        />
      </div>
    </div>
-    <Divider size="S" />
-    <div class="analytics">
-      <Heading size="S">Platform</Heading>
-      <Body>Here you can set up general platform settings.</Body>
-      <div class="fields">
-        <div class="field">
-          <Label size="L">Platform URL</Label>
-          <Input thin bind:value={$organisation.platformUrl} />
-        </div>
-      </div>
+  </div>
+  <Divider size="S" />
+  <Layout gap="XS" noPadding>
+    <Heading size="S">Platform</Heading>
+    <Body size="S">Here you can set up general platform settings.</Body>
+  </Layout>
+  <div class="fields">
+    <div class="field">
+      <Label size="L">Platform URL</Label>
+      <Input thin bind:value={$organisation.platformUrl} />
    </div>
-    <Divider size="S" />
-    <div class="analytics">
+  </div>
+  <Divider size="S" />
+  <Layout gap="S" noPadding>
+    <Layout gap="XS" noPadding>
      <Heading size="S">Analytics</Heading>
-      <Body>
+      <Body size="S">
        If you would like to send analytics that help us make Budibase better,
        please let us know below.
      </Body>
-      <div class="fields">
-        <div class="field">
-          <Label size="L">Send Analytics to Budibase</Label>
-          <Toggle text="" value={!analyticsDisabled} />
-        </div>
+    </Layout>
+    <div class="fields">
+      <div class="field">
+        <Label size="L">Send Analytics to Budibase</Label>
+        <Toggle text="" value={!analyticsDisabled} />
      </div>
    </div>
-    <div class="save">
-      <Button disabled={loading} on:click={saveConfig} cta>Save</Button>
-    </div>
  </Layout>
-</div>
+  <div>
+    <Button disabled={loading} on:click={saveConfig} cta>Save</Button>
+  </div>
+</Layout>

 <style>
  .fields {
    display: grid;
    grid-gap: var(--spacing-m);
-    margin-top: var(--spacing-xl);
  }
  .field {
    display: grid;
-    grid-template-columns: 32% 1fr;
+    grid-template-columns: 33% 1fr;
    align-items: center;
  }
  .file {
@ -137,10 +135,4 @@
  .logo {
    align-items: start;
  }
-  .intro {
-    display: grid;
-  }
-  .save {
-    margin-left: auto;
-  }
 </style>