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 8bfd54bd80
commit af916df75b
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>

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

@ -131,12 +131,8 @@
chooseNextModal() chooseNextModal()
}} }}
> >
<Layout noPadding gap="M"> <Layout noPadding gap="XS">
<Layout noPadding> <Body size="S">Get started with Budibase DB</Body>
<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 <div
class:selected={integration.type === IntegrationTypes.INTERNAL} class:selected={integration.type === IntegrationTypes.INTERNAL}
on:click={() => selectIntegration(IntegrationTypes.INTERNAL)} on:click={() => selectIntegration(IntegrationTypes.INTERNAL)}
@ -145,15 +141,15 @@
<div class="item-body with-type"> <div class="item-body with-type">
<svelte:component this={ICONS.BUDIBASE} height="20" width="20" /> <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
<div class="text"> <div class="text">
<div class="name">Budibase DB</div> <Heading size="XXS">Budibase DB</Heading>
<div class="type">Non-relational</div> <Detail size="S" class="type">Non-relational</Detail>
</div> </div>
</div> </div>
</div> </div>
</Layout> </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
@ -168,9 +164,9 @@
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>
@ -178,7 +174,6 @@
{/each} {/each}
</div> </div>
</Layout> </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>