From 414d62c5554d81d8432225026319842d820b73cb Mon Sep 17 00:00:00 2001
From: Lukian LEIZOUR <lulul7018@gmail.com>
Date: Thu, 6 Jun 2024 18:15:57 +0200
Subject: [PATCH] commit

---
 src/assets/Game.jsx            |  2 +-
 src/assets/UserVerfication.jsx | 15 ++++++-----
 src/pages/Admin.css            | 49 ++++++++++++++++++++++++++++++++++
 src/pages/Admin.jsx            |  2 ++
 src/pages/Home.css             | 35 ++++++++++++++++--------
 5 files changed, 85 insertions(+), 18 deletions(-)
 create mode 100644 src/pages/Admin.css

diff --git a/src/assets/Game.jsx b/src/assets/Game.jsx
index 0f10da4..2282f5e 100644
--- a/src/assets/Game.jsx
+++ b/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'>
diff --git a/src/assets/UserVerfication.jsx b/src/assets/UserVerfication.jsx
index 2f9b411..75d0d42 100644
--- a/src/assets/UserVerfication.jsx
+++ b/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>
                     )
                 })}
diff --git a/src/pages/Admin.css b/src/pages/Admin.css
new file mode 100644
index 0000000..ea1fa01
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/Admin.jsx b/src/pages/Admin.jsx
index 2673410..40aa07f 100644
--- a/src/pages/Admin.jsx
+++ b/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() {
diff --git a/src/pages/Home.css b/src/pages/Home.css
index 86a1f70..f874b2a 100644
--- a/src/pages/Home.css
+++ b/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;
     }
 }
\ No newline at end of file