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

5 years ago · 1c8dee192a
2 changed files with 16 additions and 50 deletions
--- a/packages/builder/src/components/login/GoogleButton.svelte
+++ b/packages/builder/src/components/login/GoogleButton.svelte
@ -1,25 +1,17 @@
 <script>
-  import { Link } from "@budibase/bbui"
+  import { ActionButton } from "@budibase/bbui"
  import GoogleLogo from "/assets/google-logo.png"
+  import { goto } from "@roxi/routify"
 </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>
+<ActionButton on:click={() => goto("/api/admin/auth/google")}>
+  <div class="inner">
+    <img src={GoogleLogo} alt="google icon" />
+    <div>Sign in with Google</div>
+  </div>
+</ActionButton>

 <style>
-  .outer {
-    border: 1px solid #494949;
-    border-radius: 4px;
-    width: 100%;
-    background-color: var(--background-alt);
-  }
-
  .inner {
    display: flex;
    flex-direction: row;
@ -33,15 +25,4 @@
    width: 18px;
    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>
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@ -1,5 +1,5 @@
 <script>
-  import {goto} from "@roxi/routify"
+  import { goto } from "@roxi/routify"
  import {
    notifications,
    Input,
@ -11,7 +11,7 @@
    Heading,
  } from "@budibase/bbui"
  import GoogleButton from "./GoogleButton.svelte"
-  import {auth} from "stores/backend"
+  import { auth } from "stores/backend"

  let username = ""
  let password = ""
@ -37,22 +37,22 @@

 <div class="login">
  <div class="main">
-    <Layout noPadding>
+    <Layout>
      <Layout noPadding justifyItems="center">
        <img src="https://i.imgur.com/ZKyklgF.png" />
        <Heading>Sign in to Budibase</Heading>
      </Layout>
-      <div class="sso">
-        <GoogleButton />
-      </div>
+      <GoogleButton />
      <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>
+      <Layout gap="S" noPadding>
+        <Button cta on:click={login}>Sign in to Budibase</Button>
+        <ActionButton quiet on:click={forgot}>Forgot password?</ActionButton>
+      </Layout>
    </Layout>
  </div>
 </div>
@ -71,22 +71,7 @@
    width: 260px;
  }

-  .center {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
  img {
    width: 48px;
  }
-
-  .sso {
-    width: 100%;
-  }
-
-  .login-buttons :global(>*) {
-    width: 100%;
-  }
 </style>