Add majority of new theme panel

packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte

@@ -17,7 +17,7 @@
   import { onMount } from "svelte"
   import { DefaultAppTheme } from "constants"
 
-  const updateNavigation = async (key, value) => {
+  const update = async (key, value) => {
     try {
       let navigation = $store.navigation
       navigation[key] = value
@@ -65,13 +65,13 @@
           selected={$store.navigation.navigation === "Top"}
           quiet={$store.navigation.navigation !== "Top"}
           icon="PaddingTop"
-          on:click={() => updateNavigation("navigation", "Top")}
+          on:click={() => update("navigation", "Top")}
         />
         <ActionButton
           selected={$store.navigation.navigation === "Left"}
           quiet={$store.navigation.navigation !== "Left"}
           icon="PaddingLeft"
-          on:click={() => updateNavigation("navigation", "Left")}
+          on:click={() => update("navigation", "Left")}
         />
       </ActionGroup>
     </Layout>
@@ -79,19 +79,19 @@
       <Checkbox
         text="Sticky header"
         value={$store.navigation.sticky}
-        on:change={e => updateNavigation("sticky", e.detail)}
+        on:change={e => update("sticky", e.detail)}
       />
     {/if}
     <Layout noPadding gap="XS">
       <Checkbox
         text="Logo"
         value={!$store.navigation.hideLogo}
-        on:change={e => updateNavigation("hideLogo", !e.detail)}
+        on:change={e => update("hideLogo", !e.detail)}
       />
       {#if !$store.navigation.hideLogo}
         <Input
           value={$store.navigation.logoUrl}
-          on:change={e => updateNavigation("logoUrl", e.detail)}
+          on:change={e => update("logoUrl", e.detail)}
           placeholder="Add logo URL"
           updateOnChange={false}
         />
@@ -101,12 +101,12 @@
       <Checkbox
         text="Title"
         value={!$store.navigation.hideTitle}
-        on:change={e => updateNavigation("hideTitle", !e.detail)}
+        on:change={e => update("hideTitle", !e.detail)}
       />
       {#if !$store.navigation.hideTitle}
         <Input
           value={$store.navigation.title}
-          on:change={e => updateNavigation("title", e.detail)}
+          on:change={e => update("title", e.detail)}
           placeholder="Add title"
           updateOnChange={false}
         />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeEditor.svelte

@@ -94,21 +94,9 @@
       </div>
       <div class="setting">
         <Label size="L">Accent color</Label>
-        <ColorPicker
-          spectrumTheme={$store.theme}
-          value={$store.customTheme?.primaryColor ||
-            DefaultAppTheme.primaryColor}
-          on:change={updateProperty("primaryColor")}
-        />
       </div>
       <div class="setting">
         <Label size="L">Accent color (hover)</Label>
-        <ColorPicker
-          spectrumTheme={$store.theme}
-          value={$store.customTheme?.primaryColorHover ||
-            DefaultAppTheme.primaryColorHover}
-          on:change={updateProperty("primaryColorHover")}
-        />
       </div>
     </Layout>
     <div slot="footer">

packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte

@@ -1,7 +1,48 @@
 <script>
   import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
-  import { Body, Layout } from "@budibase/bbui"
-  import ThemeEditor from "./_components/ThemeEditor.svelte"
+  import {
+    Body,
+    Layout,
+    Label,
+    ColorPicker,
+    Button,
+    notifications,
+  } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import { get } from "svelte/store"
+  import { DefaultAppTheme } from "constants"
+
+  const ButtonBorderRadiusOptions = [
+    {
+      label: "Square",
+      value: "0",
+    },
+    {
+      label: "Soft edge",
+      value: "4px",
+    },
+    {
+      label: "Curved",
+      value: "8px",
+    },
+    {
+      label: "Round",
+      value: "16px",
+    },
+  ]
+
+  $: customTheme = $store.customTheme || {}
+
+  const update = async (property, value) => {
+    try {
+      store.actions.customTheme.save({
+        ...get(store).customTheme,
+        [property]: value,
+      })
+    } catch (error) {
+      notifications.error("Error updating custom theme")
+    }
+  }
 </script>
 
 <NavigationPanel title="Theme">
@@ -9,6 +50,69 @@
     <Body size="S">
       Your theme is set across all the screens within your app
     </Body>
-    <ThemeEditor />
+    <Layout noPadding gap="XS">
+      <Label>Theme</Label>
+    </Layout>
+    <Layout noPadding gap="XS">
+      <Label>Buttons</Label>
+      <div class="buttons">
+        {#each ButtonBorderRadiusOptions as option}
+          <div
+            class:active={customTheme.buttonBorderRadius === option.value}
+            style={`--radius: ${option.value}`}
+          >
+            <Button
+              secondary
+              on:click={() => update("buttonBorderRadius", option.value)}
+            >
+              {option.label}
+            </Button>
+          </div>
+        {/each}
+      </div>
+    </Layout>
+    <Layout noPadding gap="XS">
+      <Label>Accent color</Label>
+      <ColorPicker
+        spectrumTheme={$store.theme}
+        value={customTheme.primaryColor || DefaultAppTheme.primaryColor}
+        on:change={e => update("primaryColor", e.detail)}
+      />
+    </Layout>
+    <Layout noPadding gap="XS">
+      <Label>Accent color (hover)</Label>
+      <ColorPicker
+        spectrumTheme={$store.theme}
+        value={customTheme.primaryColorHover ||
+          DefaultAppTheme.primaryColorHover}
+        on:change={e => update("primaryColorHover", e.detail)}
+      />
+    </Layout>
   </Layout>
 </NavigationPanel>
+
+<style>
+  .buttons {
+    display: grid;
+    grid-template-columns: 100px 100px;
+    gap: var(--spacing-m);
+  }
+  .buttons > div {
+    display: contents;
+  }
+  .buttons > div :global(.spectrum-Button) {
+    border-radius: var(--radius) !important;
+    border-width: 1px;
+    border-color: var(--spectrum-global-color-gray-400);
+    font-weight: 600;
+  }
+  .buttons > div:hover :global(.spectrum-Button) {
+    background: var(--spectrum-global-color-gray-700);
+    border-color: var(--spectrum-global-color-gray-700);
+  }
+  .buttons > div.active :global(.spectrum-Button) {
+    background: var(--spectrum-global-color-gray-200);
+    color: var(--spectrum-global-color-gray-800);
+    border-color: var(--spectrum-global-color-gray-600);
+  }
+</style>