change the condition of disadvantaged

components/infoPage/infoBox/InfoBox.tsx

@@ -48,8 +48,8 @@ const InfoBox = () => {
                 <div className=' px-5 lg:px-16 pt-8 lg:pt-[5rem] pb-8 w-full rounded-t-[1rem]'>
                     {/* <Image width={isDesktop ? 203 : 80} height={isDesktop ? 38.17 : 15.4} src="./logos/floodgen.svg" alt='floodgen' className='mb-2' /> */}
                     {
-                        isDesktop ? <img src="/logos/floodgen.svg" alt="" className='mb-2 w-[203px] h-[38.17px]' /> :
-                        <img src="/logos/floodgen.svg" alt="" className='mb-4 w-[80px] h-[15.4px]' /> 
+                        isDesktop ? <img src="/logos/floodgen_logo.png" alt="" className='mb-2 w-[203px] ' /> :
+                        <img src="/logos/floodgen_logo.png" alt="" className='mb-4 w-[80px] ' /> 
                     }
 
                     {/* <InfoTitle /> */}

components/map/Map.css

@@ -4,6 +4,7 @@
   border-radius: 20px !important;
   width: 270px !important;
   height: 120px !important;
+  z-index: 100000;
 }
 
 /* .content {
@@ -14,6 +15,11 @@
     border-radius: 20px  !important
 } */
 
+#map canvas {
+  cursor: auto;
+}
+
+
 .zone {
   padding: 12px;
   font-weight: 600;

components/map/Map.tsx

@@ -117,7 +117,6 @@ const Map = () => {
                             "#F7A848",
                             'transparent'
                         ],
-                        'fill-opacity': 1
                     }
                 })
 
@@ -200,8 +199,8 @@ const Map = () => {
 
 
     return (
-        <div className='map relative w-full h-full'>
-            <div className={`absolute left-0 w-full z-10 transition-all duration-[1500ms] ease-in-out  ${openStreetView ? "top-[65%] h-[35vh]" : "top-[0%] h-[100vh]"}`} ref={mapContainer}></div>
+        <div className=' relative w-full h-full'>
+            <div className={`absolute left-0 w-full z-10 transition-all duration-[1500ms] ease-in-out  ${openStreetView ? "top-[65%] h-[35vh]" : "top-[0%] h-[100vh]"}`} ref={mapContainer} id='map'></div>
             <MapLayer />
         </div>
     )

hooks/useTooltips.tsx

@@ -66,13 +66,16 @@ const useTooltips = () => {
 
 
         map?.on("mousemove", "disadvantaged_communities", (e: MapMouseEvent & EventData) => {
-            const content = `<div class="content">
-                ${e.features[0].properties.DAC_Desig === "Designated as DAC" && "<div class='zone' style='background:#F7A848'>Disadvantaged Communities</div>"}
+
+            if (e.features[0].properties.DAC_Desig === "Designated as DAC") {
+                const content = `<div class="content">
+                <div class='zone' style='background:#F7A848'>Disadvantaged Communities</div>
                     <div class="description">Communities that are associated with historical discrimination or disinvestment and vulnerable to potential climate change and pollution risks</div>
                 </div>`
 
-            popup.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML(content).addTo(map);
 
+                popup.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML(content).addTo(map);
+            }
         })
 
         map?.on("mousemove", "hurricane_evacuation_zones", (e: MapMouseEvent & EventData) => {
@@ -85,12 +88,12 @@ const useTooltips = () => {
                                     "<div class='zone' style='background:#D9E8EA'>Hurricane Evacuation Zone 6</div>"
                 }
                 ${e.features[0].properties.hurricane_ === "1" ? "<div class='description'>Areas with <span style='font-weight:bold'>high</span> threat of coastal flooding resulting from a storm surge</div>" :
-                e.features[0].properties.hurricane_ === "2" ? "<div class='description'>Areas with <span style='font-weight:bold'>high</span> threat of coastal flooding resulting from a storm surge</div>" :
-                    e.features[0].properties.hurricane_ === "3" ? "<div class='description'>Areas with <span style='font-weight:bold'>moderate</span> threat of coastal flooding resulting from a storm surge</div>":
-                        e.features[0].properties.hurricane_ === "4" ? "<div class='description'>Areas with <span style='font-weight:bold'>moderate</span> threat of coastal flooding resulting from a storm surge</div>" :
-                            e.features[0].properties.hurricane_ === "5" ? "<div class='description'>Areas with <span style='font-weight:bold'>mild</span> threat of coastal flooding resulting from a storm surge</div>" :
-                            "<div class='description'>Areas with <span style='font-weight:bold'>high</span> threat of coastal flooding resulting from a storm surge</div>"
-            }
+                    e.features[0].properties.hurricane_ === "2" ? "<div class='description'>Areas with <span style='font-weight:bold'>high</span> threat of coastal flooding resulting from a storm surge</div>" :
+                        e.features[0].properties.hurricane_ === "3" ? "<div class='description'>Areas with <span style='font-weight:bold'>moderate</span> threat of coastal flooding resulting from a storm surge</div>" :
+                            e.features[0].properties.hurricane_ === "4" ? "<div class='description'>Areas with <span style='font-weight:bold'>moderate</span> threat of coastal flooding resulting from a storm surge</div>" :
+                                e.features[0].properties.hurricane_ === "5" ? "<div class='description'>Areas with <span style='font-weight:bold'>mild</span> threat of coastal flooding resulting from a storm surge</div>" :
+                                    "<div class='description'>Areas with <span style='font-weight:bold'>high</span> threat of coastal flooding resulting from a storm surge</div>"
+                }
             </div>`
             if (+e.features[0].properties.hurricane_ <= 5) {
                 popup.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML(content).addTo(map);