From 6bae81a7586773a740ba3d8880cfed364d4c56b9 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Thu, 8 Dec 2022 14:42:03 -0500
Subject: [PATCH] Reduce size of ellipsis icon

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

diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index 72584e2df..6099955e7 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/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>
           )}
 
diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx
index 9de6d5c2d..65629ce14 100644
--- a/app/soapbox/features/chats/components/chat-list.tsx
+++ b/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,
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 1f6fd6adb..dcb9d61d0 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/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>
             )}