From a92259ae8bcd5cb8b188bcbd05b6947e439827b8 Mon Sep 17 00:00:00 2001
From: joekotvas <joseph.kotvas@gmail.com>
Date: Mon, 13 Nov 2023 16:17:42 -0500
Subject: [PATCH 1/5] fix(tags): change tags link to properly format

The tags links were sending users to search for text with underscores and without proper
capitalization. This fix links to the display_name instead of the name, allowing for more natural
searches.
---
 src/features/recipes/components/recipe-details/Tags.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/recipes/components/recipe-details/Tags.jsx b/src/features/recipes/components/recipe-details/Tags.jsx
index dcb7db7..de75d33 100644
--- a/src/features/recipes/components/recipe-details/Tags.jsx
+++ b/src/features/recipes/components/recipe-details/Tags.jsx
@@ -18,8 +18,8 @@ export const Tags = ({ tags }) => {
         return (
           <span key={tag.name}>
             <Link
-              to={`/search?q=${tag.name}`}
-              className="text-watermelon font-bold decoration-tangerine decoration-2 underline-offset-2 hover:underline"
+              to={`/search?q=${tag.display_name}`}
+              className="font-bold text-watermelon decoration-tangerine decoration-2 underline-offset-2 hover:underline"
               key={tag.name + String(Math.random())}
             >
               {tag.display_name}

From 3a3138a3d6a1eaecaaf65c1f1553350eb926f042 Mon Sep 17 00:00:00 2001
From: joekotvas <joseph.kotvas@gmail.com>
Date: Mon, 13 Nov 2023 17:11:32 -0500
Subject: [PATCH 2/5] fix(search page): layout fixes

Remove hairline under wave, center text on button, add padding under recipe of the day
---
 .../feature-of-the-day/feature-of-the-day.jsx      | 14 +++++++++-----
 src/pages/Search.jsx                               |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/features/recipes/components/feature-of-the-day/feature-of-the-day.jsx b/src/features/recipes/components/feature-of-the-day/feature-of-the-day.jsx
index 1485398..2ed49fa 100644
--- a/src/features/recipes/components/feature-of-the-day/feature-of-the-day.jsx
+++ b/src/features/recipes/components/feature-of-the-day/feature-of-the-day.jsx
@@ -11,17 +11,21 @@ export const FeatureOfTheDay = () => {
       <Heading
         level="h1"
         variant="watermelon"
-        className="text-center underline decoration-dashed decoration-tangerine-400 underline-offset-[24px]"
+        className="text-center underline decoration-dashed decoration-tangerine-400 underline-offset-[24px] balance"
       >
         Recipe of the day
       </Heading>
       <div className="flex flex-col items-center justify-center px-4 py-6 lg:space-x-6 lg:flex-row">
         <img
           src={FeatureChickenRecipe}
-          className="object-contain w-64 rounded-2xl"
+          className="object-contain w-64 rounded-2xl mb-8"
         />
         <div className="flex flex-col max-w-lg text-left">
-          <Heading level="h3" variant="tangerine" className="tracking-tight">
+          <Heading
+            level="h3"
+            variant="tangerine"
+            className="tracking-tight balance"
+          >
             Roasted Chicken And Sweet Potatoes Recipe
           </Heading>
           <p className="tracking-tight font-rasa">
@@ -33,10 +37,10 @@ export const FeatureOfTheDay = () => {
           <Button
             variant="primary"
             size="large"
-            className="w-full mt-4 lg:w-1/2"
+            className="w-full mt-4 lg:w-1/2 mb-10"
             onClick={handleNavigate}
           >
-            See the Recipe
+            <span className="align-center w-full">See the Recipe</span>
             <Icon name="right-arrow" className="transform scale-125" />
           </Button>
         </div>
diff --git a/src/pages/Search.jsx b/src/pages/Search.jsx
index bdd989e..f7a236a 100644
--- a/src/pages/Search.jsx
+++ b/src/pages/Search.jsx
@@ -31,7 +31,7 @@ const Search = () => {
       >
         YumYum Time!!
       </Heading>
-      <SvgComponent className="w-full fill-sky-300" />
+      <SvgComponent className="w-full fill-sky-300 -mb-1" />
       <div className="flex flex-col flex-shrink-0 w-full px-4 lg:px-20 bg-gradient-Search">
         <div className="flex flex-wrap items-center justify-center my-5 lg:mx-2 lg:gap-x-2">
           <div className="flex items-center w-1/3 lg:w-[20%]">

From ed6c084c1644eece8da2559833696c9fdc83d480 Mon Sep 17 00:00:00 2001
From: joekotvas <joseph.kotvas@gmail.com>
Date: Mon, 13 Nov 2023 17:21:44 -0500
Subject: [PATCH 3/5] fix(recipe difficulty card): hide card when no data
 available

---
 .../recipe-details/RecipeDetails.jsx          |  6 +-
 .../recipe-details/RecipeDifficultyCard.jsx   | 57 +++++++++++--------
 2 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/src/features/recipes/components/recipe-details/RecipeDetails.jsx b/src/features/recipes/components/recipe-details/RecipeDetails.jsx
index c4b1302..b79b5b2 100644
--- a/src/features/recipes/components/recipe-details/RecipeDetails.jsx
+++ b/src/features/recipes/components/recipe-details/RecipeDetails.jsx
@@ -26,7 +26,7 @@ export const RecipeDetails = ({ recipe }) => {
         <hr className="mb-1 mt-3 h-2 w-[40%] rounded-full border-none bg-gradient-tangerine-diagonal" />
       </div>
 
-      <div className="p-5 page-body md:p-8 xl:p-10 md:grid md:grid-cols-12 md:grid-rows-10 md:gap-10">
+      <div className="page-body p-5 md:p-8 xl:p-10 md:grid md:grid-cols-12 md:grid-rows-10 md:gap-10">
         <IntroCard
           description={recipe.description}
           imageUrl={recipe.thumbnail_url}
@@ -53,9 +53,7 @@ export const RecipeDetails = ({ recipe }) => {
           renditions={recipe.renditions}
           className="mb-12 outline-4 md:col-start-7 md:col-end-13 md:row-start-1 lg:col-start-1 lg:col-end-5 lg:row-start-3 lg:-mx-4 lg:-mb-4 2xl:col-end-4"
         />
-        <Card className="flex items-center difficulty-card md:col-start-7 md:col-end-13 md:row-start-2 lg:col-start-5 2xl:col-start-4">
-          <RecipeDifficultyCard tags={recipe.tags} />
-        </Card>
+        <RecipeDifficultyCard tags={recipe.tags} />
         <Card
           className="ingredients-card md:col-start-1 md:col-end-13 lg:col-start-5 lg:col-end-13 lg:row-span-2 2xl:col-start-4"
           id="ingredients"
diff --git a/src/features/recipes/components/recipe-details/RecipeDifficultyCard.jsx b/src/features/recipes/components/recipe-details/RecipeDifficultyCard.jsx
index cf03af9..b6c1956 100644
--- a/src/features/recipes/components/recipe-details/RecipeDifficultyCard.jsx
+++ b/src/features/recipes/components/recipe-details/RecipeDifficultyCard.jsx
@@ -1,6 +1,7 @@
 import PropTypes from "prop-types";
 import ChefCarrots from "@/assets/brand/chef-carrots/ChefCarrots";
 import RecipeDifficultyDetail from "./RecipeDifficultyDetail";
+import { Card } from "./Card";
 
 export const RecipeDifficultyCard = ({ tags }) => {
   // Available cards:
@@ -28,31 +29,39 @@ export const RecipeDifficultyCard = ({ tags }) => {
     (tag) => tag.type === "difficulty" && tag.name === "5_ingredients_or_less",
   );
   return (
-    <div className="relative flex min-h-[6rem] sm:justify-center pl-28 md:pl-[5rem] align-middle">
-      <ChefCarrots
-        resolution="180"
-        className="pointer-events-none select-none w-36 h-56 md:h-auto max-w-[55%] md:bottom-[-3.75rem] md:left-[-4rem] -bottom-6 -left-4 absolute overflow-hidden"
-      />
-      <div className="difficulty-card-wrapper flex flex-col sm:items-center md:items-start lg:items-center sm:flex-row md:flex-col lg:flex-row">
-        {easy && (
-          <RecipeDifficultyDetail
-            title="Easy"
-            icon="easy"
-            text="You've got this!"
+    (easy || quickText || simple) && (
+      <Card className="difficulty-card md:col-start-7 md:col-end-13 md:row-start-2 lg:col-start-5 2xl:col-start-4 flex items-center">
+        <div className="relative flex min-h-[6rem] sm:justify-center pl-28 md:pl-[5rem] align-middle">
+          <ChefCarrots
+            resolution="180"
+            className="pointer-events-none select-none w-36 h-56 md:h-auto max-w-[55%] md:bottom-[-3.75rem] md:left-[-4rem] -bottom-6 -left-4 absolute overflow-hidden"
           />
-        )}
-        {quickText && (
-          <RecipeDifficultyDetail title="Quick" icon="clock" text={quickText} />
-        )}
-        {simple && (
-          <RecipeDifficultyDetail
-            title="Simple"
-            icon="stars"
-            text="5 Ingredients or Less"
-          />
-        )}
-      </div>
-    </div>
+          <div className="difficulty-card-wrapper flex flex-col sm:items-center md:items-start lg:items-center sm:flex-row md:flex-col lg:flex-row">
+            {easy && (
+              <RecipeDifficultyDetail
+                title="Easy"
+                icon="easy"
+                text="You've got this!"
+              />
+            )}
+            {quickText && (
+              <RecipeDifficultyDetail
+                title="Quick"
+                icon="clock"
+                text={quickText}
+              />
+            )}
+            {simple && (
+              <RecipeDifficultyDetail
+                title="Simple"
+                icon="stars"
+                text="5 Ingredients or Less"
+              />
+            )}
+          </div>
+        </div>
+      </Card>
+    )
   );
 };
 

From b5f2ea4d3bfdee97b385887c50cc02dbec234a73 Mon Sep 17 00:00:00 2001
From: joekotvas <joseph.kotvas@gmail.com>
Date: Mon, 13 Nov 2023 17:27:25 -0500
Subject: [PATCH 4/5] fix(tips): pad control dots and round out avatar images

---
 src/features/recipes/components/recipe-details/Tips.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/recipes/components/recipe-details/Tips.jsx b/src/features/recipes/components/recipe-details/Tips.jsx
index 7d82b76..0fbce59 100644
--- a/src/features/recipes/components/recipe-details/Tips.jsx
+++ b/src/features/recipes/components/recipe-details/Tips.jsx
@@ -26,7 +26,7 @@ export const Tips = ({ recipeId }) => {
       showIndicators={true}
       dynamicHeight={false}
       stopOnHover={true}
-      className="bg-transparent mx-[-2.25rem] [&_.carousel-slider]:overflow-visible [&_.control-dots]:bottom-[-2rem]"
+      className="bg-transparent mx-[-2.25rem] [&_.carousel-slider]:overflow-visible [&_.control-dots]:bottom-[-2rem] [&_.control-dots]:px-6"
     >
       {tips.map((tip) => (
         <div key={tip.tip_id}>
@@ -58,7 +58,7 @@ const TipCard = ({
   return (
     <div className="flex flex-col w-full p-5 cursor-pointer">
       <div className="flex items-center gap-2">
-        <div>
+        <div className="w-6">
           <img
             src={author_avatar_url}
             className="object-cover w-6 h-6 rounded-full"

From 1044c8d6582c7ee921228be97e40877f88912f45 Mon Sep 17 00:00:00 2001
From: joekotvas <joseph.kotvas@gmail.com>
Date: Mon, 13 Nov 2023 17:36:13 -0500
Subject: [PATCH 5/5] fix(intro card): hide plant corner detail on mobile

Avoids layout complications.
---
 .../recipes/components/recipe-details/Description.jsx         | 2 +-
 src/features/recipes/components/recipe-details/IntroCard.jsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/recipes/components/recipe-details/Description.jsx b/src/features/recipes/components/recipe-details/Description.jsx
index 39663f3..66dd5a6 100644
--- a/src/features/recipes/components/recipe-details/Description.jsx
+++ b/src/features/recipes/components/recipe-details/Description.jsx
@@ -31,7 +31,7 @@ export const Description = ({ description }) => {
   const body = words.slice(titleLength).join(" ");
   console.log("body length:", body.length);
   return description ? (
-    <div className="description pr-8 pt-2 pl-20">
+    <div className="description px-8 pt-2 md:pl-20">
       <Heading level="h2" variant="lava" className="leading-none">
         <span className={title.length > 10 ? "text-clamp-h3" : ""}>
           {title}
diff --git a/src/features/recipes/components/recipe-details/IntroCard.jsx b/src/features/recipes/components/recipe-details/IntroCard.jsx
index 7f5d8ef..374959a 100644
--- a/src/features/recipes/components/recipe-details/IntroCard.jsx
+++ b/src/features/recipes/components/recipe-details/IntroCard.jsx
@@ -10,7 +10,7 @@ export const IntroCard = ({ name, imageUrl, description }) => {
         <div className="absolute left-0 top-0 z-0 h-full overflow-hidden rounded-tl-[1rem] pt-[20rem] md:pt-0">
           <PlantsTL
             resolution="128"
-            className="select-none pointer-events-none block h-full w-[8rem] lg:w-[8rem] overflow-hidden lg:rounded-tl-[1rem]"
+            className="pointer-events-none hidden h-full w-[8rem] select-none overflow-hidden md:block lg:w-[8rem] lg:rounded-tl-[1rem]"
           />
         </div>
         <div className="intro-wrapper relative flex-row-reverse gap-4 md:flex">
@@ -30,7 +30,7 @@ export const IntroCard = ({ name, imageUrl, description }) => {
       </Card>
     );
   return (
-    <div className="picture-wrapper md:col-start-1 md:col-end-13 md:row-start-3 lg:col-start-5 lg:row-start-1 2xl:col-start-4 overflow-hidden rounded-xl">
+    <div className="picture-wrapper overflow-hidden rounded-xl md:col-start-1 md:col-end-13 md:row-start-3 lg:col-start-5 lg:row-start-1 2xl:col-start-4">
       <picture className="w-full">
         <img
           src={imageUrl}