src/pages/VisProgPage/visualProgrammingUI/VisProgUI.module.css

@@ -38,7 +38,7 @@
     filter: drop-shadow(0 0 0.75rem black);
 }
 
-.default-node__norm {
+.default-node-norm {
     padding: 10px 15px;
     background-color: canvas;
     border-radius: 5pt;
@@ -46,7 +46,7 @@
     filter: drop-shadow(0 0 0.25rem forestgreen);
 }
 
-.default-node__phase {
+.default-node-phase {
     padding: 10px 15px;
     background-color: canvas;
     border-radius: 5pt;
@@ -54,7 +54,7 @@
     filter: drop-shadow(0 0 0.25rem dodgerblue);
 }
 
-.default-node__start {
+.default-node-start {
     padding: 10px 15px;
     background-color: canvas;
     border-radius: 5pt;
@@ -62,7 +62,7 @@
     filter: drop-shadow(0 0 0.25rem orange);
 }
 
-.default-node__end {
+.default-node-end {
     padding: 10px 15px;
     background-color: canvas;
     border-radius: 5pt;
@@ -78,7 +78,7 @@
     filter: drop-shadow(0 0 0.75rem black);
 }
 
-.draggable-node__norm {
+.draggable-node-norm {
     padding: 3px 10px;
     background-color: canvas;
     border-radius: 5pt;
@@ -86,7 +86,7 @@
     filter: drop-shadow(0 0 0.25rem forestgreen);
 }
 
-.draggable-node__phase {
+.draggable-node-phase {
     padding: 3px 10px;
     background-color: canvas;
     border-radius: 5pt;
@@ -94,7 +94,7 @@
     filter: drop-shadow(0 0 0.25rem dodgerblue);
 }
 
-.draggable-node__start {
+.draggable-node-start {
     padding: 3px 10px;
     background-color: canvas;
     border-radius: 5pt;
@@ -102,7 +102,7 @@
     filter: drop-shadow(0 0 0.25rem orange);
 }
 
-.draggable-node__end {
+.draggable-node-end {
     padding: 3px 10px;
     background-color: canvas;
     border-radius: 5pt;

src/pages/VisProgPage/visualProgrammingUI/VisProgUI.tsx

@@ -18,7 +18,7 @@ import {
 import {DndToolbar} from './components/DragDropSidebar.tsx';
 import useFlowStore from './VisProgStores.tsx';
 import type {FlowState} from './VisProgTypes.tsx';
-import './VisProgUI.css'
+import styles from './VisProgUI.module.css'
 
 // --| config starting params for flow |--
 
@@ -79,8 +79,8 @@ const VisProgUI = () => {
   } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
 
   return (
-    <div className={"outer-editor-container"}>
+    <div className={styles.outerEditorContainer}>
-      <div className={"inner-editor-container"}>
+      <div className={styles.innerEditorContainer}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -96,7 +96,7 @@ const VisProgUI = () => {
           fitView
           proOptions={{hideAttribution: true}}
         >
-          <Panel position="top-center" className={"dnd-panel"}>
+          <Panel position="top-center" className={styles.dndPanel}>
             <DndToolbar/> {/* contains the drag and drop panel for nodes */}
           </Panel>
           <Controls/>

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}
+    <div className={className} ref={draggableRef}>
-         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>