Switching over to use layouts.

This commit is contained in:
mike12345567 2021-05-17 17:51:13 +01:00
parent a26ab57a76
commit 47c4366a8f
1 changed files with 21 additions and 18 deletions

View File

@ -8,6 +8,7 @@
ActionButton,
Layout,
Body,
Heading,
} from "@budibase/bbui"
import GoogleButton from "./GoogleButton.svelte"
import {auth} from "stores/backend"
@ -36,21 +37,23 @@
<div class="login">
<div class="main">
<Layout noPadding>
<Layout noPadding justifyItems="center">
<img src="https://i.imgur.com/ZKyklgF.png" />
<h2>Sign in to Budibase</h2>
<Heading>Sign in to Budibase</Heading>
</Layout>
<div class="sso">
<GoogleButton />
</div>
<Divider noGrid />
<Body size="S">Sign in with email</Body>
<Layout gap="XS">
<Layout gap="XS" noPadding>
<Body size="S" textAlign="center">Sign in with email</Body>
<Input label="Email" bind:value={username} />
<Input label="Password" type="password" on:change bind:value={password} />
</Layout>
<div class="login-buttons">
<Button cta on:click={login}>Sign in to Budibase</Button>
<ActionButton quiet on:click={forgot}>Forgot Password?</ActionButton>
</div>
</Layout>
</div>
</div>
@ -65,25 +68,25 @@
}
.main {
width: 240px;
width: 260px;
}
.center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main img {
img {
width: 48px;
}
.sso {
width: 100%;
margin-bottom: var(--spacing-l);
margin-top: var(--spacing-s);
}
.login-buttons :global(>*) {
margin-top: var(--spacing-l);
width: 100%;
}
</style>