From e664c38377fde5ec98be56210f4f72fc74caaa81 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 16 Mar 2024 02:24:32 -0700
Subject: [PATCH] refac: settings styling

---
 src/lib/components/chat/Settings/Account.svelte    |  2 +-
 src/lib/components/chat/Settings/Chats.svelte      |  2 +-
 .../components/chat/Settings/Connections.svelte    |  2 +-
 src/lib/components/chat/Settings/General.svelte    | 14 ++++++--------
 src/lib/components/chat/Settings/Images.svelte     |  2 +-
 src/lib/components/chat/Settings/Interface.svelte  |  4 ++--
 src/lib/components/chat/Settings/Models.svelte     |  2 +-
 src/lib/components/chat/SettingsModal.svelte       |  2 +-
 8 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index ff564e58d..3a2259a79 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
-	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[22rem]">
 		<input
 			id="profile-image-input"
 			bind:this={profileImageInputElement}
diff --git a/src/lib/components/chat/Settings/Chats.svelte b/src/lib/components/chat/Settings/Chats.svelte
index 04d525f93..ecaf587a4 100644
--- a/src/lib/components/chat/Settings/Chats.svelte
+++ b/src/lib/components/chat/Settings/Chats.svelte
@@ -101,7 +101,7 @@
 	});
 </script>
 
-<div class="flex flex-col h-full justify-between space-y-3 text-sm">
+<div class="flex flex-col h-full justify-between space-y-3 text-sm max-h-[22rem]">
 	<div class=" space-y-2">
 		<div
 			class="flex flex-col justify-between rounded-md items-center py-2 px-3.5 w-full transition"
diff --git a/src/lib/components/chat/Settings/Connections.svelte b/src/lib/components/chat/Settings/Connections.svelte
index 49da26a74..87825f2a5 100644
--- a/src/lib/components/chat/Settings/Connections.svelte
+++ b/src/lib/components/chat/Settings/Connections.svelte
@@ -65,7 +65,7 @@
 		dispatch('save');
 	}}
 >
-	<div class="  pr-1.5 overflow-y-scroll max-h-[20.5rem] space-y-3">
+	<div class="  pr-1.5 overflow-y-scroll max-h-[22rem] space-y-3">
 		<div class=" space-y-3">
 			<div class="mt-2 space-y-2 pr-1.5">
 				<div class="flex justify-between items-center text-sm">
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index b317230df..fff8c8fd3 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -90,11 +90,11 @@
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
-	<div class="  pr-1.5 overflow-y-scroll max-h-[20.5rem]">
+	<div class="  pr-1.5 overflow-y-scroll max-h-[22rem]">
 		<div class="">
 			<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Settings')}</div>
 
-			<div class=" py-0.5 flex w-full justify-between">
+			<div class="flex w-full justify-between">
 				<div class=" self-center text-xs font-medium">{$i18n.t('Theme')}</div>
 				<div class="flex items-center relative">
 					<select
@@ -127,7 +127,7 @@
 				</div>
 			</div>
 
-			<div class=" py-0.5 flex w-full justify-between">
+			<div class=" flex w-full justify-between">
 				<div class=" self-center text-xs font-medium">{$i18n.t('Language')}</div>
 				<div class="flex items-center relative">
 					<select
@@ -146,21 +146,19 @@
 			</div>
 			{#if $i18n.language === 'en-US'}
 				<div class="mb-2 text-xs text-gray-400 dark:text-gray-500">
-					Didn't find your language?
-					<br />
-					You can help us translate the WebUI. Check out our
+					Couldn't find your language?
 					<a
 						class=" text-gray-300 font-medium underline"
 						href="https://github.com/open-webui/open-webui/blob/main/docs/CONTRIBUTING.md#-translations-and-internationalization"
 						target="_blank"
 					>
-						language contribution guide.
+						Help us translate Open WebUI!
 					</a>
 				</div>
 			{/if}
 
 			<div>
-				<div class=" mt-2 py-0.5 flex w-full justify-between">
+				<div class=" py-0.5 flex w-full justify-between">
 					<div class=" self-center text-xs font-medium">{$i18n.t('Desktop Notifications')}</div>
 
 					<button
diff --git a/src/lib/components/chat/Settings/Images.svelte b/src/lib/components/chat/Settings/Images.svelte
index 38d910f17..5ba046f19 100644
--- a/src/lib/components/chat/Settings/Images.svelte
+++ b/src/lib/components/chat/Settings/Images.svelte
@@ -138,7 +138,7 @@
 		loading = false;
 	}}
 >
-	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[20.5rem]">
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[24rem]">
 		<div>
 			<div class=" mb-1 text-sm font-medium">{$i18n.t('Image Settings')}</div>
 
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index b2b23c2f6..2d5862f40 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -97,7 +97,7 @@
 		dispatch('save');
 	}}
 >
-	<div class=" space-y-3 pr-1.5 overflow-y-scroll h-80">
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[22rem]">
 		<div>
 			<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Add-ons')}</div>
 
@@ -306,7 +306,7 @@
 		{/if}
 	</div>
 
-	<div class="flex justify-end pt-3 text-sm font-medium">
+	<div class="flex justify-end text-sm font-medium">
 		<button
 			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
 			type="submit"
diff --git a/src/lib/components/chat/Settings/Models.svelte b/src/lib/components/chat/Settings/Models.svelte
index f861d0f39..7b75e3729 100644
--- a/src/lib/components/chat/Settings/Models.svelte
+++ b/src/lib/components/chat/Settings/Models.svelte
@@ -469,7 +469,7 @@
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
-	<div class=" space-y-3 pr-1.5 overflow-y-scroll h-[23rem]">
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll h-[24rem]">
 		{#if ollamaVersion}
 			<div class="space-y-2 pr-1.5">
 				<div class="text-sm font-medium">{$i18n.t('Manage Ollama Models')}</div>
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index eb4e7a1fb..447fbaee1 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -323,7 +323,7 @@
 					<div class=" self-center">{$i18n.t('About')}</div>
 				</button>
 			</div>
-			<div class="flex-1 md:min-h-[380px]">
+			<div class="flex-1 md:min-h-[25rem]">
 				{#if selectedTab === 'general'}
 					<General
 						{getModels}