Switching over to use layouts.
This commit is contained in:
parent
a26ab57a76
commit
47c4366a8f
|
@ -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">
|
||||
<img src="https://i.imgur.com/ZKyklgF.png" />
|
||||
<h2>Sign in to Budibase</h2>
|
||||
<div class="sso">
|
||||
<GoogleButton />
|
||||
</div>
|
||||
<Divider noGrid />
|
||||
<Body size="S">Sign in with email</Body>
|
||||
<Layout gap="XS">
|
||||
<Input label="Email" bind:value={username} />
|
||||
<Input label="Password" type="password" on:change bind:value={password} />
|
||||
</Layout>
|
||||
<div class="login-buttons">
|
||||
<Layout noPadding>
|
||||
<Layout noPadding justifyItems="center">
|
||||
<img src="https://i.imgur.com/ZKyklgF.png" />
|
||||
<Heading>Sign in to Budibase</Heading>
|
||||
</Layout>
|
||||
<div class="sso">
|
||||
<GoogleButton />
|
||||
</div>
|
||||
<Divider noGrid />
|
||||
<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>
|
||||
<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>
|
||||
|
|
Loading…
Reference in New Issue