From 629804123b1bd06185053cebe6ddd4dc63901a75 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 26 Aug 2024 17:29:11 -0300
Subject: [PATCH] fix: update border class for selected node status

Update the border class for the selected node status in the NodeStatus component to "border-2 border-node-selected hover:shadow-node". This change improves the visual representation of the selected node status.
---
 .../src/CustomNodes/GenericNode/components/NodeStatus/index.tsx | 2 +-
 src/frontend/src/style/index.css                                | 2 ++
 src/frontend/tailwind.config.mjs                                | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
index 45fb46eb102..7e7655b7498 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
@@ -65,7 +65,7 @@ export default function NodeStatus({
 
   const getBaseBorderClass = (selected) => {
     let className = selected
-      ? "border border-ring hover:shadow-node"
+      ? "border border-2 border-node-selected hover:shadow-node"
       : "border hover:shadow-node";
     let frozenClass = selected ? "border-ring-frozen" : "border-frozen";
     return frozen ? frozenClass : className;
diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
index e362a03456f..8d28eec3210 100644
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@@ -6,6 +6,7 @@
 
 @layer base {
   :root {
+    --node-selected: 243 75% 59%;
     --background: 0 0% 100%; /* hsl(0 0% 100%) */
     --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
     --muted: 210 40% 98%; /* hsl(210 40% 98%) */
@@ -71,6 +72,7 @@
   }
 
   .dark {
+    --node-selected: 234 89% 74%;
     --background: 224 28% 7.5%; /* hsl(224 10% 7.5%) */
     --foreground: 213 31% 80%; /* hsl(213 31% 91%) */
     --ice: #60a5fa;
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index 3d98fd624e4..c671b13ebf6 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -108,6 +108,7 @@ const config = {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
+        "node-selected": "hsl(var(--node-selected))",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         primary: {