From d1e3dda05fe678f5f3c5605be78497cebdfb2338 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 3 Sep 2021 15:28:35 +0100
Subject: [PATCH] Add custom theme options for button roundedness and header
 color

---
 .../design/AppPreview/AppThemeSelect.svelte   |  2 +-
 .../design/AppPreview/ThemeEditor.svelte      | 54 +++++++++++++++++--
 .../design/[assetType]/_layout.svelte         |  5 +-
 .../src/components/CustomThemeWrapper.svelte  |  1 +
 .../client/src/components/app/Layout.svelte   |  2 +-
 packages/client/src/stores/theme.js           | 24 +++++++--
 6 files changed, 76 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
index 09041dbf5a..a745a9e5f3 100644
--- a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
+++ b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
@@ -24,6 +24,7 @@
 
 <div>
   <Select
+    autoWidth
     value={$store.theme}
     options={themeOptions}
     placeholder={null}
@@ -34,6 +35,5 @@
 <style>
   div {
     width: 100px;
-    padding-right: 8px;
   }
 </style>
diff --git a/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte b/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
index f1ac16ee02..6f7cf567de 100644
--- a/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
+++ b/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
@@ -7,16 +7,39 @@
     Layout,
     ColorPicker,
     Label,
+    Select,
   } from "@budibase/bbui"
   import { store } from "builderStore"
+  import AppThemeSelect from "./AppThemeSelect.svelte"
 
   let modal
 
   const defaultTheme = {
     primaryColor: "var(--spectrum-global-color-blue-600)",
     primaryColorHover: "var(--spectrum-global-color-blue-500)",
+    buttonBorderRadius: "16px",
+    navBackground: "var(--spectrum-global-color-gray-100)",
   }
 
+  const buttonBorderRadiusOptions = [
+    {
+      label: "None",
+      value: "0",
+    },
+    {
+      label: "Small",
+      value: "4px",
+    },
+    {
+      label: "Medium",
+      value: "8px",
+    },
+    {
+      label: "Large",
+      value: "16px",
+    },
+  ]
+
   const updateProperty = property => {
     return e => {
       store.actions.customTheme.save({
@@ -28,7 +51,7 @@
 </script>
 
 <div class="container">
-  <ActionButton icon="Brush" on:click={modal.show}>Edit</ActionButton>
+  <ActionButton icon="Brush" on:click={modal.show}>Theme</ActionButton>
 </div>
 <Modal bind:this={modal}>
   <ModalContent
@@ -37,9 +60,23 @@
     showCloseIcon={false}
     title="Theme settings"
   >
-    <Layout noPadding gap="XS">
+    <Layout noPadding gap="S">
       <div class="setting">
-        <Label size="L">Primary Color</Label>
+        <Label size="L">Theme</Label>
+        <AppThemeSelect />
+      </div>
+      <div class="setting">
+        <Label size="L">Button roundness</Label>
+        <Select
+          autoWidth
+          value={$store.customTheme?.buttonBorderRadius ||
+            defaultTheme.buttonBorderRadius}
+          on:change={updateProperty("buttonBorderRadius")}
+          options={buttonBorderRadiusOptions}
+        />
+      </div>
+      <div class="setting">
+        <Label size="L">Primary color</Label>
         <ColorPicker
           spectrumTheme={$store.theme}
           value={$store.customTheme?.primaryColor || defaultTheme.primaryColor}
@@ -47,7 +84,7 @@
         />
       </div>
       <div class="setting">
-        <Label size="L">Primary Color (Hover)</Label>
+        <Label size="L">Primary color (hover)</Label>
         <ColorPicker
           spectrumTheme={$store.theme}
           value={$store.customTheme?.primaryColorHover ||
@@ -55,6 +92,15 @@
           on:change={updateProperty("primaryColorHover")}
         />
       </div>
+      <div class="setting">
+        <Label size="L">Navigation bar background</Label>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.customTheme?.navBackground ||
+            defaultTheme.navBackground}
+          on:change={updateProperty("navBackground")}
+        />
+      </div>
     </Layout>
   </ModalContent>
 </Modal>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
index b5d1a8df11..fb9cdf885c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
@@ -151,11 +151,10 @@
     {#if $currentAsset}
       <div class="preview-header">
         <ComponentSelectionList />
-        {#if $store.clientFeatures.spectrumThemes}
-          <AppThemeSelect />
-        {/if}
         {#if $store.clientFeatures.customThemes}
           <ThemeEditor />
+        {:else if $store.clientFeatures.spectrumThemes}
+          <AppThemeSelect />
         {/if}
       </div>
       <div class="preview-content">
diff --git a/packages/client/src/components/CustomThemeWrapper.svelte b/packages/client/src/components/CustomThemeWrapper.svelte
index 423078b64d..75574264cd 100644
--- a/packages/client/src/components/CustomThemeWrapper.svelte
+++ b/packages/client/src/components/CustomThemeWrapper.svelte
@@ -16,6 +16,7 @@
     /*  Buttons */
     --spectrum-semantic-cta-color-background-default: var(--primaryColor);
     --spectrum-semantic-cta-color-background-hover: var(--primaryColorHover);
+    --spectrum-alias-item-rounded-border-radius-m: var(--buttonBorderRadius);
 
     /* Loading spinners */
     --spectrum-progresscircle-medium-track-fill-color: var(--primaryColor);
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 64a5599124..afa1fd5221 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -142,7 +142,7 @@
     flex-direction: row;
     justify-content: center;
     align-items: stretch;
-    background: var(--spectrum-alias-background-color-primary);
+    background: var(--navBackground);
     z-index: 2;
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
diff --git a/packages/client/src/stores/theme.js b/packages/client/src/stores/theme.js
index d8e01dfc23..7df49021aa 100644
--- a/packages/client/src/stores/theme.js
+++ b/packages/client/src/stores/theme.js
@@ -9,6 +9,8 @@ const defaultTheme = "spectrum--light"
 const defaultCustomTheme = {
   primaryColor: "var(--spectrum-glo" + "bal-color-blue-600)",
   primaryColorHover: "var(--spectrum-glo" + "bal-color-blue-500)",
+  buttonBorderRadius: "16px",
+  navBackground: "var(--spectrum-glo" + "bal-color-gray-100)",
 }
 
 const createThemeStore = () => {
@@ -17,14 +19,30 @@ const createThemeStore = () => {
     ([$builderStore, $appStore]) => {
       const theme =
         $builderStore.theme || $appStore.application?.theme || defaultTheme
-      const customTheme = {
-        ...defaultCustomTheme,
-        ...($builderStore.customTheme || $appStore.application?.customTheme),
+
+      // Delete and nullish keys from the custom theme
+      let customTheme =
+        $builderStore.customTheme || $appStore.application?.customTheme
+      if (customTheme) {
+        Object.entries(customTheme).forEach(([key, value]) => {
+          if (value == null || value === "") {
+            delete customTheme[key]
+          }
+        })
       }
+
+      // Merge custom theme with defaults
+      customTheme = {
+        ...defaultCustomTheme,
+        ...customTheme,
+      }
+
+      // Build CSS string setting all custom variables
       let customThemeCss = ""
       Object.entries(customTheme).forEach(([key, value]) => {
         customThemeCss += `--${key}:${value};`
       })
+
       return {
         theme,
         customTheme,