MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update styles to use spectrum components

This commit is contained in:
Andrew Kingston 2022-06-23 12:05:05 +01:00
parent 5dd8186383
commit 2663860ec1
2 changed files with 38 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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