From bb602176c475631d451161039c40fb36e9acfb21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sun, 1 Feb 2026 23:44:16 +0100
Subject: [PATCH] pl-fe: style migrations, fix chat list gradient
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../features/chats/components/chat-list.tsx   | 61 ++++++++-----------
 packages/pl-fe/src/styles/new/chats.scss      | 21 ++++++-
 packages/pl-fe/src/styles/new/events.scss     | 31 +++++++++-
 3 files changed, 72 insertions(+), 41 deletions(-)

diff --git a/packages/pl-fe/src/features/chats/components/chat-list.tsx b/packages/pl-fe/src/features/chats/components/chat-list.tsx
index a2851feca..6e55c8e03 100644
--- a/packages/pl-fe/src/features/chats/components/chat-list.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-list.tsx
@@ -52,42 +52,31 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
   };
 
   return (
-    <div>
-      <PullToRefresh onRefresh={handleRefresh}>
-        <Virtuoso
-          atTopStateChange={(atTop) => setNearTop(atTop)}
-          atBottomStateChange={(atBottom) => setNearBottom(atBottom)}
-          useWindowScroll={useWindowScroll}
-          data={allChats}
-          endReached={handleLoadMore}
-          itemContent={(_index, chat) => (
-            <div className='px-2'>
-              {chat === 'shoutbox' ? <ChatListShoutbox onClick={onClickChat} /> : <ChatListItem chat={chat} onClick={onClickChat} />}
-            </div>
-          )}
-          components={{
-            ScrollSeekPlaceholder: () => <PlaceholderChat />,
-            Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
-            EmptyPlaceholder: renderEmpty,
-          }}
-        />
-      </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>
+    <PullToRefresh
+      onRefresh={handleRefresh}
+      className={clsx({
+        '⁂-chat-widget__list--near-top': isNearTop,
+        '⁂-chat-widget__list--near-bottom': isNearBottom,
+      })}
+    >
+      <Virtuoso
+        atTopStateChange={(atTop) => setNearTop(atTop)}
+        atBottomStateChange={(atBottom) => setNearBottom(atBottom)}
+        useWindowScroll={useWindowScroll}
+        data={allChats}
+        endReached={handleLoadMore}
+        itemContent={(_index, chat) => (
+          <div className='px-2'>
+            {chat === 'shoutbox' ? <ChatListShoutbox onClick={onClickChat} /> : <ChatListItem chat={chat} onClick={onClickChat} />}
+          </div>
+        )}
+        components={{
+          ScrollSeekPlaceholder: () => <PlaceholderChat />,
+          Footer: () => hasNextPage ? <Spinner withText={false} /> : null,
+          EmptyPlaceholder: renderEmpty,
+        }}
+      />
+    </PullToRefresh>
   );
 };
 
diff --git a/packages/pl-fe/src/styles/new/chats.scss b/packages/pl-fe/src/styles/new/chats.scss
index 938c6871f..16593a2bd 100644
--- a/packages/pl-fe/src/styles/new/chats.scss
+++ b/packages/pl-fe/src/styles/new/chats.scss
@@ -97,8 +97,25 @@
     flex-grow: 1;
 
     > div {
-      position: relative;
-      height: 100%;
+      &::before,
+      &::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;
+      }
     }
   }
 
diff --git a/packages/pl-fe/src/styles/new/events.scss b/packages/pl-fe/src/styles/new/events.scss
index 638b19dc1..f5ba6848d 100644
--- a/packages/pl-fe/src/styles/new/events.scss
+++ b/packages/pl-fe/src/styles/new/events.scss
@@ -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;
     
     img {
-      @apply size-full object-cover;
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
     }
 
     .⁂-icon-button {
-      @apply absolute right-2 top-2;
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
     }
   }
 
   .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 {