From 1b48fa256ece4cd92e0da0820ce27229544dcc4a Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 5 Sep 2024 17:42:19 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20get=20rid=20of?=
 =?UTF-8?q?=20the=20ListItemActionButton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use the primitive Button component, avoid maintaining two button
components.
---
 .../Participants/HandRaisedListItem.tsx       | 11 ++++--
 .../Participants/ListItemActionButton.tsx     | 39 -------------------
 .../Participants/ParticipantListItem.tsx      |  8 ++--
 3 files changed, 12 insertions(+), 46 deletions(-)
 delete mode 100644 src/frontend/src/features/rooms/livekit/components/controls/Participants/ListItemActionButton.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx
index 0571d066..d932c1c3 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx
@@ -8,8 +8,8 @@ import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
 import { Participant } from 'livekit-client'
 import { isLocal } from '@/utils/livekit'
 import { RiHand } from '@remixicon/react'
-import { ListItemActionButton } from '@/features/rooms/livekit/components/controls/Participants/ListItemActionButton'
 import { useLowerHandParticipant } from '@/features/rooms/livekit/api/lowerHandParticipant.ts'
+import { Button } from '@/primitives'
 
 type HandRaisedListItemProps = {
   participant: Participant
@@ -67,12 +67,15 @@ export const HandRaisedListItem = ({
           )}
         </Text>
       </HStack>
-      <ListItemActionButton
+      <Button
+        square
+        invisible
+        size="sm"
         onPress={() => lowerHandParticipant(participant)}
         tooltip={t('participants.lowerParticipantHand', { name })}
       >
-        <RiHand color="gray" />
-      </ListItemActionButton>
+        <RiHand />
+      </Button>
     </HStack>
   )
 }
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
deleted file mode 100644
index aa885a42..00000000
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ListItemActionButton.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-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 (
-    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-      <StyledButton {...props}>{children}</StyledButton>
-    </TooltipWrapper>
-  )
-}
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 3dfa7a82..9e2ceace 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
@@ -17,7 +17,6 @@ import { RiMicOffLine } from '@remixicon/react'
 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,
@@ -66,7 +65,10 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
 
   return (
     <>
-      <ListItemActionButton
+      <Button
+        square
+        invisible
+        size="sm"
         tooltip={t('participants.muteParticipant', {
           name,
         })}
@@ -78,7 +80,7 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
         ) : (
           <ActiveSpeaker isSpeaking={isSpeaking} />
         )}
-      </ListItemActionButton>
+      </Button>
       <MuteAlertDialog
         isOpen={isAlertOpen}
         onSubmit={() =>