Add button to reset theme to default and fix determination of theme

packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte

@@ -24,7 +24,6 @@
 
 <div>
   <Select
-    autoWidth
     value={$store.theme}
     options={themeOptions}
     placeholder={null}

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
+        <div class="select-wrapper">
-          autoWidth
+          <Select
-          value={$store.customTheme?.buttonBorderRadius ||
+            placeholder={null}
-            defaultTheme.buttonBorderRadius}
+            value={$store.customTheme?.buttonBorderRadius ||
-          on:change={updateProperty("buttonBorderRadius")}
+              defaultTheme.buttonBorderRadius}
-          options={buttonBorderRadiusOptions}
+            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 {
+  .select-wrapper {
-    padding-bottom: 0;
+    width: 100px;
-    border-bottom: none;
   }
 </style>

packages/client/src/stores/theme.js

@@ -18,12 +18,17 @@ const createThemeStore = () => {
   const store = derived(
     [builderStore, appStore],
     ([$builderStore, $appStore]) => {
-      const theme =
+      let theme = $appStore.application?.theme
-        $builderStore.theme || $appStore.application?.theme || defaultTheme
+      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 === "") {