Add button to reset styles

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}

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.