diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ListItemActionButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ListItemActionButton.tsx new file mode 100644 index 00000000..aa885a42 --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ListItemActionButton.tsx @@ -0,0 +1,39 @@ +import { styled } from '@/styled-system/jsx' +import { + Button as RACButton, + ButtonProps as RACButtonsProps, +} from 'react-aria-components' +import { + TooltipWrapper, + TooltipWrapperProps, +} from '@/primitives/TooltipWrapper' + +const StyledButton = styled(RACButton, { + base: { + padding: '10px', + minWidth: '24px', + minHeight: '24px', + borderRadius: '50%', + backgroundColor: 'transparent', + transition: 'background 200ms', + '&[data-hovered]': { + backgroundColor: '#f5f5f5', + }, + '&[data-focused]': { + backgroundColor: '#f5f5f5', + }, + }, +}) + +export const ListItemActionButton = ({ + tooltip, + tooltipType = 'instant', + children, + ...props +}: RACButtonsProps & TooltipWrapperProps) => { + return ( + + {children} + + ) +} diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx index f0f88fe8..3dfa7a82 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx @@ -7,7 +7,6 @@ import { Avatar } from '@/components/Avatar' import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor' import { Participant, Track } from 'livekit-client' import { isLocal } from '@/utils/livekit' -import { Button as RACButton } from 'react-aria-components' import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker' import { useIsSpeaking, @@ -15,10 +14,10 @@ import { } from '@livekit/components-react' import Source = Track.Source import { RiMicOffLine } from '@remixicon/react' -import { TooltipWrapper } from '@/primitives/TooltipWrapper.tsx' import { Button, Dialog, P } from '@/primitives' import { useState } from 'react' import { useMuteParticipant } from '@/features/rooms/livekit/api/muteParticipant' +import { ListItemActionButton } from '@/features/rooms/livekit/components/controls/Participants/ListItemActionButton' const MuteAlertDialog = ({ isOpen, @@ -67,37 +66,19 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => { return ( <> - !isMuted && setIsAlertOpen(true)} > - !isMuted && setIsAlertOpen(true)} - > - {isMuted ? ( - - ) : ( - - )} - - + {isMuted ? ( + + ) : ( + + )} +