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

ref: N25B-114

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

@@ -141,27 +141,11 @@ export function DndToolbar() {
   );
 
   return (
-    <div style={{
-      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={`flex-col gap-lg padding-md ${styles.innerDndPanel}`}>
       <div className="description">
         You can drag these nodes to the pane to create new nodes.
       </div>
-      <div className="DraggableNodeContainer" style={{
-        backgroundColor: 'canvas',
-        display: 'flex',
-        flexDirection: 'row',
-        gap: '1rem',
-        justifyContent: 'center'
-      }}>
+      <div className={`flex-row gap-lg ${styles.dndNodeContainer}`}>
         <DraggableNode className={styles.draggableNodePhase} nodeType="phase" onDrop={handleNodeDrop}>
           phase Node
         </DraggableNode>