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 ? (
+
+ ) : (
+
+ )}
+