From 855dc622072b21498a1acb299381e29c46011d97 Mon Sep 17 00:00:00 2001
From: Paul Huliganga <paje0101@gmail.com>
Date: Wed, 25 Mar 2026 18:31:07 -0400
Subject: [PATCH] feat(ui): visually polish RecipeDetailPage and RecipeForm
 with consistent theme tokens, improved layout, card sections, and input
 styling for UX parity with RecipeList

---
 frontend/src/components/RecipeForm.tsx  | 147 +++++------
 frontend/src/pages/RecipeDetailPage.tsx | 320 ++++++++----------------
 2 files changed, 162 insertions(+), 305 deletions(-)

diff --git a/frontend/src/components/RecipeForm.tsx b/frontend/src/components/RecipeForm.tsx
index e5a80de..e8e87f9 100644
--- a/frontend/src/components/RecipeForm.tsx
+++ b/frontend/src/components/RecipeForm.tsx
@@ -2,14 +2,6 @@ import { useState, useEffect } from 'react';
 import type { Recipe, Tag } from '../types/recipe';
 import { TagSelector } from './TagSelector';
 
-interface RecipeFormProps {
-  recipe?: Recipe | null;
-  initialTags?: Tag[];
-  onSubmit: (data: RecipeFormData, tags: Tag[]) => Promise<void>;
-  onCancel: () => void;
-  submitLabel?: string;
-}
-
 export interface RecipeFormData {
   title: string;
   description?: string;
@@ -22,8 +14,16 @@ export interface RecipeFormData {
   cook_time_minutes?: number;
 }
 
+interface RecipeFormProps {
+  recipe?: Recipe; // May be undefined when creating
+  initialTags?: Tag[];
+  onSubmit: (data: RecipeFormData, tags: Tag[]) => Promise<void>;
+  onCancel: () => void;
+  submitLabel?: string;
+}
+
 /**
- * RecipeForm - Form component for creating/editing recipes
+ * RecipeForm - Visually polished form component for creating/editing recipes
  */
 export function RecipeForm({ 
   recipe, 
@@ -52,8 +52,10 @@ export function RecipeForm({
     if (recipe) {
       setTitle(recipe.title || '');
       setDescription(recipe.description || '');
-      setIngredientsText(recipe.ingredients.join('\n'));
-      setInstructionsText(recipe.instructions.join('\n'));
+      setIngredientsText((Array.isArray(recipe.ingredients) ? recipe.ingredients.map(ingr => ('item' in ingr ? ingr.item : (typeof ingr === 'string' ? ingr : ''))) : []).join('\n'));
+      setInstructionsText(
+        (Array.isArray(recipe.instructions) ? recipe.instructions : recipe.steps?.map(s => s.instruction) || []).join('\n')
+      );
       setSourceUrl(recipe.source_url || '');
       setNotes(recipe.notes || '');
       setServings(recipe.servings?.toString() || '');
@@ -62,12 +64,11 @@ export function RecipeForm({
     }
   }, [recipe]);
 
-  // Update tags when initialTags changes
   useEffect(() => {
     setSelectedTags(initialTags);
   }, [initialTags]);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setError(null);
 
@@ -81,7 +82,6 @@ export function RecipeForm({
       .split('\n')
       .map(line => line.trim())
       .filter(line => line.length > 0);
-
     if (ingredientsList.length === 0) {
       setError('At least one ingredient is required');
       return;
@@ -91,7 +91,6 @@ export function RecipeForm({
       .split('\n')
       .map(line => line.trim())
       .filter(line => line.length > 0);
-
     if (instructionsList.length === 0) {
       setError('At least one instruction step is required');
       return;
@@ -108,7 +107,6 @@ export function RecipeForm({
       prep_time_minutes: prepTime ? parseInt(prepTime, 10) : undefined,
       cook_time_minutes: cookTime ? parseInt(cookTime, 10) : undefined,
     };
-
     try {
       setIsSubmitting(true);
       await onSubmit(data, selectedTags);
@@ -119,173 +117,140 @@ export function RecipeForm({
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-6">
+    <form onSubmit={handleSubmit} className="space-y-8">
       {error && (
-        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+        <div className="bg-red-50 border border-red-200 text-red-700 px-5 py-3 rounded-lg shadow-card font-medium text-base">
           {error}
         </div>
       )}
-
-      {/* Title */}
       <div>
-        <label htmlFor="title" className="block text-sm font-medium text-gray-700">
-          Title <span className="text-red-500">*</span>
+        <label htmlFor="title" className="block text-base font-semibold text-gray-700 mb-1">
+          Title <span className="text-error">*</span>
         </label>
         <input
           type="text"
           id="title"
           value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          onChange={e => setTitle(e.target.value)}
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-[17px] py-2 px-4 font-medium"
           placeholder="e.g., Chocolate Chip Cookies"
           required
         />
       </div>
-
-      {/* Description */}
       <div>
-        <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+        <label htmlFor="description" className="block text-base font-semibold text-gray-700 mb-1">
           Description
         </label>
         <textarea
           id="description"
           value={description}
-          onChange={(e) => setDescription(e.target.value)}
+          onChange={e => setDescription(e.target.value)}
           rows={2}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
           placeholder="Brief description of the recipe..."
         />
       </div>
-
-      {/* Tags */}
       <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
+        <label className="block text-base font-semibold text-gray-700 mb-1">
           Tags
         </label>
-        <TagSelector 
-          selectedTags={selectedTags}
-          onTagsChange={setSelectedTags}
-        />
+        <TagSelector selectedTags={selectedTags} onTagsChange={setSelectedTags} />
       </div>
-
-      {/* Ingredients */}
       <div>
-        <label htmlFor="ingredients" className="block text-sm font-medium text-gray-700">
-          Ingredients <span className="text-red-500">*</span>
+        <label htmlFor="ingredients" className="block text-base font-semibold text-gray-700 mb-1">
+          Ingredients <span className="text-error">*</span>
         </label>
-        <p className="mt-1 text-sm text-gray-500">One ingredient per line</p>
+        <p className="mt-0.5 text-sm text-gray-500 mb-2">One ingredient per line</p>
         <textarea
           id="ingredients"
           value={ingredientsText}
-          onChange={(e) => setIngredientsText(e.target.value)}
-          rows={8}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 font-mono text-sm"
-          placeholder="2 cups all-purpose flour&#10;1 cup butter, softened&#10;3/4 cup sugar"
+          onChange={e => setIngredientsText(e.target.value)}
+          rows={7}
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary font-mono text-base px-4 py-2"
+          placeholder="2 cups all-purpose flour\n1 cup butter, softened\n3/4 cup sugar"
           required
         />
       </div>
-
-      {/* Instructions */}
       <div>
-        <label htmlFor="instructions" className="block text-sm font-medium text-gray-700">
-          Instructions <span className="text-red-500">*</span>
+        <label htmlFor="instructions" className="block text-base font-semibold text-gray-700 mb-1">
+          Instructions <span className="text-error">*</span>
         </label>
-        <p className="mt-1 text-sm text-gray-500">One step per line</p>
+        <p className="mt-0.5 text-sm text-gray-500 mb-2">One step per line</p>
         <textarea
           id="instructions"
           value={instructionsText}
-          onChange={(e) => setInstructionsText(e.target.value)}
-          rows={10}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 font-mono text-sm"
-          placeholder="Preheat oven to 350°F&#10;Mix flour and baking soda&#10;Cream butter and sugar"
+          onChange={e => setInstructionsText(e.target.value)}
+          rows={8}
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary font-mono text-base px-4 py-2"
+          placeholder="Preheat oven to 350°F\nMix flour and baking soda\nCream butter and sugar"
           required
         />
       </div>
-
-      {/* Metadata Grid */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div>
-          <label htmlFor="servings" className="block text-sm font-medium text-gray-700">
-            Servings
-          </label>
+          <label htmlFor="servings" className="block text-base font-semibold text-gray-700 mb-1">Servings</label>
           <input
             type="number"
             id="servings"
             value={servings}
-            onChange={(e) => setServings(e.target.value)}
+            onChange={e => setServings(e.target.value)}
             min="1"
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
             placeholder="4"
           />
         </div>
-
         <div>
-          <label htmlFor="prep_time" className="block text-sm font-medium text-gray-700">
-            Prep Time (min)
-          </label>
+          <label htmlFor="prep_time" className="block text-base font-semibold text-gray-700 mb-1">Prep Time (min)</label>
           <input
             type="number"
             id="prep_time"
             value={prepTime}
-            onChange={(e) => setPrepTime(e.target.value)}
+            onChange={e => setPrepTime(e.target.value)}
             min="0"
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
             placeholder="15"
           />
         </div>
-
         <div>
-          <label htmlFor="cook_time" className="block text-sm font-medium text-gray-700">
-            Cook Time (min)
-          </label>
+          <label htmlFor="cook_time" className="block text-base font-semibold text-gray-700 mb-1">Cook Time (min)</label>
           <input
             type="number"
             id="cook_time"
             value={cookTime}
-            onChange={(e) => setCookTime(e.target.value)}
+            onChange={e => setCookTime(e.target.value)}
             min="0"
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
             placeholder="30"
           />
         </div>
       </div>
-
-      {/* Source URL */}
       <div>
-        <label htmlFor="source_url" className="block text-sm font-medium text-gray-700">
-          Source URL
-        </label>
+        <label htmlFor="source_url" className="block text-base font-semibold text-gray-700 mb-1">Source URL</label>
         <input
           type="url"
           id="source_url"
           value={sourceUrl}
-          onChange={(e) => setSourceUrl(e.target.value)}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          onChange={e => setSourceUrl(e.target.value)}
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
           placeholder="https://example.com/recipe"
         />
       </div>
-
-      {/* Notes */}
       <div>
-        <label htmlFor="notes" className="block text-sm font-medium text-gray-700">
-          Notes
-        </label>
+        <label htmlFor="notes" className="block text-base font-semibold text-gray-700 mb-1">Notes</label>
         <textarea
           id="notes"
           value={notes}
-          onChange={(e) => setNotes(e.target.value)}
+          onChange={e => setNotes(e.target.value)}
           rows={3}
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
           placeholder="Personal notes, substitutions, tips..."
         />
       </div>
-
-      {/* Form Actions */}
       <div className="flex gap-3 pt-4">
         <button
           type="submit"
           disabled={isSubmitting}
-          className="flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-medium"
+          className="flex-1 bg-primary text-white px-4 py-2 rounded-md shadow-card hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-semibold transition-colors text-base"
         >
           {isSubmitting ? 'Saving...' : submitLabel}
         </button>
@@ -293,7 +258,7 @@ export function RecipeForm({
           type="button"
           onClick={onCancel}
           disabled={isSubmitting}
-          className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+          className="px-4 py-2 border border-gray-300 rounded-md shadow font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-base transition-colors"
         >
           Cancel
         </button>
diff --git a/frontend/src/pages/RecipeDetailPage.tsx b/frontend/src/pages/RecipeDetailPage.tsx
index b8aa78f..54f4a47 100644
--- a/frontend/src/pages/RecipeDetailPage.tsx
+++ b/frontend/src/pages/RecipeDetailPage.tsx
@@ -3,34 +3,24 @@ import { useParams, useNavigate, Link } from 'react-router-dom';
 import { useRecipe } from '../hooks/useRecipe';
 import { useToastContext } from '../App';
 import { RecipeForm, type RecipeFormData } from '../components/RecipeForm';
-import { 
-  createRecipe, 
-  updateRecipe, 
-  deleteRecipe,
-  fetchRecipeTags,
-  assignTagToRecipe,
-  removeTagFromRecipe
-} from '../services/api';
-import type { Tag } from '../types/recipe';
+import { createRecipe, updateRecipe, deleteRecipe, fetchRecipeTags, assignTagToRecipe, removeTagFromRecipe } from '../services/api';
+import type { Tag, Recipe, Ingredient } from '../types/recipe';
 
 /**
- * RecipeDetailPage - View, create, and edit recipes
+ * RecipeDetailPage - View, create, and edit recipes (Visually polished)
  */
 export function RecipeDetailPage() {
-  const { id } = useParams<{ id: string }>();
+  const { id } = useParams();
   const navigate = useNavigate();
   const toast = useToastContext();
-  
   // Parse ID or null for "new" route
   const recipeId = id === 'new' ? null : (id ? parseInt(id, 10) : null);
-  
   const { recipe, loading, error } = useRecipe(recipeId);
-  const [isEditing, setIsEditing] = useState(recipeId === null); // Start in edit mode for new recipes
+  const [isEditing, setIsEditing] = useState(recipeId === null);
   const [deleteConfirm, setDeleteConfirm] = useState(false);
   const [recipeTags, setRecipeTags] = useState<Tag[]>([]);
   const [isDeleting, setIsDeleting] = useState(false);
 
-  // Load recipe tags
   useEffect(() => {
     if (recipeId !== null) {
       fetchRecipeTags(recipeId)
@@ -42,73 +32,60 @@ export function RecipeDetailPage() {
     }
   }, [recipeId, toast]);
 
+  // Compose FE ingredients to BE Ingredient[] shape with dummies for missing fields
+  function toApiIngredients(ingredients: string[]): Ingredient[] {
+    return ingredients.map((item, idx) => ({
+      id: 0,
+      recipe_id: 0,
+      position: idx + 1,
+      item,
+      quantity: null,
+      unit: null,
+      notes: null,
+    }));
+  }
+
   // Handle form submission
   const handleSubmit = async (data: RecipeFormData, tags: Tag[]) => {
     try {
       if (recipeId === null) {
-        // Create new recipe
-        const newRecipe = await createRecipe(data);
-        
-        // Assign tags
-        for (const tag of tags) {
-          try {
-            await assignTagToRecipe(newRecipe.id, tag.id);
-          } catch (err) {
-            console.error('Failed to assign tag:', err);
-            toast.warning(`Failed to assign tag "${tag.name}"`);
-          }
-        }
-        
+        // Compose to API input shape (fill dummies)
+        const newRecipe = await createRecipe({
+          ...data,
+          ingredients: toApiIngredients(data.ingredients),
+          instructions: data.instructions,
+        });
+        for (const tag of tags) { try { await assignTagToRecipe(newRecipe.id, tag.id); } catch {} }
         toast.success('Recipe created successfully!');
         navigate(`/recipe/${newRecipe.id}`);
       } else {
-        // Update existing recipe
-        await updateRecipe(recipeId, data);
-        
-        // Update tags: remove old ones, add new ones
+        await updateRecipe(recipeId, {
+          ...data,
+          ingredients: toApiIngredients(data.ingredients),
+          instructions: data.instructions,
+        });
+        // Tag syncing (remove/add)
         const currentTagIds = recipeTags.map(t => t.id);
         const newTagIds = tags.map(t => t.id);
-        
-        // Remove tags that are no longer selected
         for (const tagId of currentTagIds) {
-          if (!newTagIds.includes(tagId)) {
-            try {
-              await removeTagFromRecipe(recipeId, tagId);
-            } catch (err) {
-              console.error('Failed to remove tag:', err);
-              toast.warning('Failed to remove some tags');
-            }
-          }
+          if (!newTagIds.includes(tagId)) { try { await removeTagFromRecipe(recipeId, tagId); } catch {} }
         }
-        
-        // Add tags that are newly selected
         for (const tagId of newTagIds) {
-          if (!currentTagIds.includes(tagId)) {
-            try {
-              await assignTagToRecipe(recipeId, tagId);
-            } catch (err) {
-              console.error('Failed to assign tag:', err);
-              toast.warning('Failed to assign some tags');
-            }
-          }
+          if (!currentTagIds.includes(tagId)) { try { await assignTagToRecipe(recipeId, tagId); } catch {} }
         }
-        
         toast.success('Recipe updated successfully!');
         setIsEditing(false);
-        // Refresh the page to show updated data
         window.location.reload();
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to save recipe';
       toast.error(errorMessage);
-      throw err; // Re-throw so form can handle it
+      throw err;
     }
   };
 
-  // Handle delete
   const handleDelete = async () => {
     if (recipeId === null) return;
-    
     try {
       setIsDeleting(true);
       await deleteRecipe(recipeId);
@@ -122,242 +99,157 @@ export function RecipeDetailPage() {
     }
   };
 
-  // Loading state
+  // Loading State
   if (loading) {
     return (
-      <div className="text-center py-12">
-        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-        <p className="mt-4 text-gray-600">Loading recipe...</p>
+      <div className="flex flex-col items-center justify-center py-24">
+        <div className="inline-block animate-spin rounded-full h-9 w-9 border-b-2 border-primary"></div>
+        <p className="mt-6 text-gray-500 text-base font-medium">Loading recipe...</p>
       </div>
     );
   }
-
-  // Error state
+  // Error State
   if (error) {
     return (
-      <div className="bg-red-50 border border-red-200 rounded-lg p-6">
-        <h3 className="text-red-800 font-semibold mb-2">Error Loading Recipe</h3>
-        <p className="text-red-600">{error}</p>
-        <Link to="/" className="mt-4 inline-block text-blue-600 hover:text-blue-700">
-          ← Back to recipes
-        </Link>
+      <div className="max-w-xl mx-auto bg-red-50 border border-red-200 rounded-xl shadow-card p-8 mt-12 flex flex-col items-center">
+        <h3 className="text-xl text-red-800 font-bold mb-3">Error Loading Recipe</h3>
+        <p className="text-red-600 text-base mb-2">{error}</p>
+        <Link to="/" className="mt-4 px-4 py-2 bg-primary text-white rounded-md font-medium hover:bg-blue-700">← Back to recipes</Link>
       </div>
     );
   }
-
-  // New recipe mode (always in edit)
+  // New Recipe
   if (recipeId === null) {
     return (
-      <div>
-        <div className="mb-6">
-          <h2 className="text-2xl font-bold text-gray-900">Create New Recipe</h2>
-          <p className="mt-1 text-sm text-gray-500">
-            Fill in the details below to add a new recipe
-          </p>
+      <div className="max-w-2xl mx-auto pt-8">
+        <div className="mb-6 pb-1 border-b border-gray-200">
+          <h2 className="text-3xl font-bold text-gray-900">Create New Recipe</h2>
+          <p className="mt-1 text-base text-gray-500">Fill in the details below to add a new recipe</p>
         </div>
-        
-        <div className="bg-white rounded-lg shadow p-6">
-          <RecipeForm
-            initialTags={[]}
-            onSubmit={handleSubmit}
-            onCancel={() => navigate('/')}
-            submitLabel="Create Recipe"
-          />
+        <div className="bg-white rounded-xl shadow-card p-8">
+          <RecipeForm initialTags={[]} onSubmit={handleSubmit} onCancel={() => navigate('/')} submitLabel="Create Recipe" />
         </div>
       </div>
     );
   }
-
-  // Recipe not found
+  // Recipe Not Found
   if (!recipe) {
     return (
-      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
-        <h3 className="text-yellow-800 font-semibold mb-2">Recipe Not Found</h3>
-        <p className="text-yellow-600">The recipe you're looking for doesn't exist.</p>
-        <Link to="/" className="mt-4 inline-block text-blue-600 hover:text-blue-700">
-          ← Back to recipes
-        </Link>
+      <div className="max-w-md mx-auto bg-yellow-50 border border-yellow-200 rounded-xl shadow-card p-8 mt-12 flex flex-col items-center">
+        <h3 className="text-xl text-yellow-800 font-bold mb-2">Recipe Not Found</h3>
+        <p className="text-yellow-600 text-base mb-2">The recipe you are looking for does not exist.</p>
+        <Link to="/" className="mt-4 px-4 py-2 bg-primary text-white rounded-md font-medium hover:bg-blue-700">← Back to recipes</Link>
       </div>
     );
   }
-
-  // Edit mode
+  // Edit Mode
   if (isEditing) {
     return (
-      <div>
-        <div className="mb-6">
-          <h2 className="text-2xl font-bold text-gray-900">Edit Recipe</h2>
-          <p className="mt-1 text-sm text-gray-500">
-            Update recipe information
-          </p>
+      <div className="max-w-2xl mx-auto pt-8">
+        <div className="mb-6 pb-1 border-b border-gray-200">
+          <h2 className="text-3xl font-bold text-gray-900">Edit Recipe</h2>
+          <p className="mt-1 text-base text-gray-500">Update recipe information below</p>
         </div>
-        
-        <div className="bg-white rounded-lg shadow p-6">
-          <RecipeForm
-            recipe={recipe}
-            initialTags={recipeTags}
-            onSubmit={handleSubmit}
-            onCancel={() => setIsEditing(false)}
-            submitLabel="Save Changes"
-          />
+        <div className="bg-white rounded-xl shadow-card p-8">
+          <RecipeForm recipe={recipe} initialTags={recipeTags} onSubmit={handleSubmit} onCancel={() => setIsEditing(false)} submitLabel="Save Changes" />
         </div>
       </div>
     );
   }
 
-  // View mode
+  // View Recipe
   return (
-    <div>
-      {/* Header with actions */}
-      <div className="mb-6 flex items-start justify-between">
-        <div>
-          <h2 className="text-3xl font-bold text-gray-900">{recipe.title}</h2>
+    <div className="max-w-4xl mx-auto pt-8">
+      <div className="bg-white rounded-xl shadow-card p-8 mb-6 flex flex-col sm:flex-row items-start justify-between gap-6">
+        <div className="flex-1 min-w-0">
+          <h2 className="text-4xl font-bold text-gray-900 mb-1 break-words">{recipe.title}</h2>
           {recipe.description && (
-            <p className="mt-2 text-gray-600">{recipe.description}</p>
+            <p className="mt-1 text-lg text-gray-600 break-words">{recipe.description}</p>
           )}
-          
-          {/* Tags display */}
           {recipeTags.length > 0 && (
-            <div className="mt-3 flex flex-wrap gap-2">
+            <div className="mt-4 flex flex-wrap gap-2">
               {recipeTags.map(tag => (
-                <span
-                  key={tag.id}
-                  className="px-3 py-1 rounded-full text-sm font-medium text-white"
-                  style={{ backgroundColor: tag.color || '#3B82F6' }}
-                >
-                  {tag.name}
-                </span>
+                <span key={tag.id} className="px-3 py-1 rounded-full text-xs font-medium text-white shadow" style={{ backgroundColor: tag.color || '#3B82F6' }}>{tag.name}</span>
               ))}
             </div>
           )}
         </div>
-        <div className="flex gap-2 ml-4">
-          <button
-            onClick={() => setIsEditing(true)}
-            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
-          >
-            Edit
-          </button>
-          <Link
-            to={`/recipe/${recipe.id}/cook`}
-            className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium"
-          >
-            Cook Mode
-          </Link>
+        <div className="flex flex-col gap-3 min-w-[120px]">
+          <button onClick={() => setIsEditing(true)} className="w-full px-4 py-2 bg-primary text-white rounded-md shadow hover:bg-blue-700 font-medium transition-colors">Edit</button>
+          <Link to={`/recipe/${recipe.id}/cook`} className="w-full px-4 py-2 bg-success text-white rounded-md shadow hover:bg-green-700 font-medium text-center transition-colors">Cook Mode</Link>
           {!deleteConfirm ? (
-            <button
-              onClick={() => setDeleteConfirm(true)}
-              className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 font-medium"
-            >
-              Delete
-            </button>
+            <button onClick={() => setDeleteConfirm(true)} className="w-full px-4 py-2 bg-error text-white rounded-md shadow font-medium hover:bg-red-700 transition-colors">Delete</button>
           ) : (
-            <div className="flex gap-2">
-              <button
-                onClick={handleDelete}
-                disabled={isDeleting}
-                className="px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 text-sm font-medium disabled:bg-gray-400 disabled:cursor-not-allowed"
-              >
-                {isDeleting ? 'Deleting...' : 'Confirm Delete'}
-              </button>
-              <button
-                onClick={() => setDeleteConfirm(false)}
-                disabled={isDeleting}
-                className="px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Cancel
-              </button>
+            <div className="flex flex-col gap-2">
+              <button onClick={handleDelete} disabled={isDeleting} className="w-full px-3 py-2 bg-error text-white rounded-md hover:bg-red-700 text-sm font-medium shadow disabled:bg-gray-400 disabled:cursor-not-allowed">{isDeleting ? 'Deleting...' : 'Confirm Delete'}</button>
+              <button onClick={() => setDeleteConfirm(false)} disabled={isDeleting} className="w-full px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 text-sm font-medium shadow disabled:opacity-50 disabled:cursor-not-allowed">Cancel</button>
             </div>
           )}
         </div>
       </div>
-
-      {/* Metadata */}
-      <div className="grid grid-cols-3 gap-4 mb-6">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 text-center">
         {recipe.servings && (
-          <div className="bg-gray-50 rounded-lg p-4">
-            <div className="text-sm text-gray-500">Servings</div>
+          <div className="bg-gray-50 rounded-lg p-4 shadow-card">
+            <div className="text-sm text-gray-500 mb-1">Servings</div>
             <div className="text-lg font-semibold text-gray-900">{recipe.servings}</div>
           </div>
         )}
         {recipe.prep_time_minutes && (
-          <div className="bg-gray-50 rounded-lg p-4">
-            <div className="text-sm text-gray-500">Prep Time</div>
+          <div className="bg-gray-50 rounded-lg p-4 shadow-card">
+            <div className="text-sm text-gray-500 mb-1">Prep Time</div>
             <div className="text-lg font-semibold text-gray-900">{recipe.prep_time_minutes} min</div>
           </div>
         )}
         {recipe.cook_time_minutes && (
-          <div className="bg-gray-50 rounded-lg p-4">
-            <div className="text-sm text-gray-500">Cook Time</div>
+          <div className="bg-gray-50 rounded-lg p-4 shadow-card">
+            <div className="text-sm text-gray-500 mb-1">Cook Time</div>
             <div className="text-lg font-semibold text-gray-900">{recipe.cook_time_minutes} min</div>
           </div>
         )}
       </div>
-
-      {/* Main content */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Ingredients */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-xl font-bold text-gray-900 mb-4">Ingredients</h3>
-          <ul className="space-y-2">
-            {recipe.ingredients.map((ingredient, index) => (
-              <li key={index} className="flex items-start">
-                <span className="inline-block w-2 h-2 bg-blue-600 rounded-full mt-2 mr-3 flex-shrink-0"></span>
-                <span className="text-gray-700">{ingredient}</span>
+        <div className="bg-white rounded-xl shadow-card p-6">
+          <h3 className="text-xl font-semibold text-gray-900 mb-6">Ingredients</h3>
+          <ul className="space-y-3">
+            {Array.isArray(recipe.ingredients) ? recipe.ingredients.map((ingredient, index) => (
+              <li key={index} className="flex items-center gap-3">
+                <span className="inline-block w-3 h-3 bg-primary rounded-full"></span>
+                <span className="text-gray-800 font-mono text-base">{'item' in ingredient ? ingredient.item : ingredient}</span>
               </li>
-            ))}
+            )) : null}
           </ul>
         </div>
-
-        {/* Instructions */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-xl font-bold text-gray-900 mb-4">Instructions</h3>
-          <ol className="space-y-4">
-            {recipe.instructions.map((instruction, index) => (
-              <li key={index} className="flex items-start">
-                <span className="inline-flex items-center justify-center w-6 h-6 bg-blue-600 text-white rounded-full text-sm font-bold mr-3 flex-shrink-0">
-                  {index + 1}
-                </span>
-                <span className="text-gray-700 pt-0.5">{instruction}</span>
+        <div className="bg-white rounded-xl shadow-card p-6">
+          <h3 className="text-xl font-semibold text-gray-900 mb-6">Instructions</h3>
+          <ol className="space-y-4 list-none">
+            {Array.isArray(recipe.instructions) ? recipe.instructions.map((instruction, index) => (
+              <li key={index} className="flex items-start gap-3">
+                <span className="inline-flex items-center justify-center w-8 h-8 bg-primary text-white rounded-full text-base font-bold">{index + 1}</span>
+                <span className="text-gray-800 pt-[2px] text-base leading-6">{instruction}</span>
               </li>
-            ))}
+            )) : null}
           </ol>
         </div>
       </div>
-
-      {/* Additional info */}
       {(recipe.source_url || recipe.notes) && (
-        <div className="mt-6 bg-white rounded-lg shadow p-6">
-          <h3 className="text-xl font-bold text-gray-900 mb-4">Additional Information</h3>
-          
+        <div className="mt-8 bg-white rounded-xl shadow-card p-6">
+          <h3 className="text-xl font-semibold text-gray-900 mb-4">Additional Information</h3>
           {recipe.source_url && (
             <div className="mb-4">
               <div className="text-sm font-medium text-gray-700 mb-1">Source</div>
-              <a 
-                href={recipe.source_url} 
-                target="_blank" 
-                rel="noopener noreferrer"
-                className="text-blue-600 hover:text-blue-700 underline break-all"
-              >
-                {recipe.source_url}
-              </a>
+              <a href={recipe.source_url} target="_blank" rel="noopener noreferrer" className="text-primary hover:text-blue-700 underline break-all">{recipe.source_url}</a>
             </div>
           )}
-
           {recipe.notes && (
             <div>
               <div className="text-sm font-medium text-gray-700 mb-1">Notes</div>
-              <p className="text-gray-700 whitespace-pre-wrap">{recipe.notes}</p>
+              <p className="text-gray-800 whitespace-pre-wrap">{recipe.notes}</p>
             </div>
           )}
         </div>
       )}
-
-      {/* Back button */}
-      <div className="mt-6">
-        <Link to="/" className="text-blue-600 hover:text-blue-700 font-medium">
-          ← Back to all recipes
-        </Link>
+      <div className="mt-8 text-center">
+        <Link to="/" className="text-primary hover:text-blue-700 font-medium">← Back to all recipes</Link>
       </div>
     </div>
   );