merge recipe-finder -> master

Author: nooobcoder

RecipeFinder/package.json

@@ -1,10 +1,13 @@
 {
 	"name": "clean-react-app",
-	"version": "0.1.0",
+	"version": "1.1.0",
 	"private": true,
+	"license": "CC",
 	"dependencies": {
+		"@fortawesome/fontawesome-svg-core": "^1.2.35",
+		"@fortawesome/free-regular-svg-icons": "^5.15.3",
+		"@fortawesome/react-fontawesome": "^0.1.14",
 		"@reduxjs/toolkit": "^1.6.0",
-		"font-awesome": "^4.7.0",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-redux": "^7.2.4",

RecipeFinder/src/components/Footer.jsx

@@ -3,7 +3,13 @@ import styles from "../styles/Footer.module.css";
 const Footer = () => (
 	<div className={styles.footer}>
 		<div>Made with 💝 with React ⚛️ by </div>
-		<div> &copy; Ankur Paul (nooobcoder) - 2021</div>
+		<div>
+			{" "}
+			&copy;{" "}
+			<a href="https://github.com/nooobcoder/" target="_blank" rel="noreferrer">
+				Ankur Paul (nooobcoder) - 2021
+			</a>
+		</div>
 	</div>
 );
 

RecipeFinder/src/components/RecipeCard.jsx

@@ -1,6 +1,8 @@
 import styles from "../styles/RecipeCard.module.css";
-import "../../node_modules/font-awesome/css/font-awesome.css";
 import { useEffect, useState } from "react";
+import { faHeart } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { useSelector } from "react-redux";
 
 const RecipeCard = () => {
@@ -46,13 +48,21 @@ const RecipeCard = () => {
 				<div className={styles.recipe_card} key={meal.idMeal}>
 					<div className={styles.heading_container}>
 						<h3>{meal.strMeal}</h3>
-
-						<i
+						<div>
+							<FontAwesomeIcon
+								icon={faHeart}
+								className={`${styles.icon} ${
+									isFavorite[mealIndex] ? styles.red : ""
+								}`}
+								onClick={() => toggleFavoriteStatus(mealIndex)}
+							/>
+						</div>
+						{/* 	<i
 							className={"fa fa-heart ".concat(
 								`${isFavorite[mealIndex] ? styles.red : ""}`
 							)}
 							onClick={() => toggleFavoriteStatus(mealIndex)}
-						></i>
+						></i> */}
 					</div>
 
 					<div className={styles.recipe_container}>

RecipeFinder/src/styles/Footer.module.css

@@ -13,3 +13,10 @@
 	color: blueviolet;
 	text-align: center;
 }
+
+a,
+a:visited,
+a:hover,
+a:active {
+	color: inherit;
+}

RecipeFinder/src/styles/Header.module.css

@@ -7,6 +7,7 @@
 	margin: 0px 10px;
 	border: none;
 	font-size: 1.2rem;
+	text-align: center;
 	border-radius: 5px;
 	padding: 8px 10px;
 }

RecipeFinder/src/styles/RecipeCard.module.css

@@ -11,14 +11,25 @@
 	position: relative;
 	flex-direction: row;
 	flex-wrap: wrap;
-	justify-content: center;
+	justify-content: space-between;
 	align-items: center;
 }
 
-.heading_container > i {
+.heading_container > h3 {
+	flex: 1;
+}
+
+/* .heading_container > svg {
 	position: absolute;
 	cursor: pointer;
 	right: 10px;
+	margin-right: 50px;
+} */
+
+.icon {
+	position: relative;
+	cursor: pointer;
+	right: 10px;
 }
 
 .recipe_container {

RecipeFinder/yarn.lock

@@ -1170,6 +1170,32 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@^0.2.35":
+  version "0.2.35"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz#01dd3d054da07a00b764d78748df20daf2b317e9"
+  integrity sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==
+
+"@fortawesome/fontawesome-svg-core@^1.2.35":
+  version "1.2.35"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz#85aea8c25645fcec88d35f2eb1045c38d3e65cff"
+  integrity sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
+"@fortawesome/free-regular-svg-icons@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz#1ec4f2410ff638db549c5c5484fc60b66407dbe6"
+  integrity sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
+"@fortawesome/react-fontawesome@^0.1.14":
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca"
+  integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@hapi/[email protected]":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -5067,11 +5093,6 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.2.tgz#dd73c8effc12728ba5cf4259d760ea5fb83e3147"
   integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==
 
-font-awesome@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
-  integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"