refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-11-28 10:07:57 -05:00
parent 7b1895ec8a
commit 80fbb29ccc
2 changed files with 56 additions and 47 deletions

View file

@ -22,6 +22,7 @@
import EllipsisVertical from '../icons/EllipsisVertical.svelte'; import EllipsisVertical from '../icons/EllipsisVertical.svelte';
import Thread from './Thread.svelte'; import Thread from './Thread.svelte';
import i18n from '$lib/i18n'; import i18n from '$lib/i18n';
import Spinner from '../common/Spinner.svelte';
export let id = ''; export let id = '';
@ -289,8 +290,8 @@
}} }}
/> />
{#if channel && messages !== null}
<div class="flex-1 overflow-y-auto"> <div class="flex-1 overflow-y-auto">
{#if channel}
<div <div
class=" pb-2.5 max-w-full z-10 scrollbar-hidden w-full h-full pt-6 flex-1 flex flex-col-reverse overflow-auto" class=" pb-2.5 max-w-full z-10 scrollbar-hidden w-full h-full pt-6 flex-1 flex flex-col-reverse overflow-auto"
id="messages-container" id="messages-container"
@ -330,7 +331,6 @@
/> />
{/key} {/key}
</div> </div>
{/if}
</div> </div>
<div class=" pb-[1rem] px-2.5"> <div class=" pb-[1rem] px-2.5">
@ -351,6 +351,13 @@
{scrollEnd} {scrollEnd}
/> />
</div> </div>
{:else}
<div class=" flex items-center justify-center h-full w-full">
<div class="m-auto">
<Spinner className="size-5" />
</div>
</div>
{/if}
</Pane> </Pane>
{#if !largeScreen} {#if !largeScreen}

View file

@ -117,6 +117,7 @@
</div> </div>
<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400 gap-1"> <div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400 gap-1">
{#if channel}
<Tooltip content={$i18n.t('Pinned Messages')}> <Tooltip content={$i18n.t('Pinned Messages')}>
<button <button
class=" flex cursor-pointer py-1.5 px-1.5 border dark:border-gray-850 border-gray-50 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition" class=" flex cursor-pointer py-1.5 px-1.5 border dark:border-gray-850 border-gray-50 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
@ -152,6 +153,7 @@
</button> </button>
</Tooltip> </Tooltip>
{/if} {/if}
{/if}
{#if $user !== undefined} {#if $user !== undefined}
<UserMenu <UserMenu