From 8bcc1c5c5af738650fe77366d140a986e628afb0 Mon Sep 17 00:00:00 2001
From: Marat Gubaidullin <marat@talismancloud.io>
Date: Thu, 19 Sep 2024 15:10:10 -0400
Subject: [PATCH] VS Code Dark Mode Fix

---
 .../src/designer/property/DslProperties.css   |  5 ++++
 .../property/ComponentPropertyField.tsx       |  4 +--
 .../property/property/DslPropertyField.tsx    |  6 ++--
 .../property/KameletPropertyField.tsx         |  4 +--
 .../src/designer/property/DslProperties.css   |  5 ++++
 .../property/ComponentPropertyField.tsx       |  4 +--
 .../property/property/DslPropertyField.tsx    |  6 ++--
 .../property/KameletPropertyField.tsx         |  4 +--
 .../src/designer/property/DslProperties.css   |  5 ++++
 .../property/ComponentPropertyField.tsx       |  4 +--
 .../property/property/DslPropertyField.tsx    |  6 ++--
 .../property/KameletPropertyField.tsx         |  4 +--
 karavan-vscode/webview/index.css              | 29 ++++++++++++++-----
 13 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/karavan-app/src/main/webui/src/designer/property/DslProperties.css b/karavan-app/src/main/webui/src/designer/property/DslProperties.css
index 371402898d4..97b97a38c02 100644
--- a/karavan-app/src/main/webui/src/designer/property/DslProperties.css
+++ b/karavan-app/src/main/webui/src/designer/property/DslProperties.css
@@ -263,3 +263,8 @@
 .karavan .properties .component-headers .pf-v5-c-clipboard-copy.pf-m-inline {
     background-color: transparent;
 }
+
+.karavan .properties .value-changed {
+    background-color: yellow;
+}
+
diff --git a/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx b/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
index 262e2eb562f..eed5d12a699 100644
--- a/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
+++ b/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
@@ -417,10 +417,10 @@ export function ComponentPropertyField(props: Props) {
 
 
     function getLabel(property: ComponentProperty, value: any) {
-        const bgColor = PropertyUtil.hasComponentPropertyValueChanged(property, value) ? 'yellow' : 'transparent';
+        const labelClassName = PropertyUtil.hasComponentPropertyValueChanged(property, value) ? 'value-changed' : 'transparent';
         return (
             <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}>
-                <Text style={{backgroundColor: bgColor}}>{property.displayName}</Text>
+                <Text className={labelClassName}>{property.displayName}</Text>
             </div>
         )
     }
