Merge pull request #44 from WildCodeSchool-2023-09/dev

Deploiement jeudi 08/02
WildCodeSchool-2023-09 · Feb 8, 2024 · f63d6b6 · f63d6b6
2 parents 62b2ad1 + df84df0
commit f63d6b6
Show file tree

Hide file tree

Showing 23 changed files with 314 additions and 69 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -5,7 +5,7 @@
     <link
       rel="icon"
       type="image/svg+xml"
-      href="./src/assets/W-removebg-preview.png"
+      href="./src/assets/icons8-user-70.png"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />

diff --git a/frontend/src/assets/icons8-admin-55.png b/frontend/src/assets/icons8-admin-55.png
diff --git a/frontend/src/assets/icons8-admin-57.png b/frontend/src/assets/icons8-admin-57.png
diff --git a/frontend/src/assets/icons8-user-70.png b/frontend/src/assets/icons8-user-70.png
diff --git a/frontend/src/components/AdminUsersTable.jsx b/frontend/src/components/AdminUsersTable.jsx
@@ -34,7 +34,7 @@ function AdminUsersTable({ search }) {
           <th>#</th>
           <th>User Name</th>
           <th>Email</th>
-          <th>#Edit</th>
+          <th>#Delete</th>
         </tr>
       </thead>
       <tbody>

diff --git a/frontend/src/components/ProfilPage/InfoProfil.jsx b/frontend/src/components/ProfilPage/InfoProfil.jsx
@@ -3,25 +3,21 @@ import PropTypes from "prop-types";
 
 function InfoProfil({ time, timePlayed, numberPlayed, numberWon }) {
   return (
-    <div className="infoGamerContainer">
+    <div className="gridContainer">
       <div className="menberSince">
         <h2>Menbre depuis : {time}</h2>
       </div>
-      <div className="bottomContainer">
-        <div className="leftinfo">
-          <p>Temps du jeu :</p>
-          <br />
-          <p>{timePlayed}</p>
-        </div>
-        <div className="rightinfos">
-          <p>
-            Partie :<span>{numberPlayed}</span>
-          </p>
-          <br />
-          <p>
-            Gagné :<span>{numberWon}</span>
-          </p>
-        </div>
+      <div className="leftinfos">
+        <p>Temps du jeu :</p>
+        <p>{timePlayed}</p>
+      </div>
+      <div className="rightinfos">
+        <p>
+          Partie :<span>{numberPlayed}</span>
+        </p>
+        <p>
+          Gagné :<span>{numberWon}</span>
+        </p>
       </div>
     </div>
   );

diff --git a/frontend/src/components/ProfilPage/ProfilBio.jsx b/frontend/src/components/ProfilPage/ProfilBio.jsx
@@ -3,15 +3,13 @@ import PropTypes from "prop-types";
 
 function ProfilBio({ img, username, bio }) {
   return (
-    <div className="profilbioContainer">
-      <h2>Profil</h2>
-      <div className="toprofilbioContainer">
-        <img src={img} alt="profil img" />
+    <div className="profilBioContainer">
+      <h2 className="titleProfil">Profil</h2>
+      <div className="topProfilBioContainer">
+        <img className="imageProfile" src={img} alt="profil img" width={40} />
         <h2>{username}</h2>
       </div>
-      <div className="bottomprofilbioContainer">
-        <textarea>{bio}</textarea>
-      </div>
+      <textarea className="textAreaBio">{bio}</textarea>
     </div>
   );
 }

diff --git a/frontend/src/components/ProfilPage/Rancking.jsx b/frontend/src/components/ProfilPage/Rancking.jsx
@@ -4,14 +4,13 @@ import PropTypes from "prop-types";
 function Rancking({ rang, trophy }) {
   return (
     <div className="ranckingContainer">
-      <div>
+      <div className="divisionRang">
         <h2>
           Division <span>{rang}</span>
         </h2>
       </div>
-      <hr />
-      <div>
-        <img src={trophy} width={105} alt="trophée" />
+      <div className="cup">
+        <img src={trophy} width={55} alt="trophée" />
       </div>
     </div>
   );

diff --git a/frontend/src/components/header/Header.jsx b/frontend/src/components/header/Header.jsx
@@ -7,10 +7,10 @@ import AdminButton from "../input/AdminButton";
 function Header() {
   return (
     <div className="headerContainer">
-      <img src={logo} alt="logo" width={50} />
-      <ButtonConected />
+      <img src={logo} alt="logo" width={50} style={{ marginLeft: "25px" }} />
       <InputProfil />
       <AdminButton />
+      <ButtonConected />
     </div>
   );
 }

diff --git a/frontend/src/components/input/AdminButton.jsx b/frontend/src/components/input/AdminButton.jsx
@@ -1,14 +1,15 @@
 import { useContext } from "react";
 import { Link } from "react-router-dom";
 import { AuthContext } from "../../../context/AuthContext";
+import Admin from "../../assets/icons8-admin-55.png";
 
 function AdminButton() {
   const { connected } = useContext(AuthContext);
 
   if (connected && connected.login && connected.login.role_id === 2) {
     return (
       <Link style={{ color: "white" }} className="buttonAdmin" to="/admin/user">
-        <p>Admin</p>
+        <img style={{ marginTop: "2px" }} src={Admin} alt="icone admin" />
       </Link>
     );
   }

diff --git a/frontend/src/components/input/InputProfil.jsx b/frontend/src/components/input/InputProfil.jsx
@@ -1,16 +1,20 @@
+import { useContext } from "react";
 import { Link } from "react-router-dom";
-import logo from "../../assets/icons8-user-32.png";
+import logo from "../../assets/icons8-user-70.png";
+import { AuthContext } from "../../../context/AuthContext";
 
 function InputProfil() {
-  return (
-    <Link to="/profil">
-      <button type="button">
+  const { connected, profil } = useContext(AuthContext);
+  if (connected && connected.login && profil) {
+    return (
+      <Link to="/profil">
         <span>
-          <img src={logo} alt="profilimage" />
+          <img style={{ marginTop: "7px" }} src={logo} alt="profilimage" />
         </span>
-      </button>
-    </Link>
-  );
+      </Link>
+    );
+  }
+  return "";
 }
 
 export default InputProfil;
diff --git a/frontend/src/components/profilContainer/Profile.jsx b/frontend/src/components/profilContainer/Profile.jsx
@@ -17,17 +17,19 @@ function ProfilContainer() {
             alt={profil.alt}
             width={40}
           />
-          <p>{connected.login.username}</p>
+          <p className="userName">{connected.login.username}</p>
         </div>
         <div className="profil-container">
-          <h3 className="division">
-            Division {division(connected.wonGames.won_count)}
-          </h3>
+          <div className="division">
+            <h3>Division {division(connected.wonGames.wonGames)}</h3>
+          </div>
           <div className="member">
-            <span>MEMBRE DEPUIS</span>
+            <p>MEMBRE DEPUIS</p>
             <p>{convertTime(profil.createdat)}</p>
+          </div>
+          <div className="cupColors">
             <img
-              src={cupColors(connected.wonGames.won_count)}
+              src={cupColors(connected.wonGames.wonGames)}
               alt="trophée expérience"
             />
           </div>

diff --git a/frontend/src/pages/ProfilPage.jsx b/frontend/src/pages/ProfilPage.jsx
@@ -8,26 +8,30 @@ import ProfilBio from "../components/ProfilPage/ProfilBio";
 import division from "../services/divisions";
 import cupColors from "../services/cupColors";
 import convertTime from "../services/convertTime";
+import Header from "../components/header/Header";
 
 function ProfilPage() {
   const { profil, connected } = useContext(AuthContext);
 
   if (connected && connected.login && connected.login.username && profil) {
     return (
       <div className="profilPageContainer">
-        <div className="ranckingContainerPage">
-          <Rancking
-            rang={division(connected.wonGames.won_count)}
-            trophy={cupColors(connected.wonGames.won_count)}
-          />
-        </div>
-        <div className="infoProfilContainer">
-          <InfoProfil
-            time={convertTime(profil.createdat)}
-            timePlayed={connected.timePerPLayer.time}
-            numberPlayed={connected.wonGames.totalGames}
-            numberWon={connected.wonGames.wonGames}
-          />
+        <Header />
+        <div className="ranckingInfoProfilContainer">
+          <div className="ranckingContainerPage">
+            <Rancking
+              rang={division(connected.wonGames.wonGames)}
+              trophy={cupColors(connected.wonGames.wonGames)}
+            />
+          </div>
+          <div className="infoProfilContainer">
+            <InfoProfil
+              time={convertTime(profil.createdat)}
+              timePlayed={connected.timePerPLayer.time}
+              numberPlayed={connected.wonGames.totalGames}
+              numberWon={connected.wonGames.wonGames}
+            />
+          </div>
         </div>
         <div>
           <ProfilBio

diff --git a/frontend/src/style/components/AdminUsersTable.scss b/frontend/src/style/components/AdminUsersTable.scss
@@ -2,6 +2,14 @@
   width: 60vw;
 }
 
+.title-table {
+  color: var(--text-color);
+}
+
+tbody {
+  color: var(--text-color);
+}
+
 th,
 td {
   padding-right: 4rem;

diff --git a/frontend/src/style/components/ButtonConnected.scss b/frontend/src/style/components/ButtonConnected.scss
@@ -8,6 +8,7 @@
   margin-bottom: 1rem;
   color: var(--text-color);
   cursor: pointer;
+  margin-right: 1rem;
 }
 
 .disconnectedButton {
@@ -20,4 +21,5 @@
   margin-bottom: 1rem;
   color: var(--text-color);
   cursor: pointer;
+  margin-right: 1rem;
 }
diff --git a/frontend/src/style/components/Header.scss b/frontend/src/style/components/Header.scss
@@ -1,8 +1,28 @@
 .headerContainer {
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
-  width: 100%;
+  width: 90%;
   margin-left: 3rem;
+  margin-top: 5px;
+}
+
+.mainHeaderContainer {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 3rem;
+  margin-right: 3rem;
+}
+
+.mainHeaderContent {
+  display: flex;
+  justify-content: space-between;
+  width: 150px;
+}
+
+@media screen and (max-width: 600px) {
+  .buttonAdmin {
+    display: none;
+  }
 }
diff --git a/frontend/src/style/components/InfoProfil.scss b/frontend/src/style/components/InfoProfil.scss
@@ -0,0 +1,49 @@
+.gridContainer {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2px;
+}
+
+.menberSince {
+  grid-column: span 2;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  color: var(--text-color);
+  background-color: var(--primary-color);
+  padding: 1rem;
+}
+
+.leftinfos {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 10px;
+  border-bottom-left-radius: 20px;
+  color: var(--text-color);
+  background-color: var(--primary-color);
+  padding: 1rem;
+}
+.rightinfos {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 10px;
+  border-bottom-right-radius: 20px;
+  color: var(--text-color);
+  background-color: var(--primary-color);
+  padding: 1rem;
+}
+
+@media screen and (max-width: 550px) {
+  .menberSince {
+    width: 70vw;
+  }
+  .leftinfos {
+    width: 35vw;
+  }
+  .rightinfos {
+    width: 35vw;
+  }
+}
diff --git a/frontend/src/style/components/LeaderBoard/LeaderBoard.scss b/frontend/src/style/components/LeaderBoard/LeaderBoard.scss
@@ -42,49 +42,59 @@
     }
   }
 }
+
 .burger,
 .cross {
   color: rgb(0, 0, 0);
   font-size: 3rem;
   margin: 0 5px;
   cursor: pointer;
   position: absolute;
-  top: 5px;
+  top: 17px;
   left: 5px;
   z-index: 10;
+  color: white;
 }
+
 .cross {
   color: white;
 }
+
 .menu {
   margin-top: 4rem;
 }
+
 .menuBurgerRanking {
   display: none;
 }
+
 .leaderBoardMobile {
   z-index: 10;
   position: fixed;
   background-color: #383a40;
   width: 100%;
 }
+
 @media screen and (max-width: 900px) {
   .menuBurgerRanking {
     display: flex;
     flex-direction: row;
     justify-content: center;
   }
 }
+
 @media screen and (max-width: 470px) {
   .leaderBoardLineContainer {
     gap: 40px;
   }
 }
+
 @media screen and (max-width: 900px) {
   .LeaderBoard-container {
     display: none;
   }
 }
+
 .menuBurguerRankingContainer {
   .leaderBoardLineContainer {
     display: flex;