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

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>

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>