diff --git a/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx b/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
index 0652e8bbe92..a7d9e2d8370 100644
--- a/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
@@ -209,7 +209,7 @@ export function DslPropertyField(props: Props) {
     }
 
     function getLabel(property: PropertyMeta, value: any, isKamelet: boolean) {
-        const bgColor = PropertyUtil.hasDslPropertyValueChanged(property, value) ? 'yellow' : 'transparent';
+        const labelClassName = PropertyUtil.hasDslPropertyValueChanged(property, value) ? 'value-changed' : '';
         if (!isMultiValueField(property) && property.isObject && !property.isArray && !["ExpressionDefinition"].includes(property.type)) {
             const tooltip = value ? "Delete " + property.name : "Add " + property.name;
             const className = value ? "change-button delete-button" : "change-button add-button";
@@ -219,7 +219,7 @@ export function DslPropertyField(props: Props) {
             const icon = value ? (<DeleteIcon/>) : (<AddIcon/>);
             return (
                 <div style={{display: "flex"}}>
-                    <Text style={{backgroundColor: bgColor}}>{title}</Text>
+                    <Text className={labelClassName}>{title}</Text>
                     <Tooltip position={"top"} content={<div>{tooltip}</div>}>
                         <button className={className} onClick={e => props.onPropertyChange?.(property.name, x)}
                                 aria-label="Add element">
@@ -234,7 +234,7 @@ export function DslPropertyField(props: Props) {
         } else if (!["ExpressionDefinition"].includes(property.type)) {
             return (
                 <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}>
-                    <Text style={{backgroundColor: bgColor}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
+                    <Text style={{backgroundColor: labelClassName}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
                 </div>
             )
         }
diff --git a/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx b/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx
index f9f1bf87f29..0e1e2bf0355 100644
--- a/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx
+++ b/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx
@@ -241,10 +241,10 @@ export function KameletPropertyField(props: Props) {
     }
 
     function getLabel(property: Property, value: any) {
-        const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent';
+        const labelClassName = hasValueChanged(property, value) ? 'value-changed' : 'transparent';
         return (
             <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}>
-                <Text style={{backgroundColor: bgColor}}>{property.title}</Text>
+                <Text className={labelClassName}>{property.title}</Text>
             </div>
         )
     }
diff --git a/karavan-designer/src/designer/property/DslProperties.css b/karavan-designer/src/designer/property/DslProperties.css
index 371402898d4..97b97a38c02 100644
--- a/karavan-designer/src/designer/property/DslProperties.css
+++ b/karavan-designer/src/designer/property/DslProperties.css
@@ -263,3 +263,8 @@
 .karavan .properties .component-headers .pf-v5-c-clipboard-copy.pf-m-inline {
     background-color: transparent;
 }
+
+.karavan .properties .value-changed {
+    background-color: yellow;
+}
+
diff --git a/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
index 262e2eb562f..eed5d12a699 100644
--- a/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
@@ -417,10 +417,10 @@ export function ComponentPropertyField(props: Props) {
 
 
     function getLabel(property: ComponentProperty, value: any) {
-        const bgColor = PropertyUtil.hasComponentPropertyValueChanged(property, value) ? 'yellow' : 'transparent';
+        const labelClassName = PropertyUtil.hasComponentPropertyValueChanged(property, value) ? 'value-changed' : 'transparent';
         return (
             <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}>
-                <Text style={{backgroundColor: bgColor}}>{property.displayName}</Text>
+                <Text className={labelClassName}>{property.displayName}</Text>
             </div>
         )
     }
diff --git a/karavan-designer/src/designer/property/property/DslPropertyField.tsx b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
index 0652e8bbe92..a7d9e2d8370 100644
--- a/karavan-designer/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
@@ -209,7 +209,7 @@ export function DslPropertyField(props: Props) {
     }
 
     function getLabel(property: PropertyMeta, value: any, isKamelet: boolean) {
-        const bgColor = PropertyUtil.hasDslPropertyValueChanged(property, value) ? 'yellow' : 'transparent';
+        const labelClassName = PropertyUtil.hasDslPropertyValueChanged(property, value) ? 'value-changed' : '';
         if (!isMultiValueField(property) && property.isObject && !property.isArray && !["ExpressionDefinition"].includes(property.type)) {
             const tooltip = value ? "Delete " + property.name : "Add " + property.name;
             const className = value ? "change-button delete-button" : "change-button add-button";
@@ -219,7 +219,7 @@ export function DslPropertyField(props: Props) {
             const icon = value ? (<DeleteIcon/>) : (<AddIcon/>);
             return (
                 <div style={{display: "flex"}}>
-                    <Text style={{backgroundColor: bgColor}}>{title}</Text>
+                    <Text className={labelClassName}>{title}</Text>
                     <Tooltip position={"top"} content={<div>{tooltip}</div>}>
                         <button className={className} onClick={e => props.onPropertyChange?.(property.name, x)}
                                 aria-label="Add element">
@@ -234,7 +234,7 @@ export function DslPropertyField(props: Props) {
         } else if (!["ExpressionDefinition"].includes(property.type)) {
             return (
                 <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}>
-                    <Text style={{backgroundColor: bgColor}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
+                    <Text style={{backgroundColor: labelClassName}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
                 </div>
             )
         }
diff --git a/karavan-designer/src/designer/property/property/KameletPropertyField.tsx b/karavan-designer/src/designer/property/property/KameletPropertyField.tsx
index f9f1bf87f29..0e1e2bf0355 100644
--- a/karavan-designer/src/designer/property/property/KameletPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/KameletPropertyField.tsx
@@ -241,10 +241,10 @@ export function KameletPropertyField(props: Props) {
     }
 
     function getLabel(property: Property, value: any) {
-        const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent';
+        const labelClassName = hasValueChanged(property, value) ? 'value-changed' : 'transparent';
         return (
             <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}>
-                <Text style={{backgroundColor: bgColor}}>{property.title}</Text>
+                <Text className={labelClassName}>{property.title}</Text>
             </div>
         )
     }
diff --git a/karavan-space/src/designer/property/DslProperties.css b/karavan-space/src/designer/property/DslProperties.css
index 371402898d4..97b97a38c02 100644
--- a/karavan-space/src/designer/property/DslProperties.css
+++ b/karavan-space/src/designer/property/DslProperties.css
@@ -263,3 +263,8 @@
 .karavan .properties .component-headers .pf-v5-c-clipboard-copy.pf-m-inline {
     background-color: transparent;
 }
+
+.karavan .properties .value-changed {
+    background-color: yellow;
+}
+
diff --git a/karavan-space/src/designer/property/property/ComponentPropertyField.tsx b/karavan-space/src/designer/property/property/ComponentPropertyField.tsx
index 262e2eb562f..eed5d12a699 100644
--- a/karavan-space/src/designer/property/property/ComponentPropertyField.tsx
+++ b/karavan-space/src/designer/property/property/ComponentPropertyField.tsx
@@ -417,10 +417,10 @@ export function ComponentPropertyField(props: Props) {
 
 
     function getLabel(property: ComponentProperty, value: any) {
-        const bgColor = PropertyUtil.hasComponentPropertyValueChanged(property, value) ? 'yellow' : 'transparent';
+        const labelClassName = PropertyUtil.hasComponentPropertyValueChanged(property, value) ? 'value-changed' : 'transparent';
         return (
             <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}>
-                <Text style={{backgroundColor: bgColor}}>{property.displayName}</Text>
+                <Text className={labelClassName}>{property.displayName}</Text>
             </div>
         )
     }
diff --git a/karavan-space/src/designer/property/property/DslPropertyField.tsx b/karavan-space/src/designer/property/property/DslPropertyField.tsx
index 0652e8bbe92..a7d9e2d8370 100644
--- a/karavan-space/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-space/src/designer/property/property/DslPropertyField.tsx
@@ -209,7 +209,7 @@ export function DslPropertyField(props: Props) {
     }
 
     function getLabel(property: PropertyMeta, value: any, isKamelet: boolean) {
-        const bgColor = PropertyUtil.hasDslPropertyValueChanged(property, value) ? 'yellow' : 'transparent';
+        const labelClassName = PropertyUtil.hasDslPropertyValueChanged(property, value) ? 'value-changed' : '';
         if (!isMultiValueField(property) && property.isObject && !property.isArray && !["ExpressionDefinition"].includes(property.type)) {
             const tooltip = value ? "Delete " + property.name : "Add " + property.name;
             const className = value ? "change-button delete-button" : "change-button add-button";
@@ -219,7 +219,7 @@ export function DslPropertyField(props: Props) {
             const icon = value ? (<DeleteIcon/>) : (<AddIcon/>);
             return (
                 <div style={{display: "flex"}}>
-                    <Text style={{backgroundColor: bgColor}}>{title}</Text>
+                    <Text className={labelClassName}>{title}</Text>
                     <Tooltip position={"top"} content={<div>{tooltip}</div>}>
                         <button className={className} onClick={e => props.onPropertyChange?.(property.name, x)}
                                 aria-label="Add element">
@@ -234,7 +234,7 @@ export function DslPropertyField(props: Props) {
         } else if (!["ExpressionDefinition"].includes(property.type)) {
             return (
                 <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}>
-                    <Text style={{backgroundColor: bgColor}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
+                    <Text style={{backgroundColor: labelClassName}}>{CamelUtil.capitalizeName(property.displayName)}</Text>
                 </div>
             )
         }
diff --git a/karavan-space/src/designer/property/property/KameletPropertyField.tsx b/karavan-space/src/designer/property/property/KameletPropertyField.tsx
index f9f1bf87f29..0e1e2bf0355 100644
--- a/karavan-space/src/designer/property/property/KameletPropertyField.tsx
+++ b/karavan-space/src/designer/property/property/KameletPropertyField.tsx
@@ -241,10 +241,10 @@ export function KameletPropertyField(props: Props) {
     }
 
     function getLabel(property: Property, value: any) {
-        const bgColor = hasValueChanged(property, value) ? 'yellow' : 'transparent';
+        const labelClassName = hasValueChanged(property, value) ? 'value-changed' : 'transparent';
         return (
             <div style={{display: "flex", flexDirection: 'row', alignItems: 'center', gap: '3px'}}>
-                <Text style={{backgroundColor: bgColor}}>{property.title}</Text>
+                <Text className={labelClassName}>{property.title}</Text>
             </div>
         )
     }
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index 693a182440f..88d65d1a3ac 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -217,6 +217,10 @@ body, :root, #root, .karavan {
   /* margin-bottom: 0; */
 }
 
+.vscode-dark .karavan .properties .value-changed {
+  color: black;
+}
+
 .vscode-dark .karavan .pf-v5-c-drawer__splitter {
   background: var(--vscode-tab-inactiveBackground);
 }
@@ -334,6 +338,14 @@ body, :root, #root, .karavan {
 }
 
 /* Modal */
+.vscode-dark .dsl-modal .pf-v5-c-page__main-section.pf-m-dark-100 {
+  --pf-v5-c-page__main-section--BackgroundColor: transparent;
+} 
+
+.vscode-dark .dsl-modal .pf-v5-c-toggle-group .pf-v5-c-toggle-group__button.pf-m-selected {
+  /* --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--primary-color--200); */
+}
+
 .vscode-dark .dsl-modal .dsl-card .icon {
   height: 24px;
   background: var(--pf-v5-global--BorderColor--200);
@@ -342,6 +354,15 @@ body, :root, #root, .karavan {
   padding: 4px;
 }
 
+.vscode-dark .dsl-modal .dsl-card:hover {
+  background-color: var(--pf-v5-global--palette--black-500);
+}
+
+.vscode-dark .dsl-modal .dsl-card:hover .labels {
+  background-color: var(--pf-v5-global--palette--black-700);
+  --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
+}
+
 .vscode-dark .pf-v5-c-modal-box {
   --pf-v5-c-modal-box--BackgroundColor: var(--vscode-input-background);
 }
@@ -467,14 +488,6 @@ color: var(--vscode-editor-foreground);
     background-color: transparent;
 }
 
-.vscode-dark .dsl-modal .pf-v5-c-page__main-section.pf-m-dark-100 {
-  --pf-v5-c-page__main-section--BackgroundColor: transparent;
-} 
-
-.vscode-dark .dsl-modal .pf-v5-c-toggle-group .pf-v5-c-toggle-group__button.pf-m-selected {
-  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--primary-color--200);
-}
-
 #root .karavan .bean-designer {
   padding-bottom: 0;
 }