change like button, import grid

Gemfile

@@ -34,7 +34,7 @@ gem "bootsnap", require: false
 # gem "image_processing", "~> 1.2"
 
 # Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
-# gem "rack-cors"
+gem "rack-cors"
 
 # byebug
 gem 'pry', '~> 0.13.1'

Gemfile.lock

@@ -123,6 +123,8 @@ GEM
       nio4r (~> 2.0)
     racc (1.6.2)
     rack (2.2.6.2)
+    rack-cors (2.0.1)
+      rack (>= 2.0.0)
     rack-test (2.0.2)
       rack (>= 1.3)
     rails (7.0.4.2)
@@ -173,6 +175,7 @@ DEPENDENCIES
   pg (~> 1.1)
   pry (~> 0.13.1)
   puma (~> 5.0)
+  rack-cors
   rails (~> 7.0.4)
   tzinfo-data
 

client/src/components/Recipe.js

@@ -1,6 +1,7 @@
 import React, { useContext } from "react";
 import { UserContext } from "./App";
 import Button from "@mui/material/Button";
+import FavoriteIcon from "@mui/icons-material/Favorite";
 import { styled } from "@mui/material/styles";
 import Card from "@mui/material/Card";
 import CardHeader from "@mui/material/CardHeader";
@@ -12,6 +13,7 @@ import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 // import { red } from "@mui/material/colors";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { Grid } from "@mui/material";
 
 function Recipe({ recipe }) {
   const { currentUser, handleDeleteRecipe, handleAddRecipe } =
@@ -74,19 +76,22 @@ function Recipe({ recipe }) {
         </Typography>
       </CardContent>
       <CardActions disableSpacing>
-        <IconButton aria-label='add to favorites'>
-          {user_id ? (
-            id ? (
-              <Button type='button' variant='contained' onClick={deleteRecipe}>
-                Delete it!
-              </Button>
-            ) : null
-          ) : (
-            <Button type='button' variant='contained' onClick={addRecipe}>
-              Like it!
+        {user_id ? (
+          id ? (
+            <Button type='button' variant='contained' onClick={deleteRecipe}>
+              Delete it!
             </Button>
-          )}
-        </IconButton>
+          ) : null
+        ) : (
+          <IconButton
+            aria-label='add to favorites'
+            type='button'
+            variant='contained'
+            onClick={addRecipe}
+          >
+            <FavoriteIcon />
+          </IconButton>
+        )}
         <ExpandMore
           expand={expanded}
           onClick={handleExpandClick}

client/src/components/RecipeBook.js

@@ -1,12 +1,15 @@
 // filter between liked and self created recipes
+import { Grid } from "@mui/material";
 import React, { useContext } from "react";
 import { UserContext } from "./App";
 import Recipe from "./Recipe";
 
 function RecipeBook() {
   const { currentUser } = useContext(UserContext);
   const recipesDisplayed = currentUser.recipes.map((recipe) => (
-    <Recipe key={recipe.summary} recipe={recipe} />
+    <Grid container spacing={2}>
+      <Recipe key={recipe.summary} recipe={recipe} />
+    </Grid>
   ));
 
   return (