From 44dd731be8346b70bd59241de7e0905016cb477b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 6 Sep 2021 16:51:40 +0100
Subject: [PATCH] Add button to reset theme to default and fix determination of
 theme

---
 .../design/AppPreview/AppThemeSelect.svelte   |  1 -
 .../design/AppPreview/ThemeEditor.svelte      | 31 ++++++++++++-------
 packages/client/src/stores/theme.js           | 13 +++++---
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
index a745a9e5f3..ec51688219 100644
--- a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
+++ b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
@@ -24,7 +24,6 @@
 
 <div>
   <Select
-    autoWidth
     value={$store.theme}
     options={themeOptions}
     placeholder={null}
diff --git a/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte b/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
index 36bbde2905..c5c85fad46 100644
--- a/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
+++ b/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
@@ -8,6 +8,7 @@
     ColorPicker,
     Label,
     Select,
+    Button,
   } from "@budibase/bbui"
   import { store } from "builderStore"
   import AppThemeSelect from "./AppThemeSelect.svelte"
@@ -49,6 +50,10 @@
       })
     }
   }
+
+  const resetTheme = () => {
+    store.actions.customTheme.save(null)
+  }
 </script>
 
 <div class="container">
@@ -68,13 +73,15 @@
       </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 class="select-wrapper">
+          <Select
+            placeholder={null}
+            value={$store.customTheme?.buttonBorderRadius ||
+              defaultTheme.buttonBorderRadius}
+            on:change={updateProperty("buttonBorderRadius")}
+            options={buttonBorderRadiusOptions}
+          />
+        </div>
       </div>
       <div class="setting">
         <Label size="L">Primary color</Label>
@@ -111,6 +118,9 @@
         />
       </div>
     </Layout>
+    <div slot="footer">
+      <Button secondary quiet on:click={resetTheme}>Reset</Button>
+    </div>
   </ModalContent>
 </Modal>
 
@@ -123,11 +133,8 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: var(--spectrum-global-dimension-static-size-200);
-    border-bottom: var(--border-light);
   }
-  .setting:last-child {
-    padding-bottom: 0;
-    border-bottom: none;
+  .select-wrapper {
+    width: 100px;
   }
 </style>
diff --git a/packages/client/src/stores/theme.js b/packages/client/src/stores/theme.js
index 47dccfcd6b..995dafbedc 100644
--- a/packages/client/src/stores/theme.js
+++ b/packages/client/src/stores/theme.js
@@ -18,12 +18,17 @@ const createThemeStore = () => {
   const store = derived(
     [builderStore, appStore],
     ([$builderStore, $appStore]) => {
-      const theme =
-        $builderStore.theme || $appStore.application?.theme || defaultTheme
+      let theme = $appStore.application?.theme
+      let customTheme = $appStore.application?.customTheme
+      if ($builderStore.inBuilder) {
+        theme = $builderStore.theme
+        customTheme = $builderStore.customTheme
+      }
+
+      // Ensure theme is set
+      theme = theme || defaultTheme
 
       // 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 === "") {