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

Update portal pages to have better usage of spectrum components

This commit is contained in:
Andrew Kingston 2021-05-06 15:34:22 +01:00
parent cd39210573
commit 986dc74190
3 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/pages/portal/_layout.svelte
View File

@ -80,7 +80,7 @@
<Icon size="XL" name="ChevronDown" /> <Icon size="XL" name="ChevronDown" />
</div> </div>
<MenuItem icon="Settings" on:click={oldSettingsModal.show}> <MenuItem icon="Settings" on:click={oldSettingsModal.show}>
Settings Old settings
</MenuItem> </MenuItem>
<MenuItem icon="LogOut" on:click={auth.logout}>Log out</MenuItem> <MenuItem icon="LogOut" on:click={auth.logout}>Log out</MenuItem>
</ActionMenu> </ActionMenu>

63
packages/builder/src/pages/portal/oauth/index.svelte
View File

@ -60,47 +60,50 @@
</script> </script>
<Page> <Page>
<header> <Layout noPadding>
<Heading size="M">OAuth</Heading> <div>
<Body size="S"> <Heading size="M">OAuth</Heading>
Every budibase app comes with basic authentication (email/password) <Body>
included. You can add additional authentication methods from the options Every budibase app comes with basic authentication (email/password)
below. included. You can add additional authentication methods from the options
</Body> below.
</header> </Body>
<Divider /> </div>
{#if google} <Divider />
<div class="config-form"> {#if google}
<Layout gap="S"> <div>
<Heading size="S"> <Heading size="S">
<span> <span>
<GoogleLogo /> <GoogleLogo />
Google Google
</span> </span>
</Heading> </Heading>
{#each ConfigFields.Google as field} <Body>
<div class="form-row"> To allow users to authenticate using their Google accounts, fill out
<Label>{field}</Label> the fields below.
<Input bind:value={google.config[field]} /> </Body>
</div> </div>
{/each}
</Layout> {#each ConfigFields.Google as field}
<Button primary on:click={() => save(google)}>Save</Button> <div class="form-row">
</div> <Label size="L">{field}</Label>
<Divider /> <Input bind:value={google.config[field]} />
{/if} </div>
{/each}
<div>
<Button primary on:click={() => save(google)}>Save</Button>
</div>
<Divider />
{/if}
</Layout>
</Page> </Page>
<style> <style>
.config-form {
margin-top: 42px;
margin-bottom: 42px;
}
.form-row { .form-row {
display: grid; display: grid;
grid-template-columns: 20% 1fr; grid-template-columns: 20% 1fr;
grid-gap: var(--spacing-l); grid-gap: var(--spacing-l);
align-items: center;
} }
span { span {
@ -108,8 +111,4 @@
align-items: center; align-items: center;
gap: var(--spacing-s); gap: var(--spacing-s);
} }
header {
margin-bottom: 42px;
}
</style> </style>

23
packages/builder/src/pages/portal/settings/general.svelte
View File

@ -45,12 +45,12 @@
<Layout noPadding> <Layout noPadding>
<div class="intro"> <div class="intro">
<Heading size="M">General</Heading> <Heading size="M">General</Heading>
<Body <Body>
>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic vero, aut Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic vero, aut
culpa provident sunt ratione! Voluptas doloremque, dicta nisi velit culpa provident sunt ratione! Voluptas doloremque, dicta nisi velit
perspiciatis, ratione vel blanditiis totam, nam voluptate repellat perspiciatis, ratione vel blanditiis totam, nam voluptate repellat
aperiam fuga!</Body aperiam fuga!
> </Body>
</div> </div>
<Divider size="S" /> <Divider size="S" />
<div class="information"> <div class="information">
@ -58,7 +58,7 @@
<Body>Here you can update your logo and organization name.</Body> <Body>Here you can update your logo and organization name.</Body>
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<Label>Organization name</Label> <Label size="L">Organization name</Label>
<Input thin bind:value={company} /> <Input thin bind:value={company} />
</div> </div>
<!-- <div class="field"> <!-- <div class="field">
@ -72,13 +72,13 @@
<Divider size="S" /> <Divider size="S" />
<div class="analytics"> <div class="analytics">
<Heading size="S">Analytics</Heading> <Heading size="S">Analytics</Heading>
<Body <Body>
>If you would like to send analytics that help us make Budibase better, If you would like to send analytics that help us make Budibase better,
please let us know below.</Body please let us know below.
> </Body>
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<Label>Send Analytics to Budibase</Label> <Label size="L">Send Analytics to Budibase</Label>
<Toggle text="" value={!analyticsDisabled} /> <Toggle text="" value={!analyticsDisabled} />
</div> </div>
</div> </div>
@ -97,7 +97,8 @@
} }
.field { .field {
display: grid; display: grid;
grid-template-columns: 30% 1fr; grid-template-columns: 32% 1fr;
align-items: center;
} }
.file { .file {
max-width: 30ch; max-width: 30ch;