Work in progress, moving login form around a bit.

packages/builder/src/components/login/GoogleButton.svelte

@@ -0,0 +1,41 @@
+<script>
+  import { Link } from "@budibase/bbui"
+  import GoogleLogo from "/assets/google-logo.png"
+</script>
+
+<div class="outer">
+  <Link target="_blank" href="/api/admin/auth/google">
+    <div class="inner">
+      <img src={GoogleLogo} alt="google icon" />
+      <p>Sign in with Google</p>
+    </div>
+  </Link>
+</div>
+
+<style>
+  .inner {
+    display: flex;
+    flex-direction: row;
+    background-color: #4285f4;
+    border-radius: 3px;
+    padding-right: 12px;
+  }
+
+  .inner img {
+    width: 24px;
+    margin: 1px 14px 1px 1px;
+    border-radius: 2px;
+    background-color: #fff;
+    padding: 8px;
+  }
+
+  .inner p {
+    margin: 12px 0 0;
+  }
+
+  .outer :global(a) {
+    text-decoration: none;
+    font-weight: bold;
+    color: #fff;
+  }
+</style>

packages/builder/src/components/login/LoginForm.svelte

@@ -2,11 +2,13 @@
   import { goto } from "@roxi/routify"
   import {
     notifications,
-    Link,
     Input,
     Modal,
     ModalContent,
+    Button,
+    Divider,
   } from "@budibase/bbui"
+  import GoogleButton from "./GoogleButton.svelte"
   import { auth } from "stores/backend"
 
   let username = ""
@@ -25,35 +27,66 @@
       notifications.error("Invalid credentials")
     }
   }
+
+  async function forgot() {
+
+  }
 </script>
 
 <Modal fixed>
   <ModalContent
     size="M"
     title="Log In"
-    onConfirm={login}
-    confirmText="Log In"
     showCancelButton={false}
+    showConfirmButton={false}
     showCloseIcon={false}
   >
     <Input label="Email" bind:value={username} />
     <Input label="Password" type="password" on:change bind:value={password} />
-    <div class="footer" slot="footer">
+    <div class="login-buttons">
-      <Link target="_blank" href="/api/admin/auth/google">
+      <Button secondary on:click={forgot}>Forgot Password?</Button>
-        Sign In With Google
+      <Button cta on:click={login}>Login</Button>
-      </Link>
+    </div>
+    <div class="or-divide">
+      <Divider noGrid />
+      <div class="or-label">
+        OR
+      </div>
+    </div>
+    <div class="sso">
+      <GoogleButton />
     </div>
   </ModalContent>
 </Modal>
 
 <style>
-  .footer {
+  .sso {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .login-buttons {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
   }
-  .footer :global(a) {
+  .login-buttons :global(>*:not(:last-child)) {
-    margin-right: var(--spectrum-global-dimension-static-size-200);
+    margin-right: var(--spacing-xl);
+  }
+  .or-divide {
+    position: relative;
+  }
+  .or-label {
+    position: absolute;
+    top: calc(50% - 2px);
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    background-color: var(--background);
+    padding: 0 var(--spacing-xl);
+    font-weight: 500;
+    font-size: var(--font-size-s);
+    color: var(--spectrum-global-color-gray-600);
   }
 </style>