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-07 00:05:13 -07:00
parent f4e165d028
commit 47aeab81d8
1 changed files with 164 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -19,6 +19,8 @@
let profileImageUrl = ''; let profileImageUrl = '';
let name = ''; let name = '';
let showAPIKeys = false;
let showJWTToken = false; let showJWTToken = false;
let JWTTokenCopied = false; let JWTTokenCopied = false;
@ -223,11 +225,25 @@
</div> </div>
</div> </div>
</div> </div>
<hr class=" dark:border-gray-700 my-4" />
<div class="py-0.5">
<UpdatePassword /> <UpdatePassword />
</div>
<hr class=" dark:border-gray-700 my-4" /> <hr class=" dark:border-gray-700 my-4" />
<div class="flex justify-between items-center text-sm">
<div class=" font-medium">{$i18n.t('API keys')}</div>
<button
class=" text-xs font-medium text-gray-500"
type="button"
on:click={() => {
showAPIKeys = !showAPIKeys;
}}>{showAPIKeys ? $i18n.t('Hide') : $i18n.t('Show')}</button
>
</div>
{#if showAPIKeys}
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="justify-between w-full"> <div class="justify-between w-full">
<div class="flex justify-between w-full"> <div class="flex justify-between w-full">
@ -237,14 +253,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 bg-white 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-850 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 bg-white dark:bg-gray-800" class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
on:click={() => { on:click={() => {
showJWTToken = !showJWTToken; showJWTToken = !showJWTToken;
}} }}
@ -284,7 +300,7 @@
</div> </div>
<button <button
class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-800 transition rounded-lg" class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-850 transition rounded-lg"
on:click={() => { on:click={() => {
copyToClipboard(localStorage.token); copyToClipboard(localStorage.token);
JWTTokenCopied = true; JWTTokenCopied = true;
@ -337,14 +353,14 @@
{#if APIKey} {#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 bg-white 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-850 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 bg-white dark:bg-gray-800" class="px-2 transition rounded-r-lg bg-white dark:bg-gray-850"
on:click={() => { on:click={() => {
showAPIKey = !showAPIKey; showAPIKey = !showAPIKey;
}} }}
@ -384,7 +400,7 @@
</div> </div>
<button <button
class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-800 transition rounded-lg" class="ml-1.5 px-1.5 py-1 dark:hover:bg-gray-850 transition rounded-lg"
on:click={() => { on:click={() => {
copyToClipboard(APIKey); copyToClipboard(APIKey);
APIKeyCopied = true; APIKeyCopied = true;
@ -429,7 +445,7 @@
<Tooltip content="Create new key"> <Tooltip content="Create new key">
<button <button
class=" px-1.5 py-1 dark:hover:bg-gray-800transition rounded-lg" class=" px-1.5 py-1 dark:hover:bg-gray-850transition rounded-lg"
on:click={() => { on:click={() => {
createAPIKeyHandler(); createAPIKeyHandler();
}} }}
@ -452,7 +468,7 @@
</Tooltip> </Tooltip>
{:else} {:else}
<button <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" 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-850 transition"
on:click={() => { on:click={() => {
createAPIKeyHandler(); createAPIKeyHandler();
}} }}
@ -465,6 +481,7 @@
</div> </div>
</div> </div>
</div> </div>
{/if}
</div> </div>
<div class="flex justify-end pt-3 text-sm font-medium"> <div class="flex justify-end pt-3 text-sm font-medium">