From 57d69d1c9a0568de7182b27fb1b15ec9bda85327 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 5 Jan 2021 11:48:14 +0000
Subject: [PATCH] Add button to reset styles

---
 .../userInterface/ComponentPropertiesPanel.svelte        | 4 +++-
 .../src/components/userInterface/DesignView.svelte       | 9 ++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 422dcca85c..3aa88eac85 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -32,6 +32,7 @@
 
   const onStyleChanged = store.actions.components.updateStyle
   const onCustomStyleChanged = store.actions.components.updateCustomStyle
+  const onResetStyles = store.actions.components.resetStyles
 
   $: isComponentOrScreen =
     $store.currentView === "component" ||
@@ -98,7 +99,8 @@
       {panelDefinition}
       {componentInstance}
       {onStyleChanged}
-      {onCustomStyleChanged} />
+      {onCustomStyleChanged}
+      {onResetStyles} />
   {:else if selectedCategory.value === 'settings'}
     <SettingsView
       {componentInstance}
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 2ab7e8d5f6..694928fce2 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { TextArea, DetailSummary } from "@budibase/bbui"
+  import { TextArea, DetailSummary, Button } from "@budibase/bbui"
   import PropertyGroup from "./PropertyGroup.svelte"
   import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
@@ -8,6 +8,7 @@
   export let componentDefinition = {}
   export let onStyleChanged = () => {}
   export let onCustomStyleChanged = () => {}
+  export let onResetStyles = () => {}
 
   let selectedCategory = "normal"
   let propGroup = null
@@ -46,16 +47,18 @@
             on:open={() => (currentGroup = groupName)} />
         {/each}
         <DetailSummary
-          name="Custom Styles"
+          name={`Custom Styles${componentInstance._styles.custom ? ' *' : ''}`}
           on:open={() => (currentGroup = 'custom')}
           show={currentGroup === 'custom'}
           thin>
           <div class="custom-styles">
             <TextArea
               value={componentInstance._styles.custom}
-              on:change={event => onCustomStyleChanged(event.target.value)} />
+              on:change={event => onCustomStyleChanged(event.target.value)}
+              placeholder="Enter some CSS..." />
           </div>
         </DetailSummary>
+        <Button secondary wide on:click={onResetStyles}>Reset Styles</Button>
       {:else}
         <div class="no-design">
           This component doesn't have any design properties.