Improve styles in data source page to be more in line with the portal

5 years ago · fd9d1c61cc
2 changed files with 22 additions and 20 deletions
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -62,15 +62,17 @@
 {#if datasource && integration}
  <section>
    <Layout>
-      <header>
-        <svelte:component
-          this={ICONS[datasource.source]}
-          height="26"
-          width="26"
-        />
-        <Heading size="M">{datasource.name}</Heading>
-      </header>
-      <Body size="S" grey lh>{integration.description}</Body>
+      <Layout gap="XS" noPadding>
+        <header>
+          <svelte:component
+            this={ICONS[datasource.source]}
+            height="26"
+            width="26"
+          />
+          <Heading size="M">{datasource.name}</Heading>
+        </header>
+        <Body size="M">{integration.description}</Body>
+      </Layout>
      <Divider />
      <div class="container">
        <div class="config-header">
@ -139,7 +141,6 @@
  }

  header {
-    margin: 0 0 var(--spacing-xs) 0;
    display: flex;
    gap: var(--spacing-l);
    align-items: center;
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
@ -14,14 +14,16 @@

 <section>
  <Layout>
-    <header>
-      <svelte:component this={ICONS.BUDIBASE} height="26" width="26" />
-      <Heading size="M">Budibase Internal</Heading>
-    </header>
-    <Body size="S" grey lh
-      >Budibase internal tables are part of your app, the data will be stored in
-      your apps context.</Body
-    >
+    <Layout gap="XS" noPadding>
+      <header>
+        <svelte:component this={ICONS.BUDIBASE} height="26" width="26" />
+        <Heading size="M">Budibase Internal</Heading>
+      </header>
+      <Body size="M">
+        Budibase internal tables are part of your app, so the data will be
+        stored in your apps context.
+      </Body>
+    </Layout>
    <Divider />
    <Heading size="S">Tables</Heading>
    <div class="table-list">
@ -32,7 +34,7 @@
        >
          <Body size="S">{table.name}</Body>
          {#if table.primaryDisplay}
-            <Body size="S">display column: {table.primaryDisplay}</Body>
+            <Body size="S">Display column: {table.primaryDisplay}</Body>
          {/if}
        </div>
      {/each}
@ -50,7 +52,6 @@
  }

  header {
-    margin: 0 0 var(--spacing-xs) 0;
    display: flex;
    gap: var(--spacing-l);
    align-items: center;