OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac: settings ui styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-04-02 19:01:39 -07:00
parent 7eea95a48c
commit 94353458a5
6 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/chat/Settings/Account.svelte
View File

@ -236,10 +236,11 @@
<div class="flex-1"> <div class="flex-1">
<input <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" type="text"
bind:value={name} bind:value={name}
required required
placeholder={$i18n.t('Enter your name')}
/> />
</div> </div>
</div> </div>
@ -268,7 +269,7 @@
<UpdatePassword /> <UpdatePassword />
</div> </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="flex justify-between items-center text-sm">
<div class=" font-medium">{$i18n.t('API keys')}</div> <div class=" font-medium">{$i18n.t('API keys')}</div>

6
src/lib/components/chat/Settings/Audio.svelte
View File

@ -293,7 +293,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="voice-list" 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} bind:value={voice}
placeholder="Select a voice" placeholder="Select a voice"
/> />
@ -330,7 +330,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<select <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} bind:value={voice}
> >
<option value="" selected={voice !== ''}>{$i18n.t('Default')}</option> <option value="" selected={voice !== ''}>{$i18n.t('Default')}</option>
@ -361,7 +361,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="voice-list" 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} bind:value={voice}
placeholder="Select a voice" placeholder="Select a voice"
/> />

11
src/lib/components/chat/Settings/General.svelte
View File

@ -309,14 +309,15 @@
</div> </div>
{#if $user?.role === 'admin' || $user?.permissions.chat?.controls} {#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>
<div class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div> <div class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div>
<textarea <Textarea
bind:value={system} 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" rows="4"
placeholder={$i18n.t('Enter system prompt here')}
/> />
</div> </div>
@ -358,7 +359,7 @@
{#if keepAlive !== null} {#if keepAlive !== null}
<div class="flex mt-1 space-x-2"> <div class="flex mt-1 space-x-2">
<input <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" type="text"
placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")} placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")}
bind:value={keepAlive} bind:value={keepAlive}
@ -398,7 +399,7 @@
{#if requestFormat !== null} {#if requestFormat !== null}
<div class="flex mt-1 space-x-2"> <div class="flex mt-1 space-x-2">
<Textarea <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')} placeholder={$i18n.t('e.g. "json" or a JSON schema')}
bind:value={requestFormat} bind:value={requestFormat}
/> />

4
src/lib/components/chat/Settings/Personalization/ManageModal.svelte
View File

@ -82,7 +82,7 @@
<div class="relative overflow-x-auto"> <div class="relative overflow-x-auto">
<table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto"> <table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto">
<thead <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> <tr>
<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th> <th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
@ -94,7 +94,7 @@
</thead> </thead>
<tbody> <tbody>
{#each memories as memory} {#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"> <td class="px-3 py-1">
<div class="line-clamp-1"> <div class="line-clamp-1">
{memory.content} {memory.content}

2
src/lib/components/common/Modal.svelte
View File

@ -7,7 +7,7 @@
export let show = true; export let show = true;
export let size = 'md'; export let size = 'md';
export let containerClassName = 'p-3'; 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 modalElement = null;
let mounted = false; let mounted = false;

4
src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte
View File

@ -134,7 +134,7 @@
<div class="relative overflow-x-auto"> <div class="relative overflow-x-auto">
<table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto"> <table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto">
<thead <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> <tr>
<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th> <th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
@ -150,7 +150,7 @@
.includes(searchValue.toLowerCase())) as chat, idx} .includes(searchValue.toLowerCase())) as chat, idx}
<tr <tr
class="bg-transparent {idx !== chats.length - 1 && 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"> <td class="px-3 py-1 w-2/3">
<a href="/c/{chat.id}" target="_blank"> <a href="/c/{chat.id}" target="_blank">