added more material-ui

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

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

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