✨ read covoit ad style

flanb · Dec 13, 2021 · e3bd9f4 · e3bd9f4
1 parent db9f4f2
commit e3bd9f4
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 24 deletions.
diff --git 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%;
-}
+  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
@@ -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
@@ -34,7 +34,7 @@ export default function Read() {
 
   return (
     <div className="read">
-      <Btn onClick={() => navigate("/covoit")}>Revenir aux trajets</Btn>
+      <Btn className="back" onClick={() => navigate("/covoit")}>Revenir aux trajets</Btn>
       {date ? (
         <>
           <h1>
@@ -65,7 +65,7 @@ export default function Read() {
                     <path d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z" />
                     <path d="M9 4.5V9L12 10.5" />
                   </svg>
-                  {date?.duration?.getHours()} h
+                  {date?.duration?.getHours()} h{" "}
                   {date?.duration?.getMinutes().toString().padStart(2, "0")}
                 </>
               ) : (
@@ -85,6 +85,33 @@ export default function Read() {
             <div className="point point-end"></div>
             <span className="finish">{adData.finish}</span>
           </div>
+          <div className="price">
+            Prix total <span>{adData.price}</span>
+          </div>
+          <div className="user">
+            <svg
+              width="18"
+              height="20"
+              viewBox="0 0 18 20"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M17 19V17C17 14.7909 15.2091 13 13 13H5C2.79086 13 1 14.7909 1 17V19" />
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M9 9C11.2091 9 13 7.20914 13 5C13 2.79086 11.2091 1 9 1C6.79086 1 5 2.79086 5 5C5 7.20914 6.79086 9 9 9Z"
+              />
+            </svg>
+            <span>{adData.user}</span>
+          </div>
+          <div className="description">
+            Description <p>{adData.description}</p>
+          </div>
         </>
       ) : (
         <>

diff --git 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
@@ -56,7 +56,7 @@ export default function User() {
 
   return (
     <>
-      <div className="user">
+      <div className="user-page">
         {cookies.user ? (
           <>
             <h1>Profil</h1>

diff --git 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;