From 70ebb16359f25999b77fbe83e4c6f89d7d266ca7 Mon Sep 17 00:00:00 2001
From: JGerla <jgerla61@gmail.com>
Date: Thu, 2 Oct 2025 12:43:44 +0200
Subject: [PATCH] feat: modified css styling for nodes to have different colors
 per type

updated the nodes to have a different colour per NodeType, so it is easier to see what nodes are of what type in the graph.

ref: N25B-114
---
 src/visualProgrammingUI/VisProgUI.css         | 38 +++++++++++++++++--
 .../components/DragDropSidebar.tsx            | 10 ++---
 .../components/NodeDefinitions.tsx            |  8 ++--
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/visualProgrammingUI/VisProgUI.css b/src/visualProgrammingUI/VisProgUI.css
index 35645a7..a9727c2 100644
--- a/src/visualProgrammingUI/VisProgUI.css
+++ b/src/visualProgrammingUI/VisProgUI.css
@@ -1,7 +1,39 @@
 .default-node {
-    padding: 10px 20px;
+    padding: 10px 15px;
     background-color: white;
-    outline-style: solid;
     border-radius: 5pt;
-    outline-width: 1pt;
+    outline: black solid 2pt;
+    filter: drop-shadow(0 0 0.75rem black);
+}
+
+.default-node__norm {
+    padding: 10px 15px;
+    background-color: white;
+    border-radius: 5pt;
+    outline: forestgreen solid 2pt;
+    filter: drop-shadow(0 0 0.25rem forestgreen);
+}
+
+.default-node__phase {
+    padding: 10px 15px;
+    background-color: white;
+    border-radius: 5pt;
+    outline: dodgerblue solid 2pt;
+    filter: drop-shadow(0 0 0.25rem dodgerblue);
+}
+
+.default-node__start {
+    padding: 10px 15px;
+    background-color: white;
+    border-radius: 5pt;
+    outline: orange solid 2pt;
+    filter: drop-shadow(0 0 0.25rem orange);
+}
+
+.default-node__end {
+    padding: 10px 15px;
+    background-color: white;
+    border-radius: 5pt;
+    outline: red solid 2pt;
+    filter: drop-shadow(0 0 0.25rem red);
 }
\ No newline at end of file
diff --git a/src/visualProgrammingUI/components/DragDropSidebar.tsx b/src/visualProgrammingUI/components/DragDropSidebar.tsx
index b3926d9..08ce022 100644
--- a/src/visualProgrammingUI/components/DragDropSidebar.tsx
+++ b/src/visualProgrammingUI/components/DragDropSidebar.tsx
@@ -120,20 +120,20 @@ export function Sidebar() {
     );
 
     return (
-        <aside>
+        <aside style={{padding: '10px 10px',outline: '2.5pt solid black',borderRadius: '5pt', borderColor:'dimgrey',  display:'flex', flexDirection: 'column', gap: '1rem'}}>
             <div className="description">
                 You can drag these nodes to the pane to create new nodes.
             </div>
-            <DraggableNode className="default" nodeType="start" onDrop={handleNodeDrop}>
+            <DraggableNode className="start" nodeType="start" onDrop={handleNodeDrop}>
                 start Node
             </DraggableNode>
-            <DraggableNode className="default" nodeType="end" onDrop={handleNodeDrop}>
+            <DraggableNode className="end" nodeType="end" onDrop={handleNodeDrop}>
                 end Node
             </DraggableNode>
-            <DraggableNode className="default" nodeType="phase" onDrop={handleNodeDrop}>
+            <DraggableNode className="phase" nodeType="phase" onDrop={handleNodeDrop}>
                 phase Node
             </DraggableNode>
-            <DraggableNode className="default" nodeType="norm" onDrop={handleNodeDrop}>
+            <DraggableNode className="norm" nodeType="norm" onDrop={handleNodeDrop}>
                 norm Node
             </DraggableNode>
         </aside>
diff --git a/src/visualProgrammingUI/components/NodeDefinitions.tsx b/src/visualProgrammingUI/components/NodeDefinitions.tsx
index b4547b2..b78cf3d 100644
--- a/src/visualProgrammingUI/components/NodeDefinitions.tsx
+++ b/src/visualProgrammingUI/components/NodeDefinitions.tsx
@@ -48,7 +48,7 @@ export const StartNode= ({ id, data }: StartNodeProps) => {
     return (
         <>
             <Toolbar nodeId={id} />
-            <div className="default-node">
+            <div className="default-node__start">
                 <div> data test {data.label} </div>
                 <Handle type="source" position={Position.Right} id="start" />
             </div>
@@ -65,7 +65,7 @@ export const EndNode= ({ id, data }: EndNodeProps) => {
     return (
         <>
             <Toolbar nodeId={id}/>
-            <div className="default-node">
+            <div className="default-node__end">
                 <div> {data.label} </div>
                 <Handle type="target" position={Position.Left} id="end" />
             </div>
@@ -83,7 +83,7 @@ export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
     return (
         <>
             <Toolbar nodeId={id}/>
-            <div className="default-node">
+            <div className="default-node__phase">
                 <div> phase {data.number} {data.label} </div>
                 <Handle type="target" position={Position.Left} id="target" />
                 <Handle type="target" position={Position.Bottom } id="norms" />
@@ -102,7 +102,7 @@ export const NormNode= ({ id, data }: NormNodeProps) => {
     return (
         <>
             <Toolbar nodeId={id} />
-            <div className="default-node">
+            <div className="default-node__norm">
                 <div> Norm {data.label} </div>
                 <Handle type="source" position={Position.Right} id="NormSource" />
             </div>