Merge pull request #50 from chingu-voyages/development

merge dev into main

README.md

@@ -13,24 +13,30 @@ Zest is a web app that lets users find and sort recipes.
 
 ## Project Description
 
-Zest is a web app that lets users find and sort recipes. It uses the Tasty API. By default users can see browse an entire page of recipes. Users can search for recipes by their name (such as mac and cheese) and category (such as vegetarian, or pasta). Moreover, the user can filter recipes by categories.
+Zest is a web app that lets users find and sort recipes. It uses the Tasty API and features a modern design which is light, fully responsive and accessible. By default users can browse an entire page of recipes. Users can search for recipes by their ingredients (such as *cheese*). 
 
 ## Major Functions and Features
 
 1. **Browse recipes:** The landing page features a list of recipe cards, which contain information about ingredients, cooking times and step-by-step directions. Each of the recipes contains a picture of the dish and a nutritional chart. The recipes displayed are fetched using the Tasty API.
 
-2. **Find recipes:** By interacting with the search bar, the user can look for recipes entering a dish name or a category description (such as "under 30 minutes"). The results show up on the main page when the user use the search bar.
+2. **Find recipes:** By interacting with the search bar, the user can look for recipes entering an ingredient (such as *butter*, *chicken* or *carrot*). The results show up on the main page when the user use the search bar.
+
+3. **Responsive design:** The website is made fully responsive on all viewports using flex and media queries, and it features cards in a layout of 5 to 1 columns.
+
+4. **Dark mode:** There is an integrated dark mode for accessibility, which can be switched to using a toggle on the top right corner of the website. The website colors pass the AAA test on the Web Accessibility Guidelines, and they are both legible and easy on the eyes.
 
-2. **Sort recipes:** The user can sort the recipes by cooking time, nutritional value and alphabetically. 
 ---
 
 ## Dependencies
 
 To run "Zest" you will need the following dependencies and libraries:
 
-- axios - Version 1.5.0
-- chart.js - Version 4.3.3
-- react - Version 18.2.0
+- [React](https://react.dev/learn)
+- [React Router](https://reactrouter.com/en/main)
+- [Redux Store](https://redux.js.org/api/store)
+- [Axios](https://axios-http.com/docs/intro)
+- [Vite](https://vitejs.dev/guide/)
+- [Tasty API](https://rapidapi.com/apidojo/api/tasty)
 
 ## Project setup
 

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} />
                     ))}

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%

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;
 }

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;

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;  

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 */