Fix hover buttons

opengento · Feb 5, 2025 · 34ce2be · 34ce2be
1 parent 8d77b43
commit 34ce2be
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 13 deletions.
diff --git a/public/locales/fr/speakers.json b/public/locales/fr/speakers.json
@@ -85,7 +85,7 @@
         "end": "10h30",
         "tags": ["Ouverture", "Business", "Expertise"],
         "speakers": [1],
-        "eventUrl": null
+        "eventUrl": "/TETS"
       },
       {
         "id": 2,

diff --git a/src/components/ButtonLink/ButtonLink.tsx b/src/components/ButtonLink/ButtonLink.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
-import React, {ReactNode} from "react";
+import { ReactNode } from "react";
 import classNames from "classnames";
-import {ButtonLinkProps} from "@/components/ButtonLink/ButtonLinkProps";
+import { ButtonLinkProps } from "@/components/ButtonLink/ButtonLinkProps";
 
 const ButtonLink = ({
   variant,
@@ -17,13 +17,15 @@ const ButtonLink = ({
     primary: "text-black bg-[url(/images/background.svg)] bg-cover bg-center hover:bg-[left_75%]",
     secondary: "bg-white text-primary hover:bg-primary hover:text-white",
     "secondary-invert": "bg-primary text-white hover:bg-white hover:text-primary",
+    "secondary-invert-w-border": "bg-primary text-white border border-white hover:border-primary hover:bg-white hover:text-primary",
     "soft-pink": "bg-purple-500 text-white hover:bg-white hover:text-purple-500",
   };
 
   const iconClass = {
     primary: "bg-none text-black",
     secondary: "bg-primary text-white group-hover:bg-white group-hover:text-primary",
     "secondary-invert": "bg-white text-primary group-hover:bg-primary group-hover:text-white",
+    "secondary-invert-w-border": "bg-white text-primary group-hover:bg-primary group-hover:text-white",
     "soft-pink": "bg-purple-500 text-white group-hover:bg-white group-hover:text-purple-500",
   };
 
@@ -38,8 +40,8 @@ const ButtonLink = ({
   const renderContent = (content: ReactNode) => {
     const iconClassName: string = "inline-block p-1 rounded-full duration-300";
     const contentClassName: string = variant === "primary"
-      ? "flex-1 bg-none bg-cover bg-center bg-clip-text group-hover:bg-gradient-to-r group-hover:from-pink-500 group-hover:to-violet-500 group-hover:text-transparent"
-      : "flex-1";
+      ? "flex-1 inline-block group-hover:text-transparent group-hover:bg-gradient-to-r from-indigo-500 via-purple-500 to-red-500 bg-clip-text"
+      : "flex-1 inline-block";
 
     if (iconPosition === "left") {
       return (

diff --git a/src/components/ButtonLink/ButtonLinkProps.ts b/src/components/ButtonLink/ButtonLinkProps.ts
@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 
 export type ButtonLinkProps = {
-  variant: "primary" | "secondary" | "secondary-invert" | "soft-pink",
+  variant: "primary" | "secondary" | "secondary-invert" | "secondary-invert-w-border" | "soft-pink",
   href: string,
   target?: string,
   rel?: string,

diff --git a/src/components/Place/Place.tsx b/src/components/Place/Place.tsx
@@ -28,7 +28,7 @@ const Place = ({ place }: { place: PlaceProps }) => {
           {place.description}
         </Typography>
         <ButtonLink
-          variant="secondary-invert"
+          variant="secondary-invert-w-border"
           href={place.url}
           iconPosition="right"
           icon={<IoIosArrowForward />}

diff --git a/src/components/Program/ProgramTile.tsx b/src/components/Program/ProgramTile.tsx
@@ -31,7 +31,7 @@ const ProgramTile = ({
       {!!session.eventUrl && (
         <div className="mx-auto">
           <ButtonLink
-            variant="secondary-invert"
+            variant="secondary-invert-w-border"
             href={session.eventUrl}
             iconPosition="left"
             icon={<PiCalendarPlus />}

diff --git a/src/components/Speakers/Session/Session.tsx b/src/components/Speakers/Session/Session.tsx
@@ -66,7 +66,7 @@ const Session = ({
       {showAddToCalendar && !!session.eventUrl && (
         <div className="flex flex-col justify-end items-start md:items-end w-full">
           <ButtonLink
-            variant="secondary-invert"
+            variant="secondary-invert-w-border"
             href={session.eventUrl}
             iconPosition="left"
             icon={<PiCalendarPlus />}

diff --git a/src/components/Speakers/Session/SessionPopInContent.tsx b/src/components/Speakers/Session/SessionPopInContent.tsx
@@ -26,7 +26,7 @@ const SessionPopInContent = ({ session }: { session: SessionProps }) => {
       {!!session.eventUrl && (
         <div className="mx-auto">
           <ButtonLink
-            variant="secondary-invert"
+            variant="secondary-invert-w-border"
             href={session.eventUrl}
             iconPosition="left"
             icon={<PiCalendarPlus />}

diff --git a/src/components/SponsorList/SponsorListByType.tsx b/src/components/SponsorList/SponsorListByType.tsx
@@ -91,7 +91,7 @@ const SponsorListByType = ({ items }: { items: SponsorProps[] }) => {
                   {sponsor.description ? sponsor.description : sponsor.caption}
                 </Typography>
                 <ButtonLink
-                  variant="secondary-invert"
+                  variant="secondary-invert-w-border"
                   href={sponsor.url}
                   target="_blank"
                   rel="noopener"

diff --git a/src/layouts/Push/Push.tsx b/src/layouts/Push/Push.tsx
@@ -25,15 +25,15 @@ const Push = () => {
           </Typography>
           <div className="flex flex-row flex-wrap gap-8">
             <ButtonLink
-              variant="secondary-invert"
+              variant="secondary-invert-w-border"
               href={t('common:programUrl')}
               iconPosition="right"
               icon={<IoIosArrowForward />}
             >
               {t('common:programLabel')}
             </ButtonLink>
             <ButtonLink
-              variant="secondary-invert"
+              variant="secondary-invert-w-border"
               href={t('common:ticketingUrl')}
               target="_blank"
               rel="noopener"