From 94353458a503d43ec915a72de8e19ff8ca937e2c Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 2 Apr 2025 19:01:39 -0700
Subject: [PATCH] refac: settings ui styling

---
 src/lib/components/chat/Settings/Account.svelte       |  5 +++--
 src/lib/components/chat/Settings/Audio.svelte         |  6 +++---
 src/lib/components/chat/Settings/General.svelte       | 11 ++++++-----
 .../chat/Settings/Personalization/ManageModal.svelte  |  4 ++--
 src/lib/components/common/Modal.svelte                |  2 +-
 .../layout/Sidebar/ArchivedChatsModal.svelte          |  4 ++--
 6 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index 4f3256e28..db403252f 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -236,10 +236,11 @@
 
 					<div class="flex-1">
 						<input
-							class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+							class="w-full text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
 							type="text"
 							bind:value={name}
 							required
+							placeholder={$i18n.t('Enter your name')}
 						/>
 					</div>
 				</div>
@@ -268,7 +269,7 @@
 			<UpdatePassword />
 		</div>
 
-		<hr class="border-gray-100 dark:border-gray-850 my-4" />
+		<hr class="border-gray-50 dark:border-gray-850 my-2" />
 
 		<div class="flex justify-between items-center text-sm">
 			<div class="  font-medium">{$i18n.t('API keys')}</div>
diff --git a/src/lib/components/chat/Settings/Audio.svelte b/src/lib/components/chat/Settings/Audio.svelte
index 0131aaae0..9b896628d 100644
--- a/src/lib/components/chat/Settings/Audio.svelte
+++ b/src/lib/components/chat/Settings/Audio.svelte
@@ -293,7 +293,7 @@
 						<div class="flex-1">
 							<input
 								list="voice-list"
-								class="w-full rounded-lg py-2 px-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+								class="w-full text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden"
 								bind:value={voice}
 								placeholder="Select a voice"
 							/>
@@ -330,7 +330,7 @@
 				<div class="flex w-full">
 					<div class="flex-1">
 						<select
-							class="w-full rounded-lg py-2 px-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+							class="w-full text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden"
 							bind:value={voice}
 						>
 							<option value="" selected={voice !== ''}>{$i18n.t('Default')}</option>
@@ -361,7 +361,7 @@
 					<div class="flex-1">
 						<input
 							list="voice-list"
-							class="w-full rounded-lg py-2 px-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+							class="w-full text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden"
 							bind:value={voice}
 							placeholder="Select a voice"
 						/>
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index d0c812ad4..b3e6cec8a 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -309,14 +309,15 @@
 		</div>
 
 		{#if $user?.role === 'admin' || $user?.permissions.chat?.controls}
-			<hr class="border-gray-100 dark:border-gray-850 my-3" />
+			<hr class="border-gray-50 dark:border-gray-850 my-3" />
 
 			<div>
 				<div class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div>
-				<textarea
+				<Textarea
 					bind:value={system}
-					class="w-full rounded-lg p-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden resize-none"
+					className="w-full text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden resize-none"
 					rows="4"
+					placeholder={$i18n.t('Enter system prompt here')}
 				/>
 			</div>
 
@@ -358,7 +359,7 @@
 						{#if keepAlive !== null}
 							<div class="flex mt-1 space-x-2">
 								<input
-									class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+									class="w-full text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
 									type="text"
 									placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")}
 									bind:value={keepAlive}
@@ -398,7 +399,7 @@
 						{#if requestFormat !== null}
 							<div class="flex mt-1 space-x-2">
 								<Textarea
-									className="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+									className="w-full  text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
 									placeholder={$i18n.t('e.g. "json" or a JSON schema')}
 									bind:value={requestFormat}
 								/>
diff --git a/src/lib/components/chat/Settings/Personalization/ManageModal.svelte b/src/lib/components/chat/Settings/Personalization/ManageModal.svelte
index b55261c17..d7bae329f 100644
--- a/src/lib/components/chat/Settings/Personalization/ManageModal.svelte
+++ b/src/lib/components/chat/Settings/Personalization/ManageModal.svelte
@@ -82,7 +82,7 @@
 						<div class="relative overflow-x-auto">
 							<table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto">
 								<thead
-									class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 dark:border-gray-850"
+									class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 border-gray-50 dark:border-gray-850"
 								>
 									<tr>
 										<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
@@ -94,7 +94,7 @@
 								</thead>
 								<tbody>
 									{#each memories as memory}
-										<tr class="border-b dark:border-gray-850 items-center">
+										<tr class="border-b border-gray-50 dark:border-gray-850 items-center">
 											<td class="px-3 py-1">
 												<div class="line-clamp-1">
 													{memory.content}
diff --git a/src/lib/components/common/Modal.svelte b/src/lib/components/common/Modal.svelte
index 6ca81d33e..07f5c46af 100644
--- a/src/lib/components/common/Modal.svelte
+++ b/src/lib/components/common/Modal.svelte
@@ -7,7 +7,7 @@
 	export let show = true;
 	export let size = 'md';
 	export let containerClassName = 'p-3';
-	export let className = 'bg-gray-50 dark:bg-gray-900 rounded-2xl';
+	export let className = 'bg-white dark:bg-gray-900 rounded-2xl';
 
 	let modalElement = null;
 	let mounted = false;
diff --git a/src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte b/src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte
index 9b4dac663..1fa20bcf5 100644
--- a/src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte
+++ b/src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte
@@ -134,7 +134,7 @@
 							<div class="relative overflow-x-auto">
 								<table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto">
 									<thead
-										class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 dark:border-gray-850"
+										class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 border-gray-50 dark:border-gray-850"
 									>
 										<tr>
 											<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
@@ -150,7 +150,7 @@
 													.includes(searchValue.toLowerCase())) as chat, idx}
 											<tr
 												class="bg-transparent {idx !== chats.length - 1 &&
-													'border-b'} dark:bg-gray-900 dark:border-gray-850 text-xs"
+													'border-b'} dark:bg-gray-900 border-gray-50 dark:border-gray-850 text-xs"
 											>
 												<td class="px-3 py-1 w-2/3">
 													<a href="/c/{chat.id}" target="_blank">