fix: update border class for selected node status (#3556)

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/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;

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;

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: {