diff --git a/src/index.css b/src/index.css index 84f0d9e..47f4c81 100644 --- a/src/index.css +++ b/src/index.css @@ -3,7 +3,7 @@ --color-secondary: #bfaed9; --white: #ffffff; --black: #161616; - --font: 'Red Hat Display', sans-serif; + --font: "Red Hat Display", sans-serif; --regular: 600; --bold: 800; } @@ -146,7 +146,7 @@ a:active { .btn::before, a::before { z-index: -1; - content: ''; + content: ""; display: block; position: absolute; top: 0; @@ -186,6 +186,16 @@ textarea { color: var(--black); border-radius: 0.25rem; } -p{ +p { line-height: 140%; -} \ No newline at end of file + font-weight: var(--regular); +} +.back { + position: absolute; + top: 1rem; + left: 1rem; + color: var(--color-primary); +} +.back::before { + background-color: var(--color-secondary); +} diff --git a/src/pages/Covoit/Ads/Add/Add.scss b/src/pages/Covoit/Ads/Add/Add.scss index d0d729c..3dd0253 100644 --- a/src/pages/Covoit/Ads/Add/Add.scss +++ b/src/pages/Covoit/Ads/Add/Add.scss @@ -6,15 +6,6 @@ gap: 4rem; align-items: center; width: 100%; - .back { - position: absolute; - top: 1rem; - left: 1rem; - color: var(--color-primary); - &::before { - background-color: var(--color-secondary); - } - } form { display: flex; flex-direction: column; diff --git a/src/pages/Covoit/Ads/Read/Read.jsx b/src/pages/Covoit/Ads/Read/Read.jsx index 36f9e8e..f5a1ea8 100644 --- a/src/pages/Covoit/Ads/Read/Read.jsx +++ b/src/pages/Covoit/Ads/Read/Read.jsx @@ -34,7 +34,7 @@ export default function Read() { return (
- navigate("/covoit")}>Revenir aux trajets + navigate("/covoit")}>Revenir aux trajets {date ? ( <>

@@ -65,7 +65,7 @@ export default function Read() { - {date?.duration?.getHours()} h + {date?.duration?.getHours()} h{" "} {date?.duration?.getMinutes().toString().padStart(2, "0")} ) : ( @@ -85,6 +85,33 @@ export default function Read() {
{adData.finish}

+
+ Prix total {adData.price} +
+
+ + + + + {adData.user} +
+
+ Description

{adData.description}

+
) : ( <> diff --git a/src/pages/Covoit/Ads/Read/Read.scss b/src/pages/Covoit/Ads/Read/Read.scss index 30f444c..99e67d0 100644 --- a/src/pages/Covoit/Ads/Read/Read.scss +++ b/src/pages/Covoit/Ads/Read/Read.scss @@ -1,11 +1,19 @@ .read { + display: flex; + flex-direction: column; + gap: 3rem; + width: 90%; + margin: auto; + height: 90vh; + justify-content: center; .infos { display: grid; grid-template: repeat(3, min-content) / repeat(2, min-content) 1fr; - gap: 1rem; + gap: 2rem; .date-start { justify-self: end; } + .duration { font-size: 0.75rem; justify-self: end; @@ -24,14 +32,14 @@ .line { position: absolute; border: 1px solid #646464; - height: 3rem; + height: 5rem; } .point { border-radius: 50%; border: 2px solid var(--black); width: 14px; height: 14px; - background-color: #ebe4ed; + background-color: white; z-index: 1; } .date-finish { @@ -43,13 +51,32 @@ grid-row: 3; border-color: #646464; } - .start { - font-size: 0.9rem; - } + .finish { - font-size: 0.9rem; grid-row: 3; color: #646464; } } + .price { + display: flex; + gap: 1rem; + font-weight: var(--regular); + span { + font-weight: var(--bold); + &::after { + content: "€"; + } + } + } + .user { + display: flex; + gap: 1rem; + align-items: center; + } + .description { + p { + font-size: 0.9rem; + color: #646464; + } + } } diff --git a/src/pages/User/User.jsx b/src/pages/User/User.jsx index eb81b54..e5b9386 100644 --- a/src/pages/User/User.jsx +++ b/src/pages/User/User.jsx @@ -56,7 +56,7 @@ export default function User() { return ( <> -
+
{cookies.user ? ( <>

Profil

diff --git a/src/pages/User/User.scss b/src/pages/User/User.scss index 060fd51..866796c 100644 --- a/src/pages/User/User.scss +++ b/src/pages/User/User.scss @@ -52,7 +52,7 @@ } } -.user { +.user-page { padding-top: 2rem; display: flex; flex-direction: column;