Merge pull request chingu-voyages#116 from chingu-voyages/fix/z-index…

…-issue-115

Fix/z-index issue affecting mobile menu chingu-voyages#115

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/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 -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>
   );