change the local img to hero icon

BetaNYC · Feb 26, 2024 · 2dd1b92 · 2dd1b92
1 parent 38b5b39
commit 2dd1b92
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/components/infoPage/infoBox/InfoBox.tsx b/components/infoPage/infoBox/InfoBox.tsx
@@ -4,6 +4,8 @@ import { useMediaQuery } from 'react-responsive'
 
 import { StreetViewContext, StreetViewType } from '@/contexts/StreetViewContext'
 
+import { XMarkIcon, Bars3Icon } from '@heroicons/react/16/solid'
+
 // import InfoTitle from './InfoTitle'
 import InfoAbout from './InfoAbout'
 import InfoCredit from './InfoCredit'
@@ -50,8 +52,10 @@ const InfoBox = () => {
                     </div>
                 </div>
             </div>
-            <div className={`absolute top-7 left-4 lg:left-[calc(100%_-_4.5rem)]  items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-30 shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
-                <Image width={18} height={12} src={boxShown ? "./icons/cross.svg" : "./icons/hamburger.svg"} alt='hamburger' className={` cursor-pointer`} />
+            <div className={`absolute top-7 left-4 lg:left-[calc(100%_-_4.5rem)] flex items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-30 shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
+                {
+                    boxShown ? <XMarkIcon className='w-6 h-6 text-black' /> : <Bars3Icon className='w-5 h-5 text-black' />
+                }
             </div>
         </>
     )

diff --git a/components/map/mapLayer/Legend.tsx b/components/map/mapLayer/Legend.tsx
@@ -6,6 +6,8 @@ import { StreetViewContext, StreetViewType } from '@/contexts/StreetViewContext'
 
 import { btnsType } from './MapLayer'
 
+import { XMarkIcon } from '@heroicons/react/16/solid'
+
 type Props = {
     buttonClickHandler: (btn: btnsType) => void
 }
@@ -20,14 +22,7 @@ function Legend({ buttonClickHandler }: Props) {
         <div className={`absolute ${openStreetView ? "left-[10.971rem] bottom-[calc(50%_-_10.375rem)] lg:bottom-[1.875rem]" : "left-4 bottom-4"} lg:left-[1.875rem] lg:bottom-[1.875rem]  p-3 min-w-[10.5rem] bg-background_white rounded-[1rem] z-20 shadow-2xl`}>
             <div className='flex justify-between items-start mb-4 w-full'>
                 <div className='font-bold text-small lg:text-heading text-black'>Legend</div>
-                <Image
-                    src="./icons/cross.svg"
-                    width={15}
-                    height={15}
-                    alt='cross'
-                    className='cursor-pointer'
-                    onClick={() => buttonClickHandler('Close')}
-                />
+                <XMarkIcon className='w-6 h-6 text-black cursor-pointer' onClick={() => buttonClickHandler('Close')}/>
             </div>
             <div className='flex flex-col gap-4'>
                 <div className='flex items-center gap-3'>

diff --git a/components/streetView/StreetView.tsx b/components/streetView/StreetView.tsx
@@ -8,11 +8,11 @@ import useHoverStatus from '@/hooks/useHoverStatus'
 import StreetInfo from './StreetInfo'
 
 
-
-
 import { StreetViewContext, StreetViewType } from '@/contexts/StreetViewContext'
 import { MarkerContext, MarkerContextType } from '@/contexts/MarkerContext'
 
+import { ArrowsPointingOutIcon } from '@heroicons/react/20/solid'
+
 type floodingTypes = 'Street View' | 'Minor Flooding' | "Moderate Flooding" | "Major Flooding"
 
 const floodingBtnsData: {
@@ -44,7 +44,7 @@ const floodingBtnsData: {
 
 
 const StreetView = () => {
-    const { openStreetView } = useContext(StreetViewContext) as StreetViewType
+    const { openStreetView, setOpenStreetView } = useContext(StreetViewContext) as StreetViewType
     const { marker, markerDegree, setMarkerDegree } = useContext(MarkerContext) as MarkerContextType
 
     const [clicked, setClicked] = useState({
@@ -84,6 +84,11 @@ const StreetView = () => {
         }
     }
 
+    const closeStreetViewClickHandler = () => {
+        setOpenStreetView(false)
+        marker?.remove()
+    }
+
     return (
         <>
             <div className={`absolute top-0 left-0 pt-[1.75rem] ${openStreetView ? "translate-y-0" : "translate-y-[-100%]"}   lg:pl-8 w-full h-[50%] bg-slate-400 z-20 transition-all duration-[1500ms] ease-in-out`}>
@@ -101,7 +106,11 @@ const StreetView = () => {
                 <div className='absolute top-[calc(50%_-_2.5rem)] right-4 lg:right-8 opacity-75'>
                     <Order order='next' clickHandler={() => changeStreetViewClickHandler('next')} />
                 </div>
-                <StreetInfo openStreetView={openStreetView}/>
+                <StreetInfo openStreetView={openStreetView} />
+                <div className='absolute right-4 lg:right-8 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={closeStreetViewClickHandler}>
+                    <ArrowsPointingOutIcon className=' w-5 h-5 text-black opacity-75 cursor-pointer' />
+                </div>
+
                 {/* <Image width={80} height={80} src="./icons/fullscreen.svg" alt="fullscreen" className='absolute right-4 bottom-0 opacity-75 cursor-pointer' /> */}
             </div>
 

diff --git a/shared/Order.tsx b/shared/Order.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
-import Image from 'next/image'
+
+
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/16/solid'
 
 type Props = {
   order: 'previous' | 'next'
@@ -9,7 +11,11 @@ type Props = {
 const Order = ({ order, clickHandler }: Props) => {
   return (
     <div className='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={clickHandler}>
-      <Image width={24} height={24} src={`${order === 'previous' ? "./icons/previous.svg" : "./icons/next.svg" }`} alt='order' />
+      {
+        order === 'previous' ?
+        <ChevronLeftIcon className='w-6 h-6 text-black' /> :
+        <ChevronRightIcon className='w-6 h-6 text-black' /> 
+      }
     </div>
   )
 }