some fix

frontend/src/components/style/Navbar.scss

@@ -146,7 +146,7 @@
 
 @media screen and (max-width: 890px) {
   .Navbar {
-    width: calc(100% - 3em);
+    width: calc(100% - 2em);
 
     .SearchButton {
       display: block;

frontend/src/pages/Detail.jsx

@@ -1,11 +1,20 @@
+import { Link } from "react-router-dom";
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import axios from "axios";
 
+import Button from "@mui/material/Button";
+
+import img from "../assets/crepe.jpeg";
+
+import "./style/detail.scss";
+
 function Detail({ name, prep, id }) {
   const [ingredients, setIngredients] = useState([]);
   const [instructions, setInstructions] = useState([]);
 
+  const test = img;
+
   useEffect(() => {
     const endpoints = [
       `${import.meta.env.VITE_BACKEND_URL}/api/ingredientbyrecipe/${id}`,
@@ -28,25 +37,47 @@ function Detail({ name, prep, id }) {
   }, []);
 
   return (
-    <div>
-      <h1>{name}</h1>
-      <p>{prep} minutes</p>
-      <div>
+    <div className="body-content">
+      <div className="recipe-detail">
+        <div className="detail-header">
+          <h1 className="detail-title">{name}</h1>
+          <Button
+            component={Link}
+            to="/recipes"
+            sx={{
+              marginLeft: "2rem",
+              background: "#d56c06",
+              color: "#f8f7f2",
+              borderRadius: "12px",
+              transition: "transform 250ms",
+              "&:hover": {
+                backgroundColor: "rgb(213,	108,	6, 0.8)",
+                transform: "scale(0.90)",
+              },
+            }}
+          >
+            Retour
+          </Button>
+        </div>
+        <img src={test} alt="recette" className="detail-image" />
+        <h2 className="detail-prep">Préparation : {prep} minutes</h2>
+        <h3 className="detail-ingrédients">Ingrédients :</h3>
         {ingredients.map((element) => (
-          <li key={element.id}>
+          <li key={id} className="lists-style">
             <p>
               {element.name} : {element.quantity}
               {element.unit} de {element.kcal} kcal
             </p>
           </li>
         ))}
-      </div>
-      <div>
-        {instructions.map((inst) => (
-          <li key={inst.id}>
-            <p>{inst.description}</p>
-          </li>
-        ))}
+        <div className="detail-steps">
+          {instructions.map((inst, index) => (
+            <li key={id} className="lists-style">
+              <h4>Étape {index + 1} :</h4>
+              <p>{inst.description}</p>
+            </li>
+          ))}
+        </div>
       </div>
     </div>
   );

frontend/src/pages/Recipe.jsx

@@ -22,22 +22,24 @@ function Recipe({
         <img src={test} alt="recette" className="image-recipe" />
       </div>
       <div className="desc-recipe">
-        <h2>{name}</h2>
-        <p>{title}</p>
+        <div className="recipe-header">
+          <h2>{name}</h2>
+          <p>{title}</p>
+        </div>
         <div className="recipe-difficult">
+          <p>{kcal} kcal / portion</p>
           <p className="level-recipe">{difficulty}</p>
-          <div className="recipe-bottom">
-            <div className="recip-tags">
-              <p>{kcal} kcal par personne</p>
-              {tag1 ? <p>{tag1}</p> : null}
-              {tag2 ? <p>{tag2}</p> : null}
-              {tag3 ? <p>{tag3}</p> : null}
-            </div>
-            <div className="link-to">
-              <Link to={`/recipes/${id}`}>
-                <p>En savoir plus</p>
-              </Link>
-            </div>
+        </div>
+        <div className="recipe-bottom">
+          <div className="recip-tags">
+            {tag1 ? <p>{tag1}</p> : null}
+            {tag2 ? <p>{tag2}</p> : null}
+            {tag3 ? <p>{tag3}</p> : null}
+          </div>
+          <div className="link-to">
+            <Link to={`/recipes/${id}`}>
+              <p>En savoir plus</p>
+            </Link>
           </div>
         </div>
       </div>

frontend/src/pages/RecipeDetails.jsx

@@ -1,20 +1,15 @@
-import { Link, useLoaderData } from "react-router-dom";
+import { useLoaderData } from "react-router-dom";
 import Detail from "./Detail";
 import "./style/RecipeDetail.scss";
 
 function RecipeDetails() {
   const detail = useLoaderData();
   return (
-    <div className="body-content recipe-detail">
-      <Detail
-        name={detail.recipe.name}
-        prep={detail.recipe.prep_time}
-        id={detail.recipe.id}
-      />
-      <Link to="/recipes">
-        <p>retour</p>
-      </Link>
-    </div>
+    <Detail
+      name={detail.recipe.name}
+      prep={detail.recipe.prep_time}
+      id={detail.recipe.id}
+    />
   );
 }
 

frontend/src/pages/style/RecipeDetail.scss

@@ -1,4 +1,11 @@
+@import "../../vars.scss";
+
 .recipe-detail {
-  display: flex;
-  justify-content: center;
+  background: $white-color;
+  min-width: 300px;
+  max-width: 800px;
+  padding: 2rem;
+  border-radius: 1rem;
+  flex-direction: column;
+  margin: 1.5rem;
 }

frontend/src/pages/style/RecipeList.scss

@@ -6,7 +6,7 @@
 
   .filter {
     margin-bottom: 1rem;
-    margin: 0 0 1rem auto;
+    margin: 0 1rem 1rem auto;
 
     select {
       background-color: $green-color;
@@ -30,9 +30,10 @@
       background-color: $white-color;
       border-radius: 1.5rem;
       min-height: 200px;
-      min-width: 380px;
+      min-width: 300px;
       max-width: 420px;
       box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);
+      margin: 0 1rem;
 
       display: flex;
 
@@ -75,8 +76,9 @@
           font-size: small;
         }
 
-        .level-recipe {
-          text-align: right;
+        .recipe-difficult {
+          display: flex;
+          justify-content: space-between;
         }
 
         .link-to {

frontend/src/pages/style/detail.scss

@@ -0,0 +1,43 @@
+@import "../../vars.scss";
+
+.lists-style {
+  list-style: none;
+}
+
+.detail-steps {
+  margin-top: 3rem;
+}
+
+.detail-ingrédients {
+  margin-top: 3rem;
+}
+
+.detail-image {
+  height: 300px;
+  width: 300px;
+  object-fit: cover;
+  border-radius: 1.5rem;
+  margin-top: 1rem;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.detail-button {
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+  background: $orange-color;
+  color: $white-color;
+}
+
+@media screen and (max-width: 400px) {
+  .detail-title {
+    font-size: 1.2rem;
+  }
+  .detail-prep {
+    font-size: 1.2rem;
+  }
+}

frontend/src/vars.scss

@@ -34,13 +34,13 @@ h6 {
 
 .body-content {
   display: flex;
-  margin: 7rem auto 0 auto;
-  width: calc(100% - 3em);
+  justify-content: center;
+  margin: 7rem auto 2.5rem auto;
 }
 
 @media screen and (min-width: 890px) {
   .body-content {
-    margin-top: 10rem;
+    margin: 9rem auto 2.5rem auto;
     width: calc(100% - 10em);
   }
 }