Merge pull request #49 from chingu-voyages/feat/search

fix visual
chingu-voyages · Nov 11, 2023 · 94d6c8e · 94d6c8e
2 parents d7b8190 + 401b1f0
commit 94d6c8e
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 13 deletions.
diff --git a/src/components/Recipe/Recipe.jsx b/src/components/Recipe/Recipe.jsx
@@ -10,15 +10,15 @@ 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>
             ) : (
                 <></>
             )}
             {!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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 */