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

Switching everything over to proper layouts and removing any specified margins/padding.

This commit is contained in:
mike12345567 2021-05-17 18:20:10 +01:00
parent 47c4366a8f
commit 3f7adae0d5
2 changed files with 16 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/builder/src/components/login/GoogleButton.svelte
View File

@ -1,25 +1,17 @@
<script> <script>
import { Link } from "@budibase/bbui" import { ActionButton } from "@budibase/bbui"
import GoogleLogo from "/assets/google-logo.png" import GoogleLogo from "/assets/google-logo.png"
import { goto } from "@roxi/routify"
</script> </script>
<div class="outer"> <ActionButton on:click={() => goto("/api/admin/auth/google")}>
<Link target="_blank" href="/api/admin/auth/google"> <div class="inner">
<div class="inner"> <img src={GoogleLogo} alt="google icon" />
<img src={GoogleLogo} alt="google icon" /> <div>Sign in with Google</div>
<p>Sign in with Google</p> </div>
</div> </ActionButton>
</Link>
</div>
<style> <style>
.outer {
border: 1px solid #494949;
border-radius: 4px;
width: 100%;
background-color: var(--background-alt);
}
.inner { .inner {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -33,15 +25,4 @@
width: 18px; width: 18px;
margin: 3px 10px 3px 3px; margin: 3px 10px 3px 3px;
} }
.inner p {
margin: 0;
}
.outer :global(a) {
text-decoration: none;
font-weight: 500;
font-size: var(--font-size-m);
color: #fff;
}
</style> </style>

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

@ -1,5 +1,5 @@
<script> <script>
import {goto} from "@roxi/routify" import { goto } from "@roxi/routify"
import { import {
notifications, notifications,
Input, Input,
@ -11,7 +11,7 @@
Heading, 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"
let username = "" let username = ""
let password = "" let password = ""
@ -37,22 +37,22 @@
<div class="login"> <div class="login">
<div class="main"> <div class="main">
<Layout noPadding> <Layout>
<Layout noPadding justifyItems="center"> <Layout noPadding justifyItems="center">
<img src="https://i.imgur.com/ZKyklgF.png" /> <img src="https://i.imgur.com/ZKyklgF.png" />
<Heading>Sign in to Budibase</Heading> <Heading>Sign in to Budibase</Heading>
</Layout> </Layout>
<div class="sso"> <GoogleButton />
<GoogleButton />
</div>
<Divider noGrid /> <Divider noGrid />
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Body size="S" textAlign="center">Sign in with email</Body> <Body size="S" textAlign="center">Sign in with email</Body>
<Input label="Email" bind:value={username} /> <Input label="Email" bind:value={username} />
<Input label="Password" type="password" on:change bind:value={password} /> <Input label="Password" type="password" on:change bind:value={password} />
</Layout> </Layout>
<Button cta on:click={login}>Sign in to Budibase</Button> <Layout gap="S" noPadding>
<ActionButton quiet on:click={forgot}>Forgot Password?</ActionButton> <Button cta on:click={login}>Sign in to Budibase</Button>
<ActionButton quiet on:click={forgot}>Forgot password?</ActionButton>
</Layout>
</Layout> </Layout>
</div> </div>
</div> </div>
@ -71,22 +71,7 @@
width: 260px; width: 260px;
} }
.center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img { img {
width: 48px; width: 48px;
} }
.sso {
width: 100%;
}
.login-buttons :global(>*) {
width: 100%;
}
</style> </style>