tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

refac: styling

Browse source
This commit is contained in:
Timothy J. Baek 2024-04-02 09:58:34 -07:00
parent b35cc36e19
commit fb516ea694
2 changed files with 116 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/lib/components/chat/Settings/Account.svelte
View file

@ -8,6 +8,8 @@
import UpdatePassword from './Account/UpdatePassword.svelte'; import UpdatePassword from './Account/UpdatePassword.svelte';
import { getGravatarUrl } from '$lib/apis/utils'; import { getGravatarUrl } from '$lib/apis/utils';
import { copyToClipboard } from '$lib/utils'; import { copyToClipboard } from '$lib/utils';
import Plus from '$lib/components/icons/Plus.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -199,14 +201,14 @@
<div class="flex mt-2"> <div class="flex mt-2">
<div class="flex w-full"> <div class="flex w-full">
<input <input
class="w-full rounded-l-lg py-1.5 pl-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none" class="w-full rounded-l-lg py-1.5 pl-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-800 outline-none"
type={showJWTToken ? 'text' : 'password'} type={showJWTToken ? 'text' : 'password'}
value={localStorage.token} value={localStorage.token}
disabled disabled
/> />
<button <button
class="px-2 transition rounded-r-lg dark:bg-gray-800" class="px-2 transition rounded-r-lg bg-white dark:bg-gray-800"
on:click={() => { on:click={() => {
showJWTToken = !showJWTToken; showJWTToken = !showJWTToken;
}} }}
@ -246,7 +248,7 @@
</div> </div>
<button <button
class="ml-1.5 px-1.5 py-1 hover:bg-gray-800 transition rounded-lg" class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-800 transition rounded-lg"
on:click={() => { on:click={() => {
copyToClipboard(localStorage.token); copyToClipboard(localStorage.token);
JWTTokenCopied = true; JWTTokenCopied = true;
@ -296,16 +298,17 @@
</div> </div>
<div class="flex mt-2"> <div class="flex mt-2">
{#if APIKey}
<div class="flex w-full"> <div class="flex w-full">
<input <input
class="w-full rounded-l-lg py-1.5 pl-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none" class="w-full rounded-l-lg py-1.5 pl-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-800 outline-none"
type={showAPIKey ? 'text' : 'password'} type={showAPIKey ? 'text' : 'password'}
value={APIKey} value={APIKey}
disabled disabled
/> />
<button <button
class="px-2 transition rounded-r-lg dark:bg-gray-800" class="px-2 transition rounded-r-lg bg-white dark:bg-gray-800"
on:click={() => { on:click={() => {
showAPIKey = !showAPIKey; showAPIKey = !showAPIKey;
}} }}
@ -345,7 +348,7 @@
</div> </div>
<button <button
class="ml-1.5 px-1.5 py-1 hover:bg-gray-800 transition rounded-lg" class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-800 transition rounded-lg"
on:click={() => { on:click={() => {
copyToClipboard(APIKey); copyToClipboard(APIKey);
APIKeyCopied = true; APIKeyCopied = true;
@ -388,8 +391,9 @@
{/if} {/if}
</button> </button>
<Tooltip content="Create new key">
<button <button
class=" px-1.5 py-1 hover:bg-gray-800 transition rounded-lg" class=" px-1.5 py-1 dark:hover:bg-gray-800transition rounded-lg"
on:click={() => { on:click={() => {
createAPIKeyHandler(); createAPIKeyHandler();
}} }}
@ -409,6 +413,19 @@
/> />
</svg> </svg>
</button> </button>
</Tooltip>
{:else}
<button
class="flex gap-1.5 items-center font-medium px-3.5 py-1.5 rounded-lg bg-gray-100/70 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition"
on:click={() => {
createAPIKeyHandler();
}}
>
<Plus strokeWidth="2" className=" size-3.5" />
Create new secret key</button
>
{/if}
</div> </div>
</div> </div>
</div> </div>

15
src/lib/components/icons/Plus.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
export let className = 'w-4 h-4';
export let strokeWidth = '1.5';
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>