Update portal pages to have better usage of spectrum components

5 years ago · 986dc74190
3 changed files with 44 additions and 44 deletions
--- a/packages/builder/src/pages/portal/_layout.svelte
+++ b/packages/builder/src/pages/portal/_layout.svelte
@ -80,7 +80,7 @@
          <Icon size="XL" name="ChevronDown" />
        </div>
        <MenuItem icon="Settings" on:click={oldSettingsModal.show}>
-          Settings
+          Old settings
        </MenuItem>
        <MenuItem icon="LogOut" on:click={auth.logout}>Log out</MenuItem>
      </ActionMenu>
--- a/packages/builder/src/pages/portal/oauth/index.svelte
+++ b/packages/builder/src/pages/portal/oauth/index.svelte
@ -60,47 +60,50 @@
 </script>

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

 <style>
-  .config-form {
-    margin-top: 42px;
-    margin-bottom: 42px;
-  }
-
  .form-row {
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-gap: var(--spacing-l);
+    align-items: center;
  }

  span {
@ -108,8 +111,4 @@
    align-items: center;
    gap: var(--spacing-s);
  }
-
-  header {
-    margin-bottom: 42px;
-  }
 </style>
--- a/packages/builder/src/pages/portal/settings/general.svelte
+++ b/packages/builder/src/pages/portal/settings/general.svelte
@ -45,12 +45,12 @@
  <Layout noPadding>
    <div class="intro">
      <Heading size="M">General</Heading>
-      <Body
-        >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic vero, aut
+      <Body>
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic vero, aut
        culpa provident sunt ratione! Voluptas doloremque, dicta nisi velit
        perspiciatis, ratione vel blanditiis totam, nam voluptate repellat
-        aperiam fuga!</Body
-      >
+        aperiam fuga!
+      </Body>
    </div>
    <Divider size="S" />
    <div class="information">
@ -58,7 +58,7 @@
      <Body>Here you can update your logo and organization name.</Body>
      <div class="fields">
        <div class="field">
-          <Label>Organization name</Label>
+          <Label size="L">Organization name</Label>
          <Input thin bind:value={company} />
        </div>
        <!-- <div class="field">
@ -72,13 +72,13 @@
    <Divider size="S" />
    <div class="analytics">
      <Heading size="S">Analytics</Heading>
-      <Body
-        >If you would like to send analytics that help us make Budibase better,
-        please let us know below.</Body
-      >
+      <Body>
+        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>Send Analytics to Budibase</Label>
+          <Label size="L">Send Analytics to Budibase</Label>
          <Toggle text="" value={!analyticsDisabled} />
        </div>
      </div>
@ -97,7 +97,8 @@
  }
  .field {
    display: grid;
-    grid-template-columns: 30% 1fr;
+    grid-template-columns: 32% 1fr;
+    align-items: center;
  }
  .file {
    max-width: 30ch;