commit

src/assets/Game.jsx

@@ -21,8 +21,8 @@ export default function Game({game, token, user}) {
                 <h1 className='game-title'>{game.title}{game.subtitle ? `, ${game.subtitle}` : null}</h1>
                 <div className="tags">
                     {game.type == "extension" ? <div className="tag extension"><FontAwesomeIcon icon="fa-solid fa-plus" />  Extension</div> : <div className="tag basegame"><FontAwesomeIcon icon="fa-solid fa-puzzle-piece" /> Jeu de base</div>}
-                    <div className="tag players"><FontAwesomeIcon icon="fa-solid fa-user-group" /> {game.players}</div>
                     <div className="tag duration"><FontAwesomeIcon icon="fa-regular fa-clock" /> {game.duration}</div>
+                    <div className="tag players"><FontAwesomeIcon icon="fa-solid fa-user-group" /> {game.players}</div>
                     <div className="tag ages"><FontAwesomeIcon icon="fa-solid fa-child" /> {game.ages}</div>
                 </div>
                 <div className='game-bottom'>

src/assets/UserVerfication.jsx

@@ -31,7 +31,11 @@ export default function UserVerfication({token}) {
     }
 
     else if (users.length === 0) {
-        return <div className='no-users'>Aucun utilisateur à vérifier</div>
+        return (
+            <div className='users'>
+                <div className='no-users'>Aucun utilisateur à vérifier</div>
+            </div>
+        )
     }
 
     else {
@@ -40,11 +44,10 @@ export default function UserVerfication({token}) {
                 {users.map((user) => {
                     return (
                         <div className='user' key={user.id}>
-                            <p>{user.username}</p>
-                            <p>{user.name}</p>
-                            <p>{user.lastname}</p>
-                            <p>{user.id}</p>
-                            <button className='verify-button' onClick={() => {verifyUser(user.username)}}>Vérifier</button>
+                            <p className='user-info'>Nom d'utilisateur : {user.username}</p>
+                            <p className='user-info'>Prénom : {user.name}</p>
+                            <p className='user-info'>Nom : {user.lastname}</p>
+                            <button className='button' onClick={() => {verifyUser(user.username)}}>Vérifier</button>
                         </div>
                     )
                 })}

src/pages/Admin.css

@@ -0,0 +1,49 @@
+.navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+}
+
+.users {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 15px;
+    gap: 20px;
+}
+
+.no-users {
+    background-color: #d66666;
+    padding: 7px 10px;
+    border-radius: 15px;
+    margin: 0;
+}
+
+.user {
+    padding: 20px;
+    background-color: white;
+    display: flex;
+    border-radius: 60px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+    justify-content: space-between;
+    align-items: center;
+    min-width: 600px;
+}
+
+.user-info {
+    background-color: #b4d666;
+    padding: 7px 10px;
+    border-radius: 15px;
+    margin: 0;
+}
+
+@media only screen and (max-width: 664px) {
+    .user {
+        flex-wrap: wrap;
+        padding: 10px;
+        min-width: 90vw;
+        border-radius: 25px;
+    }
+}

src/pages/Admin.jsx

@@ -3,6 +3,8 @@ import { useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import axios from "axios";
 
+import './Admin.css';
+
 import UserVerfication from '../assets/UserVerfication';
 
 export default function Admin() {

src/pages/Home.css

@@ -53,6 +53,7 @@ body {
 .games {
     display: flex;
     flex-direction: column;
+    align-items: center;
     gap: 20px;
 }
 
@@ -60,10 +61,10 @@ body {
     padding: 30px;
     background-color: white;
     display: flex;
-    align-items: start;
     border-radius: 60px;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
     justify-content: space-between;
+    width: 900px;
 }
 
 .game-image {
@@ -77,8 +78,12 @@ body {
     display: flex;
     flex-direction: column;
     gap: 15px;
-    width: 55vw;
-    margin-right: 10vw;
+    width: 100%;
+    margin: 15px;
+}
+
+.game-title {
+    margin: 0;
 }
 
 .game-bottom {
@@ -160,10 +165,11 @@ body {
 
 @media only screen and (max-width: 664px) {
     .games {
-        margin: 10px;
+        margin: 15px;
     }
 
     .game {
+        width: 100%;
         padding: 10px;
         border-radius: 35px;
     }
@@ -172,20 +178,27 @@ body {
         width: 75px;
     }
 
-    .game-right {
-        width: 55vw;
-        margin-right: 10vw;
-    }
-
     .game-title {
         font-size: 17px;
     }
 
     .tags{
-        flex-direction: column;
+        flex-wrap: wrap;
+    }
+
+    .tag {
+        font-size: 13px;
     }
 
     .helpers {
-        flex-direction: column;
+        flex-wrap: wrap;
+    }
+
+    .helper {
+        font-size: 13px;
+    }
+
+    .no-helper {
+        font-size: 13px;
     }
 }