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

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>

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}

packages/bbui/src/Tags/Tag.svelte

@@ -37,7 +37,7 @@
 
 <style>
   .spectrum-Tags-item {
-    margin-top: 0;
     margin-bottom: 0;
+    margin-top: 0;
   }
 </style>

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>

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>
 

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>

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")

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" />

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>

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>

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>
 

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}
         >

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")}
                 >

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>
 

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">

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>
 

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>
+    <Layout gap="XS" noPadding>
-        <Heading size="XS">
+      <div class="provider-title">
-          <div class="auth-scopes">
+        <Heading size="S">Authentication scopes</Heading>
-            <div>Advanced</div>
+        <Button
-            <Button
+          secondary
-              secondary
+          size="S"
-              newStyles
+          on:click={() => {
-              size="S"
+            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
+              {tag}
-            </Button>
+            </Tag>
-          </div>
+          {/each}
-        </Heading>
+        </Tags>
-        <Body size="S">
+      </div>
-          Changes to your authentication scopes will only take effect when you
+    </Layout>
-          next log in. Please refer to your vendor documentation before
+    <div>
-          modification.
+      <Button
-        </Body>
+        disabled={oidcSaveButtonDisabled}
-
+        cta
-        <div class="auth-form">
+        on:click={() => save([providers.oidc])}
-          <span class="add-new">
+        dataCy="oidc-save"
-            <Label size="L">{"Auth Scopes"}</Label>
+      >
-            <Input
+        Save
-              dataCy={"new-scope-input"}
+      </Button>
-              error={scopesFields[0].error}
+    </div>
-              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>
   {/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;
   }

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}

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>
+          <Button on:click={appAddModal.show()} secondary>Add app</Button>
-            Add app
-          </Button>
         </div>
       </div>
       <List>

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")

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>
+            <Button on:click={popover.show()} secondary>Add to group</Button>
-              Add to group
-            </Button>
           </div>
           <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
             <UserGroupPicker

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>
+        <Button on:click={importUsersModal.show} secondary>Import</Button>
-          Import
-        </Button>
       </ButtonGroup>
       <div class="controls-right">
         <Search bind:value={searchEmail} placeholder="Search" />