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> )}