Update button styles to always use newStyles, update auth page styles

2024-09-08 21:51:58 +12:00 · 2022-12-14 15:51:56 +00:00 · 2022-12-14 15:51:56 +00:00 · 0419f22931
commit 0419f22931
parent dfed2c26c7
22 changed files with 132 additions and 162 deletions
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@ -14,7 +14,7 @@
  export let active = false
  export let tooltip = undefined
  export let dataCy
-  export let newStyles = false
+  export let newStyles = true

  let showTooltip = false
 </script>
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@ -104,7 +104,7 @@
        {/if}

        {#if showCancelButton}
-          <Button group secondary newStyles on:click={close}>
+          <Button group secondary on:click={close}>
            {cancelText}
          </Button>
        {/if}
--- a/packages/bbui/src/Tags/Tag.svelte
+++ b/packages/bbui/src/Tags/Tag.svelte
@ -37,7 +37,7 @@

 <style>
  .spectrum-Tags-item {
-    margin-top: 0;
    margin-bottom: 0;
+    margin-top: 0;
  }
 </style>
--- a/packages/bbui/src/Tags/Tags.svelte
+++ b/packages/bbui/src/Tags/Tags.svelte
@ -5,3 +5,13 @@
 <div class="spectrum-Tags" role="list" aria-label="list">
  <slot />
 </div>
+
+<style>
+  .spectrum-Tags {
+    margin-top: -8px;
+    margin-left: -4px;
+  }
+  .spectrum-Tags :global(.spectrum-Tags-item) {
+    margin: 8px 0 0 4px !important;
+  }
+</style>
--- a/packages/builder/src/components/deploy/DeployNavigation.svelte
+++ b/packages/builder/src/components/deploy/DeployNavigation.svelte
@ -179,7 +179,7 @@
 </ConfirmDialog>

 <div class="buttons">
-  <Button on:click={previewApp} newStyles secondary>Preview</Button>
+  <Button on:click={previewApp} secondary>Preview</Button>
  <DeployModal onOk={completePublish} />
 </div>

--- a/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte
+++ b/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte
@ -164,7 +164,7 @@
      {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
        <div class="pro-upgrade">
          <div class="pro-copy">Expand your automation log history</div>
-          <Button primary newStyles on:click={$licensing.goToUpgradePage()}>
+          <Button primary on:click={$licensing.goToUpgradePage()}>
            Upgrade
          </Button>
        </div>
--- a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
+++ b/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
@ -193,7 +193,6 @@
        <div class="pro-buttons">
          {#if $auth.accountPortalAccess}
            <Button
-              newStyles
              primary
              disabled={!$auth.accountPortalAccess && $admin.cloud}
              on:click={$licensing.goToUpgradePage()}
@ -203,7 +202,6 @@
          {/if}
          <!--Show the view plans button-->
          <Button
-            newStyles
            secondary
            on:click={() => {
              window.open("https://budibase.com/pricing/", "_blank")
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@ -46,13 +46,12 @@
      <Button
        size="S"
        primary
-        newStyles
        disabled={app.lockedOther}
        on:click={() => editApp(app)}
      >
        Edit
      </Button>
-      <Button size="S" secondary newStyles on:click={() => appOverview(app)}>
+      <Button size="S" secondary on:click={() => appOverview(app)}>
        Manage
      </Button>
      <AppLockModal {app} buttonSize="M" />
--- a/packages/builder/src/components/usage/UsageDashCard.svelte
+++ b/packages/builder/src/components/usage/UsageDashCard.svelte
@ -47,7 +47,7 @@
    <div class="header-actions">
      {#if secondaryDefined}
        <div>
-          <Button newStyles secondary on:click={secondaryAction}
+          <Button secondary on:click={secondaryAction}
            >{secondaryActionText}</Button
          >
        </div>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
@ -172,7 +172,7 @@
        {bindings}
      />
    {/each}
-    <Button secondary newStyles on:click={() => $goto("../components")}>
+    <Button secondary on:click={() => $goto("../components")}>
      View components
    </Button>
  </Layout>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte
@ -17,7 +17,7 @@
 <div class="container">
  <Slider min={0} max={3} step={1} value={index} on:change={onChange} />
  <div class="button" style="--radius: {customTheme.buttonBorderRadius};">
-    <Button primary newStyles>Button</Button>
+    <Button primary>Button</Button>
  </div>
 </div>

--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@ -49,7 +49,6 @@
        <Button
          dataCy="import-app-btn"
          size="M"
-          newStyles
          secondary
          on:click={initiateAppImport}
        >
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -278,7 +278,6 @@
              {#if $apps?.length > 0}
                <Button
                  size="M"
-                  newStyles
                  secondary
                  on:click={$goto("/builder/portal/apps/templates")}
                >
--- a/packages/builder/src/pages/builder/portal/plugins/_components/PluginRow.svelte
+++ b/packages/builder/src/pages/builder/portal/plugins/_components/PluginRow.svelte
@ -101,7 +101,7 @@
    </div>

    <div class="footer" slot="footer">
-      <Button newStyles on:click={deleteModal.show()} warning>Delete</Button>
+      <Button on:click={deleteModal.show()} warning>Delete</Button>
    </div>
  </ModalContent>

--- a/packages/builder/src/pages/builder/portal/plugins/index.svelte
+++ b/packages/builder/src/pages/builder/portal/plugins/index.svelte
@ -53,7 +53,7 @@
    <Layout noPadding>
      <div class="controls">
        <div>
-          <Button on:click={modal.show} newStyles cta>Add plugin</Button>
+          <Button on:click={modal.show} cta>Add plugin</Button>
        </div>
        {#if $plugins?.length}
          <div class="filters">
--- a/packages/builder/src/pages/builder/portal/settings/api.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/api.svelte
@ -47,8 +47,7 @@
    </div>
  </div>
  <div>
-    <Button newStyles secondary on:click={generateAPIKey}>Regenerate key</Button
-    >
+    <Button secondary on:click={generateAPIKey}>Regenerate key</Button>
  </div>
 </Layout>

--- a/packages/builder/src/pages/builder/portal/settings/auth/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/auth/index.svelte
@ -325,14 +325,6 @@
        <div class="provider-title">
          <GoogleLogo />
          <span>Google</span>
-          <Button
-            disabled={googleSaveButtonDisabled}
-            size="s"
-            cta
-            on:click={() => save([providers.google])}
-          >
-            Save
-          </Button>
        </div>
      </Heading>
      <Body size="S">
@ -368,6 +360,15 @@
        <Toggle text="" bind:value={providers.google.config.activated} />
      </div>
    </Layout>
+    <div>
+      <Button
+        disabled={googleSaveButtonDisabled}
+        cta
+        on:click={() => save([providers.google])}
+      >
+        Save
+      </Button>
+    </div>
  {/if}
  {#if providers.oidc}
    <Divider />
@ -376,15 +377,6 @@
        <div class="provider-title">
          <OidcLogo />
          <span>OpenID Connect</span>
-          <Button
-            disabled={oidcSaveButtonDisabled}
-            size="s"
-            cta
-            on:click={() => save([providers.oidc])}
-            dataCy={"oidc-save"}
-          >
-            Save
-          </Button>
        </div>
      </Heading>
      <Body size="S">
@ -448,129 +440,112 @@
        />
      </div>
    </Layout>
-    <span class="advanced-config">
-      <Layout gap="XS" noPadding>
-        <Heading size="XS">
-          <div class="auth-scopes">
-            <div>Advanced</div>
-            <Button
-              secondary
-              newStyles
-              size="S"
+
+    <Layout gap="XS" noPadding>
+      <div class="provider-title">
+        <Heading size="S">Authentication scopes</Heading>
+        <Button
+          secondary
+          size="S"
+          on:click={() => {
+            providers.oidc.config.configs[0]["scopes"] = [...defaultScopes]
+          }}
+          dataCy={"restore-oidc-default-scopes"}
+        >
+          Restore Defaults
+        </Button>
+      </div>
+      <Body size="S">
+        Changes to your authentication scopes will only take effect when you
+        next log in.
+      </Body>
+    </Layout>
+
+    <Layout gap="XS" noPadding>
+      <div class="form-row">
+        <Label size="L">Auth Scopes</Label>
+        <Input
+          dataCy={"new-scope-input"}
+          error={scopesFields[0].error}
+          placeholder={"New Scope"}
+          bind:value={scopesFields[0].inputText}
+          on:keyup={e => {
+            if (!scopesFields[0].inputText) {
+              scopesFields[0].error = null
+            }
+            if (
+              e.key === "Enter" ||
+              e.keyCode === 13 ||
+              e.code == "Space" ||
+              e.keyCode == 32
+            ) {
+              let scopes = providers.oidc.config.configs[0]["scopes"]
+                ? providers.oidc.config.configs[0]["scopes"]
+                : [...defaultScopes]
+
+              let update = scopesFields[0].inputText.trim()
+
+              if (HasSpacesRegex.test(update)) {
+                scopesFields[0].error =
+                  "Auth scopes cannot contain spaces, double quotes or backslashes"
+                return
+              } else if (scopes.indexOf(update) > -1) {
+                scopesFields[0].error = "Auth scope already exists"
+                return
+              } else if (!update.length) {
+                scopesFields[0].inputText = null
+                scopesFields[0].error = null
+                return
+              } else {
+                scopesFields[0].error = null
+                scopes.push(update)
+                providers.oidc.config.configs[0]["scopes"] = scopes
+                scopesFields[0].inputText = null
+              }
+            }
+          }}
+        />
+      </div>
+      <div class="form-row">
+        <span />
+        <Tags>
+          <Tag closable={false}>openid</Tag>
+          {#each providers.oidc.config.configs[0]["scopes"] || [...defaultScopes] as tag, idx}
+            <Tag
+              closable={scopesFields[0].editing}
              on:click={() => {
-                providers.oidc.config.configs[0]["scopes"] = [...defaultScopes]
+                let idxScopes = providers.oidc.config.configs[0]["scopes"]
+                if (idxScopes.length == 1) {
+                  idxScopes.pop()
+                } else {
+                  idxScopes.splice(idx, 1)
+                  refreshScopes(0)
+                }
              }}
-              dataCy={"restore-oidc-default-scopes"}
            >
-              Restore Defaults
-            </Button>
-          </div>
-        </Heading>
-        <Body size="S">
-          Changes to your authentication scopes will only take effect when you
-          next log in. Please refer to your vendor documentation before
-          modification.
-        </Body>
-
-        <div class="auth-form">
-          <span class="add-new">
-            <Label size="L">{"Auth Scopes"}</Label>
-            <Input
-              dataCy={"new-scope-input"}
-              error={scopesFields[0].error}
-              placeholder={"New Scope"}
-              bind:value={scopesFields[0].inputText}
-              on:keyup={e => {
-                if (!scopesFields[0].inputText) {
-                  scopesFields[0].error = null
-                }
-                if (
-                  e.key === "Enter" ||
-                  e.keyCode === 13 ||
-                  e.code == "Space" ||
-                  e.keyCode == 32
-                ) {
-                  let scopes = providers.oidc.config.configs[0]["scopes"]
-                    ? providers.oidc.config.configs[0]["scopes"]
-                    : [...defaultScopes]
-
-                  let update = scopesFields[0].inputText.trim()
-
-                  if (HasSpacesRegex.test(update)) {
-                    scopesFields[0].error =
-                      "Auth scopes cannot contain spaces, double quotes or backslashes"
-                    return
-                  } else if (scopes.indexOf(update) > -1) {
-                    scopesFields[0].error = "Auth scope already exists"
-                    return
-                  } else if (!update.length) {
-                    scopesFields[0].inputText = null
-                    scopesFields[0].error = null
-                    return
-                  } else {
-                    scopesFields[0].error = null
-                    scopes.push(update)
-                    providers.oidc.config.configs[0]["scopes"] = scopes
-                    scopesFields[0].inputText = null
-                  }
-                }
-              }}
-            />
-          </span>
-          <div class="tag-wrap">
-            <span />
-            <Tags>
-              <Tag closable={false}>openid</Tag>
-              {#each providers.oidc.config.configs[0]["scopes"] || [...defaultScopes] as tag, idx}
-                <Tag
-                  closable={scopesFields[0].editing}
-                  on:click={() => {
-                    let idxScopes = providers.oidc.config.configs[0]["scopes"]
-                    if (idxScopes.length == 1) {
-                      idxScopes.pop()
-                    } else {
-                      idxScopes.splice(idx, 1)
-                      refreshScopes(0)
-                    }
-                  }}
-                >
-                  {tag}
-                </Tag>
-              {/each}
-            </Tags>
-          </div>
-        </div>
-      </Layout>
-    </span>
+              {tag}
+            </Tag>
+          {/each}
+        </Tags>
+      </div>
+    </Layout>
+    <div>
+      <Button
+        disabled={oidcSaveButtonDisabled}
+        cta
+        on:click={() => save([providers.oidc])}
+        dataCy="oidc-save"
+      >
+        Save
+      </Button>
+    </div>
  {/if}
 </Layout>

 <style>
-  .auth-scopes {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .advanced-config :global(.spectrum-Tags-item) {
-    margin-left: 0px;
-    margin-top: var(--spacing-m);
-    margin-right: var(--spacing-m);
-  }
-
-  .auth-form > * {
-    display: grid;
-    grid-gap: var(--spacing-l);
-    grid-template-columns: 100px 1fr;
-  }
-
-  .advanced-config .auth-form .tag-wrap {
-    padding: 0px 5px 5px 0px;
-  }
-
  .form-row {
    display: grid;
-    grid-template-columns: 100px 1fr;
+    grid-template-columns: 110px 1fr;
    grid-gap: var(--spacing-l);
    align-items: center;
  }
--- a/packages/builder/src/pages/builder/portal/settings/email/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/email/index.svelte
@ -178,7 +178,6 @@
    <div class="spectrum-ButtonGroup spectrum-Settings-buttonGroup">
      <Button cta on:click={saveSmtp}>Save</Button>
      <Button
-        newStyles
        secondary
        on:click={deleteSmtp}
        disabled={!$admin.checklist.smtp.checked}
--- a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
@ -178,9 +178,7 @@
      <div class="header">
        <Heading size="S">Apps</Heading>
        <div>
-          <Button on:click={appAddModal.show()} newStyles secondary>
-            Add app
-          </Button>
+          <Button on:click={appAddModal.show()} secondary>Add app</Button>
        </div>
      </div>
      <List>
--- a/packages/builder/src/pages/builder/portal/users/groups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/users/groups/index.svelte
@ -108,10 +108,9 @@
    <ButtonGroup>
      {#if $licensing.groupsEnabled}
        <!--Show the group create button-->
-        <Button newStyles cta on:click={showCreateGroupModal}>Add group</Button>
+        <Button cta on:click={showCreateGroupModal}>Add group</Button>
      {:else}
        <Button
-          newStyles
          primary
          disabled={!$auth.accountPortalAccess && $admin.cloud}
          on:click={$licensing.goToUpgradePage()}
@ -120,7 +119,6 @@
        </Button>
        <!--Show the view plans button-->
        <Button
-          newStyles
          secondary
          on:click={() => {
            window.open("https://budibase.com/pricing/", "_blank")
--- a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
@ -257,9 +257,7 @@
        <div class="tableTitle">
          <Heading size="S">Groups</Heading>
          <div bind:this={popoverAnchor}>
-            <Button on:click={popover.show()} secondary newStyles>
-              Add to group
-            </Button>
+            <Button on:click={popover.show()} secondary>Add to group</Button>
          </div>
          <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
            <UserGroupPicker
--- a/packages/builder/src/pages/builder/portal/users/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/index.svelte
@ -222,9 +222,7 @@
        <Button dataCy="add-user" on:click={createUserModal.show} cta>
          Add users
        </Button>
-        <Button on:click={importUsersModal.show} secondary newStyles>
-          Import
-        </Button>
+        <Button on:click={importUsersModal.show} secondary>Import</Button>
      </ButtonGroup>
      <div class="controls-right">
        <Search bind:value={searchEmail} placeholder="Search" />