Improve UX of chat messages

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
         })
       }
     >

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;

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>