From 401b1f0bf8d54b20e9de80c63c9522c0c1467fcb Mon Sep 17 00:00:00 2001
From: Celine <celine.lancelle@gmail.com>
Date: Fri, 10 Nov 2023 14:53:26 +0100
Subject: [PATCH] fix visual

---
 src/components/Recipe/Recipe.jsx                    |  4 ++--
 src/components/Recipe/Recipe.module.css             |  3 +--
 src/components/RecipeCard/RecipeCard.module.css     |  6 +++---
 .../RelatedRecipes/RelatedRecipes.module.css        |  3 ++-
 src/components/recipeItem/RecipeItem.module.css     | 13 +++++++++++--
 src/index.css                                       |  7 ++++---
 6 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/Recipe/Recipe.jsx b/src/components/Recipe/Recipe.jsx
index e9610a7..1d6c0e7 100644
--- a/src/components/Recipe/Recipe.jsx
+++ b/src/components/Recipe/Recipe.jsx
@@ -10,7 +10,7 @@ const Recipe = (props) => {
     console.log('recipesToDisplay', recipesToDisplay);
 
     return (
-        <section className={`${styles.section} ${isDarkTheme ? styles['dark-theme'] : styles['light-theme']}`}>
+        <section className={`${styles.section} ${isDarkTheme ? styles['dark-theme'] : ''}`}>
             {recipe.loading && <Loader />}
             {!recipe.loading && recipesToDisplay.length === 0 ? (
                 <p className={`${styles.noRecipe} ${isDarkTheme ? styles['dark-noRecipe'] : ''}`}>Sorry, no recipe to satisfy your papilles!</p>
@@ -18,7 +18,7 @@ const Recipe = (props) => {
                 <></>
             )}
             {!recipe.loading && recipesToDisplay ? (
-                <div className={styles.container}>
+                <div className={`${styles.container} ${isDarkTheme ? styles['dark-theme'] : ''}`}>
                     {recipesToDisplay.map((oneRecipe) => (
                         <RecipeCard key={oneRecipe.id} oneRecipe={oneRecipe} />
                     ))}
diff --git a/src/components/Recipe/Recipe.module.css b/src/components/Recipe/Recipe.module.css
index ec7adf1..ef5d367 100644
--- a/src/components/Recipe/Recipe.module.css
+++ b/src/components/Recipe/Recipe.module.css
@@ -2,11 +2,10 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    
     align-self: center;
     padding-top: 20px;
     padding-bottom: 20px;
-    background-color: var( --color-white);
+    /* background-color: var( --color-white); */
 
     @media screen and (min-device-width:1000px) {
         width:80%
diff --git a/src/components/RecipeCard/RecipeCard.module.css b/src/components/RecipeCard/RecipeCard.module.css
index 02e87c9..a298d1b 100644
--- a/src/components/RecipeCard/RecipeCard.module.css
+++ b/src/components/RecipeCard/RecipeCard.module.css
@@ -38,7 +38,7 @@
     color:  var(--light-theme-heading-text-color);
     font-family: 'Rubik';
     font-size: 24px;
-    font-weight: 500;
+    font-weight: bold;
     text-wrap: wrap;
     text-align: center;
     min-height: 75px;
@@ -68,8 +68,8 @@
     padding: 8px 16px;
     border-radius: 40px;
     font-size: 18px;
-    font-weight: 500;
-    font-family: 'Rubik';
+    font-weight: var( --font-weight-600);
+    font-family: var(--heading-text-font);
     text-decoration: none;
     border: 0;
 }
diff --git a/src/components/RelatedRecipes/RelatedRecipes.module.css b/src/components/RelatedRecipes/RelatedRecipes.module.css
index da310ef..6eac5d4 100644
--- a/src/components/RelatedRecipes/RelatedRecipes.module.css
+++ b/src/components/RelatedRecipes/RelatedRecipes.module.css
@@ -13,6 +13,7 @@
 }
 
 .title {
+    font-family:  var(--heading-text-font);
     font-size: 30px;
     font-weight: 600;
     text-align: center;
@@ -58,7 +59,7 @@
 
 .recipeName {
     font-size: 18px;
-    font-weight: 500;
+    font-weight: bold;
     text-align: center;
     text-decoration: none;
     margin-top: 10px;
diff --git a/src/components/recipeItem/RecipeItem.module.css b/src/components/recipeItem/RecipeItem.module.css
index 6bb015e..d74be20 100644
--- a/src/components/recipeItem/RecipeItem.module.css
+++ b/src/components/recipeItem/RecipeItem.module.css
@@ -58,6 +58,7 @@ h6 {
 }
 
 .itemName {
+    font-family:  var(--heading-text-font);
     font-size: 26px;
     margin-top: 25px;
     padding-left: 0;
@@ -79,6 +80,11 @@ h6 {
     margin-right: 10px;
 }
 
+.itemPrep, .itemCook, .itemServ {
+    font-family:  var(--heading-text-font);
+
+}
+
 /* --------------------------------- */
 /* ingredients + directions + image */
 
@@ -138,6 +144,7 @@ h6 {
 }
 
 .itemIngr {
+    font-family:  var(--heading-text-font);
     @media screen and (max-width:800px) {
         display: flex;
         justify-content: center;
@@ -179,6 +186,8 @@ h6 {
     }
 }
 .itemDirec {
+    font-family:  var(--heading-text-font);
+
     @media screen and (max-width:800px) {
         display: flex;
         justify-content: center;
@@ -250,8 +259,8 @@ h6 {
     padding: 10px 20px;
     border-radius: 40px;
     font-size: 17px;
-    font-weight: 500;
-    font-family: 'Rubik';
+    font-weight: var( --font-weight-600);
+    font-family: var(--heading-text-font);
     text-decoration: none;
     border: 0;
     align-self: center;  
diff --git a/src/index.css b/src/index.css
index 5b241d4..0185f23 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,11 +11,11 @@
     --body-text-font: "Poppins Regular", sans-serif;
     --font-weight-600: 600;
 
-    --color-white: #ffffff;
+    --color-white: #EFEFEF ;
     --button-color: #414066;
 
-    --light-theme-background-color: #faf8f8;
-    --light-theme-primary-text-color: #303041;
+    --light-theme-background-color: #EFEFEF;
+    --light-theme-primary-text-color: #333333;
     --light-theme-app-name-color: -webkit-linear-gradient(180deg, #F8CD38 0%, #C49E2A 100%);
     --light-theme-heading-text-color: #585858;
     --light-theme-button-bg-color: var(--button-color);
@@ -54,6 +54,7 @@ body {
     margin: 0;
     padding: 0;
     height: 100vh;
+    position: relative;
 }
 
 /* media query for desktop */