From 051c420a5070d5c031dbf13a20a1874e6f022ccd Mon Sep 17 00:00:00 2001
From: adityar-123 <adityasr2018@gmail.com>
Date: Thu, 5 Dec 2024 17:35:41 -0800
Subject: [PATCH] additional frontend changes for recipe cards

---
 components/EditRecipeCard.tsx |  6 ++--
 components/RecipeCard.tsx     | 65 ++++++++++++++++++++++++-----------
 2 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/components/EditRecipeCard.tsx b/components/EditRecipeCard.tsx
index 58789d7..a3c65db 100644
--- a/components/EditRecipeCard.tsx
+++ b/components/EditRecipeCard.tsx
@@ -174,7 +174,7 @@ export default function EditRecipeCard({
       <Navbar />
       <div className="text-center">
         <CardHeader>
-          <CardTitle className="font-semibold text-4xl mb-2 bg-gradient-to-r from-purple-600 to-indigo-800 text-transparent bg-clip-text">
+          <CardTitle className="font-semibold text-4xl mb-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-transparent bg-clip-text">
             Recipe for {editedRecipe.title}
           </CardTitle>
         </CardHeader>
@@ -239,13 +239,13 @@ export default function EditRecipeCard({
           <div className="flex items-center gap-2 mt-3 justify-end">
             <Button
               onClick={handleAddIngredient}
-              className="bg-indigo-600 bg-gradient-to-r from-purple-600 to-indigo-600 hover:bg-indigo-700 text-white"
+              className="bg-indigo-600 bg-gradient-to-r from-purple-600 to-indigo-600 text-white"
             >
               <Plus className="h-4 w-4 mr-2" /> Add Ingredient
             </Button>
             <Button
               onClick={handleUpdateRecipe}
-              className="bg-indigo-600 bg-gradient-to-r from-indigo-600 to-purple-600 hover:bg-indigo-700 text-white w-full"
+              className="bg-indigo-600 bg-gradient-to-r from-purple-600 to-indigo-600 hover:bg-indigo-700 text-white w-full"
               disabled={isUpdating}
             >
               {isUpdating ? (
diff --git a/components/RecipeCard.tsx b/components/RecipeCard.tsx
index 674a8ab..0215e5f 100644
--- a/components/RecipeCard.tsx
+++ b/components/RecipeCard.tsx
@@ -97,25 +97,50 @@ export default function RecipeCard({
 
       {/* Recipe Title and Basic Info */}
       <CardHeader>
-        <CardTitle className="text-xl">{recipe.title}</CardTitle>
-        <CardDescription className="flex items-center gap-2 text-sm">
-          <span>🕒 {recipe.readyInMinutes} mins</span>
-          <span>•</span>
-          <span>👥 Serves {recipe.servings}</span>
-        </CardDescription>
-        {recipe.diets?.length > 0 && (
-          <div className="flex flex-wrap gap-1.5">
-            {recipe.diets.slice(0, 2).map((diet: string) => (
-              <Badge key={diet} variant="secondary" className="capitalize">
-                {diet}
-              </Badge>
-            ))}
-            {recipe.diets.length > 2 && (
-              <Badge variant="secondary">+{recipe.diets.length - 2}</Badge>
-            )}
-          </div>
-        )}
-      </CardHeader>
+  <CardTitle className="text-xl">{recipe.title}</CardTitle>
+  <CardDescription className="flex items-center gap-2 text-sm">
+    <span className="flex items-center gap-1">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-5 w-5 text-purple-600"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 101.414-1.414L11 9.586V5z"
+          clipRule="evenodd"
+        />
+      </svg>
+      {recipe.readyInMinutes} mins
+    </span>
+    <span>•</span>
+    <span className="flex items-center gap-1">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-7 w-7 text-purple-600"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path d="M13 7a3 3 0 11-6 0 3 3 0 016 0zM4 13a4 4 0 014-4h4a4 4 0 014 4v1H4v-1z" />
+      </svg>
+      Serves {recipe.servings}
+    </span>
+  </CardDescription>
+  {recipe.diets?.length > 0 && (
+    <div className="flex flex-wrap gap-1.5">
+      {recipe.diets.slice(0, 2).map((diet: string) => (
+        <Badge key={diet} variant="secondary" className="capitalize">
+          {diet}
+        </Badge>
+      ))}
+      {recipe.diets.length > 2 && (
+        <Badge variant="secondary">+{recipe.diets.length - 2}</Badge>
+      )}
+    </div>
+  )}
+</CardHeader>
+
 
       <CardContent className="space-y-4">
         {/* Quick Nutrition Facts */}
@@ -137,7 +162,7 @@ export default function RecipeCard({
         {/* Expand/Collapse Button */}
         <Button
           variant="outline"
-          className="w-full"
+          className="w-full text-white hover:text-white bg-gradient-to-r from-purple-600 to-indigo-600"
           onClick={() => setIsExpanded(!isExpanded)}
         >
           <span className="flex items-center gap-2">