From 351ea9992beb2fa8d1631fb195d61340357d9610 Mon Sep 17 00:00:00 2001
From: Amalie <amalisso@stud.ntnu.no>
Date: Thu, 1 Oct 2026 14:01:10 +0200
Subject: [PATCH] =?UTF-8?q?Forbedre=20layout=20p=C3=A5=20oppskriftssiden?=
 =?UTF-8?q?=20og=20hover=20p=C3=A5=20kort=20(#40)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/recipe/RecipeCard.tsx   |  2 +-
 client/src/components/recipe/RecipeDetail.tsx | 26 +++++++++----------
 client/src/index.css                          |  1 +
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/client/src/components/recipe/RecipeCard.tsx b/client/src/components/recipe/RecipeCard.tsx
index 2cdc3e2..a4ba8ff 100644
--- a/client/src/components/recipe/RecipeCard.tsx
+++ b/client/src/components/recipe/RecipeCard.tsx
@@ -9,7 +9,7 @@ type RecipeCardProps = {
 export function RecipeCard({ recipe }: RecipeCardProps) {
     return (
         <Link to={`/recipes/${recipe.recipeId}`} className="block h-full rounded-lg focus-visible:outline-2 focus-visible:outline-primary">
-            <article className="border border-olive rounded-lg p-4 text-black h-full bg-secondary/50 transition hover:shadow-lg group">
+            <article className="border border-olive rounded-lg p-4 text-black h-full bg-secondary/50 transition hover:shadow-lg hover:border-primary group">
                 <img className="w-full aspect-square object-cover rounded-md" src={recipe.imageURL} alt={recipe.title}/>
                 <h3 className="text-lg font-semibold group-hover:underline">{recipe.title}</h3>
                 <div className="flex justify-between">
diff --git a/client/src/components/recipe/RecipeDetail.tsx b/client/src/components/recipe/RecipeDetail.tsx
index 2ab59c5..0ccda48 100644
--- a/client/src/components/recipe/RecipeDetail.tsx
+++ b/client/src/components/recipe/RecipeDetail.tsx
@@ -8,27 +8,27 @@ type RecipeDetailProps = {
 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">
-                <h1 className="font-heading text-4xl md:text-5xl">{recipe.title}</h1>
-                <div className="flex justify-between">
-                    <p>{recipe.prepTime} minutter</p>
-                    <p>{recipe.portions} porsjoner</p>
-                </div>
-                <div>
-                    <p>{recipe.description}</p>
-                </div>
-                <ul className="flex flex-wrap gap-2 mt-auto">
+            <section className="border border-olive rounded-lg p-4 flex flex-col bg-background">
+                <ul className="flex flex-wrap gap-2 mb-4">
                     {recipe.tags.map((tag) => (
                         <li className="rounded-full bg-olive text-background px-3 py-1 text-sm" key={tag.tagId}>
                             {tag.tagName}
                         </li>
                     ))}
                 </ul>
+                <h1 className="font-heading text-4xl md:text-5xl">{recipe.title}</h1>
+                <div>
+                    <p>{recipe.description}</p>
+                </div>
+                <div className="flex justify-between">
+                    <p className="border border-olive rounded-full">{recipe.prepTime} minutter</p>
+                    <p className="border border-olive rounded-full">{recipe.portions} porsjoner</p>
+                </div>
             </section>
             <section className="rounded-lg">
-                <img className="w-full h-72 object-cover rounded-lg" src={recipe.imageURL} alt={recipe.title}/>
+                <img className="w-full h-72 object-cover bg-pink-dark rounded-lg" src={recipe.imageURL} alt={recipe.title}/>
             </section>
-            <section className="border border-olive rounded-lg p-4">
+            <section className="border border-olive rounded-lg p-4 bg-background">
                 <h2 className="text-2xl font-semibold">Ingredienser</h2>
                 <ul>
                     {recipe.ingredients.map((ingredient) => (
@@ -40,7 +40,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                     ))}
                 </ul>
             </section>
-            <section className="border border-olive rounded-lg p-4">
+            <section className="border border-olive bg-background rounded-lg p-4">
                 <h2 className="text-2xl font-semibold">Steg</h2>
                 <ol className="list-decimal list-inside">
                     {recipe.steps.map((step) => (
diff --git a/client/src/index.css b/client/src/index.css
index a1eecab..f97733f 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -16,6 +16,7 @@
 
   --color-pink-light: #f2c6cf;
   --color-pink: #b46a72;
+  --color-pink-dark: #ddbaae;
   --color-peach: #efd7c4;
 
   /* Typografi */