ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-14 13:25:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refac: styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-09-12 15:54:42 +04:00
parent 96b8aaf83f
commit 136972ccf0
6 changed files with 43 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/lib/components/chat/MessageInput/InputMenu.svelte
View file

@ -92,7 +92,7 @@
className="w-full" className="w-full"
> >
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
? 'opacity-50' ? 'opacity-50'
: ''}" : ''}"
on:click={() => { on:click={() => {
@ -116,7 +116,7 @@
className="w-full" className="w-full"
> >
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
? 'opacity-50' ? 'opacity-50'
: ''}" : ''}"
on:click={() => { on:click={() => {
@ -147,7 +147,7 @@
className="w-full" className="w-full"
> >
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
? 'opacity-50' ? 'opacity-50'
: ''}" : ''}"
on:click={() => { on:click={() => {
@ -178,7 +178,7 @@
className="w-full" className="w-full"
> >
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
? 'opacity-50' ? 'opacity-50'
: ''}" : ''}"
on:click={() => { on:click={() => {
@ -203,7 +203,7 @@
{#if fileUploadEnabled} {#if fileUploadEnabled}
{#if $config?.features?.enable_google_drive_integration} {#if $config?.features?.enable_google_drive_integration}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
uploadGoogleDriveHandler(); uploadGoogleDriveHandler();
}} }}
@ -241,7 +241,7 @@
{#if $config?.features?.enable_onedrive_integration} {#if $config?.features?.enable_onedrive_integration}
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -337,7 +337,7 @@
alignOffset={$mobile ? 0 : -8} alignOffset={$mobile ? 0 : -8}
> >
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
uploadOneDriveHandler('personal'); uploadOneDriveHandler('personal');
}} }}
@ -345,7 +345,7 @@
<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (personal)')}</div> <div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (personal)')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
uploadOneDriveHandler('organizations'); uploadOneDriveHandler('organizations');
}} }}

12
src/lib/components/chat/MessageInput/OptionsMenu.svelte
View file

@ -93,7 +93,7 @@
> >
{#if tools} {#if tools}
<button <button
class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800" class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
on:click={() => { on:click={() => {
showAllTools = !showAllTools; showAllTools = !showAllTools;
}} }}
@ -131,7 +131,7 @@
{#if showAllTools} {#if showAllTools}
{#each Object.keys(tools) as toolId} {#each Object.keys(tools) as toolId}
<button <button
class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800" class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
on:click={() => { on:click={() => {
tools[toolId].enabled = !tools[toolId].enabled; tools[toolId].enabled = !tools[toolId].enabled;
}} }}
@ -171,7 +171,7 @@
{#each toggleFilters.sort( (a, b) => a.name.localeCompare( b.name, undefined, { sensitivity: 'base' } ) ) as filter, filterIdx (filter.id)} {#each toggleFilters.sort( (a, b) => a.name.localeCompare( b.name, undefined, { sensitivity: 'base' } ) ) as filter, filterIdx (filter.id)}
<Tooltip content={filter?.description} placement="top-start"> <Tooltip content={filter?.description} placement="top-start">
<button <button
class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800" class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
on:click={() => { on:click={() => {
if (selectedFilterIds.includes(filter.id)) { if (selectedFilterIds.includes(filter.id)) {
selectedFilterIds = selectedFilterIds.filter((id) => id !== filter.id); selectedFilterIds = selectedFilterIds.filter((id) => id !== filter.id);
@ -220,7 +220,7 @@
{#if showWebSearchButton} {#if showWebSearchButton}
<Tooltip content={$i18n.t('Search the internet')} placement="top-start"> <Tooltip content={$i18n.t('Search the internet')} placement="top-start">
<button <button
class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800" class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
on:click={() => { on:click={() => {
webSearchEnabled = !webSearchEnabled; webSearchEnabled = !webSearchEnabled;
}} }}
@ -251,7 +251,7 @@
{#if showImageGenerationButton} {#if showImageGenerationButton}
<Tooltip content={$i18n.t('Generate an image')} placement="top-start"> <Tooltip content={$i18n.t('Generate an image')} placement="top-start">
<button <button
class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800" class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
on:click={() => { on:click={() => {
imageGenerationEnabled = !imageGenerationEnabled; imageGenerationEnabled = !imageGenerationEnabled;
}} }}
@ -282,7 +282,7 @@
{#if showCodeInterpreterButton} {#if showCodeInterpreterButton}
<Tooltip content={$i18n.t('Execute code for analysis')} placement="top-start"> <Tooltip content={$i18n.t('Execute code for analysis')} placement="top-start">
<button <button
class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800" class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
aria-pressed={codeInterpreterEnabled} aria-pressed={codeInterpreterEnabled}
aria-label={codeInterpreterEnabled aria-label={codeInterpreterEnabled
? $i18n.t('Disable Code Interpreter') ? $i18n.t('Disable Code Interpreter')

4
src/lib/components/common/Switch.svelte
View file

@ -22,7 +22,7 @@
bind:checked={state} bind:checked={state}
{id} {id}
aria-labelledby={ariaLabelledbyId} aria-labelledby={ariaLabelledbyId}
class="flex h-5 min-h-5 w-9 shrink-0 cursor-pointer items-center rounded-full px-[3px] mx-[1px] transition {($settings?.highContrastMode ?? class="flex h-[18px] min-h-[18px] w-8 shrink-0 cursor-pointer items-center rounded-full px-1 mx-[1px] transition {($settings?.highContrastMode ??
false) false)
? 'focus:outline focus:outline-2 focus:outline-gray-800 focus:dark:outline-gray-200' ? 'focus:outline focus:outline-2 focus:outline-gray-800 focus:dark:outline-gray-200'
: 'outline outline-1 outline-gray-100 dark:outline-gray-800'} {state : 'outline outline-1 outline-gray-100 dark:outline-gray-800'} {state
@ -30,7 +30,7 @@
: 'bg-gray-200 dark:bg-transparent'}" : 'bg-gray-200 dark:bg-transparent'}"
> >
<Switch.Thumb <Switch.Thumb
class="pointer-events-none block size-4 shrink-0 rounded-full bg-white transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini " class="pointer-events-none block size-3 shrink-0 rounded-full bg-white transition-transform data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini "
/> />
</Switch.Root> </Switch.Root>
</Tooltip> </Tooltip>

12
src/lib/components/icons/Keyboard.svelte
View file

@ -6,14 +6,12 @@
<svg <svg
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor"
stroke-width={strokeWidth} stroke-width={strokeWidth}
class={className} class={className}
><path
d="M3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19Z"
></path><path d="M8 14L12 10L16 14" stroke-linecap="round" stroke-linejoin="round"></path></svg
> >
<path
fill-rule="evenodd"
d="M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7Zm5.01 1H5v2.01h2.01V8Zm3 0H8v2.01h2.01V8Zm3 0H11v2.01h2.01V8Zm3 0H14v2.01h2.01V8Zm3 0H17v2.01h2.01V8Zm-12 3H5v2.01h2.01V11Zm3 0H8v2.01h2.01V11Zm3 0H11v2.01h2.01V11Zm3 0H14v2.01h2.01V11Zm3 0H17v2.01h2.01V11Zm-12 3H5v2.01h2.01V14ZM8 14l-.001 2 8.011.01V14H8Zm11.01 0H17v2.01h2.01V14Z"
clip-rule="evenodd"
/>
</svg>

24
src/lib/components/layout/Sidebar/ChatMenu.svelte
View file

@ -111,7 +111,7 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[200px] rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg" class="w-full max-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-850 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
sideOffset={-2} sideOffset={-2}
side="bottom" side="bottom"
align="start" align="start"
@ -119,7 +119,7 @@
> >
{#if $user?.role === 'admin' || ($user.permissions?.chat?.share ?? true)} {#if $user?.role === 'admin' || ($user.permissions?.chat?.share ?? true)}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
shareHandler(); shareHandler();
}} }}
@ -131,7 +131,7 @@
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
> >
<Download strokeWidth="1.5" /> <Download strokeWidth="1.5" />
@ -144,7 +144,7 @@
> >
{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)} {#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
downloadJSONExport(); downloadJSONExport();
}} }}
@ -154,7 +154,7 @@
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
downloadTxt(); downloadTxt();
}} }}
@ -165,7 +165,7 @@
</DropdownMenu.Sub> </DropdownMenu.Sub>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
renameHandler(); renameHandler();
}} }}
@ -177,7 +177,7 @@
<hr class="border-gray-50 dark:border-gray-800 my-1" /> <hr class="border-gray-50 dark:border-gray-800 my-1" />
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
pinHandler(); pinHandler();
}} }}
@ -194,7 +194,7 @@
{#if chatId} {#if chatId}
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
> >
<Folder /> <Folder />
@ -207,7 +207,7 @@
> >
{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder} {#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
moveChatHandler(chatId, folder.id); moveChatHandler(chatId, folder.id);
}} }}
@ -222,7 +222,7 @@
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
cloneChatHandler(); cloneChatHandler();
}} }}
@ -232,7 +232,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
archiveChatHandler(); archiveChatHandler();
}} }}
@ -242,7 +242,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
deleteHandler(); deleteHandler();
}} }}

