fix(ui): dark mode loop styling and looping touch-ups

app/w/[id]/components/workflow-loop/components/loop-input/loop-input.tsx

@@ -58,8 +58,8 @@ export function LoopInput({ id }: NodeProps) {
         <Badge
           variant="outline"
           className={cn(
-            'bg-white border-[rgb(203,213,225)] text-gray-700 font-medium px-2 py-0.5 text-sm',
-            'hover:bg-gray-50 transition-colors duration-150 cursor-pointer',
+            'bg-background border-border text-foreground font-medium px-2 py-0.5 text-sm',
+            'hover:bg-accent/50 transition-colors duration-150 cursor-pointer',
             'flex items-center gap-1'
           )}
         >

app/w/[id]/components/workflow-loop/components/loop-label/loop-label.tsx

@@ -5,8 +5,8 @@ export function LoopLabel({ data }: NodeProps) {
   return (
     <Badge
       variant="outline"
-      className="bg-white border-[rgb(203,213,225)] text-gray-700 font-medium px-2 py-0.5 text-sm 
-      hover:bg-gray-50 transition-colors duration-150"
+      className="bg-background border-border text-foreground font-medium px-2 py-0.5 text-sm 
+      hover:bg-accent/50 transition-colors duration-150"
     >
       {data.label}
     </Badge>

app/w/[id]/components/workflow-loop/workflow-loop.tsx

@@ -91,8 +91,8 @@ export function createLoopNode({ loopId, loop, blocks }: WorkflowLoopProps) {
     id: `loop-${loopId}`,
     type: 'group',
     position: { x: loopBounds.x, y: loopBounds.y },
+    className: 'bg-[rgb(247,247,248)] dark:bg-[rgb(36,37,45)]',
     style: {
-      backgroundColor: 'rgb(247, 247, 248)',
       border: '1px solid rgb(203, 213, 225)',
       borderRadius: '12px',
       width: loopBounds.width,
@@ -101,6 +101,9 @@ export function createLoopNode({ loopId, loop, blocks }: WorkflowLoopProps) {
       zIndex: -1,
       isolation: 'isolate',
     },
+    darkModeStyle: {
+      borderColor: 'rgb(63, 63, 70)',
+    },
     data: {
       label: 'Loop',
     },