From d3ea51fd466a8741afc4dfd4f0d0f2f77fb6467f Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 20 Jul 2026 00:23:01 -0400
Subject: [PATCH] refac

---
 src/lib/components/AddConnectionModal.svelte  | 20 +++++-----
 .../components/AddTerminalServerModal.svelte  | 22 +++++------
 src/lib/components/AddToolServerModal.svelte  | 20 +++++-----
 .../Evaluations/ArenaModelModal.svelte        | 26 ++++++-------
 .../Personalization/MemoryModal.svelte        | 39 +++++++------------
 5 files changed, 58 insertions(+), 69 deletions(-)

diff --git a/src/lib/components/AddConnectionModal.svelte b/src/lib/components/AddConnectionModal.svelte
index 36bf48fdbe..8df0436283 100644
--- a/src/lib/components/AddConnectionModal.svelte
+++ b/src/lib/components/AddConnectionModal.svelte
@@ -59,9 +59,9 @@
 	let showDeleteConfirmDialog = false;
 
 	const inputClass =
-		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 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';
+		'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
 	const selectClass =
-		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 pe-8 py-1.5 text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
+		'dark:bg-gray-900 bg-transparent pr-5 outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
 
 	const verifyOllamaHandler = async () => {
 		// remove trailing slash from url
@@ -252,8 +252,8 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
-			<h1 class="text-sm font-medium self-center">
+		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-1.5">
+			<h1 class="text-lg font-medium self-center font-primary">
 				{#if edit}
 					{$i18n.t('Edit Connection')}
 				{:else}
@@ -261,13 +261,13 @@
 				{/if}
 			</h1>
 			<button
-				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				class="self-center"
 				aria-label={$i18n.t('Close modal')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-4'} />
+				<XMark className={'size-5'} />
 			</button>
 		</div>
 
@@ -341,7 +341,7 @@
 
 							<Tooltip content={$i18n.t('Verify Connection')} className="self-end -mb-1">
 								<button
-									class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition"
+									class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
 									on:click={() => {
 										verifyHandler();
 									}}
@@ -676,11 +676,11 @@
 						</div>
 					</div>
 
-					<div class="flex justify-between items-center pt-3 text-sm font-normal">
+					<div class="flex justify-between items-center pt-3 text-sm font-medium">
 						<div>
 							{#if edit}
 								<button
-									class="px-1 py-1.5 text-sm font-normal text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
+									class="px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
 									type="button"
 									on:click={() => {
 										showDeleteConfirmDialog = true;
@@ -692,7 +692,7 @@
 						</div>
 
 						<button
-							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 rounded-full flex items-center gap-2 whitespace-nowrap {loading
+							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
 								? ' cursor-not-allowed'
 								: ''}"
 							type="submit"
diff --git a/src/lib/components/AddTerminalServerModal.svelte b/src/lib/components/AddTerminalServerModal.svelte
index 6410d64abc..9e8a003a8e 100644
--- a/src/lib/components/AddTerminalServerModal.svelte
+++ b/src/lib/components/AddTerminalServerModal.svelte
@@ -60,9 +60,9 @@
 	let policyLoadError = '';
 
 	const inputClass =
-		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 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';
+		'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
 	const selectClass =
-		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 pe-8 py-1.5 text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
+		'dark:bg-gray-900 bg-transparent pr-5 outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
 
 	const stringifyJson = (value: object | null | undefined) => {
 		return JSON.stringify(value && Object.keys(value).length ? value : {}, null, 2);
@@ -370,8 +370,8 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class="flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
-			<h1 class="text-sm font-medium self-center">
+		<div class="flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
+			<h1 class="text-lg font-medium self-center font-primary">
 				{#if edit}
 					{$i18n.t('Edit Terminal Connection')}
 				{:else}
@@ -380,13 +380,13 @@
 			</h1>
 
 			<button
-				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				class="self-center"
 				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-4'} />
+				<XMark className={'size-5'} />
 			</button>
 		</div>
 
@@ -456,7 +456,7 @@
 
 							<Tooltip content={$i18n.t('Verify Connection')} className="self-end -mb-1">
 								<button
-									class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition"
+									class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
 									on:click={() => {
 										verifyHandler();
 									}}
@@ -720,7 +720,7 @@
 								</div>
 								<button
 									type="button"
-									class="px-2 py-1 text-xs font-normal rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-gray-850 dark:hover:bg-gray-800 transition"
+									class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-gray-850 dark:hover:bg-gray-800 transition"
 									disabled={refreshing}
 									on:click={refreshHandler}
 								>
@@ -848,11 +848,11 @@
 							</div>
 						</div>
 
-						<div class="flex justify-between items-center pt-3 text-sm font-normal">
+						<div class="flex justify-between items-center pt-3 text-sm font-medium">
 							<div>
 								{#if edit}
 									<button
-										class="px-1 py-1.5 text-sm font-normal text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
+										class="px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
 										type="button"
 										on:click={() => {
 											showDeleteConfirmDialog = true;
@@ -864,7 +864,7 @@
 							</div>
 
 							<button
-								class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 disabled:opacity-50 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
+								class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 disabled:opacity-50 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
 								type="submit"
 								disabled={loadingPolicy || !!policyLoadError}
 							>
diff --git a/src/lib/components/AddToolServerModal.svelte b/src/lib/components/AddToolServerModal.svelte
index b3945b7d95..27efb8bcec 100644
--- a/src/lib/components/AddToolServerModal.svelte
+++ b/src/lib/components/AddToolServerModal.svelte
@@ -70,9 +70,9 @@
 	let showDeleteConfirmDialog = false;
 
 	const inputClass =
-		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 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';
+		'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
 	const selectClass =
-		'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 pe-8 py-1.5 text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
+		'dark:bg-gray-900 bg-transparent pr-5 outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
 
 	const registerOAuthClientHandler = async () => {
 		if (url === '') {
@@ -448,8 +448,8 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
-			<h1 class=" text-sm font-medium self-center">
+		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
+			<h1 class=" text-lg font-medium self-center font-primary">
 				{#if edit}
 					{$i18n.t('Edit Connection')}
 				{:else}
@@ -474,13 +474,13 @@
 					</button>
 				</div>
 				<button
-					class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+					class="self-center"
 					aria-label={$i18n.t('Close Configure Connection Modal')}
 					on:click={() => {
 						show = false;
 					}}
 				>
-					<XMark className={'size-4'} />
+					<XMark className={'size-5'} />
 				</button>
 			</div>
 		</div>
@@ -614,7 +614,7 @@
 										className="shrink-0 flex items-center mr-1"
 									>
 										<button
-											class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition"
+											class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
 											on:click={() => {
 												verifyHandler();
 											}}
@@ -974,11 +974,11 @@
 						</div>
 					{/if}
 
-					<div class="flex justify-between items-center pt-3 text-sm font-normal">
+					<div class="flex justify-between items-center pt-3 text-sm font-medium">
 						<div>
 							{#if edit}
 								<button
-									class="px-1 py-1.5 text-sm font-normal text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
+									class="px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
 									type="button"
 									on:click={() => {
 										showDeleteConfirmDialog = true;
@@ -990,7 +990,7 @@
 						</div>
 
 						<button
-							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 rounded-full flex items-center gap-2 whitespace-nowrap {loading
+							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
 								? ' cursor-not-allowed'
 								: ''}"
 							type="submit"
diff --git a/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte b/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
index 820a04ec92..85046afc5c 100644
--- a/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
+++ b/src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
@@ -14,7 +14,6 @@
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import { WEBUI_BASE_URL } from '$lib/constants';
-	import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
 
 	export let show = false;
 	export let edit = false;
@@ -129,10 +128,10 @@
 	}}
 />
 
-<Modal size="sm" bind:show className="bg-white dark:bg-gray-900 rounded-4xl">
+<Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
-			<div class=" text-sm font-medium self-center">
+		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
+			<div class=" text-lg font-medium self-center font-primary">
 				{#if edit}
 					{$i18n.t('Edit Arena Model')}
 				{:else}
@@ -140,12 +139,12 @@
 				{/if}
 			</div>
 			<button
-				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				class="self-center"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-4'} />
+				<XMark className={'size-5'} />
 			</button>
 		</div>
 
@@ -350,16 +349,17 @@
 						<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
 
 						<div class="flex items-center">
-							<SettingsSelect
+							<select
+								class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
+									? ''
+									: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
 								bind:value={selectedModelId}
-								className="w-full"
-								selectClassName="text-sm"
 							>
 								<option value="">{$i18n.t('Select a model')}</option>
 								{#each $models.filter((m) => m?.owned_by !== 'arena') as model}
 									<option value={model.id} class="bg-gray-50 dark:bg-gray-700">{model.name}</option>
 								{/each}
-							</SettingsSelect>
+							</select>
 
 							<div>
 								<button
@@ -374,10 +374,10 @@
 						</div>
 					</div>
 
-					<div class="flex justify-end pt-3 text-sm font-normal gap-1.5">
+					<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
 						{#if edit}
 							<button
-								class="px-3.5 py-1.5 text-sm font-normal dark:bg-black dark:hover:bg-gray-950 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
+								class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-950 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
 								type="button"
 								on:click={() => {
 									showDeleteConfirmDialog = true;
@@ -388,7 +388,7 @@
 						{/if}
 
 						<button
-							class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-950 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
+							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-950 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
 								? ' cursor-not-allowed'
 								: ''}"
 							type="submit"
diff --git a/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte b/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte
index cc9c1de601..58745e9f04 100644
--- a/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte
+++ b/src/lib/components/chat/Settings/Personalization/MemoryModal.svelte
@@ -7,7 +7,6 @@
 	import Modal from '$lib/components/common/Modal.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
-	import { settings } from '$lib/stores';
 
 	const dispatch = createEventDispatcher();
 
@@ -20,12 +19,6 @@
 	let content = '';
 	let type = 'user';
 	let path = '';
-	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';
-	const textareaClass =
-		'w-full resize-y rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 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';
-	const actionButtonClass =
-		'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
 
 	$: edit = !!memory?.id;
 	$: if (show) {
@@ -58,36 +51,31 @@
 	};
 </script>
 
-<Modal bind:show size="sm" className="bg-white dark:bg-gray-900 rounded-4xl">
+<Modal bind:show size="sm">
 	<div>
-		<div class=" flex justify-between text-gray-900 dark:text-white px-4 pt-3 pb-1">
-			<div class=" text-sm font-medium self-center">
+		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
+			<div class=" text-lg font-medium self-center">
 				{#if edit}
 					{$i18n.t('Edit Memory')}
 				{:else}
 					{$i18n.t('Add Memory')}
 				{/if}
 			</div>
-			<button
-				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-				on:click={() => (show = false)}
-			>
-				<XMark className={'size-4'} />
+			<button class="self-center" on:click={() => (show = false)}>
+				<XMark className={'size-5'} />
 			</button>
 		</div>
 
-		<div
-			class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 text-gray-600 dark:text-gray-400"
-		>
+		<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
 			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
 				<form class="flex flex-col w-full" on:submit|preventDefault={submitHandler}>
 					<div class="px-1">
 						<div class="flex w-full justify-between items-center mb-1.5">
-							<div class="text-xs text-gray-600 dark:text-gray-400">{$i18n.t('Type')}</div>
+							<div class="text-xs text-gray-500">{$i18n.t('Type')}</div>
 
 							<button
 								type="button"
-								class={actionButtonClass}
+								class="text-xs text-gray-700 dark:text-gray-300"
 								on:click={() => {
 									type = type === 'user' ? 'context' : 'user';
 								}}
@@ -102,15 +90,16 @@
 
 						<textarea
 							bind:value={content}
-							class={textareaClass}
+							class="bg-transparent w-full text-sm outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
 							rows="6"
+							style="resize: vertical;"
 							placeholder={type === 'user'
 								? $i18n.t('Add a preference, fact, or instruction about you')
 								: $i18n.t('Add durable context for future chats')}
 						/>
 
 						<div class="flex flex-col w-full mt-1.5">
-							<label for="memory-path" class="mb-1 text-xs text-gray-600 dark:text-gray-400">
+							<label for="memory-path" class="mb-0.5 text-xs text-gray-500">
 								{$i18n.t('Path')}
 								<span class="opacity-50">({$i18n.t('optional')})</span>
 							</label>
@@ -118,16 +107,16 @@
 							<input
 								id="memory-path"
 								bind:value={path}
-								class={inputClass}
+								class="w-full text-sm bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
 								placeholder={$i18n.t('Path')}
 								autocomplete="off"
 							/>
 						</div>
 					</div>
 
-					<div class="flex justify-end pt-1 text-sm font-normal">
+					<div class="flex justify-end pt-1 text-sm font-medium">
 						<button
-							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 rounded-full flex items-center gap-2 whitespace-nowrap {loading
+							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
 								? ' cursor-not-allowed'
 								: ''}"
 							type="submit"