Endret design på RecipeCard (#128)

client/src/components/recipe/RecipeCard.tsx

@@ -2,6 +2,8 @@ import type { Recipe } from '../../types/recipe';
 import { Link } from 'react-router';
 import { Rating } from '@mui/material';
 import { RecipeImage } from '../ui/RecipeImage';
+import RestaurantIcon from '@mui/icons-material/Restaurant';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
 
 // Sier hva komponenten får inn.
 type RecipeCardProps = {
@@ -11,23 +13,26 @@ 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-olive rounded-lg p-4 text-black h-full bg-secondary/50 transition hover:shadow-lg hover:border-primary group flex flex-col">
-                <RecipeImage imageUrl={recipe.imageUrl} alt={recipe.title} className="w-full aspect-square rounded-md" />
-                <h3 className="text-lg font-semibold group-hover:underline min-h-14">{recipe.title}</h3>
-                <div className="flex justify-between">
-                    <p>{recipe.prepTimeMinutes} minutter</p>
-                    <p>{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>
-                    )}
+            <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>
             </article>
         </Link>

client/src/index.css

@@ -19,6 +19,7 @@
   --color-pink-dark: #ddbaae;
   --color-peach: #efd7c4;
   --color-sage: #c2c395;
+  --color-white:#ffffff;
 
   /* Typografi */
   --font-heading: "Tangerine", cursive;