Reorganise css and add logo profil

front/style/home.css

@@ -1,3 +1,4 @@
+@import url(variable.css);
 
 body {
     /* background-color: #303030; */
@@ -5,150 +6,68 @@ body {
 #main {
     /* margin-left : 10%;
     margin-right: 10%; */
-    border : solid 1px #303030;
+    /* border : solid 1px #303030; */
     display: flex;
     flex-direction: column;
     font-family: Helvetica;
     height: 100%;
 }
 
-.new {
-    border-radius: 100%;
-}
-
 #header { 
     text-align: center;
-    background-color: #191a21;
+    background-color: var(--main-color);
     margin : 0px;
+    border : RED 2px solid;
+    display: flex;
+    flex-direction: row;
     /* border-radius: 0.75cap; */
 }
 
 #IQBall {
-    color : #ffa238;
+    color : var(--accent-color);
     font-weight: bold;
     font-size : 45px;
 }
+
 #body {
     display: flex;
     flex-direction: row;
     margin:0px;
     height: 100%;
-    background-color: #282a36;
+    background-color: var(--second-color);
  }
 
-#personal-space {
-    display: flex;
-    flex-direction: column; 
-
-}
-
-#sideMenu {
-    background-color: #303341;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow: hidden;
-}
-
-#titlePersonalSpace h2 {
-    text-align: center;
-    color : #e6edf3;
-    /* font-family: Helvetica;
-    font-weight: bold; */
-}
-
-#sideMenu h2 {
-    display: inline-block;
-    margin-right : 5%;
-}
-
-#sideMenuContent {
-    width: 90%;
-}
-.titreSideMenu {
-    border-bottom: #191a21 solid 3px;
-    width: 100%;
-    margin-bottom: 3%;
-}
-
-#sideMenu .title {
-    font-size: 12px;
-    font-weight: bold;
-    color : #e6edf3;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    background-color: #191a21;
-    padding : 3%;
-    margin-bottom: 0px;
-    margin-right: 3%; 
-}
-
-#bodyPersonalSpace {
-    width: 95%;
-    /* background-color: #ccc2b7; */
-    border : 2px #191a21 solid;
-    border-radius: 0.5cap;
-    align-self: center;
-}
-#bodyPersonalSpace table{
-    width: 100%;
-    border-collapse : separate;
-    border-spacing : 1em;
-    table-layout: fixed;
-    overflow: hidden;
-}
-
-#bodyPersonalSpace td {
-    width: 80px !important;
-    padding-bottom : 1%;
-    padding-top : 1%;
-    height: fit-content;
-    text-align: center;  
-    overflow: hidden ;
-}
 .data {
-    border : 1.5px solid #e6edf3;
-    background-color: #191a21;
+    border : 1.5px solid var(--main-contrast-color);
+    background-color: var(--main-color);
     border-radius: 0.75cap;
-    color : #e6edf3; 
+    color : var(--main-contrast-color); 
 }
 
 .data:hover {
-    border-color: #ffa238 ;
+    border-color: var(--accent-color) ;
     cursor : pointer;
 }
 
-
 .listTactic {
-    border: 2px solid green;
     display: block;
 }
 
-ul {
-    border : pink solid 1px;
-}
-
 .SetButton {
     width: 80%;
     margin-left : 5%;
     margin-top : 5%;
 }
 
+#img-account {
 
-.buttonSideMenu {
-    /* border : black solid 1px; */
-    border-radius :0.5cap;
-    width :fit-content;
-    padding: 2%;
-    margin-top: 3%;
-    overflow: hidden;
 }
 
-.ButtonSideMenu:hover {
-    /* background-color: #c9d1e0; */
-    cursor : pointer;
+#header-right, #header-left {
+    width: 10%;
+    border: yellow 2px solid;
 }
 
-tbody p {
-    text-align: center;
+#header-center {
+    width: 80%;
 }

front/style/personnal_space.css

