From 627554239d567c7d3b21888bdc90b16078652a42 Mon Sep 17 00:00:00 2001
From: Mari Zhevagin <maribz@stud.ntnu.no>
Date: Thu, 15 Oct 2026 17:42:08 +0200
Subject: [PATCH 1/3] fikset favoritt

---
 .../components/favorites/FavoriteButton.tsx   | 65 +++++++++++++++++++
 client/src/graphql/favorites.ts               | 25 +++++++
 server/src/schema/resolvers/user.ts           | 33 ++++++++++
 server/src/schema/typeDefs/user.graphql       |  4 ++
 4 files changed, 127 insertions(+)
 create mode 100644 client/src/components/favorites/FavoriteButton.tsx
 create mode 100644 client/src/graphql/favorites.ts

diff --git a/client/src/components/favorites/FavoriteButton.tsx b/client/src/components/favorites/FavoriteButton.tsx
new file mode 100644
index 0000000..7515f67
--- /dev/null
+++ b/client/src/components/favorites/FavoriteButton.tsx
@@ -0,0 +1,65 @@
+import { useMutation, useQuery } from '@apollo/client/react';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import { useCurrentUser } from '../../lib/useCurrentUser';
+import { LoginRequiredDialog } from '../layout/LoginRequiredDialog';
+import { MY_FAVORITES, TOGGLE_FAVORITE } from '../../graphql/favorites';
+
+type FavoriteButtonProps = {
+  recipeId: string;
+  title: string;
+};
+
+// rødt hjerte både tomt og fylt
+const BUTTON =
+  'flex cursor-pointer rounded-full bg-background p-2 text-red-600 shadow-sm transition-colors hover:bg-red-600/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-light disabled:opacity-50';
+
+// hjerteknapp som legger til eller fjerner en favoritt
+export function FavoriteButton({ recipeId, title }: FavoriteButtonProps) {
+  const { user } = useCurrentUser();
+  // henter favorittene en gang og deler svaret med alle hjertene på siden
+  const { data } = useQuery(MY_FAVORITES, { skip: !user });
+  const [toggleFavorite, { loading }] = useMutation(TOGGLE_FAVORITE, {
+    variables: { recipeId },
+    // henter favorittene på nytt så hjertene og favorittsiden blir riktige
+    refetchQueries: [MY_FAVORITES],
+  });
+
+  // ikke innlogget så hjertet åpner innloggingspopupen
+  if (!user) {
+    return (
+      <LoginRequiredDialog
+        trigger={
+          <button
+            type="button"
+            aria-label={`Lagre ${title} som favoritt`}
+            className={BUTTON}
+          >
+            <FavoriteBorderIcon aria-hidden="true" />
+          </button>
+        }
+        message="Logg inn eller fortsett som gjest for å lagre favoritter."
+      />
+    );
+  }
+
+  const isFavorite =
+    data?.myFavorites.some((recipe) => recipe.id === recipeId) ?? false;
+
+  return (
+    <button
+      type="button"
+      onClick={() => toggleFavorite()}
+      disabled={loading}
+      aria-pressed={isFavorite}
+      aria-label={`Lagre ${title} som favoritt`}
+      className={BUTTON}
+    >
+      {isFavorite ? (
+        <FavoriteIcon aria-hidden="true" />
+      ) : (
+        <FavoriteBorderIcon aria-hidden="true" />
+      )}
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/client/src/graphql/favorites.ts b/client/src/graphql/favorites.ts
new file mode 100644
index 0000000..8b635f6
--- /dev/null
+++ b/client/src/graphql/favorites.ts
@@ -0,0 +1,25 @@
+import { gql, type TypedDocumentNode } from '@apollo/client';
+import type { Recipe } from '../types/recipe';
+
+// oppskriftene innlogget bruker har som favoritter
+export const MY_FAVORITES: TypedDocumentNode<{ myFavorites: Recipe[] }> = gql`
+  query MyFavorites {
+    myFavorites {
+      id
+      imageUrl
+      title
+      prepTimeMinutes
+      servings
+    }
+  }
+`;
+
+// legger til eller fjerner en favoritt
+export const TOGGLE_FAVORITE: TypedDocumentNode<
+  { toggleFavorite: boolean },
+  { recipeId: string }
+> = gql`
+  mutation ToggleFavorite($recipeId: ID!) {
+    toggleFavorite(recipeId: $recipeId)
+  }
+`;
\ No newline at end of file
diff --git a/server/src/schema/resolvers/user.ts b/server/src/schema/resolvers/user.ts
index da34af4..baf1f8a 100644
--- a/server/src/schema/resolvers/user.ts
+++ b/server/src/schema/resolvers/user.ts
@@ -40,6 +40,18 @@ export const userResolvers = {
         include: { ingredients: true, steps: true, tags: true },
       });
     },
