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

This commit is contained in:
Andrew Kingston 2021-06-28 10:56:17 +01:00
parent cdd9bed7ad
commit 39197b318b
2 changed files with 22 additions and 20 deletions

View File

@ -62,15 +62,17 @@
{#if datasource && integration} {#if datasource && integration}
<section> <section>
<Layout> <Layout>
<header> <Layout gap="XS" noPadding>
<svelte:component <header>
this={ICONS[datasource.source]} <svelte:component
height="26" this={ICONS[datasource.source]}
width="26" height="26"
/> width="26"
<Heading size="M">{datasource.name}</Heading> />
</header> <Heading size="M">{datasource.name}</Heading>
<Body size="S" grey lh>{integration.description}</Body> </header>
<Body size="M">{integration.description}</Body>
</Layout>
<Divider /> <Divider />
<div class="container"> <div class="container">
<div class="config-header"> <div class="config-header">
@ -139,7 +141,6 @@
} }
header { header {
margin: 0 0 var(--spacing-xs) 0;
display: flex; display: flex;
gap: var(--spacing-l); gap: var(--spacing-l);
align-items: center; align-items: center;

View File

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