Css files reorganised

front/style/colors.css

@@ -1,13 +0,0 @@
-:root {
-    --main-color: #ffffff;
-    --second-color: #ccde54;
-
-    --background-color: #d2cdd3;
-
-    --selected-team-primarycolor: #ffffff;
-    --selected-team-secondarycolor: #000000;
-
-    --selection-color: #3f7fc4;
-
-    --arrows-color: #676767;
-}

front/style/home/home.css

@@ -1,6 +1,7 @@
-@import url(variable.css);
+@import url(../theme/dark.css);
 @import url(personnal_space.css);
 @import url(side_menu.css);
+@import url(../template/header.css);
 
 body {
     /* background-color: #303030; */
@@ -11,31 +12,12 @@ body {
     /* border : solid 1px #303030; */
     display: flex;
     flex-direction: column;
-    font-family: Helvetica;
+    font-family: (--font-content);
     height: 100%;
 }
 
-#header {
-    text-align: center;
-    background-color: var(--main-color);
-    margin: 0px;
-    /* border : var(--accent-color) 1px ésolid; */
-    display: flex;
-    flex-direction: row;
-    /* border-radius: 0.75cap; */
-}
 
-#IQBall {
-    color: var(--accent-color);
-    font-weight: bold;
-    font-size: 45px;
-}
 
-#IQBall {
-    color: #ffa238;
-    font-weight: bold;
-    font-size: 45px;
-}
 #body {
     display: flex;
     flex-direction: row;
@@ -66,51 +48,4 @@ body {
     margin-top: 5%;
 }
 
-#img-account {
-    width: 100%;
-    cursor: pointer;
-}
-
-#header-right,
-#header-left {
-    width: 10%;
-    /* border: yellow 2px solid; */
-}
-
-#header-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
 
-#username {
-    color: var(--main-contrast-color);
-    margin: 0;
-}
-
-#clickable-header-right:hover #username {
-    color: var(--accent-color);
-}
-
-#header-center {
-    width: 80%;
-}
-
-#clickable-header-right {
-    width: 40%;
-    border-radius: 1cap;
-    padding: 2%;
-}
-
-#clickable-header-right:hover {
-    border: orange 1px solid;
-}
-
-.clickable {
-    cursor: pointer;
-}
-
-#img-account {
-    width: 100%;
-}

front/style/home/side_menu.css

@@ -1,4 +1,4 @@
-@import url(variable.css);
+@import url(../theme/dark.css);
 
 #sideMenu {
     background-color: var(--third-color);

front/style/home/titre.css

@@ -1,83 +0,0 @@
-#main {
-    margin-left: 10%;
-    margin-right: 10%;
-    border: solid 2px purple;
-    display: flex;
-    flex-direction: column;
-    font-family: Helvetica;
-}
-
-.new {
-    border-radius: 100%;
-}
-
-#header {
-    text-align: center;
-    background-color: green;
-    margin: 0px;
-}
-
-#body {
-    display: flex;
-    flex-direction: row;
-    border: solid 10px violet;
-    margin: 0px;
-}
-
-#personal-space {
-    background-color: orange;
-    display: flex;
-    flex-direction: column;
-}
-
-#sideMenu {
-    background-color: grey;
-}
-
-#titlePersonalSpace h2 {
-    text-align: center;
-}
-
-#sideMenu h2 {
-    display: inline-block;
-    margin-right: 5%;
-}
-
-.titreSideMenu {
-    border-bottom: black solid 2px;
-    width: 95%;
-}
-
-#sideMenu .title {
-    font-size: 13px;
-    font-weight: bold;
-    color: #ffffff;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    background-color: black;
-    padding: 1.5%;
-    margin-bottom: 0px;
-}
-
-#bodyPersonalSpace {
-    width: 95%;
-    border: 1px red solid;
-    align-self: center;
-}
-#bodyPersonalSpace table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 1em;
-}
-
-td {
-    border: 3px solid black;
-    padding-bottom: 1%;
-    padding-top: 1%;
-    margin: 80px;
-    text-align: center;
-}
-
-td:hover {
-    background-color: red;
-}

front/style/settings/settings.css

@@ -0,0 +1,2 @@
+@import url(../template/header.css);
+@import url(../theme/dark.css);