20
src/lib/components/layout/Sidebar/UserMenu.svelte
View file

@ -64,14 +64,14 @@
<slot name="content"> <slot name="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full {className} text-sm rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary" class="w-full {className} rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-850 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg text-sm"
sideOffset={4} sideOffset={4}
side="bottom" side="bottom"
align="start" align="start"
transition={(e) => fade(e, { duration: 100 })} transition={(e) => fade(e, { duration: 100 })}
> >
<DropdownMenu.Item <DropdownMenu.Item
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer" class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer"
on:click={async () => { on:click={async () => {
show = false; show = false;
@ -90,7 +90,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer" class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer"
on:click={async () => { on:click={async () => {
show = false; show = false;
@ -113,7 +113,7 @@
<DropdownMenu.Item <DropdownMenu.Item
as="a" as="a"
href="/playground" href="/playground"
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none" class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none"
on:click={async () => { on:click={async () => {
show = false; show = false;
if ($mobile) { if ($mobile) {
@ -130,7 +130,7 @@
<DropdownMenu.Item <DropdownMenu.Item
as="a" as="a"
href="/admin" href="/admin"
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none" class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none"
on:click={async () => { on:click={async () => {
show = false; show = false;
if ($mobile) { if ($mobile) {
@ -155,7 +155,7 @@
<DropdownMenu.Item <DropdownMenu.Item
as="a" as="a"
target="_blank" target="_blank"
class="flex gap-2 items-center py-1.5 px-3 text-sm select-none w-full cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition" class="flex gap-2 items-center py-1.5 px-3 text-sm select-none w-full cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl transition"
id="chat-share-button" id="chat-share-button"
on:click={() => { on:click={() => {
show = false; show = false;
@ -170,7 +170,7 @@
<DropdownMenu.Item <DropdownMenu.Item
as="a" as="a"
target="_blank" target="_blank"
class="flex gap-2 items-center py-1.5 px-3 text-sm select-none w-full cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition" class="flex gap-2 items-center py-1.5 px-3 text-sm select-none w-full cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl transition"
id="chat-share-button" id="chat-share-button"
on:click={() => { on:click={() => {
show = false; show = false;
@ -183,7 +183,7 @@
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center py-1.5 px-3 text-sm select-none w-full cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition cursor-pointer" class="flex gap-2 items-center py-1.5 px-3 text-sm select-none w-full hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl transition cursor-pointer"
id="chat-share-button" id="chat-share-button"
on:click={async () => { on:click={async () => {
show = false; show = false;
@ -203,7 +203,7 @@
<hr class=" border-gray-50 dark:border-gray-800 my-1 p-0" /> <hr class=" border-gray-50 dark:border-gray-800 my-1 p-0" />
<DropdownMenu.Item <DropdownMenu.Item
class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition" class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
on:click={async () => { on:click={async () => {
const res = await userSignOut(); const res = await userSignOut();
user.set(null); user.set(null);
@ -229,7 +229,7 @@
: ''} : ''}
> >
<div <div
class="flex rounded-md py-1 px-3 text-xs gap-2.5 items-center" class="flex rounded-xl py-1 px-3 text-xs gap-2.5 items-center"
on:mouseenter={() => { on:mouseenter={() => {
getUsageInfo(); getUsageInfo();
}} }}