From ac2dc21047e8843448d74997d819a7ac828d2262 Mon Sep 17 00:00:00 2001
From: Amalie <amalisso@stud.ntnu.no>
Date: Fri, 16 Oct 2026 22:51:53 +0200
Subject: [PATCH] =?UTF-8?q?Endret=20design=20p=C3=A5=20recipeDetail=20og?=
 =?UTF-8?q?=20lagt=20til=20favorittknapp=20(#133)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/recipe/RecipeCard.tsx   | 52 +++++++++++--------
 client/src/components/recipe/RecipeDetail.tsx | 15 ++++--
 2 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/client/src/components/recipe/RecipeCard.tsx b/client/src/components/recipe/RecipeCard.tsx
index 57609b1..c8f7183 100644
--- a/client/src/components/recipe/RecipeCard.tsx
+++ b/client/src/components/recipe/RecipeCard.tsx
@@ -4,6 +4,7 @@ import { Rating } from '@mui/material';
 import { RecipeImage } from '../ui/RecipeImage';
 import RestaurantIcon from '@mui/icons-material/Restaurant';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { FavoriteButton } from '../favorites/FavoriteButton';
 
 // Sier hva komponenten får inn.
 type RecipeCardProps = {
@@ -12,30 +13,35 @@ type RecipeCardProps = {
 
 export function RecipeCard({ recipe }: RecipeCardProps) {
     return (
-        <Link to={`/recipes/${recipe.id}`} className="block h-full rounded-lg focus-visible:outline-2 focus-visible:outline-primary">
-            <article className="border border-peach rounded-lg overflow-hidden text-black h-full bg-white/50 transition hover:shadow-lg hover:border-primary group flex flex-col">
-                <RecipeImage imageUrl={recipe.imageUrl} alt={recipe.title} className="w-full aspect-square" />
-                <div className="p-4">  
-                    <h3 className="text-lg font-semibold group-hover:underline min-h-8">{recipe.title}</h3>
-                    <div className="flex gap-3">
-                        <p className="flex items-center text-sm gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} min</p>
-                        <p className="text-3xl">·</p>
-                        <p className="flex items-center text-sm gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
+        <div className="relative">
+            <Link to={`/recipes/${recipe.id}`} className="block h-full rounded-lg focus-visible:outline-2 focus-visible:outline-primary">
+                <article className="border border-peach rounded-lg overflow-hidden text-black h-full bg-white/50 transition hover:shadow-lg hover:border-primary group flex flex-col">
+                    <RecipeImage imageUrl={recipe.imageUrl} alt={recipe.title} className="w-full aspect-square" />
+                    <div className="p-4">  
+                        <h3 className="text-lg font-semibold group-hover:underline min-h-8">{recipe.title}</h3>
+                        <div className="flex gap-3">
+                            <p className="flex items-center text-sm gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} min</p>
+                            <p className="text-3xl">·</p>
+                            <p className="flex items-center text-sm gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
+                        </div>
+                        <div className="mt-auto">
+                            {recipe.averageRating !== null ?(
+                                <Rating
+                                value={recipe.averageRating}
+                                readOnly
+                                precision={0.5}
+                                size="small"
+                                />
+                                ) : ( <p>Ingen rating ennå</p>
+                            )}
+                        </div>
                     </div>
-                    <div className="mt-auto">
-                        {recipe.averageRating !== null ?(
-                            <Rating
-                            value={recipe.averageRating}
-                            readOnly
-                            precision={0.5}
-                            size="small"
-                            />
-                            ) : ( <p>Ingen rating ennå</p>
-                        )}
-                    </div>
-                </div>
-            </article>
-        </Link>
+                </article>
+            </Link>
+            <div className="absolute right-3 top-3">
+                <FavoriteButton recipeId={recipe.id} title={recipe.title} /> 
+            </div>
+        </div>
     );
 }
 
diff --git a/client/src/components/recipe/RecipeDetail.tsx b/client/src/components/recipe/RecipeDetail.tsx
index e851c6e..80b4fcc 100644
--- a/client/src/components/recipe/RecipeDetail.tsx
+++ b/client/src/components/recipe/RecipeDetail.tsx
@@ -8,6 +8,7 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
+import { FavoriteButton } from '../favorites/FavoriteButton';
 
 // Sier hva komponenten får inn.
 type RecipeDetailProps = {
@@ -34,7 +35,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
 
     return (
         <article className="grid md:grid-cols-2 gap-6">
-            <section className="border border-olive rounded-lg p-4 flex flex-col bg-background">
+            <section className="border border-peach rounded-lg p-4 flex flex-col bg-background">
                 <div className="flex flex-wrap items-center justify-between gap-2 mb-4">
                     <ul className="flex flex-wrap gap-2">
                         {recipe.tags.map((tag) => (
@@ -60,15 +61,19 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                 <div>
                     <p>{recipe.description}</p>
                 </div>
-                <div className="flex justify-between">
+                <div className="flex gap-3">
                     <p className="rounded-full flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} minutter</p>
+                    <p className="text-3xl">·</p>
                     <p className="rounded-full flex items-center gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
                 </div>
             </section>
-            <section className="rounded-lg">
+            <section className="relative rounded-lg">   
                 <RecipeImage imageUrl={recipe.imageUrl} alt={recipe.title} className="w-full h-72 rounded-lg" />
+                <div className="absolute top-3 right-3">
+                   <FavoriteButton recipeId={recipe.id} title={recipe.title} /> 
+                </div>
             </section>
-            <section className="border border-olive rounded-lg p-4 bg-background">
+            <section className="border border-peach rounded-lg p-4 bg-background">
                 <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
                     <h2 className="text-2xl font-semibold">Ingredienser</h2>
                     <Stack direction="row" sx={{ alignItems: 'center', border: 1, borderColor: 'var(--color-pink-light)', borderRadius: 3, p: 0.5}}>
@@ -126,7 +131,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                     ))}
                 </ul>
             </section>
-            <section className="border border-olive bg-background rounded-lg p-4">
+            <section className="border border-peach bg-background rounded-lg p-4">
                 <h2 className="text-2xl font-semibold">Fremgangsmåte</h2>
                 <ol className="flex flex-col gap-3">
                     {recipe.steps.map((step) => (