Merge pull request #11699 from vikram-raj/bz-2096392

Bug 2096392: [Dark Theme]: Add white background to node icons in Topology in dark mode

Author: openshift-ci[bot]

Diff for: frontend/packages/knative-plugin/src/topology/components/nodes/EventSink.tsx

@@ -117,6 +117,12 @@ const EventSink: React.FC<EventSinkProps> = ({
       {donutStatus && showDetails && !isKafkaSink && (
         <PodSet size={size * 0.75} x={width / 2} y={height / 2} data={donutStatus} />
       )}
+      <circle
+        cx={width * 0.5}
+        cy={height * 0.5}
+        r={width * 0.25}
+        fill="var(--pf-global--palette--white)"
+      />
       {typeof getEventSourceIcon(data.kind, resources.obj) === 'string' ? (
         <image
           x={width * 0.33}

Diff for: frontend/packages/knative-plugin/src/topology/components/nodes/EventSource.scss

@@ -23,6 +23,7 @@
   &__svg-icon svg {
     width: 100%;
     height: 100%;
+    fill: var(--pf-topology__node__label__icon--Color);
   }
 }
 

Diff for: frontend/packages/knative-plugin/src/topology/components/nodes/EventSource.tsx

@@ -48,6 +48,12 @@ const EventSource: React.FC<EventSourceProps> = ({
       labelIcon={<EventSourceIcon />}
       {...rest}
     >
+      <circle
+        cx={width * 0.5}
+        cy={height * 0.5}
+        r={width * 0.25 + 6}
+        fill="var(--pf-global--palette--white)"
+      />
       {typeof getEventSourceIcon(data.kind, resources.obj) === 'string' ? (
         <image
           x={width * 0.25}

Diff for: frontend/packages/knative-plugin/src/topology/components/nodes/EventingPubSubNode.scss

@@ -47,3 +47,9 @@
     }
   }
 }
+
+:root:where(.pf-theme-dark) .odc-eventing-pubsub {
+  &--image {
+    filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
+  }
+}

Diff for: frontend/packages/knative-plugin/src/topology/components/nodes/EventingPubSubNode.tsx

@@ -79,6 +79,7 @@ const EventingPubSubNode: React.FC<EventingPubSubNodeProps> = ({
           width={width * 0.8}
           height={width * 0.5}
           xlinkHref={eventPubSubImg}
+          className="odc-eventing-pubsub--image"
         />
         {children}
       </BaseNode>

Diff for: frontend/packages/topology/src/components/graph-view/components/nodes/BaseNode.tsx

@@ -133,13 +133,21 @@ const BaseNode: React.FC<BaseNodeProps> = ({
         >
           <g data-test-id="base-node-handler">
             {icon && showDetails && (
-              <image
-                x={cx - iconRadius}
-                y={cy - iconRadius}
-                width={iconRadius * 2}
-                height={iconRadius * 2}
-                xlinkHref={icon}
-              />
+              <>
+                <circle
+                  fill="var(--pf-global--palette--white)"
+                  cx={cx}
+                  cy={cy}
+                  r={innerRadius + 6}
+                />
+                <image
+                  x={cx - iconRadius}
+                  y={cy - iconRadius}
+                  width={iconRadius * 2}
+                  height={iconRadius * 2}
+                  xlinkHref={icon}
+                />
+              </>
             )}
             {showDetails && children}
           </g>