From 24242ef01a9bfeb673c3a7d9fa70a4480dc31ccb Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 9 Sep 2024 18:33:32 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20introduce=20a=20new=20?=
 =?UTF-8?q?button's=20variant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

'text' is reserved for discreet buttons. Inspired by Gmeet,
styles need to be refined. WIP, but mergeable as it is.
---
 .../controls/Participants/LowerAllHandsButton.tsx           | 2 +-
 .../controls/Participants/ParticipantListItem.tsx           | 4 ++--
 src/frontend/src/primitives/buttonRecipe.ts                 | 6 ++++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx
index 79a4ba1a..640a1fed 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx
@@ -17,7 +17,7 @@ export const LowerAllHandsButton = ({
       aria-label={t('participants.lowerParticipantsHand')}
       size="sm"
       fullWidth
-      invisible
+      variant="text"
       onPress={() => lowerHandParticipants(participants)}
     >
       {t('participants.lowerParticipantsHand')}
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 0d9471fa..9d815f41 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
@@ -39,10 +39,10 @@ const MuteAlertDialog = ({
     <Dialog isOpen={isOpen} role="alertdialog">
       <P>{t('participants.muteParticipantAlert.description', { name })}</P>
       <HStack gap={1}>
-        <Button size="sm" invisible onPress={onClose}>
+        <Button variant="text" size="sm" onPress={onClose}>
           {t('participants.muteParticipantAlert.cancel')}
         </Button>
-        <Button size="sm" invisible onPress={onSubmit}>
+        <Button variant="text" size="sm" onPress={onSubmit}>
           {t('participants.muteParticipantAlert.confirm')}
         </Button>
       </HStack>
diff --git a/src/frontend/src/primitives/buttonRecipe.ts b/src/frontend/src/primitives/buttonRecipe.ts
index 12ff72ef..628d8206 100644
--- a/src/frontend/src/primitives/buttonRecipe.ts
+++ b/src/frontend/src/primitives/buttonRecipe.ts
@@ -73,6 +73,12 @@ export const buttonRecipe = cva({
           backgroundColor: 'success.subtle!',
         },
       },
+      text: {
+        color: 'primary',
+        '&[data-hovered]': {
+          background: 'gray.100 !important',
+        },
+      },
       danger: {
         colorPalette: 'danger',
         borderColor: 'danger.600',