front/style/template/header.css

@@ -0,0 +1,65 @@
+#header {
+    text-align: center;
+    background-color: var(--main-color);
+    margin: 0px;
+    /* border : var(--accent-color) 1px solid; */
+    display: flex;
+    flex-direction: row;
+    font-family: var(--font-title);
+    /* border-radius: 0.75cap; */
+}
+
+#img-account {
+    width: 100%;
+    cursor: pointer;
+}
+
+#header-right,
+#header-left {
+    width: 10%;
+    /* border: yellow 2px solid; */
+}
+
+#header-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#username {
+    color: var(--main-contrast-color);
+    margin: 0;
+}
+
+#clickable-header-right:hover #username {
+    color: var(--accent-color);
+}
+
+#header-center {
+    width: 80%;
+}
+
+#clickable-header-right {
+    width: 40%;
+    border-radius: 1cap;
+    padding: 2%;
+}
+
+#clickable-header-right:hover {
+    border: orange 1px solid;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+#img-account {
+    width: 100%;
+}
+
+#IQBall {
+    color: var(--accent-color);
+    font-weight: bold;
+    font-size: 45px;
+}

front/style/theme/dark.css

@@ -4,4 +4,6 @@
     --third-color: #303341;
     --accent-color: #ffa238;
     --main-contrast-color: #e6edf3;
+    --font-title : Helvetica;
+    --font-content : Helvetica;
 }

front/views/Home.tsx

@@ -2,6 +2,7 @@ import "../style/home/home.css"
 
 // import AccountSvg from "../assets/account.svg?react"
 import { CSSProperties, useRef } from "react"
+import { Header } from "./template/Header"
 
 interface Tactic {
     id: number
@@ -30,7 +31,7 @@ export default function Home({
 }) {
     return (
         <div id="main">
-            <Title username={username} />
+            <Header username={username} />
             <Body
                 lastTactics={lastTactics}
                 allTactics={allTactics}
@@ -40,42 +41,7 @@ export default function Home({
     )
 }
 
-/**
+
- *
- * @param param0 username
- * @returns Header
- */
-export function Title({ username }: { username: string }) {
-    return (
-        <div id="header">
-            <div id="header-left"></div>
-            <div id="header-center">
-                <h1
-                    id="IQBall"
-                    className="clickable"
-                    onClick={() => {
-                        location.pathname = "/"
-                    }}>
-                    <span id="IQ">IQ</span>
-                    <span id="Ball">Ball</span>
-                </h1>
-            </div>
-            <div id="header-right">
-                <div className="clickable" id="clickable-header-right">
-                    {/* <AccountSvg id="img-account" /> */}
-                    <img
-                        id="img-account"
-                        src="account.svg"
-                        onClick={() => {
-                            location.pathname = "/settings"
-                        }}
-                    />
-                    <p id="username">{username}</p>
-                </div>
-            </div>
-        </div>
-    )
-}
 
 export function Body({
     lastTactics,

front/views/Settings.tsx

@@ -1,9 +1,10 @@
-import "../style/home.css"
+import "../style/settings/settings.css"
+import {Header} from './template/Header'
 
 export default function Settings({username} : {username : string}){
     return (
         <div id="main">
-            <Title username={username} />
+            <Header username={username} />
         </div>
     )
 }

front/views/template/Header.tsx

@@ -0,0 +1,36 @@
+/**
+ *
+ * @param param0 username
+ * @returns Header
+ */
+export function Header({ username }: { username: string }) {
+    return (
+        <div id="header">
+            <div id="header-left"></div>
+            <div id="header-center">
+                <h1
+                    id="IQBall"
+                    className="clickable"
+                    onClick={() => {
+                        location.pathname = "/"
+                    }}>
+                    <span id="IQ">IQ</span>
+                    <span id="Ball">Ball</span>
+                </h1>
+            </div>
+            <div id="header-right">
+                <div className="clickable" id="clickable-header-right">
+                    {/* <AccountSvg id="img-account" /> */}
+                    <img
+                        id="img-account"
+                        src="account.svg"
+                        onClick={() => {
+                            location.pathname = "/settings"
+                        }}
+                    />
+                    <p id="username">{username}</p>
+                </div>
+            </div>
+        </div>
+    )
+}