some button fixes

packages/builder/src/components/settings/ThemeEditor.svelte

@@ -1,6 +1,6 @@
 <script>
   import { themeStore } from "builderStore"
-  import { Label, Toggle, Button, Slider } from "@budibase/bbui"
+  import { Toggle, Button, Slider } from "@budibase/bbui"
 
   let showAdvanced = false
 </script>
@@ -11,7 +11,7 @@
   </div>
   {#if $themeStore.darkMode && !showAdvanced}
     <div class="button">
-      <Button text on:click={() => (showAdvanced = true)}>Customise</Button>
+      <Button secondary on:click={() => (showAdvanced = true)}>Customise</Button>
     </div>
   {/if}
   {#if $themeStore.darkMode && showAdvanced}
@@ -34,7 +34,7 @@
       max="32"
       showValue />
     <div class="button">
-      <Button text on:click={themeStore.reset}>Reset</Button>
+      <Button secondary on:click={themeStore.reset}>Reset</Button>
     </div>
   {/if}
 </div>

packages/builder/src/components/start/BuilderSettingsButton.svelte

@@ -6,27 +6,10 @@
 </script>
 
 <div>
-  <Button icon="" text on:click={modal.show}>
-    <i class="ri-settings-3-fill" />
-    <p>Settings</p>
+  <Button overBackground quiet icon="Settings" text on:click={modal.show}>
+    Settings
   </Button>
 </div>
 <Modal bind:this={modal} width="30%">
   <BuilderSettingsModal />
 </Modal>
-
-<style>
-  div i {
-    font-size: 26px;
-    color: var(--grey-7);
-    margin-left: 12px;
-  }
-
-  div p {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    color: var(--ink);
-    font-weight: 400;
-    margin: 0 0 0 12px;
-  }
-</style>