Further work towards login designs.

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

@@ -13,24 +13,30 @@
 </div>
 
 <style>
+  .outer {
+    border: 1px;
+    width: 100%;
+  }
+
   .inner {
     display: flex;
     flex-direction: row;
-    background-color: #4285f4;
+    align-items: center;
+
+    background-color: var(--background-alt);
     border-radius: 3px;
-    padding-right: 12px;
+    padding-top: var(--spacing-xs);
+    padding-bottom: var(--spacing-xs);
   }
 
   .inner img {
     width: 24px;
     margin: 1px 14px 1px 1px;
     border-radius: 2px;
-    background-color: #fff;
-    padding: 8px;
   }
 
   .inner p {
-    margin: 12px 0 0;
+    margin: 0;
   }
 
   .outer :global(a) {

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

@@ -41,21 +41,16 @@
     showConfirmButton={false}
     showCloseIcon={false}
   >
+    <div class="sso">
+      <GoogleButton />
+    </div>
+    <Divider noGrid />
     <Input label="Email" bind:value={username} />
     <Input label="Password" type="password" on:change bind:value={password} />
     <div class="login-buttons">
       <Button secondary on:click={forgot}>Forgot Password?</Button>
       <Button cta on:click={login}>Login</Button>
     </div>
-    <div class="or-divide">
-      <Divider noGrid />
-      <div class="or-label">
-        OR
-      </div>
-    </div>
-    <div class="sso">
-      <GoogleButton />
-    </div>
   </ModalContent>
 </Modal>
 
@@ -75,18 +70,4 @@
   .login-buttons :global(>*:not(:last-child)) {
     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>