matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: style migrations, fix chat list gradient

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-02-01 23:44:16 +01:00
parent d65234de8b
commit bb602176c4
3 changed files with 72 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/pl-fe/src/features/chats/components/chat-list.tsx
View File

@ -52,8 +52,13 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
}; };
return ( return (
<div> <PullToRefresh
<PullToRefresh onRefresh={handleRefresh}> onRefresh={handleRefresh}
className={clsx({
'⁂-chat-widget__list--near-top': isNearTop,
'⁂-chat-widget__list--near-bottom': isNearBottom,
})}
>
<Virtuoso <Virtuoso
atTopStateChange={(atTop) => setNearTop(atTop)} atTopStateChange={(atTop) => setNearTop(atTop)}
atBottomStateChange={(atBottom) => setNearBottom(atBottom)} atBottomStateChange={(atBottom) => setNearBottom(atBottom)}
@ -72,22 +77,6 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
}} }}
/> />
</PullToRefresh> </PullToRefresh>
<>
<div
className={clsx('pointer-events-none absolute inset-x-0 top-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 black:from-black dark:from-gray-900', {
'opacity-0': isNearTop,
'opacity-100 black:opacity-50': !isNearTop,
})}
/>
<div
className={clsx('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pb-8 pt-12 transition-opacity duration-500 black:from-black dark:from-gray-900', {
'opacity-0': isNearBottom,
'opacity-100 black:opacity-50': !isNearBottom,
})}
/>
</>
</div>
); );
}; };

21
packages/pl-fe/src/styles/new/chats.scss
View File

@ -97,8 +97,25 @@
flex-grow: 1; flex-grow: 1;
> div { > div {
position: relative; &::before,
height: 100%; &::after {
@apply pointer-events-none absolute inset-x-0 flex justify-center from-white to-transparent pb-12 pt-8 transition-opacity duration-500 black:from-black dark:from-gray-900 opacity-100 black:opacity-50;
content: '';
z-index: 2;
}
&::before {
@apply top-0 rounded-t-lg bg-gradient-to-b;
}
&::after {
@apply bottom-0 rounded-b-lg bg-gradient-to-t;
}
&.⁂-chat-widget__list--near-top::before,
&.⁂-chat-widget__list--near-bottom::after {
@apply opacity-0 black:opacity-0;
}
} }
} }

31
packages/pl-fe/src/styles/new/events.scss
View File

@ -20,16 +20,41 @@
@apply dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow; @apply dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow;
img { img {
@apply size-full object-cover; height: 100%;
width: 100%;
object-fit: cover;
} }
.⁂-icon-button { .⁂-icon-button {
@apply absolute right-2 top-2; position: absolute;
top: 0.5rem;
right: 0.5rem;
} }
} }
.lexical { .lexical {
@apply block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 sm:text-sm; display: block;
width: 100%;
border-radius: 0.375rem;
border: 1px solid rgb(var(--color-gray-400));
background-color: rgb(var(--color-white));
padding: 0.5rem 0.75rem;
font-size: 0.9375rem;
color: rgb(var(--color-gray-900));
outline: 1px solid transparent;
@apply placeholder:text-gray-600 focus-within:border-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 sm:text-sm;
&:focus-within {
outline-color: rgb(var(--color-primary-500));
}
&:is(.dark *) {
outline-color: rgb(var(--color-gray-800));
&:focus-within {
outline-color: rgb(var(--color-primary-500));
}
}
} }
.⁂-compose-form__editor__placeholder { .⁂-compose-form__editor__placeholder {