style: moved inline styles to VisProgUI.module.css and used some existing classes to replace simple css

ref: N25B-114

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

@@ -17,6 +17,10 @@
     height: 100%;
 }
 
+
+
+
+
 .dnd-panel {
     margin-inline-start: auto;
     margin-inline-end: auto;
@@ -28,6 +32,19 @@
     height:7%;
 }
 
+.inner-dnd-panel {
+    outline: 2.5pt solid black;
+    border-radius: 0 0 5pt 5pt;
+    border-color: dimgrey;
+    background-color: canvas;
+    align-items: center;
+}
+
+.dnd-node-container {
+    background-color: canvas;
+    justify-content: center;
+}
+
 /* Node Styles */
 
 .default-node {

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

@@ -141,27 +141,11 @@ export function DndToolbar() {
   );
 
   return (
-    <div style={{
+    <div className={`flex-col gap-lg padding-md ${styles.innerDndPanel}`}>
-      padding: '10px 10px',
-      outline: '2.5pt solid black',
-      borderRadius: '0pt 0pt 5pt 5pt',
-      borderColor: 'dimgrey',
-      backgroundColor: 'canvas',
-      display: 'flex',
-      alignItems: 'center',
-      flexDirection: 'column',
-      gap: '1rem'
-    }}>
       <div className="description">
         You can drag these nodes to the pane to create new nodes.
       </div>
-      <div className="DraggableNodeContainer" style={{
+      <div className={`flex-row gap-lg ${styles.dndNodeContainer}`}>
-        backgroundColor: 'canvas',
-        display: 'flex',
-        flexDirection: 'row',
-        gap: '1rem',
-        justifyContent: 'center'
-      }}>
         <DraggableNode className={styles.draggableNodePhase} nodeType="phase" onDrop={handleNodeDrop}>
           phase Node
         </DraggableNode>