From 0ecf244e1c04e19312f13a6876a0d3d7c56ca70e Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 7 Oct 2026 13:26:26 +0400
Subject: [PATCH] refac

---
 .../workspace/Models/VoiceAvatarEditor.svelte        | 12 ++++--------
 .../workspace/Models/VoiceAvatarSettings.svelte      |  4 ++--
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/workspace/Models/VoiceAvatarEditor.svelte b/src/lib/components/workspace/Models/VoiceAvatarEditor.svelte
index e10ed77036..dbf0b9fd75 100644
--- a/src/lib/components/workspace/Models/VoiceAvatarEditor.svelte
+++ b/src/lib/components/workspace/Models/VoiceAvatarEditor.svelte
@@ -76,6 +76,8 @@
 	};
 	export let disabled = false;
 	const i18n = getContext<any>('i18n');
+	const inputClass =
+		'h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
 	let input: HTMLInputElement;
 	let error = '';
 	let ready = false;
@@ -281,7 +283,7 @@
 					<div class="flex items-center gap-3">
 						<input
 							aria-label={$i18n.t('Gesture name')}
-							class="setting-input min-w-0 flex-1"
+							class="{inputClass} min-w-0 flex-1"
 							placeholder="wave"
 							maxlength="48"
 							bind:value={gesture.name}
@@ -300,7 +302,7 @@
 					</div>
 					<input
 						aria-label={$i18n.t('Gesture description')}
-						class="setting-input"
+						class={inputClass}
 						placeholder={$i18n.t('When should the model use this gesture?')}
 						maxlength="500"
 						bind:value={gesture.description}
@@ -380,10 +382,4 @@
 	.preview-state.selected {
 		background: rgb(127 127 127 / 0.15);
 	}
-	.setting-input {
-		padding: 7px 8px;
-		background: rgb(127 127 127 / 0.08);
-		border-radius: 7px;
-		width: 100%;
-	}
 </style>
diff --git a/src/lib/components/workspace/Models/VoiceAvatarSettings.svelte b/src/lib/components/workspace/Models/VoiceAvatarSettings.svelte
index e722f90c95..f1f548938b 100644
--- a/src/lib/components/workspace/Models/VoiceAvatarSettings.svelte
+++ b/src/lib/components/workspace/Models/VoiceAvatarSettings.svelte
@@ -74,7 +74,7 @@
 		<div class="flex justify-end gap-2 mt-5">
 			<button
 				type="button"
-				class="text-sm px-3 py-2 rounded-lg"
+				class="px-3.5 py-1.5 text-sm font-normal rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-850"
 				on:click={() => {
 					show = false;
 				}}>{$i18n.t('Cancel')}</button
@@ -82,7 +82,7 @@
 			<button
 				type="button"
 				disabled={!valid}
-				class="text-sm px-4 py-2 rounded-lg bg-black text-white dark:bg-white dark:text-black disabled:opacity-40"
+				class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition-colors rounded-full disabled:opacity-40"
 				on:click={apply}>{$i18n.t('Apply')}</button
 			>
 		</div>