style: changed VisProgUI.css to VisProgUI.module.css and updated relevant references

ref: N25B-114

src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -9,6 +9,7 @@ import {
   useRef,
   useState
 } from 'react';
+import styles from "../VisProgUI.module.css"
 
 // Is used to make sure each subsequent node gets a unique id, so the ReactFlow implementation
 // can distinguish between different nodes.
@@ -40,7 +41,7 @@ function DraggableNode({className, children, nodeType, onDrop}: DraggableNodePro
   const draggableRef = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState<XYPosition>({x: 0, y: 0});
 
-  // @ts-ignore
+  // @ts-expect-error comes from a package and doesn't appear to play nicely with strict typescript typing
   useDraggable(draggableRef, {
     position: position,
     onDrag: ({offsetX, offsetY}) => {
@@ -60,8 +61,7 @@ function DraggableNode({className, children, nodeType, onDrop}: DraggableNodePro
   });
 
   return (
-    <div className={className === "default" ? "draggable-node" : "draggable-node" + "__" + className}
-         ref={draggableRef}>
+    <div className={className} ref={draggableRef}>
       {children}
     </div>
   );
@@ -162,10 +162,10 @@ export function DndToolbar() {
         gap: '1rem',
         justifyContent: 'center'
       }}>
-        <DraggableNode className="phase" nodeType="phase" onDrop={handleNodeDrop}>
+        <DraggableNode className={styles.draggableNodePhase} nodeType="phase" onDrop={handleNodeDrop}>
           phase Node
         </DraggableNode>
-        <DraggableNode className="norm" nodeType="norm" onDrop={handleNodeDrop}>
+        <DraggableNode className={styles.draggableNodeNorm} nodeType="norm" onDrop={handleNodeDrop}>
           norm Node
         </DraggableNode>
       </div>

src/pages/VisProgPage/visualProgrammingUI/components/NodeDefinitions.tsx

@@ -1,6 +1,6 @@
 import {Handle, NodeToolbar, Position, useReactFlow} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import '../VisProgUI.css';
+import styles from '../VisProgUI.module.css';
 
 // Contains the datatypes for the data inside our NodeTypes
 // this has to be improved or adapted to suit our implementation for computing the graph
@@ -53,7 +53,7 @@ export const StartNode = ({id, data}: StartNodeProps) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={false}/>
-      <div className="default-node__start">
+      <div className={styles.defaultNodeStart}>
         <div> data test {data.label} </div>
         <Handle type="source" position={Position.Right} id="start"/>
       </div>
@@ -73,7 +73,7 @@ export const EndNode = ({id, data}: EndNodeProps) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={false}/>
-      <div className="default-node__end">
+      <div className={styles.defaultNodeEnd}>
         <div> {data.label} </div>
         <Handle type="target" position={Position.Left} id="end"/>
       </div>
@@ -93,7 +93,7 @@ export const PhaseNode = ({id, data}: PhaseNodeProps) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={true}/>
-      <div className="default-node__phase">
+      <div className={styles.defaultNodePhase}>
         <div> phase {data.number} {data.label} </div>
         <Handle type="target" position={Position.Left} id="target"/>
         <Handle type="target" position={Position.Bottom} id="norms"/>
@@ -115,7 +115,7 @@ export const NormNode = ({id, data}: NormNodeProps) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={true}/>
-      <div className="default-node__norm">
+      <div className={styles.defaultNodeNorm}>
         <div> Norm {data.label} </div>
         <Handle type="source" position={Position.Right} id="NormSource"/>
       </div>