Comment il est cracra ton css sacha mama

css/profile.css

@@ -1,68 +1,87 @@
 #modal_profile
 {
-    width: 50%;
-    height: 45%;
-    padding: 0;
-    background-color: rgba(82, 82, 82, 0.774);
-    border-width: 0px;
+    width: 60%;
+    height: 70%;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.521);
+    border: none;
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+    color: white;
 }
 
-.profile-modal
+.profile-header
 {
-    margin: 20px;
-    color: white;
+    width: 100%;
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
 }
-.profile-header
+
+.profile-header p
 {
-    font-size: 14px;
+    font-size: 40px;
 }
+
 .profile-header button
 {
-    font-size: 25px;
-    width: 30px;
-    height: 30px;
-    background-color: transparent;
-    border-color: transparent;
-    float: right;
-}
-.logout-logo img{
-    z-index: -1;
-    position: absolute;
-    width: 7%;
-}
-.profile-footer{
     display: flex;
-    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: none;
+}
+
+.profile-header button p
+{
+    font-size: 25px;
+    padding: 0;
+    margin: 0;
 }
-.profile-footer button
+
+.profile-content
 {
-    position: relative;
-    width: 63px;
-    height: 63px;
-    background-color: transparent;
-    border-color: transparent;
+    width: 80%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+    border: 1px solid white;
+    border-radius: 10px;
+    padding: 0;
 }
-.profile-footer p
+
+.profile-content p
 {
-    color: red;
-    font-size: 22px;
-    margin-bottom: -1px;
-    margin-top: -9px;
+    text-align: center;
 }
-.profile-footer button:hover
+
+.tb-r
 {
-    cursor: pointer;
+    border-right: 1px solid white;
 }
-#btn-token{
-    background-color: grey;
+
+.profile-footer
+{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 80%;
+    padding: 5px;
 }
-#btn-token:hover{
-    background-color: transparent;
-    cursor: pointer;
+
+#btn-logout
+{
+    width: 60px;
+    height: 60px;
+    padding: 0;
+    border: none;
+    background: none;
 }
-.profile-header button:hover
+
+#btn-logout img
 {
-    cursor: pointer;
+    width: 100%;
+    height: 100%;
 }

html/templates/modal_profile.html

@@ -1,25 +1,19 @@
-<div class="profile-modal">
-    <div class="profile-header">
-        <button id="btn-close">X</button>
-        <h1>Profile</h1>
-    </div>
-    
-    <div class="profile-content">
-        <hr>
-        <p id="name">Name: </p>
-        <p id="faction">Faction: </p>
-        <p id="credit">Credit: </p>
-        <p id="hq">Headquarters: </p>
-        <p id="shipcount">Ship count: </p>
-        <p id="token">Token: <button id="btn-token">COPY</button></p>
-        <hr>
-    </div>
-    
-    <div class="profile-footer">
-        <p>Logout</p>
-        <div class="logout-logo">
-            <img src="/assets/menu/logout.png" alt="">
-            <button id="btn-logout"></button>
-        </div> 
-    </div>
+<div class="profile-header">
+    <div></div>
+    <p class="">Profile</p>
+    <button id="btn-close"><p>X</p></button>
+</div>  
+<div class="profile-content">
+    <p class="tb-r">Name</p><p id="name"></p>
+    <p class="tb-r">Faction</p><p id="faction"></p>
+    <p class="tb-r">Credits</p><p id="credit"></p>
+    <p class="tb-r">Head Quaters</p><p id="hq"></p>
+    <p class="tb-r">Number of ships</p><p id="shipcount"></p>
+</div>
+
+<div class="profile-footer">
+    <button id="btn-logout">
+        <img src="/assets/menu/logout.png" alt="">
+    </button>
+    <button id="btn-token">COPY TOKEN</button>
 </div>

js/controllers/leaderboard.js

@@ -23,7 +23,7 @@ function drawAgents(agents, funcSort) {
         $(".leaderboard").append(`
       <article class="player">
         <p class="elem num">${i}.</p>
-        <p class="elem symbol">${agent.name} : </p>
+        <p class="elem symbol">${agent.name}</p>
         <p class="elem credits">${agent.credits}</p>
         <p class="elem headquarters">${agent.hq}</p>
         <p class="elem faction">${agent.faction}</p>