+    // oppskifter som bruker har som favoritt
+    myFavorites: async (_: unknown, __: unknown, context: Context) => {
+      if (!context.userId) return [];
+      const favorites = await prisma.favorite.findMany({
+        where: { userId: context.userId },
+        orderBy: { createdAt: 'desc' },
+        include: {
+          recipe: { include: { ingredients: true, steps: true, tags: true }},
+        },
+      });
+      return favorites.map((favorite) => favorite.recipe);
+    }
   },
 
   Mutation: {
@@ -162,6 +174,27 @@ export const userResolvers = {
         },
       });
     },
+    // legger til favoritter eller fjerner de hvis den allere finnes
+    toggleFavorite: async (_: unknown, args: { recipeId: string }, context: Context) => {
+      if (!context.userId) {
+        throw new GraphQLError('Du må være logget inn.', {
+          extensions: { code: 'UNAUTHENTICATED' },
+        });
+      }
+
+      const key = { userId: context.userId, recipeId: args.recipeId };
+      const existing = await prisma.favorite.findUnique({
+        where: { userId_recipeId: key },
+      });
+
+      if (existing) {
+        await prisma.favorite.delete({ where: { id: existing.id } });
+        return false;
+      }
+
+      await prisma.favorite.create({ data: key });
+      return true;
+    },
   },
 
   User: {
diff --git a/server/src/schema/typeDefs/user.graphql b/server/src/schema/typeDefs/user.graphql
index 766dae4..0cc8f4b 100644
--- a/server/src/schema/typeDefs/user.graphql
+++ b/server/src/schema/typeDefs/user.graphql
@@ -13,6 +13,8 @@ extend type Query {
   me: User
   # oppskrifter innlogget bruker har laget
   myRecipes: [Recipe!]!
+  # oppskriftene innloggedet bruker har som favoritter
+  myFavorites: [Recipe!]!
 }
 
 extend type Mutation {
@@ -26,4 +28,6 @@ extend type Mutation {
     unitSystem: String!
     allergens: [String!]!
   ): User!
+  # legger til eller fjerner en favoritt
+  toggleFavorite(recipeId: ID!): Boolean!
 }

From 2e5b3123c9442acdeaff131fd582191a33f8bd7f Mon Sep 17 00:00:00 2001
From: Mari Zhevagin <maribz@stud.ntnu.no>
Date: Thu, 15 Oct 2026 18:37:01 +0200
Subject: [PATCH 2/3] fikse favoritter og knapp, fikset liten fargeforandring

---
 .../components/favorites/FavoriteButton.tsx   |  4 +-
 .../components/profile/PreferencesForm.tsx    |  6 +--
 client/src/graphql/favorites.ts               |  2 +-
 client/src/index.css                          |  6 +--
 client/src/routes/FavoritesPage.tsx           | 51 ++++++++++++++++++-
 client/src/routes/LoginPage.tsx               |  4 +-
 client/src/routes/ProfilePage.tsx             | 39 +++++++++++---
 server/src/schema/resolvers/user.ts           | 11 ++--
 8 files changed, 99 insertions(+), 24 deletions(-)

diff --git a/client/src/components/favorites/FavoriteButton.tsx b/client/src/components/favorites/FavoriteButton.tsx
index 7515f67..018b632 100644
--- a/client/src/components/favorites/FavoriteButton.tsx
+++ b/client/src/components/favorites/FavoriteButton.tsx
@@ -12,7 +12,7 @@ type FavoriteButtonProps = {
 
 // rødt hjerte både tomt og fylt
 const BUTTON =
-  'flex cursor-pointer rounded-full bg-background p-2 text-red-600 shadow-sm transition-colors hover:bg-red-600/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-light disabled:opacity-50';
+  'flex cursor-pointer rounded-full bg-background p-2 text-primary shadow-sm transition-colors hover:bg-primary/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-light disabled:opacity-50';
 
 // hjerteknapp som legger til eller fjerner en favoritt
 export function FavoriteButton({ recipeId, title }: FavoriteButtonProps) {
@@ -62,4 +62,4 @@ export function FavoriteButton({ recipeId, title }: FavoriteButtonProps) {
       )}
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/profile/PreferencesForm.tsx b/client/src/components/profile/PreferencesForm.tsx
index 48fa3cf..715bef1 100644
--- a/client/src/components/profile/PreferencesForm.tsx
+++ b/client/src/components/profile/PreferencesForm.tsx
@@ -59,7 +59,7 @@ export function PreferencesForm() {
   const [updatePreferences, { error }] = useMutation(UPDATE_PREFERENCES);
   // om siste endring ble lagret
   const [saved, setSaved] = useState(false);
-  
+
   // lagrer alle valgene hver gang noe endres
   async function save(
     nextLanguage: string,
@@ -91,7 +91,7 @@ export function PreferencesForm() {
     save(language, value, allergies);
   }
 
-    // legger til allergien hvis den ikke er valgt
+  // legger til allergien hvis den ikke er valgt
   function toggleAllergy(name: string) {
     const next = allergies.includes(name)
       ? allergies.filter((allergy) => allergy !== name)
@@ -106,7 +106,7 @@ export function PreferencesForm() {
       className="flex h-full flex-col gap-6 rounded-large border border-secondary/60 bg-background p-6 md:p-8"
     >
       <div>
-        <h2 id="preferanser-tittel" className="font-heading text-3xl">
+        <h2 id="preferanser-tittel" className="font-display text-3xl">
           Preferanser
         </h2>
         <p className="text-sm text-text/70">
diff --git a/client/src/graphql/favorites.ts b/client/src/graphql/favorites.ts
index 8b635f6..4411726 100644
--- a/client/src/graphql/favorites.ts
+++ b/client/src/graphql/favorites.ts
@@ -22,4 +22,4 @@ export const TOGGLE_FAVORITE: TypedDocumentNode<
   mutation ToggleFavorite($recipeId: ID!) {
     toggleFavorite(recipeId: $recipeId)
   }
-`;
\ No newline at end of file
+`;
diff --git a/client/src/index.css b/client/src/index.css
index a8a28c3..cfbadad 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Tangerine:wght@400;700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Tangerine:wght@400;700&family=Cormorant+Garamond:wght@500;600&display=swap');
 @import "tailwindcss";
 
 
@@ -24,7 +23,8 @@
   /* Typografi */
   --font-heading: "Tangerine", cursive;
   --font-body: "DM Sans", Arial, sans-serif;
-
+  --font-display: "Cormorant Garamond", Georgia, serif;
+  
   /* Border radius */
   --radius-small: 6px;
   --radius-medium: 10px;
diff --git a/client/src/routes/FavoritesPage.tsx b/client/src/routes/FavoritesPage.tsx
index bf604ec..4e33c48 100644
--- a/client/src/routes/FavoritesPage.tsx
+++ b/client/src/routes/FavoritesPage.tsx
@@ -1,4 +1,51 @@
-// TODO: liste over brukerens favoritter
+import { Link } from 'react-router';
+import { useQuery } from '@apollo/client/react';
+import { RecipeCard } from '../components/recipe/RecipeCard';
+import { FavoriteButton } from '../components/favorites/FavoriteButton';
+import { MY_FAVORITES } from '../graphql/favorites';
+
+// oppskriftene brukeren har lagret som favoritter
 export default function FavoritesPage() {
-  return <h1 className="font-heading text-4xl md:text-5xl">Favoritter</h1>;
+  // henter på nytt hver gang siden åpnes så nye favoritter kommer med
+  const { data, loading, error } = useQuery(MY_FAVORITES, {
+    fetchPolicy: 'cache-and-network',
+  });
+  const favorites = data?.myFavorites ?? [];
+
+  return (
+    <>
+      <h1 className="font-heading text-4xl md:text-5xl">Favoritter</h1>
+
+      {loading && !data && (
+        <p role="status" className="mt-4">
+          Laster favoritter...
+        </p>
+      )}
+      {error && (
+        <p role="alert" className="mt-4">
+          Kunne ikke hente favorittene. Prøv igjen senere.
+        </p>
+      )}
+      {!loading && !error && favorites.length === 0 && (
+        <p className="mt-4">
+          Du har ingen favoritter ennå.{' '}
+          <Link to="/recipes" className="text-primary underline">
+            Utforsk oppskrifter
+          </Link>
+        </p>
+      )}
+
+      <ul className="mt-8 grid grid-cols-2 gap-6 lg:grid-cols-4">
+        {favorites.map((recipe) => (
+          <li key={recipe.id} className="relative h-full">
+            <RecipeCard recipe={recipe} />
+            {/* hjertet åpner ikke oppskriften */}
+            <div className="absolute top-3 right-3">
+              <FavoriteButton recipeId={recipe.id} title={recipe.title} />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
 }
diff --git a/client/src/routes/LoginPage.tsx b/client/src/routes/LoginPage.tsx
index ada21ee..363ca4a 100644
--- a/client/src/routes/LoginPage.tsx
+++ b/client/src/routes/LoginPage.tsx
@@ -103,7 +103,7 @@ export default function LoginPage() {
         {/* går til innloggingssiden, testbrukeren er brukernavn: test , passord: test123 */}
         <Button
           variant="secondary"
-          className="font-bold"
+          className="font-bold hover:bg-primary/10"
           onClick={() => navigate('/login/test')}
         >
           Logg inn som testbruker
@@ -115,7 +115,7 @@ export default function LoginPage() {
       </div>
 
       <div className="flex flex-col gap-2">
-        <Button variant="secondary" className="font-bold" onClick={handleGuest}>
+        <Button variant="secondary" className="font-bold  hover:bg-primary/10" onClick={handleGuest}>
           Fortsett som gjest
         </Button>
         <p className="text-center text-sm">Kom i gang uten en konto.</p>
diff --git a/client/src/routes/ProfilePage.tsx b/client/src/routes/ProfilePage.tsx
index 649c85c..6e3f9ab 100644
--- a/client/src/routes/ProfilePage.tsx
+++ b/client/src/routes/ProfilePage.tsx
@@ -4,8 +4,10 @@ import { Button } from '../components/ui/Button';
 import { PreferencesForm } from '../components/profile/PreferencesForm';
 import { useCurrentUser } from '../lib/useCurrentUser';
 import { useQuery } from '@apollo/client/react';
-import { RecipeList } from '../components/recipe/RecipeList';
 import { MY_RECIPES } from '../graphql/profile';
+import { RecipeCard } from '../components/recipe/RecipeCard';
+import { FavoriteButton } from '../components/favorites/FavoriteButton';
+import { MY_FAVORITES } from '../graphql/favorites';
 
 type Tab = 'preferences' | 'favorites' | 'shared' | 'sharedWithMe';
 type RecipeTab = Exclude<Tab, 'preferences'>;
@@ -44,6 +46,10 @@ export default function ProfilePage() {
   const { data: myRecipesData } = useQuery(MY_RECIPES, {
     fetchPolicy: 'cache-and-network',
   });
+  // favorittene til brukeren
+  const { data: favoritesData } = useQuery(MY_FAVORITES, {
+    fetchPolicy: 'cache-and-network',
+  });
 
   // RequireAuth sørger for at user finnes
   if (!user) return null;
@@ -55,6 +61,14 @@ export default function ProfilePage() {
   const desktopTab: RecipeTab =
     activeTab === 'preferences' ? 'favorites' : activeTab;
 
+  const favorites = favoritesData?.myFavorites ?? [];
+  const tabRecipes =
+    desktopTab === 'shared'
+      ? myRecipes
+      : desktopTab === 'favorites'
+        ? favorites
+        : [];
+
   async function handleLogout() {
     await logout();
     navigate('/login');
@@ -77,7 +91,7 @@ export default function ProfilePage() {
         ) : (
           // innlogget olivengrønt panel
           <section className="rounded-large bg-[#52552f] p-6 text-background md:p-8">
-            <p className="text-xs tracking-widest uppercase">
+            <p className="font-display font-semibold text-sm tracking-widest uppercase">
               Din oppskriftsbok
             </p>
             <h1 className="mt-2 font-heading text-5xl">Hei {user.name}</h1>
@@ -90,12 +104,14 @@ export default function ProfilePage() {
             <ul className="mt-5 flex flex-wrap gap-x-6 gap-y-3">
               {[
                 { count: myRecipes.length, label: 'mine oppskrifter' },
-                { count: 0, label: 'favoritter' },
+                { count: favorites.length, label: 'favoritter' },
                 { count: 0, label: 'delte' },
                 { count: 0, label: 'delt med deg' },
               ].map((stat) => (
                 <li key={stat.label} className="flex flex-col">
-                  <span className="font-heading text-3xl">{stat.count}</span>
+                  <span className="font-display font-semibold text-3xl">
+                    {stat.count}
+                  </span>
                   <span className="text-xs">{stat.label}</span>
                 </li>
               ))}
@@ -197,7 +213,7 @@ export default function ProfilePage() {
               role="tab"
               aria-selected={desktopTab === tab}
               onClick={() => setActiveTab(tab)}
-              className={`-mb-px cursor-pointer border-b-2 pb-2 font-heading text-2xl transition-colors ${FOCUS_RING} ${
+              className={`-mb-px cursor-pointer border-b-2 pb-2 font-display text-2xl transition-colors ${FOCUS_RING} ${
                 desktopTab === tab
                   ? 'border-primary text-primary'
                   : 'border-transparent hover:text-primary'
@@ -208,8 +224,17 @@ export default function ProfilePage() {
           ))}
         </div>
 
-        {desktopTab === 'shared' && myRecipes.length > 0 ? (
-          <RecipeList recipes={myRecipes} />
+        {tabRecipes.length > 0 ? (
+          <ul className="grid grid-cols-2 gap-4 xl:grid-cols-3">
+            {tabRecipes.map((recipe) => (
+              <li key={recipe.id} className="relative">
+                <RecipeCard recipe={recipe} />
+                <div className="absolute top-3 right-3">
+                  <FavoriteButton recipeId={recipe.id} title={recipe.title} />
+                </div>
+              </li>
+            ))}
+          </ul>
         ) : (
           <section className="rounded-large border border-dashed border-peach p-8 text-center">
             <p>{RECIPE_TABS[desktopTab].empty}</p>
diff --git a/server/src/schema/resolvers/user.ts b/server/src/schema/resolvers/user.ts
index baf1f8a..ea8f92d 100644
--- a/server/src/schema/resolvers/user.ts
+++ b/server/src/schema/resolvers/user.ts
@@ -13,7 +13,6 @@ const MIN_PASSWORD_LENGTH = 6;
 
 type Credentials = { username: string; password: string };
 
-
 type Preferences = {
   languagePref: string;
   unitSystem: string;
@@ -47,11 +46,11 @@ export const userResolvers = {
         where: { userId: context.userId },
         orderBy: { createdAt: 'desc' },
         include: {
-          recipe: { include: { ingredients: true, steps: true, tags: true }},
+          recipe: { include: { ingredients: true, steps: true, tags: true } },
         },
       });
       return favorites.map((favorite) => favorite.recipe);
-    }
+    },
   },
 
   Mutation: {
@@ -175,7 +174,11 @@ export const userResolvers = {
       });
     },
     // legger til favoritter eller fjerner de hvis den allere finnes
-    toggleFavorite: async (_: unknown, args: { recipeId: string }, context: Context) => {
+    toggleFavorite: async (
+      _: unknown,
+      args: { recipeId: string },
+      context: Context,
+    ) => {
       if (!context.userId) {
         throw new GraphQLError('Du må være logget inn.', {
           extensions: { code: 'UNAUTHENTICATED' },

From 55c1c92aa3c481b32810d138ef4ba75ac1f74093 Mon Sep 17 00:00:00 2001
From: Mari Zhevagin <maribz@stud.ntnu.no>
Date: Thu, 15 Oct 2026 18:44:28 +0200
Subject: [PATCH 3/3] hoverfarger

---
 client/src/routes/LoginPage.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/routes/LoginPage.tsx b/client/src/routes/LoginPage.tsx
index 363ca4a..8b82391 100644
--- a/client/src/routes/LoginPage.tsx
+++ b/client/src/routes/LoginPage.tsx
@@ -103,7 +103,7 @@ export default function LoginPage() {
         {/* går til innloggingssiden, testbrukeren er brukernavn: test , passord: test123 */}
         <Button
           variant="secondary"
-          className="font-bold hover:bg-primary/10"
+          className="font-bold hover:bg-primary/10!"
           onClick={() => navigate('/login/test')}
         >
           Logg inn som testbruker
@@ -115,7 +115,11 @@ export default function LoginPage() {
       </div>
 
       <div className="flex flex-col gap-2">
-        <Button variant="secondary" className="font-bold  hover:bg-primary/10" onClick={handleGuest}>
+        <Button
+          variant="secondary"
+          className="font-bold hover:bg-primary/10!"
+          onClick={handleGuest}
+        >
           Fortsett som gjest
         </Button>
         <p className="text-center text-sm">Kom i gang uten en konto.</p>