improve styles on nodes and work in dark mode

src/renderer/components/Experiment/Workflows/CustomNode.tsx

-import { Typography } from '@mui/joy';
+import { Chip, Typography } from '@mui/joy';
 import { BuiltInNode, Handle } from '@xyflow/react';
 import { NodeProps, Position } from '@xyflow/system';
 import { XIcon } from 'lucide-react';
+import { jobChipColor } from 'renderer/lib/utils';
+
+function chipColorByType(jobType: string) {
+  switch (jobType) {
+    case 'EVAL':
+      return 'var(--joy-palette-success-200)';
+    case 'TRAIN':
+      return 'var(--joy-palette-warning-200)';
+    default:
+      return 'var(--joy-palette-danger-200)';
+  }
+}
 
 export default function memo({
   data,
@@ -10,7 +22,17 @@ export default function memo({
   sourcePosition = Position.Bottom,
 }: NodeProps<BuiltInNode>) {
   return (
-    <div className="custom-node">
+    <div className="custom-node" style={{ width: '100%' }}>
+      <div
+        className="type-badge"
+        style={{
+          backgroundColor: chipColorByType(data?.jobType),
+          width: '100%',
+          borderRadius: '3px',
+        }}
+      >
+        <Typography level="body-xs"> {data?.jobType}</Typography>
+      </div>
       <div
         className="custom-node-delete-button"
         style={{
@@ -29,9 +51,13 @@ export default function memo({
         position={targetPosition}
         isConnectable={isConnectable}
       />
-      <Typography level="title-sm">{data?.label}</Typography>
-      <Typography level="body-sm">{data?.jobType}</Typography>
-      <Typography level="body-sm">{data?.template}</Typography>
+      <div
+        className="custom-node-content"
+        style={{ overflow: 'hidden', padding: '5px' }}
+      >
+        <Typography level="title-md">{data?.label}</Typography>
+        <Typography level="body-sm">{data?.template}</Typography>
+      </div>
       <Handle
         type="source"
         position={sourcePosition}

src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx

@@ -74,7 +74,7 @@ const Flow = ({ selectedWorkflow, setNewNodeModalOpen = (x) => {} }) => {
       reactFlowInstance.fitView({
         includeHiddenNodes: false, // Don't include hidden nodes
         minZoom: 0.5, // Set minimum zoom level
-        maxZoom: 10, // Set maximum zoom level
+        maxZoom: 2, // Set maximum zoom level
       });
     }, 100);
 
@@ -92,7 +92,7 @@ const Flow = ({ selectedWorkflow, setNewNodeModalOpen = (x) => {} }) => {
       zoomOnDoubleClick={false}
       panOnScroll={false}
       style={{
-        backgroundColor: 'var(--joy-palette-background-level1)',
+        backgroundColor: 'var(--joy-palette-background-level2)',
       }}
     >
       <Button

src/renderer/styles.css

@@ -185,7 +185,7 @@ fieldset {
 
 
 textarea {
-  background-color: var(--joy-palette-background-level-1);
+  background-color: var(--joy-palette-background-level1);
   border: 1px solid rgb(209, 213, 219);
   color: var(--joy-palette-text-tertiary);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI";
@@ -194,7 +194,7 @@ textarea {
 }
 
 .xterm-viewport::-webkit-scrollbar {
-  background-color: var(--joy-palette-background-level-1);
+  background-color: var(--joy-palette-background-level1);
 }
 
 .xterm-viewport::-webkit-scrollbar-thumb {
@@ -224,15 +224,33 @@ code if we want */
   display: none;
 }
 
-.react-flow__node-customNode {
+.react-flow__node {
+  /* box-shadow: var(--xy-node-boxshadow-default);
+  border-radius: var(--xy-node-border-radius-default);
+  background-color: var(--xy-node-background-color-default); */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
   padding: 10px;
+  font-size: 12px;
+  flex-direction: column;
+  /* border: var(--xy-node-border-default);
+  color: var(--xy-node-color, var(--xy-node-color-default)); */
+  /* overflow: hidden; */
+  word-break: break-all;
+  background-color: var(--joy-palette-background-level1);
+  max-width: 800px;
+}
+
+.react-flow__node-customNode {
+  padding: 0px;
   border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
-  width: 150px;
   font-size: 12px;
+  min-width: 200px;
   color: var(--xy-node-color, var(--xy-node-color-default));
   text-align: center;
   border: var(--xy-node-border, var(--xy-node-border-default));
-  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
 }
 
 
@@ -266,21 +284,4 @@ code if we want */
   /* add a light shadow effect */
   box-shadow: 0 0 10px var(--joy-palette-primary-400);
   transition: box-shadow 0.2s ease-in-out;
-}
-
-.react-flow__node {
-  /* box-shadow: var(--xy-node-boxshadow-default);
-  border-radius: var(--xy-node-border-radius-default);
-  background-color: var(--xy-node-background-color-default); */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  padding: 10px;
-  font-size: 12px;
-  flex-direction: column;
-  /* border: var(--xy-node-border-default);
-  color: var(--xy-node-color, var(--xy-node-color-default)); */
-  overflow: hidden;
-  word-break: break-all;
 }
\ No newline at end of file