From 0c83acd8ad21403aebf39568fc312c61efba9d14 Mon Sep 17 00:00:00 2001
From: Vlad S <vladyslav.sedenko@gmail.com>
Date: Thu, 6 Apr 2023 23:02:09 +0200
Subject: [PATCH] Change color for selected node and edges (#2458)

Signed-off-by: tito12 <vladyslav.sedenko@gmail.com>
Signed-off-by: Xavier-Cliquennois <xavier.cliquennois@wearegraphite.io>
---
 web/src/components/lineage/components/edge/Edge.tsx | 4 ++--
 web/src/components/lineage/components/node/Node.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/lineage/components/edge/Edge.tsx b/web/src/components/lineage/components/edge/Edge.tsx
index cb5e3b3114..983e0e2992 100644
--- a/web/src/components/lineage/components/edge/Edge.tsx
+++ b/web/src/components/lineage/components/edge/Edge.tsx
@@ -52,7 +52,7 @@ class Edge extends React.Component<EdgeProps> {
             data={edge.points}
             x={(d, index) => (index === 0 ? d.x + 20 : d.x - 25)}
             y={d => d.y}
-            stroke={edge.isSelected ? theme.palette.common.white : theme.palette.secondary.main}
+            stroke={edge.isSelected ? theme.palette.primary.main : theme.palette.secondary.main}
             strokeWidth={1}
             opacity={1}
             shapeRendering='geometricPrecision'
@@ -66,7 +66,7 @@ class Edge extends React.Component<EdgeProps> {
             y={edge.y - ICON_SIZE / 2}
             width={ICON_SIZE}
             height={ICON_SIZE}
-            color={edge.isSelected ? theme.palette.common.white : theme.palette.secondary.main}
+            color={edge.isSelected ? theme.palette.primary.main : theme.palette.secondary.main}
           />
         ))}
       </>
diff --git a/web/src/components/lineage/components/node/Node.tsx b/web/src/components/lineage/components/node/Node.tsx
index f76c3b494e..3c4c85a401 100644
--- a/web/src/components/lineage/components/node/Node.tsx
+++ b/web/src/components/lineage/components/node/Node.tsx
@@ -62,7 +62,7 @@ class Node extends React.Component<NodeProps> {
               style={{ cursor: 'pointer' }}
               r={RADIUS}
               fill={isSelected ? theme.palette.secondary.main : theme.palette.common.white}
-              stroke={isSelected ? theme.palette.common.white : theme.palette.secondary.main}
+              stroke={isSelected ? theme.palette.primary.main : theme.palette.secondary.main}
               strokeWidth={BORDER / 2}
               cx={node.x}
               cy={node.y}
@@ -76,7 +76,7 @@ class Node extends React.Component<NodeProps> {
               height={ICON_SIZE}
               x={node.x - ICON_SIZE / 2}
               y={node.y - ICON_SIZE / 2}
-              color={isSelected ? theme.palette.common.white : theme.palette.secondary.main}
+              color={isSelected ? theme.palette.primary.main : theme.palette.secondary.main}
             />
           </g>
         ) : (
@@ -86,7 +86,7 @@ class Node extends React.Component<NodeProps> {
               x={node.x - RADIUS}
               y={node.y - RADIUS}
               fill={isSelected ? theme.palette.secondary.main : theme.palette.common.white}
-              stroke={isSelected ? theme.palette.common.white : theme.palette.secondary.main}
+              stroke={isSelected ? theme.palette.primary.main: theme.palette.secondary.main}
               strokeWidth={BORDER / 2}
               width={RADIUS * 2}
               height={RADIUS * 2}
@@ -109,7 +109,7 @@ class Node extends React.Component<NodeProps> {
               height={ICON_SIZE}
               x={node.x - ICON_SIZE / 2}
               y={node.y - ICON_SIZE / 2}
-              color={isSelected ? theme.palette.common.white : theme.palette.secondary.main}
+              color={isSelected ? theme.palette.primary.main : theme.palette.secondary.main}
             />
           </g>
         )}