From 439b6da720ebf77d67a843c91320fa1a4e59ba1d Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Sat, 27 Sep 2025 22:05:46 +0000
Subject: [PATCH] nit UI

---
 .../lib/components/InputTransformForm.svelte  |  4 ++-
 .../settingsPanel/InputsSpecEditor.svelte     | 26 +++++++++++++++----
 .../toggleButton-v2/ToggleButton.svelte       |  8 +++---
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index c526781c0a..2e420741c8 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -624,13 +624,15 @@
 							{#snippet children({ item })}
 								{#if isStaticTemplate(inputCat)}
 									<ToggleButton
+										light
+										small
 										tooltip={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
 										value="static"
 										label={'${}'}
 										{item}
 									/>
 								{:else}
-									<ToggleButton small label="static" value="static" {item} />
+									<ToggleButton light small label="static" value="static" {item} />
 								{/if}
 
 								{#if codeInjectionDetected && propertyType == 'static'}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
index 2cc2e1246c..4958eb59ad 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
@@ -217,35 +217,51 @@
 						}}
 					>
 						{#snippet children({ item })}
-							<ToggleButton value="static" icon={Pen} iconOnly tooltip="Static" {item} />
+							<ToggleButton light value="static" icon={Pen} iconOnly tooltip="Static" {item} />
 							{#if userInputEnabled}
-								<ToggleButton value="user" icon={User} iconOnly tooltip="User Input" {item} />
+								<ToggleButton light value="user" icon={User} iconOnly tooltip="User Input" {item} />
 							{/if}
 							{#if fileUpload}
-								<ToggleButton value="upload" icon={Upload} iconOnly tooltip="Upload" {item} />
+								<ToggleButton light value="upload" icon={Upload} iconOnly tooltip="Upload" {item} />
 							{/if}
 							{#if fileUploadS3}
 								<ToggleButton
 									value="uploadS3"
 									icon={UploadCloud}
 									iconOnly
+									light
 									tooltip="Upload S3"
 									{item}
 								/>
 							{/if}
 							{#if componentInput?.type === 'connected'}
-								<ToggleButton value="connected" icon={Plug2} iconOnly tooltip="Connect" {item} />
+								<ToggleButton
+									light
+									value="connected"
+									icon={Plug2}
+									iconOnly
+									tooltip="Connect"
+									{item}
+								/>
 							{/if}
 							{#if componentInput?.type === 'eval'}
 								<ToggleButton
 									value="eval"
 									icon={FunctionSquare}
 									iconOnly
+									light
 									tooltip="Eval Legacy"
 									{item}
 								/>
 							{/if}
-							<ToggleButton value="evalv2" icon={FunctionSquare} iconOnly tooltip="Eval" {item} />
+							<ToggleButton
+								value="evalv2"
+								light
+								icon={FunctionSquare}
+								iconOnly
+								tooltip="Eval"
+								{item}
+							/>
 						{/snippet}
 					</ToggleButtonGroup>
 				{/if}
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
index b766ae3d03..401101d9fd 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
@@ -51,11 +51,13 @@
 		{id}
 		{disabled}
 		class={twMerge(
-			'group rounded-md transition-all font-normal flex gap-1 flex-row items-center border',
+			'group rounded-md transition-all font-normal data-[state=on]:font-medium hover:font-medium  flex gap-1 flex-row items-center border',
 			small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1 text-sm',
-			light ? 'font-medium' : '',
+			light
+				? 'hover:text-secondary data-[state=on]:text-secondary text-tertiary'
+				: 'hover:text-primary data-[state=on]:text-primary text-secondary',
 			'data-[state=on]:bg-surface data-[state=off]:border-transparent data-[state=on]:border-gray-300 dark:data-[state=on]:border-gray-500',
-			'text-hint hover:text-secondary data-[state=on]:text-secondary data-[state=on]:font-medium hover:font-medium',
+			'text-hint',
 			'bg-surface-secondary hover:bg-surface-hover',
 			disabled ? '!shadow-none' : '',
 			className