From 2cd2fba3429c451a67d57d9170103f5440d9c7e7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 11:57:34 +0000
Subject: [PATCH] Only highlight style changes for the currently selected state
 (normal / hover)

---
 .../src/components/userInterface/PropertyGroup.svelte       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index e1d90f0158..69797c4a21 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -10,7 +10,7 @@
   export let onStyleChanged = () => {}
   export let open = false
 
-  const hasPropChanged = prop => {
+  const hasPropChanged = (style, prop) => {
     // TODO: replace color picker with one that works better.
     // Currently it cannot support null values, so this is a hack which
     // prevents the color fields from always being marked as changed
@@ -23,7 +23,7 @@
   }
 
   $: style = componentInstance["_styles"][styleCategory] || {}
-  $: changed = properties.some(prop => hasPropChanged(prop))
+  $: changed = properties.some(prop => hasPropChanged(style, prop))
 </script>
 
 <DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
@@ -31,7 +31,7 @@
     <div>
       {#each properties as prop}
         <PropertyControl
-          label={`${prop.label}${hasPropChanged(prop) ? ' *' : ''}`}
+          label={`${prop.label}${hasPropChanged(style, prop) ? ' *' : ''}`}
           control={prop.control}
           key={prop.key}
           value={style[prop.key]}