refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-09-15 13:34:09 -05:00
parent 9e50026107
commit 2ca34217e6
2 changed files with 38 additions and 20 deletions

View file

@ -36,11 +36,11 @@
import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte'; import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
import ChatPlus from '../icons/ChatPlus.svelte'; import ChatPlus from '../icons/ChatPlus.svelte';
import ChatCheck from '../icons/ChatCheck.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
export let initNewChat: Function; export let initNewChat: Function;
export let title: string = $WEBUI_NAME;
export let shareEnabled: boolean = false; export let shareEnabled: boolean = false;
export let chat; export let chat;
@ -152,13 +152,31 @@
}} }}
> >
<div class=" m-auto self-center"> <div class=" m-auto self-center">
<ChatPlus className=" size-4.5" strokeWidth="1.5" /> <ChatCheck className=" size-4.5" strokeWidth="1.5" />
</div> </div>
</button> </button>
</Tooltip> </Tooltip>
{/if} {/if}
{/if} {/if}
{#if $mobile && !$temporaryChatEnabled && chat && chat.id}
<Tooltip content={$i18n.t('New Chat')}>
<button
class=" flex {$showSidebar
? 'md:hidden'
: ''} cursor-pointer px-2 py-2 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
on:click={() => {
initNewChat();
}}
aria-label="New Chat"
>
<div class=" m-auto self-center">
<ChatPlus className=" size-4.5" strokeWidth="1.5" />
</div>
</button>
</Tooltip>
{/if}
{#if shareEnabled && chat && (chat.id || $temporaryChatEnabled)} {#if shareEnabled && chat && (chat.id || $temporaryChatEnabled)}
<Menu <Menu
{chat} {chat}
@ -198,24 +216,6 @@
</Tooltip> </Tooltip>
{/if} {/if}
{#if $mobile}
<Tooltip content={$i18n.t('New Chat')}>
<button
class=" flex {$showSidebar
? 'md:hidden'
: ''} cursor-pointer px-2 py-2 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
on:click={() => {
initNewChat();
}}
aria-label="New Chat"
>
<div class=" m-auto self-center">
<PencilSquare className=" size-5" strokeWidth="2" />
</div>
</button>
</Tooltip>
{/if}
{#if $user !== undefined && $user !== null} {#if $user !== undefined && $user !== null}
<UserMenu <UserMenu
className="max-w-[240px]" className="max-w-[240px]"

View file

@ -0,0 +1,18 @@
<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 d="M8 12L11 15L16 10" stroke-linecap="round" stroke-linejoin="round"></path><path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.8214 2.48697 15.5291 3.33782 17L2.5 21.5L7 20.6622C8.47087 21.513 10.1786 22 12 22Z"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>