Improve builder settings modal styles

packages/bbui/src/Divider/Divider.svelte

@@ -5,12 +5,25 @@
   export let s = false
 
   export let vertical = false
+  export let noMargin = false
+  export let noGrid = false
 
   $: useDefault = ![l, m, s].includes(true)
 </script>
 
 <hr
+  class:noMargin
+  class:noGrid
   class:spectrum-Divider--sizeL={l}
   class:spectrum-Divider--sizeM={m || useDefault}
   class:spectrum-Divider--sizeS={s}
   class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider" />
+
+<style>
+  hr.noMargin {
+    margin: 0;
+  }
+  hr.noGrid {
+    grid-area: auto;
+  }
+</style>

packages/bbui/src/Modal/ModalContent.svelte

@@ -84,6 +84,9 @@
   .spectrum-Dialog-content {
     overflow: visible;
   }
+  .spectrum-Dialog-heading {
+    font-family: var(--spectrum-alias-body-text-font-family);
+  }
 
   .spectrum-Dialog-buttonGroup {
     gap: var(--spectrum-global-dimension-static-size-200);

packages/bbui/src/bbui.css

@@ -1,32 +1,3 @@
-.svench-content {
-  color: #666;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, "Roboto",
-    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-h1.svench-content {
-  font-size: 2em;
-}
-h2.svench-content {
-  font-size: 1.66em;
-}
-h3.svench-content {
-  font-size: 1.33em;
-}
-h4.svench-content {
-  font-size: 1.33em;
-  font-weight: normal;
-}
-h5.svench-content {
-  font-size: 1em;
-  font-weight: bold;
-}
-h6.svench-content {
-  font-size: 1em;
-  font-weight: normal;
-  font-style: italic;
-}
-
 :root {
   --background: #ffffff;
   --ink: #000000;
@@ -127,7 +98,6 @@ h6.svench-content {
 
 h1 {
   font-size: 3rem;
-  font-family: var(--font-sans);
   font-weight: 700;
   text-rendering: var(--text-render);
   -webkit-font-smoothing: var(--text-smooth);
@@ -136,7 +106,6 @@ h1 {
 
 h2 {
   font-size: 2.25rem;
-  font-family: var(--font-sans);
   font-weight: 600;
   text-rendering: var(--text-render);
   -webkit-font-smoothing: var(--text-smooth);
@@ -145,7 +114,6 @@ h2 {
 
 h3 {
   font-size: 1.7rem;
-  font-family: var(--font-sans);
   font-weight: 600;
   text-rendering: var(--text-render);
   -webkit-font-smoothing: var(--text-smooth);
@@ -154,7 +122,6 @@ h3 {
 
 h4 {
   font-size: var(--font-size-xl);
-  font-family: var(--font-sans);
   font-weight: 500;
   text-rendering: var(--text-render);
   -webkit-font-smoothing: var(--text-smooth);
@@ -163,7 +130,6 @@ h4 {
 
 h5 {
   font-size: var(--font-size-l);
-  font-family: var(--font-sans);
   font-weight: 500;
   text-rendering: var(--text-render);
   -webkit-font-smoothing: var(--text-smooth);
@@ -172,7 +138,6 @@ h5 {
 
 h6 {
   font-size: var(--font-size-m);
-  font-family: var(--font-sans);
   font-weight: 500;
   text-rendering: var(--text-render);
   -webkit-font-smoothing: var(--text-smooth);
@@ -191,3 +156,7 @@ p {
 a {
   text-decoration: none;
 }
+
+.spectrum {
+  --spectrum-alias-body-text-font-family: "Inter", sans-serif;
+}

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

@@ -5,18 +5,4 @@
   let showAdvanced = false
 </script>
 
-<div class="content">
-  <div>
 <Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
-  </div>
-</div>
-
-<style>
-  .content {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-l);
-  }
-</style>

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

@@ -1,8 +1,15 @@
 <script>
-  import { notifications } from "@budibase/bbui"
   import { hostingStore } from "builderStore"
   import { HostingTypes } from "constants/backend"
-  import { Input, ModalContent, Toggle } from "@budibase/bbui"
+  import {
+    Heading,
+    Divider,
+    notifications,
+    Input,
+    ModalContent,
+    Toggle,
+    Body,
+  } from "@budibase/bbui"
   import ThemeEditor from "components/settings/ThemeEditor.svelte"
   import analytics from "analytics"
   import { onMount } from "svelte"
@@ -52,13 +59,14 @@
 </script>
 
 <ModalContent title="Builder settings" confirmText="Save" onConfirm={save}>
-  <h5>Theme</h5>
+  <Heading xs>Theme</Heading>
   <ThemeEditor />
-  <h5>Hosting</h5>
-  <p>
+  <Divider noMargin noGrid />
+  <Heading xs>Hosting</Heading>
+  <Body s>
     This section contains settings that relate to the deployment and hosting of
     apps made in this builder.
-  </p>
+  </Body>
   <Toggle
     text="Self hosted"
     on:change={updateSelfHosting}
@@ -68,24 +76,14 @@
     <Input bind:value={hostingInfo.selfHostKey} label="Hosting Key" />
     <Toggle text="HTTPS" bind:value={hostingInfo.useHttps} />
   {/if}
-  <h5>Analytics</h5>
-  <p>
+  <Divider noMargin noGrid />
+  <Heading xs>Analytics</Heading>
+  <Body s>
     If you would like to send analytics that help us make budibase better,
     please let us know below.
-  </p>
+  </Body>
   <Toggle
     text="Send Analytics To Budibase"
     value={!analyticsDisabled}
     on:change={toggleAnalytics} />
 </ModalContent>
-
-<style>
-  h5 {
-    margin: 0;
-    font-size: 14px;
-  }
-  p {
-    margin: 0;
-    font-size: 12px;
-  }
-</style>