revise the height of infobox

BetaNYC · Mar 23, 2024 · 5b1d442 · 5b1d442
1 parent 77d4e78
commit 5b1d442
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/components/infoPage/infoBox/InfoBox.tsx b/components/infoPage/infoBox/InfoBox.tsx
@@ -44,13 +44,13 @@ const InfoBox = () => {
 
     return (
         <>
-            <div className={`absolute top-[36%] lg:top-0 w-full h-[64%] lg:h-full bg-white lg:bg-secondary_blue rounded-t-[1rem] lg:rounded-none z-30 overflow-y-auto ${boxShown ? "translate-y-0 duration-700" : "translate-y-full duration-700"}`}>
+            <div className={`absolute top-[0] lg:top-0 w-full h-[100%] lg:h-full bg-white lg:bg-secondary_blue rounded-t-[1rem] lg:rounded-none z-30 overflow-y-auto ${boxShown ? "translate-y-0 duration-700" : "translate-y-full duration-700"}`}>
                 <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]' /> 
-                    } */}
+                    }
 
                     {/* <InfoTitle /> */}
                     <div className='lg:flex lg:mt-8'>

diff --git a/components/streetView/FloodingButton.tsx b/components/streetView/FloodingButton.tsx
@@ -14,13 +14,13 @@ type Props = {
 
 const FloodingButton = ({ clicked, hovered, title, src, clickHandler, mouseEnterHandler, mouseLeaveHandler }: Props) => {
 
-    const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" })
+    const isTablet = useMediaQuery({ query: "(min-width: 768px)" })
 
     return (
         <div className={`inline-flex items-center gap-[0.56rem] px-2 py-[0.5rem] lg:min-w-[6.5625rem] max-h-[2.5rem] font-semibold text-small bg-opacity-80 rounded-[37px] cursor-pointer shadow-2xl ${clicked || hovered ? "text-white bg-primary_blue" : "text-black bg-white "}`} onClick={clickHandler} onMouseEnter={mouseEnterHandler} onMouseLeave={mouseLeaveHandler}>
             {/* <Image width={24} height={24} src={src} alt={title} className='' /> */}
             <img src={src} alt={title} className='w-6 h-6' />
-            {isDesktop && <p className=''>{title}</p>}
+            {isTablet && <p className=''>{title}</p>}
         </div>
     )
 }

diff --git a/components/streetView/StreetView.tsx b/components/streetView/StreetView.tsx
@@ -135,7 +135,7 @@ const StreetView = () => {
                 </div>
 
                 <div className={`pt-[1.75rem] lg:pl-8`}>
-                    <div className='absolute top-6 left-0 lg:left-8 flex gap-4 ml-24 lg:ml-[18.56rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
+                    <div className='absolute top-6 left-0 lg:left-8 flex gap-4 ml-20 lg:ml-[18.56rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
                         {
                             floodingBtnsData.map((f, i) => <FloodingButton key={f.title} clicked={clicked[f.title]} hovered={hovered[i]} title={f.title} src={clicked[f.title] || hovered[i] ? f.src_white : f.src} clickHandler={() => floodingButtonClickHandler(f.title)} mouseEnterHandler={() => mouseEnterHandler(i)} mouseLeaveHandler={mouseLeaveHandler} />)
                         }