fix: CPE Icons on Changes Panel not easily visible in Light Theme (#2…

…7762) (#1608) Co-authored-by: Maruf Rasully <[email protected]>
SAP · Jan 23, 2024 · 6985c87 · 6985c87
1 parent 1051911
commit 6985c87
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git 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
@@ -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 && (