Reduce size of ellipsis icon

app/soapbox/features/chats/components/chat-list-item.tsx

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
 import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
 import { useChatContext } from 'soapbox/contexts/chat-context';
@@ -115,12 +115,14 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
         <HStack alignItems='center' space={2}>
           {features.chatsDelete && (
             <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')}
-                title='Settings'
-              />
+              <DropdownMenuContainer items={menu}>
+                <IconButton
+                  src={require('@tabler/icons/dots.svg')}
+                  title='Settings'
+                  className='text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
+                  iconClassName='w-4 h-4'
+                />
+              </DropdownMenuContainer>
             </div>
           )}
 

app/soapbox/features/chats/components/chat-list.tsx

@@ -63,8 +63,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
             <div className='px-2'>
               <ChatListItem chat={chat} onClick={onClickChat} />
             </div>
-          )
-          }
+          )}
           components={{
             ScrollSeekPlaceholder: () => <PlaceholderChat />,
             Footer: () => hasNextPage ? <Spinner withText={false} /> : null,

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -8,7 +8,7 @@ import { Components, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import { openModal } from 'soapbox/actions/modals';
 import { initReport } from 'soapbox/actions/reports';
-import { Avatar, Button, Divider, HStack, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, Button, Divider, HStack, Icon, IconButton, Spinner, Stack, Text } from 'soapbox/components/ui';
 import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
 import emojify from 'soapbox/features/emoji/emoji';
 import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message';
@@ -286,11 +286,14 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                 })}
                 data-testid='chat-message-menu'
               >
-                <DropdownMenuContainer
-                  items={menu}
-                  src={require('@tabler/icons/dots.svg')}
-                  title={intl.formatMessage(messages.more)}
-                />
+                <DropdownMenuContainer items={menu}>
+                  <IconButton
+                    src={require('@tabler/icons/dots.svg')}
+                    title={intl.formatMessage(messages.more)}
+                    className='text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
+                    iconClassName='w-4 h-4'
+                  />
+                </DropdownMenuContainer>
               </div>
             )}