ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update styles to use spectrum components

master
Andrew Kingston 4 years ago
parent
5dd8186383
commit
2663860ec1
2 changed files with 39 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/bbui/src/Typography/Detail.svelte
  2. 91
      packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte

2
packages/bbui/src/Typography/Detail.svelte
View File

@ -1,9 +1,7 @@
<script>
import "@spectrum-css/typography/dist/index-vars.css"
// Sizes
export let size = "M"
export let serif = false
</script>

91
packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
View File

@ -131,53 +131,48 @@
chooseNextModal()
}}
>
<Layout noPadding gap="M">
<Layout noPadding>
<Body size="S">
All apps need data. You can connect to a data source below, or add
data to your app using Budibase's built-in database.
</Body>
<div
class:selected={integration.type === IntegrationTypes.INTERNAL}
on:click={() => selectIntegration(IntegrationTypes.INTERNAL)}
class="item hoverable"
>
<div class="item-body with-type">
<svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
<div class="text">
<div class="name">Budibase DB</div>
<div class="type">Non-relational</div>
</div>
<Layout noPadding gap="XS">
<Body size="S">Get started with Budibase DB</Body>
<div
class:selected={integration.type === IntegrationTypes.INTERNAL}
on:click={() => selectIntegration(IntegrationTypes.INTERNAL)}
class="item hoverable"
>
<div class="item-body with-type">
<svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
<div class="text">
<Heading size="XXS">Budibase DB</Heading>
<Detail size="S" class="type">Non-relational</Detail>
</div>
</div>
</Layout>
<Layout gap="XS" noPadding>
<div class="type">Connect to data source</div>
<div class="item-list">
{#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]}
<div
class:selected={integration.type === integrationType}
on:click={() => selectIntegration(integrationType)}
class="item hoverable"
>
<div class="item-body" class:with-type={!!schema.type}>
<svelte:component
this={ICONS[integrationType]}
height="20"
width="20"
/>
<div class="text">
<div class="name">{schema.friendlyName}</div>
{#if schema.type}
<div class="type">{schema.type || ""}</div>
{/if}
</div>
</div>
</Layout>
<Layout noPadding gap="XS">
<Body size="S">Connect to an external data source</Body>
<div class="item-list">
{#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]}
<div
class:selected={integration.type === integrationType}
on:click={() => selectIntegration(integrationType)}
class="item hoverable"
>
<div class="item-body" class:with-type={!!schema.type}>
<svelte:component
this={ICONS[integrationType]}
height="20"
width="20"
/>
<div class="text">
<Heading size="XXS">{schema.friendlyName}</Heading>
{#if schema.type}
<Detail size="S">{schema.type || ""}</Detail>
{/if}
</div>
</div>
{/each}
</div>
</Layout>
</div>
{/each}
</div>
</Layout>
</ModalContent>
</Modal>
@ -221,15 +216,7 @@
margin-top: 4px;
}
.name {
color: var(--spectrum-global-color-gray-900);
font-weight: 600;
}
.type {
font-weight: 600;
margin-top: 4px;
text-transform: uppercase;
font-size: 11px;
.text :global(.spectrum-Detail) {
color: var(--spectrum-global-color-gray-700);
}
</style>

Write Preview
Loading…
Cancel
Save