Reduce size of ellipsis icon

This commit is contained in:
Chewbacca 2022-12-08 14:42:03 -05:00 committed by Alex Gleason
parent 9657598d33
commit 6bae81a758
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 19 additions and 15 deletions

View file

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

View file

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

View file

@ -8,7 +8,7 @@ import { Components, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import { initReport } from 'soapbox/actions/reports'; 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 DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
import emojify from 'soapbox/features/emoji/emoji'; import emojify from 'soapbox/features/emoji/emoji';
import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message'; 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' data-testid='chat-message-menu'
> >
<DropdownMenuContainer <DropdownMenuContainer items={menu}>
items={menu} <IconButton
src={require('@tabler/icons/dots.svg')} src={require('@tabler/icons/dots.svg')}
title={intl.formatMessage(messages.more)} 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> </div>
)} )}