Merge latest changes from development to main

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.33](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.32...v0.0.33) (2023-11-18)
+
+
+### Bug Fixes
+
+* **header.jsx:** add z-index to nav element ([fbe40d5](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fbe40d547d054dbbdba40f3f17c38124ed631be1)), closes [#115](https://github.com/chingu-voyages/v46-tier2-team-19/issues/115)
+* **intro card:** hide plant corner detail on mobile ([1044c8d](https://github.com/chingu-voyages/v46-tier2-team-19/commit/1044c8d6582c7ee921228be97e40877f88912f45))
+* **recipe difficulty card:** hide card when no data available ([ed6c084](https://github.com/chingu-voyages/v46-tier2-team-19/commit/ed6c084c1644eece8da2559833696c9fdc83d480))
+* **search page:** layout fixes ([3a3138a](https://github.com/chingu-voyages/v46-tier2-team-19/commit/3a3138a3d6a1eaecaaf65c1f1553350eb926f042))
+* **search.jsx:** move colored balls code above heading for proper stacking order ([1873016](https://github.com/chingu-voyages/v46-tier2-team-19/commit/1873016c121350dff05acd8d5200d248cdddde93)), closes [#115](https://github.com/chingu-voyages/v46-tier2-team-19/issues/115)
+* **search.jsx:** remove z-index from heading ([9372547](https://github.com/chingu-voyages/v46-tier2-team-19/commit/9372547e9b437401a7e589c3a30b73a912ab0f1a)), closes [#115](https://github.com/chingu-voyages/v46-tier2-team-19/issues/115)
+* **tags:** change tags link to properly format ([a92259a](https://github.com/chingu-voyages/v46-tier2-team-19/commit/a92259ae8bcd5cb8b188bcbd05b6947e439827b8))
+* **tips:** pad control dots and round out avatar images ([b5f2ea4](https://github.com/chingu-voyages/v46-tier2-team-19/commit/b5f2ea4d3bfdee97b385887c50cc02dbec234a73))
+
 ### [0.0.32](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.31...v0.0.32) (2023-11-13)
 
 ### [0.0.31](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.30...v0.0.31) (2023-11-12)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "recipe-app",
   "private": true,
-  "version": "0.0.32",
+  "version": "0.0.33",
   "type": "module",
   "scripts": {
     "dev": "vite",

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>

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}

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}

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"

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>
+    )
   );
 };
 

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}

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"

src/features/ui/Header/Header.jsx

@@ -14,7 +14,7 @@ export const Header = () => {
           <img src={Logo} alt={name} />
         </Link>
       </aside>
-      <nav>
+      <nav className="z-10">
         <div className="hidden space-x-4 lg:flex gap-x-7 bg-sky-300 text-white rounded-full px-16 py-3">
           {navLinks.map((navLink, index) => (
             <Link

src/pages/Search.jsx

@@ -24,19 +24,29 @@ const Search = () => {
 
   return (
     <div className="flex flex-col items-center flex-shrink-0 w-full">
-      <Heading
-        level="h1"
-        variant="watermelon"
-        className="z-10 pt-5 text-center"
-      >
+      {/* START colored balls */}
+      <div className="absolute z-0 w-full h-full pointer-events-none left-10 bg-colored-balls-top xl:top-32 md:top-16 top-8">
+        {/* Yellow Ball 1 */}
+        <div className="w-[18px] h-[18px] md:w-[48px] md:h-[48px] md:left-[15%] md:top-[10%] 2xl:left-[30%] xl:w-[56.56px] xl:h-[56.56px]  2xl:w-[62px] 2xl:h-[62px] bg-YellowBall bg-cover relative  rounded-full left-[13%] top-[8%] " />
+        {/* Orange Ball */}
+        <div className="w-[12px] h-[12px] md:w-[34.09px] md:h-[34.09px]  xl:w-[44.44px] xl:h-[44.44px]  md:top-[10%] md:left-[40%] 2xl:left-[56%]  bg-OrangeBall bg-cover rounded-full relative left-[58%]  top-[8%]   " />
+        {/* Green Ball */}
+        <div className="w-[12px] h-[12px] md:w-[34.09px] md:h-[34.09px]  xl:w-[44.44px] xl:h-[44.44px]  md:top-[5%] md:left-[80%] 2xl:left-[70%]  bg-GreenBall bg-cover rounded-full relative left-[8%]  top-[10%]   " />
+      </div>
+      {/* END colored balls */}
+
+      <Heading level="h1" variant="watermelon" className="pt-5 text-center">
         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%]">
             <BellPeppers resolution="360" alt="bell-peppers" />
           </div>
+
           <div className="flex flex-col items-center order-last max-w-md lg:order-1">
             <p className="text-2xl font-bold tracking-tight text-center break-words lg:w-2/3 font-kalam lava-text-gradient">
               Add Ingredients Here and We Will Do Our Magic!
@@ -45,6 +55,7 @@ const Search = () => {
               <SearchBox searchTerm={searchTerm} onSearch={handleSearch} />
             </div>
           </div>
+
           <div className="flex items-center justify-center w-1/3 lg:w-[20%] hero-yumi lg:order-last lg:justify-start">
             <YumiWithSpoon
               resolution="480"
@@ -53,19 +64,12 @@ const Search = () => {
             />
           </div>
         </div>
+
         {searchTerm !== "" ? (
           <RecipeList searchTerm={searchTerm} />
         ) : (
           <FeatureOfTheDay />
         )}
-        <div className="absolute z-0 w-full h-full pointer-events-none left-10 bg-colored-balls-top xl:top-32 md:top-16 top-8">
-          {/* Yellow Ball 1 */}
-          <div className="w-[18px] h-[18px] md:w-[48px] md:h-[48px] md:left-[15%] md:top-[10%] 2xl:left-[30%] xl:w-[56.56px] xl:h-[56.56px]  2xl:w-[62px] 2xl:h-[62px] bg-YellowBall bg-cover relative  rounded-full left-[13%] top-[8%] " />
-          {/* Orange Ball */}
-          <div className="w-[12px] h-[12px] md:w-[34.09px] md:h-[34.09px]  xl:w-[44.44px] xl:h-[44.44px]  md:top-[10%] md:left-[40%] 2xl:left-[56%]  bg-OrangeBall bg-cover rounded-full relative left-[58%]  top-[8%]   " />
-          {/* Green Ball */}
-          <div className="w-[12px] h-[12px] md:w-[34.09px] md:h-[34.09px]  xl:w-[44.44px] xl:h-[44.44px]  md:top-[5%] md:left-[80%] 2xl:left-[70%]  bg-GreenBall bg-cover rounded-full relative left-[8%]  top-[10%]   " />
-        </div>
       </div>
     </div>
   );