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,14 +440,12 @@
         />
       </div>
     </Layout>
-    <span class="advanced-config">
+
     <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
           secondary
-              newStyles
           size="S"
           on:click={() => {
             providers.oidc.config.configs[0]["scopes"] = [...defaultScopes]
@@ -465,16 +455,15 @@
           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
+        next log in.
-          modification.
       </Body>
+    </Layout>
 
-        <div class="auth-form">
+    <Layout gap="XS" noPadding>
-          <span class="add-new">
+      <div class="form-row">
-            <Label size="L">{"Auth Scopes"}</Label>
+        <Label size="L">Auth Scopes</Label>
         <Input
           dataCy={"new-scope-input"}
           error={scopesFields[0].error}
@@ -516,8 +505,8 @@
             }
           }}
         />
-          </span>
+      </div>
-          <div class="tag-wrap">
+      <div class="form-row">
         <span />
         <Tags>
           <Tag closable={false}>openid</Tag>
@@ -539,38 +528,24 @@
           {/each}
         </Tags>
       </div>
-        </div>
     </Layout>
-    </span>
+    <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;
   }

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