diff --git a/src/pages/home/components/SelectedItems.js b/src/pages/home/components/SelectedItems.js
index 61dee23b2c5e10e7fd8b0b40fd422dfbd6328312..6fa8bb590a78fb9e4b45e06b5e930dd5fc9d2b3d 100644
--- a/src/pages/home/components/SelectedItems.js
+++ b/src/pages/home/components/SelectedItems.js
@@ -15,16 +15,7 @@ function SelectedItems(props) {
)
}
</List>
- // items = <ul>
- // {props.data.map(ingredient =>
- // <li key={ingredient.id}>
- // {ingredient.name} {ingredient.id}
- // </li>
- // )
- // }
- // </ul>
} else {
- // items = <Typography variant ="p">Searching...</Typography>
items = <List>
<ListItem>
<ListItemText
diff --git a/src/pages/recipe/Recipe.js b/src/pages/recipe/Recipe.js
index 8d44b1014dccdacfd276a05bfbdc74ea7a560e1c..9aca92e539af88f89eda6e47d23d88e6fcaba9cc 100644
--- a/src/pages/recipe/Recipe.js
+++ b/src/pages/recipe/Recipe.js
@@ -28,13 +28,16 @@ function Recipe() {
resp.then(r => setData(r.data));
}, []) // eslint-disable-line react-hooks/exhaustive-deps
- let body = <p>Loading...</p>;
+ let body = <Typography variant="p">Loading...</Typography>;
if (data.length !== 0) {
let pattern = /<.+>/;
if (pattern.test(data.instructions)) {
body = parse(data.instructions)
- } else {
- body = <p>{data.instructions}</p>;
+ } else if (data.instructions === "" || data.instructions === null){
+ body = <Typography variant="p">No instructions :(</Typography>
+ }
+ else {
+ body = <Typography variant="p">{data.instructions}</Typography>;
}
}
diff --git a/src/pages/results/Results.js b/src/pages/results/Results.js
index cfe0a4ec9f2376f8be9a07d68d31351514f21a88..5f35eead635d0e0706c576a82f377507b60eaaa9 100644
--- a/src/pages/results/Results.js
+++ b/src/pages/results/Results.js
@@ -37,7 +37,15 @@ function Results() {
const recipeComponent = recipes.map(recipe =>
<Link to={"/recipe/" + recipe.id}>
- <h3 key={recipe.id}>{recipe.title}</h3>
+ <Typography
+ variant="h5"
+ key={recipe.id}
+ sx = {{
+ mb: 2
+ }}
+ >
+ {recipe.title}
+ </Typography>
</Link>
)