From 1a124c2eabe9b31f45177368ce0976bb05e05670 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 27 Sep 2022 10:50:01 -0400
Subject: [PATCH] Fix fade when scrolling on ChatList

---
 .../chats/components/chat-list-item.tsx       |  1 +
 .../features/chats/components/chat-list.tsx   | 33 +++++++++----------
 .../chats/components/chat-pane/chat-pane.tsx  |  1 -
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index 531b504c0..b091187b2 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -110,6 +110,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onC
 
         <HStack alignItems='center' space={2}>
           <div className='text-gray-600 hidden group-hover:block hover:text-gray-100'>
+            {/* TODO: fix nested buttons here */}
             <DropdownMenuContainer
               items={menu}
               src={require('@tabler/icons/dots.svg')}
diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx
index 0fb6555df..6ea676336 100644
--- a/app/soapbox/features/chats/components/chat-list.tsx
+++ b/app/soapbox/features/chats/components/chat-list.tsx
@@ -14,11 +14,10 @@ import ChatListItem from './chat-list-item';
 interface IChatList {
   onClickChat: (chat: any) => void,
   useWindowScroll?: boolean,
-  fade?: boolean,
   searchValue?: string
 }
 
-const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, searchValue, fade }) => {
+const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, searchValue }) => {
   const dispatch = useAppDispatch();
 
   const chatListRef = useRef(null);
@@ -76,22 +75,20 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
         )}
       </PullToRefresh>
 
-      {fade && (
-        <>
-          <div
-            className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
-              'opacity-0': isNearTop,
-              'opacity-100': !isNearTop,
-            })}
-          />
-          <div
-            className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
-              'opacity-0': isNearBottom,
-              'opacity-100': !isNearBottom,
-            })}
-          />
-        </>
-      )}
+      <>
+        <div
+          className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white to-transparent pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+            'opacity-0': isNearTop,
+            'opacity-100': !isNearTop,
+          })}
+        />
+        <div
+          className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white to-transparent pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+            'opacity-0': isNearBottom,
+            'opacity-100': !isNearBottom,
+          })}
+        />
+      </>
     </div>
   );
 };
diff --git a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
index dd4b2fc01..d89bee60a 100644
--- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
+++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
@@ -59,7 +59,6 @@ const ChatPane = () => {
             <ChatList
               searchValue={debouncedValue}
               onClickChat={handleClickChat}
-              fade
             />
           ) : (
             <EmptyResultsBlankslate />