From 4a6d261bfd223339afc794355de5606afd747e3f Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 5 Oct 2022 15:25:56 -0400
Subject: [PATCH] Improve UX of chat messages

---
 .../features/chats/components/chat-message-list-intro.tsx   | 2 +-
 app/soapbox/features/chats/components/chat-message-list.tsx | 3 ++-
 app/soapbox/features/chats/components/chat-settings.tsx     | 6 +++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-message-list-intro.tsx b/app/soapbox/features/chats/components/chat-message-list-intro.tsx
index ebc4d1dd8..bad84c183 100644
--- a/app/soapbox/features/chats/components/chat-message-list-intro.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list-intro.tsx
@@ -50,7 +50,7 @@ const ChatMessageListIntro = () => {
       className={
         classNames({
           'w-3/4 mx-auto': needsAcceptance,
-          'mt-6': true,
+          'py-6': true, // needs to be padding to prevent Virtuoso bugs
         })
       }
     >
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 887cca4f0..789e0ad3d 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -392,6 +392,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
       <div className='flex-grow flex flex-col justify-end'>
         <Virtuoso
           ref={node}
+          alignToBottom
           firstItemIndex={Math.max(0, firstItemIndex)}
           initialTopMostItemIndex={cachedChatMessages.length - 1}
           data={cachedChatMessages}
@@ -415,7 +416,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
               }
 
               if (!hasNextPage && !isLoading) {
-                return <div className='mb-6'><ChatMessageListIntro /></div>;
+                return <ChatMessageListIntro />;
               }
 
               return null;
diff --git a/app/soapbox/features/chats/components/chat-settings.tsx b/app/soapbox/features/chats/components/chat-settings.tsx
index f529d0b1d..372f0c15a 100644
--- a/app/soapbox/features/chats/components/chat-settings.tsx
+++ b/app/soapbox/features/chats/components/chat-settings.tsx
@@ -111,13 +111,13 @@ const ChatSettings = () => {
         <Divider />
 
         <Stack space={5}>
-          <button onClick={handleBlockUser} className='w-full flex items-center space-x-2 font-bold text-sm text-gray-700'>
-            <Icon src={require('@tabler/icons/ban.svg')} className='w-5 h-5 text-gray-600' />
+          <button onClick={handleBlockUser} className='w-full flex items-center space-x-2 font-bold text-sm text-primary-600 dark:text-accent-blue'>
+            <Icon src={require('@tabler/icons/ban.svg')} className='w-5 h-5' />
             <span>{intl.formatMessage(messages.blockUser, { acct: chat.account.acct })}</span>
           </button>
 
           <button onClick={handleLeaveChat} className='w-full flex items-center space-x-2 font-bold text-sm text-danger-600'>
-            <Icon src={require('@tabler/icons/logout.svg')} className='w-5 h-5 text-danger-600' />
+            <Icon src={require('@tabler/icons/logout.svg')} className='w-5 h-5' />
             <span>{intl.formatMessage(messages.leaveChat)}</span>
           </button>
         </Stack>