nit

frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte

@@ -616,6 +616,7 @@
 			{onCancelTestFlow}
 			{onOpenPreview}
 			{onHideJobStatus}
+			exitNoteMode={() => (noteMode = false)}
 		/>
 	</div>
 </div>

frontend/src/lib/components/flows/map/FlowStickyNode.svelte

@@ -91,8 +91,8 @@
 		</Popover>
 	{/if}
 	<Popover>
-		<button onclick={() => toggleNoteMode?.()} class={nodeClass}>
-			<StickyNote size={14} class={noteMode ? 'text-blue-600' : ''} />
+		<button onclick={() => toggleNoteMode?.()} class={twMerge(nodeClass, 'relative')}>
+			<StickyNote size={14} />
 		</button>
 		{#snippet text()}
 			{noteMode ? 'Exit note mode' : 'Add notes'}

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -133,6 +133,7 @@
 		onOpenPreview?: () => void
 		onHideJobStatus?: () => void
 		flowHasChanged?: boolean
+		exitNoteMode?: () => void
 	}
 
 	let {
@@ -184,7 +185,8 @@
 		showJobStatus = false,
 		suspendStatus = {},
 		flowHasChanged = false,
-		noteMode = false
+		noteMode = false,
+		exitNoteMode = undefined
 	}: Props = $props()
 
 	setContext<{
@@ -395,7 +397,6 @@
 		return false
 	}
 
-
 	function onNoteAdded(newNoteFromTool: any) {
 		// Add the note to our separate notes array if a note was created
 		if (newNoteFromTool) {
@@ -404,12 +405,12 @@
 				text: '',
 				position: newNoteFromTool.position,
 				size: newNoteFromTool.size || { width: 200, height: 100 },
-				color: 'oklch(96.2% 0.059 95.617)'
+				color: 'oklch(96.7% 0.067 122.328)'
 			}
 			notes = [...notes, newNote]
 			nextNoteId += 1
 		}
-		noteMode = false
+		exitNoteMode?.()
 		updateStores()
 	}
 

frontend/src/lib/components/graph/NoteTool.svelte

@@ -116,7 +116,7 @@
 	<!-- Preview note while drawing -->
 	{#if previewNote}
 		<div
-			class="absolute border-2 border-dashed border-amber-400 bg-amber-100 bg-opacity-50 rounded-md pointer-events-none"
+			class="absolute border-2 border-dashed border-lime-400 bg-lime-100 bg-opacity-50 rounded-md pointer-events-none"
 			style="
         width: {previewNote.size.width}px;
         height: {previewNote.size.height}px;

frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte

@@ -48,8 +48,8 @@
 
 <div
 	class={twMerge(
-		'relative w-full h-full rounded-md shadow-md border',
-		selected ? 'outline outline-1 outline-amber-300' : ''
+		'relative w-full h-full rounded-md border group',
+		selected ? `outline outline-1 outline-lime-300` : ''
 	)}
 	style:background-color={data.color}
 	onpointerup={() => {
@@ -65,7 +65,7 @@
 >
 	<!-- Delete button -->
 	<button
-		class="absolute top-3 right-3 w-5 h-5 bg-transparent text-secondary hover:bg-red-500 hover:text-white rounded-md flex items-center justify-center shadow-sm border transition-colors z-10"
+		class="opacity-0 group-hover:opacity-100 hover:opacity-100 absolute -top-6 right-0 w-5 h-5 bg-transparent text-secondary hover:bg-red-500 hover:border-red-500 hover:text-white border rounded-md flex items-center justify-center transition-colors z-10"
 		onclick={handleDelete}
 		title="Delete note"
 		aria-label="Delete note"
@@ -77,10 +77,11 @@
 	<div class="p-2 h-full">
 		<textarea
 			bind:this={textareaElement}
-			class="windmillapp w-full h-full !bg-transparent !border-none outline-none shadow-none focus:outline-none focus:ring-transparent resize-none text-sm font-mono overflow-hidden"
+			class="windmillapp w-full h-full !bg-transparent !border-none outline-none shadow-none focus:outline-none focus:ring-transparent resize-none text-xs font-mono overflow-hidden"
 			placeholder="Add your note here..."
 			value={data.text}
 			oninput={handleTextChange}
+			spellcheck="false"
 		></textarea>
 	</div>