Fix alignment of SSO configs, clean up style, make auth page mobile friendly

5 years ago · c2340187df
1 changed files with 30 additions and 63 deletions
--- a/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
@ -288,16 +288,14 @@
        <div class="provider-title">
          <GoogleLogo />
          <span>Google</span>
-          <div class="google-save-button">
-            <div>
-              <Button
-                disabled={googleSaveButtonDisabled}
-                size="s"
-                cta
-                on:click={() => save([providers.google])}>Save</Button
-              >
-            </div>
-          </div>
+          <Button
+            disabled={googleSaveButtonDisabled}
+            size="s"
+            cta
+            on:click={() => save([providers.google])}
+          >
+            Save
+          </Button>
        </div>
      </Heading>
      <Body size="S">
@ -317,12 +315,8 @@
        </div>
      {/each}
      <div class="form-row">
-        <div class="field">
-          <Label size="L">Activated</Label>
-          <span class="alignedToggle">
-            <Toggle text="" bind:value={providers.google.config.activated} />
-          </span>
-        </div>
+        <Label size="L">Activated</Label>
+        <Toggle text="" bind:value={providers.google.config.activated} />
      </div>
    </Layout>
  {/if}
@ -333,18 +327,16 @@
        <div class="provider-title">
          <OidcLogo />
          <span>OpenID Connect</span>
-          <div class="oidc-save-button">
-            <div>
-              <Button
-                disabled={oidcSaveButtonDisabled}
-                size="s"
-                cta
-                on:click={() => save([providers.oidc])}>Save</Button
-              >
-            </div>
-          </div>
-        </div></Heading
-      >
+          <Button
+            disabled={oidcSaveButtonDisabled}
+            size="s"
+            cta
+            on:click={() => save([providers.oidc])}
+          >
+            Save
+          </Button>
+        </div>
+      </Heading>
      <Body size="S">
        To allow users to authenticate using OIDC, fill out the fields below.
      </Body>
@ -360,7 +352,8 @@
          />
        </div>
      {/each}
-      <br />
+    </Layout>
+    <Layout gap="XS" noPadding>
      <Body size="S">
        To customize your login button, fill out the fields below.
      </Body>
@ -383,55 +376,29 @@
        on:change={e => onFileSelected(e)}
        bind:this={fileinput}
      />
-    </Layout>
-    <div class="form-row">
-      <div class="field">
+      <div class="form-row">
        <Label size="L">Activated</Label>
-        <span class="alignedToggle">
-          <Toggle
-            text=""
-            bind:value={providers.oidc.config.configs[0].activated}
-          />
-        </span>
+        <Toggle
+          text=""
+          bind:value={providers.oidc.config.configs[0].activated}
+        />
      </div>
-    </div>
+    </Layout>
  {/if}
 </Layout>

 <style>
-  .field {
-    display: flex;
-    align-items: center;
-  }
-
-  .alignedToggle {
-    margin-left: 63%;
-  }
-
  .form-row {
    display: grid;
-    grid-template-columns: 20% 1fr;
+    grid-template-columns: 100px 1fr;
    grid-gap: var(--spacing-l);
    align-items: center;
  }
-  span {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-s);
-  }

-  input {
+  input[type="file"] {
    display: none;
  }

-  .google-save-button {
-    display: inline-block;
-  }
-
-  .oidc-save-button {
-    display: inline-block;
-  }
-
  .provider-title {
    display: flex;
    flex-direction: row;