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;