Update some leftover header sizes

6 years ago · d3452d18f8
5 changed files with 20 additions and 25 deletions
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@ -1,7 +1,7 @@
 <script>
  import { automationStore } from "builderStore"
  import { database } from "stores/backend"
-  import { notifications, Icon, Button, Modal } from "@budibase/bbui"
+  import { notifications, Icon, Button, Modal, Heading } from "@budibase/bbui"
  import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
  import CreateWebookModal from "../Shared/CreateWebhookModal.svelte"

@ -47,7 +47,7 @@
 </script>

 <div class="title">
-  <h1>Setup</h1>
+  <Heading s>Setup</Heading>
  <Icon
    l
    disabled={!automationLive}
@ -89,10 +89,7 @@
    align-items: center;
    gap: var(--spacing-xs);
  }
-  .title h1 {
-    font-size: var(--font-size-m);
-    font-weight: 500;
-    margin: 0;
+  .title :global(h1) {
    flex: 1 1 auto;
  }

--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@ -1,10 +1,9 @@
 <script>
  import { fade } from "svelte/transition"
  import { goto, params } from "@roxi/routify"
-  import { Table, Modal } from "@budibase/bbui"
+  import { Table, Modal, Heading, notifications } from "@budibase/bbui"

  import api from "builderStore/api"
-  import { notifications } from "@budibase/bbui"
  import Spinner from "components/common/Spinner.svelte"
  import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
  import CreateEditRow from "./modals/CreateEditRow.svelte"
@ -92,7 +91,7 @@
 <div>
  <div class="table-title">
    {#if title}
-      <h1>{title}</h1>
+      <Heading s>{title}</Heading>
    {/if}
    {#if loading}
      <div transition:fade>
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@ -31,12 +31,12 @@

 <section>
  <div class="controls">
-    <Heading>Parameters</Heading>
+    <Heading s>Parameters</Heading>
    {#if !bindable}
      <Button secondary on:click={newQueryParameter}>Add Param</Button>
    {/if}
  </div>
-  <Body small grey>
+  <Body s>
    {#if !bindable}
      Parameters come in two parts: the parameter name, and a default/fallback
      value.
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -9,7 +9,7 @@
    Heading,
    Spacer,
    Tabs,
-    Tab
+    Tab,
  } from "@budibase/bbui"
  import { notifications, Divider } from "@budibase/bbui"
  import api from "builderStore/api"
@ -111,12 +111,12 @@

 <section class="config">
  <Spacer extraLarge />
-  <Heading>Query {integrationInfo?.friendlyName}</Heading>
+  <Heading m>Query {integrationInfo?.friendlyName}</Heading>
  <Spacer extraLarge />
  <Divider />
  <Spacer extraLarge />
-  <Heading>Config</Heading>
-  <Body small grey>Provide a name for your query and select its function.</Body>
+  <Heading s>Config</Heading>
+  <Body s>Provide a name for your query and select its function.</Body>
  <Spacer medium />
  <div class="config-field">
    <Label>Query Name</Label>
@ -144,8 +144,8 @@
  <section>
    <Spacer extraLarge />
    <div class="config">
-      <Heading>Fields</Heading>
-      <Body small grey>Fill in the fields specific to this query.</Body>
+      <Heading s>Fields</Heading>
+      <Body s>Fill in the fields specific to this query.</Body>
      <Spacer medium />
      <IntegrationQueryEditor
        {datasource}
@ -157,7 +157,7 @@
      <Divider />
      <Spacer extraLarge />
      <div class="viewer-controls">
-        <Heading>Results</Heading>
+        <Heading s>Results</Heading>
        <div class="button-container">
          <Button
            secondary
@ -170,7 +170,8 @@
          <Button thin secondary on:click={previewQuery}>Run Query</Button>
        </div>
      </div>
-      <Body s grey>
+      <Spacer small />
+      <Body s>
        Below, you can preview the results from your query and change the
        schema.
      </Body>
--- a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -47,7 +47,7 @@
        this={ICONS[datasource.source]}
        height="26"
        width="26" />
-      <Heading l>{datasource.name}</Heading>
+      <Heading m>{datasource.name}</Heading>
    </header>
    <Body small grey lh>{integration.description}</Body>
    <Spacer extraLarge />
@ -55,12 +55,10 @@
    <Spacer extraLarge />
    <div class="container">
      <div class="config-header">
-        <Heading>Configuration</Heading>
+        <Heading s>Configuration</Heading>
        <Button secondary on:click={saveDatasource}>Save</Button>
      </div>
-      <Body small grey>
-        Connect your database to Budibase using the config below.
-      </Body>
+      <Body s>Connect your database to Budibase using the config below.</Body>
      <Spacer extraLarge />
      <IntegrationConfigForm
        schema={integration.datasource}
@ -70,7 +68,7 @@
      <Divider />
      <Spacer extraLarge />
      <div class="query-header">
-        <Heading>Queries</Heading>
+        <Heading s>Queries</Heading>
        <Button secondary on:click={() => $goto('./new')}>Add Query</Button>
      </div>
      <Spacer extraLarge />