Translated the html.twig team's view in react and done implementing account into team

front/style/team_panel.css

@@ -1,5 +1,5 @@
-body {
-    background-color: var(--background-color);
+#mainDiv {
+    background-color: lightblue;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -23,6 +23,7 @@ section {
 }
 
 #colors{
+    display: flex;
     flex-direction: row;
 }
 .color {
@@ -30,9 +31,11 @@ section {
     justify-content: space-between;
 }
 
-.logo {
-    height: 80px;
-    width: 80px;
+#logo {
+    width: 90%;
+    aspect-ratio: 3/2;
+    object-fit: contain;
+    mix-blend-mode: color-burn;
 }
 
 #delete{
@@ -45,3 +48,36 @@ section {
     flex-direction: row;
     justify-content: space-evenly;
 }
+
+#profilePicture{
+    height:40px;
+    width:40px;
+}
+
+#Members{
+    display: flex;
+    flex-direction: column;
+    background-color: lightcoral;
+    width: 60%;
+    align-items: center;
+    justify-content: space-between;
+
+}
+
+.Member{
+    width: 60%;
+    background-color: red;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+#teamInfo{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    width: 60%;
+    align-items: center;
+    background-color: #666666;
+}

front/views/TeamPanel.tsx

@@ -4,39 +4,40 @@ import {Team,TeamInfo,Color,User,Member} from "../model/Team/Team"
 
 export default function TeamPanel({isCoach, team}: {isCoach: boolean, team: Team }){
     return (
-        <div>
+        <div id="mainDiv">
+            <header>
+                <h1><a href="{{ path('/') }}">IQBall</a></h1>
+            </header>
             <TeamDisplay team={team.info}/>
 
             {isCoach && <CoachOptions id={team.info.id}/>}
 
-            <div>
-                <h2>Membres :</h2>
+
             <MembersDisplay members={team.members}/>
         </div>
-        </div>
     )
 }
 
 function TeamDisplay({ team}: {team : TeamInfo}) {
     return (
-        <div>
+        <div id="teamInfo">
             <div>
                 <h1>{team.name}</h1>
-                <img src={team.picture} alt="Logo d'équipe" />
+                <img id="logo" src={team.picture} alt="Logo d'équipe" />
             </div>
             <div id="colors">
                 <p>Couleur principale</p>
-                <ColorDisplay color={team.mainColor.hex}/>
+                <ColorDisplay color={team.mainColor}/>
                 <p>Couleur secondaire</p>
-                <ColorDisplay color={team.secondColor.hex}/>
+                <ColorDisplay color={team.secondColor}/>
             </div>
         </div>
     )
 }
 
-function ColorDisplay({color}: {color : string}){
+function ColorDisplay({color}: {color : Color}){
     return(
-        <div className="square" style={{backgroundColor: color}}/>
+        <div className="square" style={{backgroundColor: color.hex}}/>
     )
 }
 
@@ -53,7 +54,8 @@ function MembersDisplay({members}:{members : Member[]}){
         <MemberDisplay member={member}/>
     );
     return (
-        <div>
+        <div id="Members">
+            <h2>Membres :</h2>
             {listMember}
         </div>
     )
@@ -61,8 +63,8 @@ function MembersDisplay({members}:{members : Member[]}){
 
 function MemberDisplay({member}: {member : Member}){
     return (
-        <div>
-            <img src={member.user.profilePicture} alt="Photo de profile"/>
+        <div className="Member">
+            <img id="profilePicture" src={member.user.profilePicture} alt="Photo de profile"/>
             <p>{member.user.name}</p>
             <p>{member.role}</p>
             <p>{member.user.email}</p>

src/App/Controller/TeamController.php

@@ -138,6 +138,7 @@ class TeamController {
         }
         else{
             $role = $this->model->isCoach($id,$session->getAccount()->getUser()->getEmail());
+            var_dump($role);
             return ViewHttpResponse::react('views/TeamPanel.tsx', [
                 'team' => [
                     "info" => $result->getInfo(),

src/Core/Gateway/MemberGateway.php

@@ -78,7 +78,8 @@ class MemberGateway {
                     "email" => [$email, PDO::PARAM_STR]
                 ]
             )[0]['role'];
-        return $result == 'Coach';
+        var_dump($result);
+        return $result == 'COACH';
     }
 
     /**