From b3b8f7853d3cf248cc950f506236bdfd107dc464 Mon Sep 17 00:00:00 2001 From: d_yanis Date: Sun, 7 Jan 2024 19:00:08 +0100 Subject: [PATCH] Reorganise css and add logo profil --- front/style/home.css | 119 +++++--------------------------- front/style/personnal_space.css | 40 +++++++++++ front/style/side_menu.css | 53 ++++++++++++++ front/style/variable.css | 7 ++ front/views/Home.tsx | 16 +++-- public/account.svg | 1 + 6 files changed, 131 insertions(+), 105 deletions(-) create mode 100644 front/style/personnal_space.css create mode 100644 front/style/side_menu.css create mode 100644 front/style/variable.css create mode 100644 public/account.svg diff --git a/front/style/home.css b/front/style/home.css index 937c4d2..1da8123 100644 --- a/front/style/home.css +++ b/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%; } \ No newline at end of file diff --git a/front/style/personnal_space.css b/front/style/personnal_space.css new file mode 100644 index 0000000..eabe99e --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/front/style/side_menu.css b/front/style/side_menu.css new file mode 100644 index 0000000..5160482 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/front/style/variable.css b/front/style/variable.css new file mode 100644 index 0000000..5427742 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/front/views/Home.tsx b/front/views/Home.tsx index 488a08c..a4f7b8e 100644 --- a/front/views/Home.tsx +++ b/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 (
@@ -28,7 +29,15 @@ export default function Home({ lastTactics, allTactics, teams } : { lastTactics export function Title() { return ( <div id="header"> - <h1 id="IQBall"><span id="IQ">IQ</span><span id="Ball">Ball</span></h1> + <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={{ diff --git a/public/account.svg b/public/account.svg new file mode 100644 index 0000000..ce59194 --- /dev/null +++ b/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> \ No newline at end of file