From b517732c055a8f64ab27db51869b9029a2de7068 Mon Sep 17 00:00:00 2001
From: Thomas Catinaud Taris <tcatinaud-taris@greenspector.com>
Date: Mon, 7 Oct 2024 15:46:19 +0200
Subject: [PATCH] feat: update act button color

---
 src/components/Edito.tsx          |  2 +-
 src/components/links/MainLink.tsx | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Edito.tsx b/src/components/Edito.tsx
index d0199296..2b862f66 100644
--- a/src/components/Edito.tsx
+++ b/src/components/Edito.tsx
@@ -57,7 +57,7 @@ const Edito = ({
             <MainLink
               label={linkLabel || t("edito.link")}
               href={link}
-              mode="light"
+              mode="base"
               isBlank={linkBlank}
               hasIcon={linkIcon}
             />
diff --git a/src/components/links/MainLink.tsx b/src/components/links/MainLink.tsx
index 4e390dba..a0b51d7f 100644
--- a/src/components/links/MainLink.tsx
+++ b/src/components/links/MainLink.tsx
@@ -6,7 +6,7 @@ type MainLinkProps = {
   className?: string;
   href: string;
   label: string;
-  mode?: "dark" | "light";
+  mode?: "dark" | "base" | "light";
   isBlank?: boolean;
   hasIcon?: boolean;
 };
@@ -27,8 +27,11 @@ const MainLink = ({
   return (
     <Link
       className={clsx(
-        "group inline-flex items-center gap-2 mt-6 lg:mt-12 p-4 lg:text-xl text-red1 font-secondary uppercase !no-underline rounded-xl tracking-widest border-2 border-red1 hover:bg-red1 hover:text-darkblue1 transition-colors ease-in-out duration-100",
-        mode === "dark" ? "bg-darkblue1" : "bg-transparent",
+        "group inline-flex items-center gap-2 mt-6 lg:mt-12 p-4 lg:text-xl text-red1 font-secondary uppercase !no-underline rounded-xl tracking-widest border-2 border-red1 transition-colors ease-in-out duration-100",
+        mode === "dark" &&
+          "bg-darkblue1 text-red1 hover:bg-red1 hover:text-darkblue1",
+        mode === "base" && "bg-red1 text-white hover:bg-darkblue1",
+        mode === "light" && "text-red1 hover:bg-red1 hover:text-darkblue1",
         className,
       )}
       href={href}
@@ -66,7 +69,12 @@ const MainLink = ({
         <svg
           xmlns="http://www.w3.org/2000/svg"
           height="16"
-          className="inline-block ml-2 align-baseline fill-red1 group-hover:fill-darkblue1"
+          className={clsx(
+            "inline-block ml-2 align-baseline",
+            mode === "base"
+              ? "fill-white"
+              : "fill-red1 group-hover:fill-darkblue1",
+          )}
           viewBox="0 -960 960 960"
           width="16"
         >