@@ -0,0 +1,40 @@
+#personal-space {
+    display: flex;
+    flex-direction: column; 
+}
+
+#titlePersonalSpace h2 {
+    text-align: center;
+    color : var(--main-contrast-color);
+    /* font-family: Helvetica;
+    font-weight: bold; */
+}
+
+#bodyPersonalSpace {
+    width: 95%;
+    /* background-color: #ccc2b7; */
+    border : 3px var(--main-color) solid;
+    border-radius: 0.5cap;
+    align-self: center;
+}
+
+#bodyPersonalSpace table{
+    width: 100%;
+    border-collapse : separate;
+    border-spacing : 1em;
+    table-layout: fixed;
+    overflow: hidden;
+}
+
+#bodyPersonalSpace td {
+    width: 80px !important;
+    padding-bottom : 1%;
+    padding-top : 1%;
+    height: fit-content;
+    text-align: center;  
+    overflow: hidden ;
+}
+
+tbody p {
+    text-align: center;
+}

front/style/side_menu.css

@@ -0,0 +1,53 @@
+@import url(variable.css);
+
+#sideMenu {
+    background-color: var(--third-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+}
+
+#sideMenu h2 {
+    display: inline-block;
+    margin-right : 5%;
+}
+
+#sideMenuContent {
+    width: 90%;
+}
+.titreSideMenu {
+    border-bottom: var(--main-color) solid 3px;
+    width: 100%;
+    margin-bottom: 3%;
+}
+
+#sideMenu .title {
+    font-size: 12px;
+    font-weight: bold;
+    color : var(--main-contrast-color);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    background-color: var(--main-color);
+    padding : 3%;
+    margin-bottom: 0px;
+    margin-right: 3%; 
+}
+
+.new {
+    border-radius: 100%;
+}
+
+.buttonSideMenu {
+    /* border : black solid 1px; */
+    border-radius :0.5cap;
+    width :fit-content;
+    padding: 2%;
+    margin-top: 3%;
+    overflow: hidden;
+}
+
+.buttonSideMenu:hover {
+    /* background-color: #c9d1e0; */
+    cursor : pointer;
+}

front/style/variable.css

@@ -0,0 +1,7 @@
+:root {
+    --main-color : #191a21;
+    --second-color : #282a36;
+    --third-color : #303341;
+    --accent-color : #ffa238;
+    --main-contrast-color : #e6edf3;
+}

front/views/Home.tsx

@@ -1,4 +1,6 @@
 import "../style/home.css"
+import "../style/personnal_space.css"
+import "../style/side_menu.css"
 import { CSSProperties } from "react"
 
 interface Tactic {
@@ -16,7 +18,6 @@ interface Team {
 }
 
 export default function Home({ lastTactics, allTactics, teams } : { lastTactics : Tactic[] , allTactics : Tactic[], teams : Team[]}) {
-    console.log(allTactics);
     return (
         <div id="main">
             <Title/>
@@ -28,8 +29,16 @@ export default function Home({ lastTactics, allTactics, teams } : { lastTactics
 export function Title() {
     return (
         <div id="header">
+            <div id="header-left">
+
+            </div>
+            <div id="header-center">
                 <h1 id="IQBall"><span id="IQ">IQ</span><span id="Ball">Ball</span></h1>
             </div>
+            <div id="header-right">
+                <img id="img-account" src="account.svg" color="white"/>
+            </div>
+        </div>
     )
 }
 
@@ -40,13 +49,11 @@ export function Body({ lastTactics, allTactics, teams } : { lastTactics : Tactic
         <div id="body">
             <PersonalSpace width = {widthPersonalSpace} allTactics = {allTactics}/>
             <SideMenu width = {widthSideMenu} lastTactics={lastTactics} teams={teams} />
-
         </div>
     )
 }
 
 export function SideMenu({ width, lastTactics, teams } : { width : number, lastTactics : Tactic[], teams : Team[]}) {
-
     return (
         <div id="sideMenu" style={{
             width : width + "%",
@@ -59,7 +66,6 @@ export function SideMenu({ width, lastTactics, teams } : { width : number, lastT
     )
 }
 
-
 export function PersonalSpace({ width, allTactics }: { width : number, allTactics : Tactic[] }) {
     return (
         <div id="personal-space" style={{

public/account.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>