src/visualProgrammingUI/VisProgUI.css

@@ -0,0 +1,7 @@
+.default-node {
+    padding: 10px 20px;
+    background-color: white;
+    outline-style: solid;
+    border-radius: 5pt;
+    outline-width: 1pt;
+}

src/visualProgrammingUI/VisProgUI.tsx

@@ -17,7 +17,7 @@ import {
     type Connection,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import StartNode from './components/StartNode.tsx';
+import StartNode from "./components/NodeDefinitions.tsx";
 
 const nodeTypes = {
     startNode: StartNode,
@@ -28,7 +28,7 @@ const initialNodes = [
         id: 'start',
         type: 'startNode',
         position: {x: 0, y: 0},
-        data: {label: 'Start'},
+        data: {label: 'start'}
     },
     {
         id: 'genericPhase',

src/visualProgrammingUI/components/NodeDefinitions.tsx

@@ -1,12 +1,19 @@
 import { Handle, Position } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import '../VisProgUI.css';
 
-// @ts-ignore
+// Datatypes for NodeTypes
-export const StartNode = ({ data }) => {
+
+type startNodeData = { label: string; };
+
+// Definitions of Nodes
+
+
+export const StartNode= ({ data } : {data : startNodeData}) => {
     return (
         <>
             <div>
-                <div style={{ padding: '10px 20px', backgroundColor: 'white', outlineStyle: 'solid', borderRadius: '5pt', outlineWidth: '1pt'}}> data test {data.label} </div>
+                <div className="default-node"> data test {data.label} </div>
                 <Handle type="source" position={Position.Right} id="start" />
             </div>
         </>