fix responsive

src/main.css

@@ -42,19 +42,19 @@ body {
 
 @media (min-width: 1600px) {
   html {
-    font-size: 17px;
+    font-size: 14px;
   }
 }
 
 @media (min-width: 1800px) {
   html {
-    font-size: 19px;
+    font-size: 15px;
   }
 }
 
 @media (min-width: 2000px) {
   html {
-    font-size: 20px;
+    font-size: 17px;
   }
 }
 

src/pages/CreateServer/CreateServer.module.scss

@@ -26,7 +26,6 @@
 }
 
 .GamesContainer {
-  margin-top: 2.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -90,20 +89,23 @@ img {
   .GamesContainer {
     flex-direction: column;
     flex-wrap: row;
-    margin-top: 40rem;
     height: 100%;
-
+    margin-top: 45rem;
   }
 
   .GameCard {
-    margin: 1rem;
+    margin: 0rem 0rem .5rem 0rem;
     width: 20rem;
     padding: 2.5rem;
   }
-}
 
-@media (max-width: 750px) {
+  .GamesChoice {
-  .GamesContainer {
+    margin-top: 35rem;
-    margin-top: 50rem;
   }
+
+  .title {
+    margin-top: 2rem;
+  }
+  
+  
 }

src/pages/CreateServer/modpack/modpack.jsx

@@ -10,16 +10,13 @@ const Modpack = ({ user }) => {
   const [modpacks, setModpacks] = useState([]);
   const [selectedModpackIndex, setSelectedModpackIndex] = useState(null); 
   const [error, setError] = useState('');
-  const [serverShortName, setServerShortName] = useState(''); 
 
   useEffect(() => {
     const fetchModpacks = async () => {
       try {
         const response = await serviiApi.fetchModpacks();
         if (response.return_code === 200) {
-          const fetchedModpacks = response.message;
+          setModpacks(response.message);
-
-          setModpacks(fetchedModpacks);
         } else {
           setError(response.message);
         }
@@ -36,22 +33,23 @@ const Modpack = ({ user }) => {
     setSelectedModpackIndex(index); 
   };
 
-
   const handleCancel = () => {
-    setSelectedModpackIndex(null); 
+    console.log("Annuler cliqué, index sélectionné avant :", selectedModpackIndex);
-    console.log("dffdff");
+    setSelectedModpackIndex(null); // Remise à zéro de l'index sélectionné
   };
   
-
   const handleCreate = async () => {
+    if (selectedModpackIndex !== null) {
+      const selectedModpack = modpacks[selectedModpackIndex]; 
+      const { short_name, framework } = selectedModpack; 
+  
       try {
-      const framework =  selectedModpackIndex.framework;        
+        await serviiApi.serverCreate(short_name, short_name, framework); 
-      await serviiApi.serverCreate(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework);
-      console.log(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework);
         navigate('/Dashboard'); 
       } catch (error) {
         console.error('Error creating server:', error); 
       }
+    }
   };
 
   return (
@@ -67,7 +65,7 @@ const Modpack = ({ user }) => {
         {error ? <h2>{error}</h2> : (
           modpacks.map((modpack, index) => (
             <div 
-              key={index} 
+              key={`modpack-${index}`}
               className={`${styles.modpackCard} ${selectedModpackIndex === index ? styles.selected : ''}`} 
               onClick={() => handleModpackClick(index)}
             >
@@ -84,13 +82,11 @@ const Modpack = ({ user }) => {
                 <span>Version MC: {modpack.mcVersion}</span>
                 <span>Version Modpack: {modpack.version}</span>
               </div>
-
+              {selectedModpackIndex === index && ( // Condition modifiée
-              {selectedModpackIndex === index && (
                 <div className={styles.overlay}>
                   <div className={styles.shortNamtitle}>Créer le serveur {modpack.short_name} ?</div>
                   <button className={styles.createButton} onClick={handleCreate}>Créer</button>
                   <button className={styles.cancelButton} onClick={handleCancel}>Annuler</button>
-                  
                 </div>
               )}
             </div>

src/pages/CreateServer/modpack/modpack.module.scss

@@ -3,17 +3,17 @@
   flex-direction: column;
   align-items: center;
   padding: 6rem;
-  }
+}
 
-  .modpackGrid {
+.modpackGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
   gap: 2rem;
   width: 100%;
   padding: 1.5rem;
-  }
+}
 
-  .modpackCard {
+.modpackCard {
   background-color: #f9f9f9;
   border: 1px solid #ddd;
   border-radius: .7rem;
@@ -21,7 +21,7 @@
   padding: 2rem;
   width: 30rem;
   text-align: center;
-    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
+  transition: all 0.3s ease; /* Ajout de la transition pour l'état sélectionné/non-sélectionné */
   cursor: pointer;
   position: relative;
 
@@ -30,14 +30,14 @@
   }
 
   .content {
-      transition: filter 0.2s ease-in-out;
+    transition: filter 0.3s ease; /* Transition pour le flou */
+    filter: none; /* Par défaut, pas de flou */
   }
 
   &.selected .content {
-        filter: blur(.8rem); 
+    filter: blur(0.8rem); /* Appliquer le flou si sélectionné */
   }
 
-    
   h3 {
     margin: .8rem 0;
     font-size: 1.5em;
@@ -151,5 +151,4 @@
       margin-bottom: 1rem;
     }
   }
-  }
+}
-