From 6985c874ec7568a273973721f587c9dec00a411c Mon Sep 17 00:00:00 2001
From: Danyal Aslam <38275501+DanyalAslam@users.noreply.github.com>
Date: Tue, 23 Jan 2024 19:24:53 +0500
Subject: [PATCH] fix: CPE Icons on Changes Panel not easily visible in Light
 Theme (#27762) (#1608)

Co-authored-by: Maruf Rasully <100434800+marufrasully@users.noreply.github.com>
---
 .../control-property-editor/src/Workarounds.scss | 16 ++++++++++++++++
 .../src/panels/changes/PropertyChange.tsx        | 15 +--------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/control-property-editor/src/Workarounds.scss b/packages/control-property-editor/src/Workarounds.scss
index 67408477c9..f09fcd1593 100644
--- a/packages/control-property-editor/src/Workarounds.scss
+++ b/packages/control-property-editor/src/Workarounds.scss
@@ -48,6 +48,22 @@
     }
 }
 
+// CPE-UIIcon-Changes
+.ui-cpe-icon-light-theme {
+    margin-right: 5px;
+    background-color: var(--vscode-terminal-ansiBlue);
+    border-radius: 50%;
+    height: 16px;
+    width: 16px;
+    vertical-align: bottom;
+    svg {
+        path,
+        rect {
+            fill: var(--vscode-button-foreground);
+        }
+    }
+}
+
 // Tree
 .app-panel-selected-bg {
     .ms-GroupHeader-expand:hover {
diff --git a/packages/control-property-editor/src/panels/changes/PropertyChange.tsx b/packages/control-property-editor/src/panels/changes/PropertyChange.tsx
index b0dc600d9d..0e158e430a 100644
--- a/packages/control-property-editor/src/panels/changes/PropertyChange.tsx
+++ b/packages/control-property-editor/src/panels/changes/PropertyChange.tsx
@@ -59,20 +59,7 @@ export function PropertyChange(propertyChangeProps: Readonly<ChangeProps>): Reac
                         <Stack.Item>
                             <Text className={styles.text}>{convertCamelCaseToPascalCase(propertyName)}</Text>
                             <UIIcon iconName={IconName.arrow} className={styles.text} />
-                            {valueIcon && (
-                                <UIIcon
-                                    className={styles.valueIcon}
-                                    iconName={valueIcon}
-                                    style={{
-                                        marginRight: 5,
-                                        background: 'var(--vscode-terminal-ansiBlue)',
-                                        borderRadius: '50%',
-                                        height: 16,
-                                        width: 16,
-                                        verticalAlign: 'bottom'
-                                    }}
-                                />
-                            )}
+                            {valueIcon && <UIIcon className={'ui-cpe-icon-light-theme'} iconName={valueIcon} />}
                             <Text className={styles.text}>{value}</Text>
                         </Stack.Item>
                         {fileName && (