change the legend layout

BetaNYC · Mar 22, 2024 · 1eb790c · 1eb790c
1 parent 5a0f9bc
commit 1eb790c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/components/map/mapLayer/MapLayerCard.tsx b/components/map/mapLayer/MapLayerCard.tsx
@@ -1,7 +1,8 @@
 "use client"
 import React, { useState } from 'react'
+import { useMediaQuery } from 'react-responsive'
+
 
-import Image from 'next/image'
 
 
 type props = {
@@ -16,17 +17,25 @@ type props = {
 
 
 const MapLayerCard = ({ clicked, image, title, content, clickHandler, mouseEnterHandler, mouseLeaveHandler }: props) => {
+
+    const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" })
+
     return (
-        <div className={`p-4 rounded-[16px] border-[1px] border-primary_blue cursor-pointer ${clicked ? "bg-primary_blue text-white" : " bg-secondary_blue text-black hover:bg-primary_blue hover:text-white"} `} onClick={clickHandler} onMouseEnter={mouseEnterHandler} onMouseLeave={mouseLeaveHandler}>
+        <div className={`p-4 lg:p-3 rounded-[16px] border-[1px] border-primary_blue cursor-pointer ${clicked ? "bg-primary_blue text-white" : " bg-secondary_blue text-black hover:bg-primary_blue hover:text-white"} `} onClick={clickHandler} onMouseEnter={mouseEnterHandler} onMouseLeave={mouseLeaveHandler}>
             {/* <Image
                 src={image}
                 width={30}
                 height={30}
                 alt={title}
             /> */}
-            <img src={image} className='w-[1.875rem] h-[1.875rem]' alt={title} />
-            <div className={`mt-4 w-[6.08rem] font-semibold text-small lg:text-medium `}>{title}</div>
-            <div className={`mt-1 font-regular text-[0.625rem] `}>{content}</div>
+            <div className='lg:flex lg:gap-2 lg:items-center'>
+                <img src={image} className='w-[1.875rem] h-[1.875rem]' alt={title} />
+                <div className={`mt-4 lg:m-0 font-semibold text-small lg:text-medium `}>{title}</div>
+            </div>
+            {
+                !isDesktop && <div className={`mt-1 font-regular text-[0.625rem]`}>{content}</div>
+            }
+
         </div>
     )
 }

diff --git a/components/map/mapLayer/MapLayerCards.tsx b/components/map/mapLayer/MapLayerCards.tsx
@@ -9,7 +9,7 @@ import useHoverStatus from '@/hooks/useHoverStatus'
 
 import { btnsType } from './MapLayer'
 
-import { XMarkIcon } from '@heroicons/react/16/solid'
+import { XMarkIcon, InformationCircleIcon } from '@heroicons/react/16/solid'
 
 type Props = {
     buttonClickHandler: (btn: btnsType) => void
@@ -26,13 +26,13 @@ const layers: {
             image: "./icons/coastal.svg",
             image_white: "./icons/coastal_white.svg",
             title: "Coastal Flooding",
-            content: "Dry and low-lying land is submerged by seawater"
+            content: "Coastal Flooding shows areas vulnerable to coastal flood from 1% annual chance storms and the 0.2% annual chance floodplain."
         },
         {
             image: "./icons/storm.svg",
             image_white: "./icons/storm_white.svg",
             title: "Stormwater Flooding",
-            content: "Caused by heavy rain and meltwater from hail and snow."
+            content: "Stormwater Flooding areas show scenarios of moderate stormwater flooding with 2050 sea level rise (+2.5 ft high estimate)."
         },
         {
             image: "./icons/justice.svg",
@@ -74,11 +74,17 @@ const MapLayerCards = ({ buttonClickHandler, setLayerName }: Props) => {
 
 
     return (
-        <div className={`absolute lg:left-[1.875rem] bottom-0 lg:bottom-[1.875rem] flex flex-col justify-center px-[1rem] py-8 h-[50%] lg:h-[20rem] w-full lg:w-[48rem] bg-background_white rounded-[1rem] z-30 shadow-2xl`}>
+        <div className={`absolute lg:left-[1.875rem] bottom-0 lg:bottom-[1.875rem] flex flex-col justify-center px-[1rem] py-8 h-[50%] lg:h-[11rem] w-full lg:w-[51.5rem] bg-background_white rounded-[1rem] z-30 shadow-2xl`}>
             {/* <div className='m-auto w-[5.5rem] h-[0.375rem] bg-[#D9D9D9] rounded-[23.62px]'></div> */}
             <div>
                 <div className='flex justify-between items-center mb-5 w-full'>
-                    <div className='font-bold text-heading text-black'>Choose Map Layer</div>
+                    <div className='font-bold text-heading text-black'>Flood Risk Map Layers</div>
+                    <div className='flex gap-2 w-[28rem]'>
+                        <InformationCircleIcon width={16} height={16} className='text-black' />
+                        <div className='text-[0.75rem] text-black'>
+                            {layers[clicked.findIndex(c => c === true)].content}
+                        </div>
+                    </div>
                     <XMarkIcon className='w-6 h-6 text-black cursor-pointer' onClick={() => buttonClickHandler('Close')} />
                 </div>
 

diff --git a/components/streetView/StreetView.tsx b/components/streetView/StreetView.tsx
@@ -150,7 +150,7 @@ const StreetView = () => {
                     <div className='absolute right-4  bottom-10 flex justify-center items-center w-[2.5rem] h-[2.5rem] bg-[rgba(255,255,255,0.65)] rounded-full cursor-pointer shadow-2xl' onClick={() => fullScreenStreetViewClickHandler("open")}>
                         <ArrowsPointingOutIcon className=' w-5 h-5 text-black opacity-75 cursor-pointer' />
                     </div>
-                    <div className='absolute left-[calc(50%_-_105px)] bottom-10 px-4 py-2 bg-black bg-opacity-20'>Image {streetViewImgAngle}/8</div>
+                    <div className='absolute left-[calc(50%_-_105px)] bottom-10 px-4 py-2 font-bold text-[0.75rem] bg-black bg-opacity-20'>Image {streetViewImgAngle}/8</div>
                     {
                         streetViewImgFloodHeight === 0 ?
                             <img src="/logos/fg_logo.png" className='absolute right-2 bottom-2 w-[15px] h-[17.54px]' alt="" /> :