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>