✨ ad description field

src/index.css

@@ -167,10 +167,23 @@ input {
   outline: none;
   transition: transform 0.2s ease-in-out;
   background-color: transparent;
+  font-weight: var(--regular);
 }
 input:focus-visible {
   transform: scale(1.025);
 }
+textarea {
+  color: var(--black);
+  border-radius: 0.25rem;
+  font: var(--font);
+  font-weight: var(--regular);
+  font-size: 0.75rem;
+  padding: 0.5rem;
+  transition: transform 0.2s ease-in-out;
+}
+textarea:focus-visible {
+  transform: scale(1.025);
+}
 h1 {
   color: var(--color-primary);
   font-weight: var(--bold);
@@ -182,10 +195,6 @@ h2 {
   font-weight: var(--bold);
   font-size: 1.5rem;
 }
-textarea {
-  color: var(--black);
-  border-radius: 0.25rem;
-}
 p {
   line-height: 140%;
   font-weight: var(--regular);

src/pages/Covoit/Ads/Add/Add.jsx

@@ -21,6 +21,7 @@ export default function Add() {
       user: cookies.user.displayName
         ? cookies.user.displayName
         : cookies.user.email,
+      description : e.target[4].value
     })
     navigate("/covoit")
   }
@@ -59,6 +60,13 @@ export default function Add() {
               Prix ?
               <input required type="number" placeholder="Prix" maxLength="2" />
             </label>
+            <label>
+              Description
+              <textarea
+                required
+                placeholder="Modèle et couleur du véhicule, chemin particulier, commentaires, etc…"
+              />
+            </label>
             <Btn type="submit">Ajouter une annonce</Btn>
           </form>
         </div>

src/pages/Covoit/Ads/Add/Add.scss

@@ -6,6 +6,7 @@
   gap: 4rem;
   align-items: center;
   width: 100%;
+  margin-top: 3rem;
   form {
     display: flex;
     flex-direction: column;
@@ -24,7 +25,10 @@
       }
     }
   }
-
+  textarea {
+    resize: vertical;
+    min-height: 4rem;
+  }
   label {
     display: flex;
     flex-direction: column;