Merge pull request #49 from 2308-Bread/feat/recipe_card

Feat/recipe card

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"workbench.settings.openDefaultSettings": false
+}

postcss.config.js

@@ -1,7 +1,6 @@
 module.exports = {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    }
-  }
-
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/components/App/App.css

@@ -1,5 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 .App {
-  background-color: #d0c5b9;
+  background: linear-gradient(#D0C5B9, #E7AB86 30%, #DC7333);
   min-height: 100vh;
   display: flex;
   flex-direction: column;

src/components/BreadDetail/BreadDetail.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { fetchBreadsForCountry } from "../../apiCalls";
-import "./BreadDetail.css";
 import { BreadAttributes } from "../../apiTypes";
 
 const BreadDetail = () => {
@@ -30,23 +29,23 @@ const BreadDetail = () => {
 
     return (
         <div className='recipeWrapper'>
-            <section className="BreadDetail">
-                <h2>{breadDetail.name}</h2>
-                <h3>{breadDetail.description}</h3>
-                <img src={breadDetail.imageUrl} alt={breadDetail.name} className='breadImage'/>
+            <section className="BreadDetail font-abel text-center mt-6 mb-4 flex flex-col items-center sm:text-center sm:mt-16">
+                <h2 className="font-satisfy text-[2rem] mb-4">{breadDetail.name}</h2>
+                <h3 className="text-base mb-6 sm:text-xl sm:px-[10rem]">{breadDetail.description}</h3>
+                <img src={breadDetail.imageUrl} alt={breadDetail.name} className='breadImage w-[300px] h-full rounded-[65px] sm:w-[502px]'/>
             </section>
-            <section className='recipeSection'>
-                <div className="recipeDetail">
-                    <h4>Ingredients</h4>
-                    <ul>
+            <section className="recipeSection w-screen h-[calc(100vh_+_120px)] bg-[url('/public/shutterstock\_174816359.jpg')] bg-cover bg-no-repeat bg-center flex absolute items-center justify-center sm:h-auto min-h-0 py-[17.5%]">
+                <div className="recipeDetail font-abel bg-[rgba(231,171,134,0.7)] w-4/5 h-4/5 overflow-y-auto flex flex-col items-center text-base mx-auto my-0 pt-8 p-[1.7rem] rounded-[65px] sm:text-[1.2rem] sm:h-auto min-h-0 py-[10%]">
+                    <h4 className="text-[black] pt-3 pb-1 sm:pb-5 sm:text-[1.7rem]">Ingredients</h4>
+                    <ul className="sm:text-[1.3rem] sm:pb-5">
                         {breadDetail.recipe.ingredients.map((ingredient, index) => (
                             <li key={index}>{ingredient}</li>
                         ))}
                     </ul>
-                    <h4>Instructions</h4>
+                    <h4 className="text-[black] pt-3 pb-1 sm:pb-3 sm:text-[1.7rem]">Instructions</h4>
                     <ol>
                         {breadDetail.recipe.instructions.map((instruction, index) => (
-                            <li key={index}>{instruction}</li>
+                            <li className="sm:text-[1.3rem] sm:pb-2" key={index}>{instruction}</li>
                         ))}
                     </ol>
                 </div>