From 60b7a35ed1a3485510f2ccce64d9653d0572f113 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 2 Dec 2024 17:32:09 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20replace=20grayscale=20?=
 =?UTF-8?q?button=20with=20a=20new=20variant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Button was looking disabled. Use an appropriate contrast.
---
 .../src/features/home/components/IntroSlider.tsx       |  4 ++--
 .../src/features/rooms/components/InviteDialog.tsx     |  3 ++-
 .../features/rooms/livekit/components/SidePanel.tsx    |  2 +-
 .../features/rooms/livekit/components/chat/Input.tsx   |  3 ++-
 .../features/settings/components/SettingsButton.tsx    |  2 +-
 src/frontend/src/layout/Header.tsx                     |  2 +-
 src/frontend/src/primitives/Dialog.tsx                 |  2 +-
 src/frontend/src/primitives/buttonRecipe.ts            | 10 ++++++++++
 8 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/features/home/components/IntroSlider.tsx b/src/frontend/src/features/home/components/IntroSlider.tsx
index 358f4c32..8c0373eb 100644
--- a/src/frontend/src/features/home/components/IntroSlider.tsx
+++ b/src/frontend/src/features/home/components/IntroSlider.tsx
@@ -185,7 +185,7 @@ export const IntroSlider = () => {
         <ButtonContainer>
           <ButtonVerticalCenter>
             <Button
-              variant="greyscale"
+              variant="secondaryText"
               square
               aria-label={t('previous.label')}
               tooltip={t('previous.tooltip')}
@@ -221,7 +221,7 @@ export const IntroSlider = () => {
         <ButtonContainer>
           <ButtonVerticalCenter>
             <Button
-              variant="greyscale"
+              variant="secondaryText"
               square
               aria-label={t('next.label')}
               tooltip={t('next.tooltip')}
diff --git a/src/frontend/src/features/rooms/components/InviteDialog.tsx b/src/frontend/src/features/rooms/components/InviteDialog.tsx
index e4f474c8..3cb83aa4 100644
--- a/src/frontend/src/features/rooms/components/InviteDialog.tsx
+++ b/src/frontend/src/features/rooms/components/InviteDialog.tsx
@@ -63,7 +63,8 @@ export const InviteDialog = ({
           </Heading>
           <Div position="absolute" top="5" right="5">
             <Button
-              variant="greyscale"
+              invisible
+              variant="tertiaryText"
               size="xs"
               onPress={() => {
                 dialogProps.onClose?.()
diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
index 8e91b17d..e375f9de 100644
--- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
@@ -68,7 +68,7 @@ const StyledSidePanel = ({
     >
       <Button
         invisible
-        variant="greyscale"
+        variant="tertiaryText"
         size="xs"
         onPress={onClose}
         aria-label={closeButtonTooltip}
diff --git a/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx b/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx
index df744547..b04ca1c8 100644
--- a/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx
@@ -106,7 +106,8 @@ export const ChatInput = ({
       />
       <Button
         square
-        variant="secondaryText"
+        invisible
+        variant="tertiaryText"
         size="sm"
         onPress={handleSubmit}
         isDisabled={isDisabled}
diff --git a/src/frontend/src/features/settings/components/SettingsButton.tsx b/src/frontend/src/features/settings/components/SettingsButton.tsx
index f955e327..135048c1 100644
--- a/src/frontend/src/features/settings/components/SettingsButton.tsx
+++ b/src/frontend/src/features/settings/components/SettingsButton.tsx
@@ -10,7 +10,7 @@ export const SettingsButton = () => {
     <DialogTrigger>
       <Button
         square
-        variant="greyscale"
+        variant="secondaryText"
         aria-label={t('settingsButtonLabel')}
         tooltip={t('settingsButtonLabel')}
       >
diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index a2889e32..4c5ec89e 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -66,7 +66,7 @@ export const Header = () => {
                 <Menu>
                   <Button
                     size="sm"
-                    variant="greyscale"
+                    variant="secondaryText"
                     tooltip={t('loggedInUserTooltip')}
                     tooltipType="delayed"
                   >
diff --git a/src/frontend/src/primitives/Dialog.tsx b/src/frontend/src/primitives/Dialog.tsx
index 4385d518..fba47e7e 100644
--- a/src/frontend/src/primitives/Dialog.tsx
+++ b/src/frontend/src/primitives/Dialog.tsx
@@ -112,7 +112,7 @@ export const Dialog = ({
                     {!isAlert && (
                       <Div position="absolute" top="5" right="5">
                         <Button
-                          variant="greyscale"
+                          variant="tertiaryText"
                           invisible
                           size="xs"
                           onPress={() => close()}
diff --git a/src/frontend/src/primitives/buttonRecipe.ts b/src/frontend/src/primitives/buttonRecipe.ts
index 0452fae0..c9241f92 100644
--- a/src/frontend/src/primitives/buttonRecipe.ts
+++ b/src/frontend/src/primitives/buttonRecipe.ts
@@ -87,6 +87,16 @@ export const buttonRecipe = cva({
           backgroundColor: 'primary.300',
         },
       },
+      tertiaryText: {
+        backgroundColor: 'transparent',
+        color: 'primary.900',
+        '&[data-hovered]': {
+          backgroundColor: 'primary.300',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'primary.300',
+        },
+      },
       primaryDark: {
         backgroundColor: 'primaryDark.100',
         color: 'white',