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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/builder/src/components/login/LoginForm.svelte
View File

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