From c153a4ff423d6f5ab9ad753630ec0253a2dbe9ce Mon Sep 17 00:00:00 2001
From: Charles Le Maux <charles.le-maux@epitech.eu>
Date: Fri, 27 Sep 2024 20:00:48 +0200
Subject: [PATCH] [~] Because animating is fun.

---
 package-lock.json                                | 7 +++++++
 package.json                                     | 1 +
 src/components/serverCards/DefaultServerCard.jsx | 5 +++--
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ce0d535..2591f35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@testing-library/react": "^16.0.0",
         "@types/jest": "^29.5.12",
         "@types/node": "^20.14.9",
+        "animate.css": "^4.1.1",
         "firebase": "^10.12.2",
         "jest": "^29.7.0",
         "prop-types": "^15.8.1",
@@ -4038,6 +4039,12 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
diff --git a/package.json b/package.json
index 2ed23ab..78847e1 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.9",
+    "animate.css": "^4.1.1",
     "firebase": "^10.12.2",
     "jest": "^29.7.0",
     "prop-types": "^15.8.1",
diff --git a/src/components/serverCards/DefaultServerCard.jsx b/src/components/serverCards/DefaultServerCard.jsx
index 224d5f5..a5de22b 100644
--- a/src/components/serverCards/DefaultServerCard.jsx
+++ b/src/components/serverCards/DefaultServerCard.jsx
@@ -5,6 +5,7 @@ import fabric from '../../assets/frameworks/fabric.png';
 import forge from '../../assets/frameworks/forge.png';
 import PropTypes from "prop-types";
 import { FaTrash } from 'react-icons/fa';
+import 'animate.css/animate.min.css';
 
 const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick, countPlayers, maxPlayers, favoriteServer }) => {
 
@@ -50,8 +51,8 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
 
   return (
     <Link 
-      to={`/server/${name}/options`} 
-      className={favoriteServer ? styles.favoriteserverCard : styles.serverCard}
+      to={`/server/${name}/options`}
+      className={`${favoriteServer ? styles.favoriteserverCard : styles.serverCard} animate__animated animate__zoomInDown`}
       state={{ status }}>
       <div className={styles.header}>
         <div className={styles.serverInfo}>