From 08d02664c60d977676d9bb3c926e4d85007af91f Mon Sep 17 00:00:00 2001
From: Nishant Racherla <nishant.racherla@gmail.com>
Date: Thu, 18 Jan 2024 16:07:30 -0800
Subject: [PATCH] Change markdown renderer components margins

---
 app/(recipes)/recipes/[item]/page.tsx |  8 ++------
 app/(recipes)/recipes/like-button.tsx |  1 -
 components/markdown-renderer.tsx      | 10 +++++-----
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/app/(recipes)/recipes/[item]/page.tsx b/app/(recipes)/recipes/[item]/page.tsx
index 470e8a6..6c51888 100644
--- a/app/(recipes)/recipes/[item]/page.tsx
+++ b/app/(recipes)/recipes/[item]/page.tsx
@@ -93,15 +93,11 @@ export default async function RecipeItem({
       </div>
       <div>
         <h3 className="font-bold text-xl">Ingredients</h3>
-        <div className="mt-2">
-          <MarkdownRenderer>{recipe.ingredients}</MarkdownRenderer>
-        </div>
+        <MarkdownRenderer>{recipe.ingredients}</MarkdownRenderer>
       </div>
       <div>
         <h3 className="font-bold text-xl">Procedure</h3>
-        <div className="mt-2">
-          <MarkdownRenderer>{recipe.procedure}</MarkdownRenderer>
-        </div>
+        <MarkdownRenderer>{recipe.procedure}</MarkdownRenderer>
       </div>
     </div>
   );
diff --git a/app/(recipes)/recipes/like-button.tsx b/app/(recipes)/recipes/like-button.tsx
index fef701a..b513184 100644
--- a/app/(recipes)/recipes/like-button.tsx
+++ b/app/(recipes)/recipes/like-button.tsx
@@ -19,7 +19,6 @@ export default function LikeButton({
     userLiked,
     (state, _) => !state,
   );
-
   const handleLike = async () => {
     setOptimisticUserLiked(!userLiked);
     await changeLike(recipeId, likes, optimisticUserLiked);
diff --git a/components/markdown-renderer.tsx b/components/markdown-renderer.tsx
index e4e7ebb..00d06a5 100644
--- a/components/markdown-renderer.tsx
+++ b/components/markdown-renderer.tsx
@@ -23,23 +23,23 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
           p: ({ children }) => <p className="my-2">{children}</p>,
           img: () => null,
           ul: ({ children }) => (
-            <ul className="list-disc flex flex-col gap-2 list-inside">
+            <ul className="list-disc flex flex-col gap-2 list-inside my-2">
               {children}
             </ul>
           ),
           ol: ({ children }) => (
-            <ol className="list-decimal flex flex-col gap-2 list-inside">
+            <ol className="list-decimal flex flex-col gap-2 list-inside my-2">
               {children}
             </ol>
           ),
           h1: ({ children }) => (
-            <h1 className="font-bold text-lg">{children}</h1>
+            <h1 className="font-bold text-lg my-1">{children}</h1>
           ),
           h2: ({ children }) => (
-            <h2 className="font-bold text-base">{children}</h2>
+            <h2 className="font-bold text-base my-1">{children}</h2>
           ),
           h3: ({ children }) => (
-            <h3 className="font-bold text-sm">{children}</h3>
+            <h3 className="font-bold text-sm my-1">{children}</h3>
           ),
         },
       }}