feat: add animation for button card (#106)

incubateur-ademe · Nov 18, 2024 · 3bb2143 · 3bb2143
1 parent 1708731
commit 3bb2143
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/app/simulation/resultat/Resultat.tsx b/src/app/simulation/resultat/Resultat.tsx
@@ -160,7 +160,7 @@ export const Resultat = ({
             <div key={solution.id}>
               <Link
                 href={`/simulation/resultat/${solution.id}?${searchParams.toString()}`}
-                className="block h-full focus:outline-none focus:ring-2 focus:ring-blue-500 transition-transform motion-reduce:transition-none motion-reduce:hover:transform-none duration-300 hover:scale-103 focus-within:scale-103 active:scale-103 rounded-lg"
+                className="group block h-full rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-transform motion-reduce:transition-none motion-reduce:hover:transform-none duration-300 hover:scale-103 focus-within:scale-103 active:scale-103"
                 onClick={() => {
                   push(["trackEvent", matomoCategory.resultats, "Clic Découvrir", "Découvrir"]);
                 }}

diff --git a/src/app/simulation/resultat/SolutionCard.tsx b/src/app/simulation/resultat/SolutionCard.tsx
@@ -54,7 +54,7 @@ export const SolutionCard = ({ solution, informationBatiment, gestes, marker }:
       }
       footer={
         <>
-          <div className="flex gap-2 justify-between items-center pb-2 mt-8 border-b-2 border-t-0 border-x-0 border-solid border-[#304436] hover:!border-[#80b990] hover:!text-[#80b990] active:!text-[#92e3a9] shadow-none px-0 font-bold">
+          <div className="group-hover:scale-105 transition-transform motion-reduce:transition-none motion-reduce:hover:transform-none duration-300 flex gap-2 justify-between items-center pb-2 mt-8 border-b-2 border-t-0 border-x-0 border-solid border-[#304436] hover:!border-[#80b990] hover:!text-[#80b990] active:!text-[#92e3a9] shadow-none px-0 font-bold">
             <div className="w-4 h-4">
               <PlusIcon />
             </div>