From 43899cae684c75269aa516394a1c05683f351a74 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 17 May 2021 16:48:26 +0100
Subject: [PATCH] Adding login form from designs.

---
 .../src/components/login/GoogleButton.svelte  | 16 ++---
 .../src/components/login/LoginForm.svelte     | 66 ++++++++++++-------
 2 files changed, 49 insertions(+), 33 deletions(-)
diff --git a/packages/builder/src/components/login/GoogleButton.svelte b/packages/builder/src/components/login/GoogleButton.svelte
index d6396cb267..ef2c5ce81b 100644
--- a/packages/builder/src/components/login/GoogleButton.svelte
+++ b/packages/builder/src/components/login/GoogleButton.svelte
@@ -14,25 +14,24 @@
 
 <style>
   .outer {
-    border: 1px;
+    border: 1px solid #494949;
+    border-radius: 4px;
     width: 100%;
+    background-color: var(--background-alt);
   }
 
   .inner {
     display: flex;
     flex-direction: row;
     align-items: center;
-
-    background-color: var(--background-alt);
-    border-radius: 3px;
+    justify-content: center;
     padding-top: var(--spacing-xs);
     padding-bottom: var(--spacing-xs);
   }
 
   .inner img {
-    width: 24px;
-    margin: 1px 14px 1px 1px;
-    border-radius: 2px;
+    width: 18px;
+    margin: 3px 10px 3px 3px;
   }
 
   .inner p {
@@ -41,7 +40,8 @@
 
   .outer :global(a) {
     text-decoration: none;
-    font-weight: bold;
+    font-weight: 500;
+    font-size: var(--font-size-m);
     color: #fff;
   }
 </style>
diff --git a/packages/builder/src/components/login/LoginForm.svelte b/packages/builder/src/components/login/LoginForm.svelte
index 7e9b2d3dd8..2435896fcd 100644
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@@ -1,15 +1,16 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import {goto} from "@roxi/routify"
   import {
     notifications,
     Input,
-    Modal,
-    ModalContent,
     Button,
     Divider,
+    ActionButton,
+    Layout,
+    Body,
   } from "@budibase/bbui"
   import GoogleButton from "./GoogleButton.svelte"
-  import { auth } from "stores/backend"
+  import {auth} from "stores/backend"
 
   let username = ""
   let password = ""
@@ -33,41 +34,56 @@
   }
 </script>
 
-<Modal fixed>
-  <ModalContent
-    size="M"
-    title="Log In"
-    showCancelButton={false}
-    showConfirmButton={false}
-    showCloseIcon={false}
-  >
+<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 />
-    <Input label="Email" bind:value={username} />
-    <Input label="Password" type="password" on:change bind:value={password} />
+    <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">
-      <Button secondary on:click={forgot}>Forgot Password?</Button>
-      <Button cta on:click={login}>Login</Button>
+      <Button cta on:click={login}>Sign in to Budibase</Button>
+      <ActionButton quiet on:click={forgot}>Forgot Password?</ActionButton>
     </div>
-  </ModalContent>
-</Modal>
+  </div>
+</div>
 
 <style>
-  .sso {
+  .login {
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: center;
   }
-  .login-buttons {
+
+  .main {
+    width: 240px;
     display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
   }
-  .login-buttons :global(>*:not(:last-child)) {
-    margin-right: var(--spacing-xl);
+
+  .main 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>
