浏览代码

refac: settings styling

Timothy J. Baek 1 年之前
父节点
当前提交
e664c38377

+ 1 - 1
src/lib/components/chat/Settings/Account.svelte

@@ -40,7 +40,7 @@
 </script>
 </script>
 
 
 <div class="flex flex-col h-full justify-between text-sm">
 <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
 		<input
 			id="profile-image-input"
 			id="profile-image-input"
 			bind:this={profileImageInputElement}
 			bind:this={profileImageInputElement}

+ 1 - 1
src/lib/components/chat/Settings/Chats.svelte

@@ -101,7 +101,7 @@
 	});
 	});
 </script>
 </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=" space-y-2">
 		<div
 		<div
 			class="flex flex-col justify-between rounded-md items-center py-2 px-3.5 w-full transition"
 			class="flex flex-col justify-between rounded-md items-center py-2 px-3.5 w-full transition"

+ 1 - 1
src/lib/components/chat/Settings/Connections.svelte

@@ -65,7 +65,7 @@
 		dispatch('save');
 		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=" space-y-3">
 			<div class="mt-2 space-y-2 pr-1.5">
 			<div class="mt-2 space-y-2 pr-1.5">
 				<div class="flex justify-between items-center text-sm">
 				<div class="flex justify-between items-center text-sm">

+ 6 - 8
src/lib/components/chat/Settings/General.svelte

@@ -90,11 +90,11 @@
 </script>
 </script>
 
 
 <div class="flex flex-col h-full justify-between text-sm">
 <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="">
 			<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Settings')}</div>
 			<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=" self-center text-xs font-medium">{$i18n.t('Theme')}</div>
 				<div class="flex items-center relative">
 				<div class="flex items-center relative">
 					<select
 					<select
@@ -127,7 +127,7 @@
 				</div>
 				</div>
 			</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=" self-center text-xs font-medium">{$i18n.t('Language')}</div>
 				<div class="flex items-center relative">
 				<div class="flex items-center relative">
 					<select
 					<select
@@ -146,21 +146,19 @@
 			</div>
 			</div>
 			{#if $i18n.language === 'en-US'}
 			{#if $i18n.language === 'en-US'}
 				<div class="mb-2 text-xs text-gray-400 dark:text-gray-500">
 				<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
 					<a
 						class=" text-gray-300 font-medium underline"
 						class=" text-gray-300 font-medium underline"
 						href="https://github.com/open-webui/open-webui/blob/main/docs/CONTRIBUTING.md#-translations-and-internationalization"
 						href="https://github.com/open-webui/open-webui/blob/main/docs/CONTRIBUTING.md#-translations-and-internationalization"
 						target="_blank"
 						target="_blank"
 					>
 					>
-						language contribution guide.
+						Help us translate Open WebUI!
 					</a>
 					</a>
 				</div>
 				</div>
 			{/if}
 			{/if}
 
 
 			<div>
 			<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>
 					<div class=" self-center text-xs font-medium">{$i18n.t('Desktop Notifications')}</div>
 
 
 					<button
 					<button

+ 1 - 1
src/lib/components/chat/Settings/Images.svelte

@@ -138,7 +138,7 @@
 		loading = false;
 		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>
 			<div class=" mb-1 text-sm font-medium">{$i18n.t('Image Settings')}</div>
 			<div class=" mb-1 text-sm font-medium">{$i18n.t('Image Settings')}</div>
 
 

+ 2 - 2
src/lib/components/chat/Settings/Interface.svelte

@@ -97,7 +97,7 @@
 		dispatch('save');
 		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>
 			<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Add-ons')}</div>
 			<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Add-ons')}</div>
 
 
@@ -306,7 +306,7 @@
 		{/if}
 		{/if}
 	</div>
 	</div>
 
 
-	<div class="flex justify-end pt-3 text-sm font-medium">
+	<div class="flex justify-end text-sm font-medium">
 		<button
 		<button
 			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
 			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
 			type="submit"
 			type="submit"

+ 1 - 1
src/lib/components/chat/Settings/Models.svelte

@@ -469,7 +469,7 @@
 </script>
 </script>
 
 
 <div class="flex flex-col h-full justify-between text-sm">
 <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}
 		{#if ollamaVersion}
 			<div class="space-y-2 pr-1.5">
 			<div class="space-y-2 pr-1.5">
 				<div class="text-sm font-medium">{$i18n.t('Manage Ollama Models')}</div>
 				<div class="text-sm font-medium">{$i18n.t('Manage Ollama Models')}</div>

+ 1 - 1
src/lib/components/chat/SettingsModal.svelte

@@ -323,7 +323,7 @@
 					<div class=" self-center">{$i18n.t('About')}</div>
 					<div class=" self-center">{$i18n.t('About')}</div>
 				</button>
 				</button>
 			</div>
 			</div>
-			<div class="flex-1 md:min-h-[380px]">
+			<div class="flex-1 md:min-h-[25rem]">
 				{#if selectedTab === 'general'}
 				{#if selectedTab === 'general'}
 					<General
 					<General
 						{getModels}
 						{getModels}