Style fixes in mobile (#77)

* Style fixes in mobile

client/src/components/map/layers/marker/index.tsx

@@ -25,7 +25,7 @@ const Marker = ({ markers, handleClick, handleClose }: MarkerProps) => {
   if (!coordinates?.length) return null;
 
   const MARKER = () => (
-    <div className="pointer-events-auto relative flex items-center">
+    <div className="pointer-events-auto relative flex w-full items-center">
       <div
         className={cn({
           'relative z-50 hidden h-6 w-6 -translate-x-1/2 cursor-pointer items-center justify-center sm:flex':
@@ -43,12 +43,12 @@ const Marker = ({ markers, handleClick, handleClose }: MarkerProps) => {
         </div>
       </div>
 
-      <div className="max-w-[230px] rounded border border-gray-700 bg-[rgba(51,94,111,0.50)] px-0 text-white backdrop-blur-lg sm:-translate-x-6">
+      <div className="mx-4 w-full max-w-full rounded border border-gray-700 bg-[rgba(51,94,111,0.50)] px-0 text-white backdrop-blur-lg sm:mx-0 sm:max-w-[230px] sm:-translate-x-6">
         {markers?.map((marker) => {
           if (!marker || !marker?.id) return null;
           return (
             <div
-              className="border-b border-b-gray-700 p-4 last-of-type:border-b-0"
+              className="border-b border-b-gray-700 p-6 last-of-type:border-b-0 sm:py-4"
               key={marker.id}
               onMouseMove={(e) => e.stopPropagation()}
             >

client/src/components/map/legend/index.tsx

@@ -23,7 +23,8 @@ export const Legend: React.FC<LegendProps> = ({ children, className = '' }: Lege
     isChildren && (
       <div
         className={cn({
-          'bg-card-map relative flex-col space-y-2 rounded-lg p-4 backdrop-blur-sm': true,
+          'bg-card-map relative flex-col space-y-2 rounded-lg p-4 backdrop-blur sm:backdrop-blur-sm':
+            true,
           hidden: !isChildren,
           [className]: !!className,
         })}

client/src/components/ui/card.tsx

@@ -16,7 +16,7 @@ const Card = ({ children, title, info, className }: CardProps) => {
   return (
     <div
       className={cn(
-        'animate-in slide-in-from-top-5 fade-in bg-background/30 flex h-full flex-col rounded border border-[#335E6F] pt-4 backdrop-blur-sm',
+        'animate-in slide-in-from-top-5 fade-in sm:bg-background/30 flex h-full flex-col rounded border border-[#335E6F] pt-4 sm:backdrop-blur-sm',
         className
       )}
     >

client/src/components/ui/carousel/index.tsx

@@ -226,16 +226,22 @@ const EmblaCarousel: React.FC<PropType> = ({ options, medias, selected }) => {
   return (
     <section className="embla w-full space-y-4">
       <div className="embla__viewport w-full" ref={emblaRef}>
-        <div className={cn('embla__container', medias?.length > 1 ? '-ml-4 sm:-ml-6' : '')}>
+        <div
+          className={cn(
+            'embla__container items-center',
+            medias?.length > 1 ? '-ml-4 sm:-ml-6' : ''
+          )}
+        >
           {medias?.map((media, index) => (
             <div
               className={cn(
                 'embla__slide',
-                medias?.length > 1 ? 'flex-[0_0_80%] pl-4 sm:pl-6' : 'flex-1'
+                medias?.length > 1 ? 'flex-[0_0_80%] pl-4 sm:pl-6' : 'flex-1',
+                index === currSlider ? 'h-[80vh]' : 'h-[40vh]'
               )}
               key={index}
             >
-              <div className="h-[80vh] text-white">
+              <div className={cn('h-full w-full text-white')}>
                 <CarouselMedia media={media} isCurrentMedia={index === currSlider} />
               </div>
             </div>

client/src/components/ui/loader.tsx

@@ -27,8 +27,8 @@ const ContentLoader = ({
   isFetched,
   isError,
   errorMessage,
-  className,
-}: ContentLoaderProps) => {
+}: // className,
+ContentLoaderProps) => {
   return (
     <>
       {isFetching && !isFetched && !SkeletonComponent && <Skeleton className={cn('h-20 w-full')} />}

client/src/containers/globe/filters/index.tsx

@@ -89,7 +89,7 @@ const Filters = ({ filtersActive }: FiltersProps) => {
         </DialogTrigger>
         <DialogPortal>
           <DialogOverlay />
-          <DialogContent className="bg-card-foreground shadow-filters absolute left-0 top-0 z-50 h-screen overflow-hidden rounded-lg backdrop-blur-lg transition-all duration-500 sm:w-[345px]">
+          <DialogContent className="bg-card-foreground shadow-filters absolute left-0 top-0 z-50 h-screen overflow-hidden backdrop-blur-[20px] transition-all duration-500 sm:w-[345px] sm:rounded-lg">
             <ScrollArea type="hover" className="h-full">
               <DialogHeader className="flex flex-row items-end justify-between px-8 pt-4">
                 <div className="flex items-center justify-between">

client/src/containers/globe/index.tsx

@@ -14,7 +14,6 @@ import { useSyncFilters } from '@/store/globe';
 import { layersAtom, tmpBboxAtom } from '@/store/map';
 import { useSyncStep } from '@/store/stories';
 
-import { setMapEnable } from '@/hooks/map';
 import { useIsMobile } from '@/hooks/screen-size';
 import useStories from '@/hooks/stories/useStories';
 
@@ -74,9 +73,6 @@ export default function Home() {
         zoom: isMobile ? DEFAULT_MOBILE_ZOOM : DEFAULT_VIEW_STATE.zoom,
       },
     });
-
-    const MAP = map?.getMap();
-    setMapEnable(MAP, true);
     map?.resize();
   }, [isMobile, map, setTmpBbox, storiesData?.data]);
 
@@ -142,8 +138,8 @@ export default function Home() {
         </div>
         {/* Mobile */}
         <div className="pointer-events-none fixed bottom-0 top-[160px] flex flex-col items-start overflow-y-hidden sm:hidden">
-          <div className="rounded-t-4xl z-10 max-h-[calc(100vh-150px)] overflow-y-auto">
-            <div className="rounded-t-4xl bg-background/30 pointer-events-auto z-10 mt-[60vh] p-4">
+          <div className="z-10 max-h-[calc(100vh-150px)] overflow-y-auto rounded-t">
+            <div className="bg-background/50 pointer-events-auto z-10 mt-[60vh] rounded-t p-4 backdrop-blur-[6px]">
               <div className="mx-auto mb-4 h-0.5 w-9 rounded-lg bg-gray-400"></div>
               <Dashboard />
               <GradientLine />

client/src/containers/globe/search/index.tsx

@@ -12,7 +12,7 @@ const SearchStories = () => {
   };
 
   return (
-    <div className="hover:border-secondary relative flex items-center gap-2 rounded-sm border border-gray-800">
+    <div className="hover:border-secondary relative flex w-full items-center gap-2 rounded-sm border border-gray-800">
       <SearchIcon className="absolute left-4 w-[18px] shrink-0 stroke-gray-200" />
       <input
         value={search || ''}

client/src/containers/header/index.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/lib/classnames';
 
 import GradientLine from '@/components/ui/gradient-line';
 
-import About from './about';
+// import About from './about';
 
 type HeaderProps = {
   pathname?: string;
@@ -16,15 +16,15 @@ const Header = ({ pathname, className }: HeaderProps) => {
   const isHome = pathname?.includes('home');
   return (
     <header className={cn('pointer-events-auto z-50', className)}>
-      <div className="flex items-center justify-between space-x-1.5 px-4 py-4 sm:px-0">
+      <div className="flex items-center justify-between space-x-1.5 px-4 py-1.5 sm:px-0 sm:py-4">
         <div className={cn('flex items-center space-x-3', !isHome && 'flex-1')}>
           <div className="flex shrink-0 items-center space-x-3">
             <a href="https://gda.esa.int/" target="_blank" rel="noreferrer">
               <Image
                 src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/logos/GDA-logo.png`}
                 alt="Impact Sphere"
-                width={48}
-                height={48}
+                width={50}
+                height={44}
               />
             </a>
             <a href="https://www.esa.int/" target="_blank" rel="noreferrer">
@@ -45,12 +45,12 @@ const Header = ({ pathname, className }: HeaderProps) => {
           </p>
         </div>
 
-        <div className={cn('flex flex-1 items-center space-x-3', !isHome && 'hidden sm:flex')}>
+        {/* <div className={cn('flex flex-1 items-center space-x-3', !isHome && 'hidden sm:flex')}>
           <GradientLine className={cn('flex-1')} />
           <div className="text-sm font-bold uppercase tracking-widest">
             <About />
           </div>
-        </div>
+        </div> */}
       </div>
     </header>
   );

client/src/containers/home/index.tsx

@@ -7,10 +7,11 @@ import { useMap } from 'react-map-gl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
-import { motion } from 'framer-motion';
+import { motion, useTransform } from 'framer-motion';
 import { useAtomValue, useSetAtom } from 'jotai';
 
 import { homeMarkerAtom } from '@/store/home';
+import { mapScrollAtom } from '@/store/map';
 
 import { useIsMobile } from '@/hooks/screen-size';
 
@@ -106,21 +107,27 @@ const Home = () => {
     visible: { opacity: 1 },
   };
 
+  const mapScroll = useAtomValue(mapScrollAtom);
+  const opacity = useTransform(mapScroll, [0, 0.2, 0.8], [1, 1, 0]);
+
   return (
     <>
       <div className="text-primary font-notes pointer-events-none absolute flex h-screen min-h-screen w-screen flex-col justify-between">
-        <div className="fixed top-0 flex h-screen w-screen flex-col overflow-hidden">
+        <motion.div
+          style={{ opacity: isMobile ? opacity : 1 }}
+          className="fixed top-0 flex h-screen w-screen flex-col overflow-hidden"
+        >
           <div className="sm:mx-12">
             <Header pathname="home" />
           </div>
-          <div className="container flex flex-1 pb-12 sm:items-end xl:items-center xl:justify-start">
+          <div className="container flex flex-1 pb-12 pt-4 sm:items-end sm:pt-0 xl:items-center xl:justify-start">
             <div className="max-w-full xl:max-w-lg">
               <div className="flex flex-col items-start justify-center gap-4  sm:gap-8">
                 <div className="flex flex-col items-start justify-center gap-2">
-                  <div className="font-notes text-xs font-bold uppercase leading-normal tracking-wide text-slate-400">
+                  <div className="font-notes text-xs font-bold uppercase leading-loose tracking-[1.2px] text-slate-400 sm:leading-normal sm:tracking-wide">
                     Welcome to the
                   </div>
-                  <div className="font-notes text-[32px] font-bold uppercase leading-none tracking-[12.8px] text-zinc-100 lg:text-[40px] xl:tracking-[16px]">
+                  <div className="font-notes text-[20px] font-bold uppercase leading-[32px] tracking-[8px] text-zinc-100 lg:text-[40px] xl:tracking-[16px]">
                     Impact Sphere
                   </div>
                 </div>
@@ -129,7 +136,7 @@ const Home = () => {
                   <p className="font-open-sans text-base font-normal leading-normal text-stone-200">
                     Uncover the stories told by powerful satellites, revealing their crucial role in
                     addressing global challenges. From monitoring climate change to enhancing
-                    precision agriculture, the GDA program utilises satellite data to accelerate
+                    precision agriculture, the GDA programme utilises satellite data to accelerate
                     impact.
                   </p>
                   <p className="font-open-sans hidden text-base font-normal leading-normal text-stone-200 sm:block">
@@ -196,7 +203,7 @@ const Home = () => {
               </div>
             </div>
           </motion.div>
-        </div>
+        </motion.div>
 
         <Dialog
           open={!!selectedMarker}

client/src/containers/map/index.tsx

@@ -13,7 +13,7 @@ import { LngLatBoundsLike } from 'mapbox-gl';
 
 import { cn } from '@/lib/classnames';
 
-import { bboxAtom, layersInteractiveIdsAtom, tmpBboxAtom } from '@/store/map';
+import { bboxAtom, layersInteractiveIdsAtom, mapScrollAtom, tmpBboxAtom } from '@/store/map';
 
 import { Bbox } from '@/types/map';
 
@@ -25,7 +25,7 @@ import GlobeMarkers from '@/containers/map/markers/globe-markers';
 import StoryMarkers from '@/containers/map/markers/story-markers';
 
 import Map from '@/components/map';
-import { DEFAULT_MOBILE_ZOOM, DEFAULT_PROPS } from '@/components/map/constants';
+import { DEFAULT_PROPS } from '@/components/map/constants';
 import { CustomMapProps } from '@/components/map/types';
 
 import SelectedStoriesMarker from './markers/selected-stories-marker';
@@ -112,7 +112,7 @@ export default function MapContainer() {
       map.flyTo({
         bearing,
         pitch,
-        zoom: isMobile ? DEFAULT_MOBILE_ZOOM : zoom,
+        zoom,
         center: [longitude, latitude],
         duration: 1000,
         animate: true,
@@ -133,12 +133,17 @@ export default function MapContainer() {
     container: containerRef,
   });
 
+  const setMapScroll = useSetAtom(mapScrollAtom);
+
   useMotionValueEvent(scrollYProgress, 'change', (v) => {
-    if (isLandingPage && isMobile && v > 0.9) {
+    setMapScroll(scrollYProgress);
+    if (isLandingPage && isMobile && v > 0.95) {
       router.push('/globe');
     }
   });
 
+  const mapInteractionEnabled = useMemo(() => isGlobePage, [isGlobePage]);
+
   return (
     <div
       className={cn(
@@ -174,15 +179,8 @@ export default function MapContainer() {
           interactiveLayerIds={layersInteractiveIds}
           onMouseMove={handleMouseMove}
           onMapViewStateChange={handleMapViewStateChange}
-          boxZoom={false}
-          scrollZoom={false}
-          dragPan={false}
-          dragRotate={false}
-          keyboard={false}
-          doubleClickZoom={false}
-          touchZoomRotate={false}
           className={cn(
-            isGlobePage
+            mapInteractionEnabled
               ? 'pointer-events-auto cursor-pointer'
               : 'pointer-events-none cursor-default'
           )}

client/src/containers/map/markers/globe-markers/index.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 
-import { Layer, Source, useMap } from 'react-map-gl';
+import { Layer, Source } from 'react-map-gl';
 
 import { usePathname } from 'next/navigation';
 
 import { StoryStepMap } from '@/types/story';
 
-import { setMapEnable, useMapImage } from '@/hooks/map';
+import { useMapImage } from '@/hooks/map';
 import useStories from '@/hooks/stories/useStories';
 
 const GlobeMarkers = () => {
@@ -50,14 +50,6 @@ const GlobeMarkers = () => {
     [pathname]
   );
 
-  const { default: map } = useMap();
-
-  useEffect(() => {
-    if (!map) return;
-    const MAP = map.getMap();
-    setMapEnable(MAP, pathname.includes('globe'));
-  }, [pathname, map]);
-
   return (
     <Source id="story-markers" type="geojson" data={FeatureCollection}>
       <Layer

client/src/containers/map/markers/story-markers/index.tsx

@@ -64,7 +64,7 @@ const StoryMarkers = () => {
         onOpenChange={() => setCurrentMedia(undefined)}
         open={typeof currentMedia === 'number'}
       >
-        <DialogContent className="h-screen bg-transparent">
+        <DialogContent className="h-screen rounded-none border-0 bg-transparent sm:rounded-none">
           <Carousel selected={currentMedia} options={{ loop: true }} medias={medias} />
         </DialogContent>
       </Dialog>

client/src/containers/story/header.tsx

@@ -17,7 +17,7 @@ import CategoryIcon from '@/components/ui/category-icon';
 import { Dialog, DialogContentHome, DialogTrigger } from '@/components/ui/dialog';
 
 const headerButtonClassName =
-  'h-8 px-4 py-2 rounded-4xl sm:h-auto border border-gray-800 bg-gray-900 sm:px-5 sm:py-2.5 hover:bg-gray-800';
+  'h-9 sm:h-8 px-5 sm:px-4 py-2 rounded-4xl sm:h-auto border border-gray-800 bg-gray-900 sm:px-5 sm:py-2.5 hover:bg-gray-800';
 
 const shareIcons = [
   {
@@ -143,7 +143,7 @@ const StoryHeader = ({ categorySlug, title, categoryTitle, storyId }: StoryHeade
 
       <div
         className={cn(
-          'bg-background fixed left-0 top-0 z-30 h-fit min-h-fit w-screen overflow-x-hidden transition-all duration-300 sm:hidden',
+          'bg-story-header-mobile fixed left-0 top-0 z-30 h-fit min-h-fit w-screen overflow-x-hidden transition-all duration-300 sm:hidden',
           collapsed ? 'h-[56px]' : `h-[135px]`
         )}
       >
@@ -163,15 +163,20 @@ const StoryHeader = ({ categorySlug, title, categoryTitle, storyId }: StoryHeade
             <ArrowLeft className="inline-block h-4 w-4 sm:hidden" />
           </Button>
 
-          <div className={cn('flex items-center gap-2', collapsed ? 'order-2' : 'order-3')}>
+          <div
+            className={cn(
+              'flex items-center gap-2',
+              collapsed ? 'order-2 max-w-[calc(100%-148px)]' : 'order-3'
+            )}
+          >
             <CategoryIcon
               slug={categorySlug}
               className={cn('shrink-0 fill-gray-200', collapsed && 'hidden')}
             />
             <h1
               className={cn(
                 'font-notes text-start text-base font-normal sm:text-center sm:text-2xl',
-                collapsed && 'max-w-[60vw] truncate'
+                collapsed && 'truncate'
               )}
             >
               {categoryTitle}: {title}

client/src/containers/story/steps/layouts/components/map-content.tsx

@@ -37,7 +37,7 @@ const MapContent = ({ showContent, title, titlePlaceholder, children }: MapConte
         <div
           className={cn('w-full space-y-2 px-2 pt-4 sm:px-4 sm:pb-4 sm:pt-0', title && 'sm:pt-2')}
         >
-          <div className="font-open-sans space-y-4 text-sm">{children}</div>
+          <div className="font-open-sans space-y-4">{children}</div>
         </div>
       </CollapsibleContent>
     </Collapsible>