From be3cb833dd9e89bf2884e1bcb3c7f138962453fa Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Tue, 3 Sep 2024 11:45:51 -0300
Subject: [PATCH] fix: selected node and edge color and width (#3667)

* Fix border node color to use ring in order to not shrink component and to use selected edge color

* Updated selected edge width to match selected node width

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
---
 src/frontend/src/App.css                                      | 3 +++
 .../CustomNodes/GenericNode/components/NodeStatus/index.tsx   | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
index e43432537..1314e6fb1 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -151,10 +151,13 @@ body {
 /* selected */
 .react-flow__edge.selected .react-flow__edge-path {
   stroke: var(--selected) !important;
+  stroke-width: 1.5px !important;
 }
 
 .react-flow__edge .react-flow__edge-path {
   stroke: var(--connection) !important;
+  transition: all;
+  transition-duration: 150ms;
 }
 
 .ag-react-container {
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
index 7e7655b74..111516fc0 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
@@ -65,9 +65,9 @@ export default function NodeStatus({
 
   const getBaseBorderClass = (selected) => {
     let className = selected
-      ? "border border-2 border-node-selected hover:shadow-node"
+      ? "border ring ring-[0.5px] ring-selected border-selected hover:shadow-node"
       : "border hover:shadow-node";
-    let frozenClass = selected ? "border-ring-frozen" : "border-frozen";
+    let frozenClass = selected ? "outline-ring-frozen" : "outline-frozen";
     return frozen ? frozenClass : className;
   };