Merge pull request #69 from Vizzuality/client/feature/update-globe-pa…

…ge-design

Update globe and story styles

client/src/app/(landing)/globe/page.tsx

@@ -7,6 +7,7 @@ import { getStoriesParams } from '@/lib/stories';
 import { getGetCategoriesQueryOptions } from '@/types/generated/category';
 import { getGetStoriesQueryOptions } from '@/types/generated/story';
 import { CategoryListResponse } from '@/types/generated/strapi.schemas';
+import { getGetTopStoriesQueryOptions } from '@/types/generated/top-story';
 
 import Globe from '@/containers/globe';
 
@@ -55,6 +56,18 @@ async function prefetchQueries(searchParams: HomePageProps['searchParams']) {
       queryFn: storiesQueryFn,
     });
 
+    const { queryKey: topStoriesQueryKey, queryFn: topStoriesQueryFn } =
+      getGetTopStoriesQueryOptions({
+        'pagination[limit]': 5,
+        populate: 'story,cover_image',
+        sort: 'index:asc',
+      });
+
+    await queryClient.prefetchQuery({
+      queryKey: topStoriesQueryKey,
+      queryFn: topStoriesQueryFn,
+    });
+
     return dehydrate(queryClient);
   } catch (error) {
     console.info(error);

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

@@ -1,67 +1,72 @@
-import { MouseEventHandler } from 'react';
-
-import { Marker as RMarker, MarkerProps as RMarkerProps } from 'react-map-gl';
+import { Marker as RMarker } from 'react-map-gl';
 
 import { cn } from '@/lib/classnames';
 
 import { Button } from '@/components/ui/button';
 import CategoryIcon from '@/components/ui/category-icon';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
-type MarkerProps = RMarkerProps & {
-  properties: GeoJSON.GeoJsonProperties;
-  onClick: MouseEventHandler<HTMLButtonElement>;
+type MarkerProps = {
+  markers?: (GeoJSON.Feature<GeoJSON.Point> | null)[];
+  handleClick: (id: string | number) => void;
 };
 
-const Marker = (props: MarkerProps) => {
-  const { properties, onClick, ...rest } = props;
+const Marker = ({ markers, handleClick }: MarkerProps) => {
+  const { coordinates } = markers?.[0]?.geometry || {};
+  if (!coordinates?.length) return null;
   return (
-    <RMarker {...properties} {...rest}>
-      <Tooltip open delayDuration={0}>
-        <TooltipTrigger asChild>
+    <RMarker anchor="left" latitude={coordinates[1]} longitude={coordinates[0]}>
+      <div className="flex items-center">
+        <div
+          className={cn({
+            'relative z-50 flex h-6 w-6 -translate-x-1/2 cursor-pointer items-center justify-center':
+              true,
+          })}
+        >
           <div
             className={cn({
-              'animate-in zoom-in relative flex h-6 w-6 cursor-pointer items-center justify-center duration-150':
+              'absolute left-1/2 top-1/2 flex h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 items-center justify-center border-[1.5px] border-[#FFE094] transition-all':
                 true,
+              'bg-background scale-[1.25] border-gray-200': true,
             })}
           >
-            <div
-              className={cn({
-                'absolute left-1/2 top-1/2 flex h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 items-center justify-center border-[1.5px] border-[#FFE094] transition-all':
-                  true,
-                'bg-background scale-[1.25] border-gray-200': true,
-              })}
-            >
-              <div className="h-[5px] w-[5px] bg-gray-200"></div>
-            </div>
+            <div className="h-[5px] w-[5px] bg-gray-200"></div>
           </div>
-        </TooltipTrigger>
-        <TooltipContent
-          className="bg-[rgba(51, 94, 111, 0.50)] max-w-[230px] p-4 text-white backdrop-blur-lg"
-          asChild
-        >
-          <div onMouseMove={(e) => e.stopPropagation()}>
-            <div className="mb-2 flex  items-center space-x-4">
-              <CategoryIcon
-                slug={properties?.category}
-                className="fill-secondary h-10 w-10 opacity-80"
-              />
-              <p className="text-xs">{properties?.categoryName}</p>
-            </div>
-            <p className="text-sm">{properties?.title}</p>
-            <p className="mb-4 text-xs italic text-gray-300">{properties?.location}</p>
+        </div>
 
-            <Button
-              variant="secondary"
-              className="h-8 w-full rounded-3xl bg-teal-500 py-2 text-xs text-white hover:bg-teal-500/50"
-              onClick={onClick}
-              disabled={!properties?.active}
-            >
-              Discover story
-            </Button>
-          </div>
-        </TooltipContent>
-      </Tooltip>
+        <div className="max-w-[230px] -translate-x-6 rounded border border-gray-700 bg-[rgba(51,94,111,0.50)] px-0 text-white backdrop-blur-lg">
+          {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"
+                key={marker.id}
+                onMouseMove={(e) => e.stopPropagation()}
+              >
+                <div className="mb-2 flex  items-center space-x-4">
+                  <CategoryIcon
+                    slug={marker?.properties?.category}
+                    className="h-10 w-10 fill-transparent stroke-teal-300 opacity-80"
+                  />
+                  <p className="font-open-sans text-xs">{marker?.properties?.categoryName}</p>
+                </div>
+                <p className="font-notes text-sm">{marker?.properties?.title}</p>
+                <p className="font-open-sans mb-4 mt-2 text-xs italic text-gray-300">
+                  {marker?.properties?.location}
+                </p>
+
+                <Button
+                  variant="secondary"
+                  className="h-8 w-full rounded-3xl bg-teal-500 py-2 text-xs text-white hover:bg-teal-500/50"
+                  onClick={() => !!marker.id && handleClick(marker.id)}
+                  disabled={!marker?.properties?.active}
+                >
+                  Discover story
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
     </RMarker>
   );
 };

client/src/components/ui/card.tsx

@@ -4,7 +4,7 @@ import { InfoIcon } from 'lucide-react';
 
 import { cn } from '@/lib/classnames';
 
-// import { ScrollArea } from '@/components/ui/scroll-area';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 type CardProps = PropsWithChildren & {
   title?: string;
@@ -26,11 +26,9 @@ const Card = ({ children, title, info, className }: CardProps) => {
           {info && <InfoIcon className="h-4 w-4" />}
         </div>
       )}
-      {/* <ScrollArea className={cn('h-full px-4')}> */}
-      <div className={cn('h-full overflow-y-auto px-4')}>
+      <ScrollArea type="always" className={cn('px-4', !title ? 'h-[calc(100%-20px)]' : 'h-full')}>
         <div className="pb-4">{children}</div>
-      </div>
-      {/* </ScrollArea> */}
+      </ScrollArea>
     </div>
   );
 };

client/src/components/ui/dialog.tsx

@@ -60,7 +60,7 @@ const DialogContentHome = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
   <DialogPortal>
-    <DialogOverlay />
+    <DialogOverlay className="bg-background opacity-60" />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(

client/src/components/ui/gradient-line.tsx

@@ -1,3 +1,11 @@
-const GradientLine = () => <div className="bg-header-line relative my-4 h-[1px]"></div>;
+import { cn } from '@/lib/classnames';
+
+type GradientLineProps = {
+  className?: string;
+};
+
+const GradientLine = ({ className }: GradientLineProps) => (
+  <div className={cn('bg-header-line relative my-4 h-[1px]', className)}></div>
+);
 
 export default GradientLine;

client/src/components/ui/input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'border-input bg-background ring-offset-background focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

client/src/components/ui/loader.tsx

@@ -38,12 +38,12 @@ const ContentLoader = ({
         iconClassName="w-5 h-5"
         visible={isFetching && !isPlaceholderData}
       /> */}
-
-      {isError && isFetched && !isFetching && (errorMessage || 'Error')}
+      <div className="text-center">
+        {isError && isFetched && !isFetching && (errorMessage || 'Error')}
+        {!isPlaceholderData && !isError && isFetched && !data && 'No data'}
+      </div>
 
       {!isPlaceholderData && !isError && isFetched && !!data && children}
-
-      {!isPlaceholderData && !isError && isFetched && !data && 'No data'}
     </>
   );
 };

client/src/components/ui/scroll-explanation.tsx

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+
+const ScrollExplanation = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="font-notes z-10 flex w-full items-center justify-center gap-2 text-center text-sm italic text-white">
+      <div className="flex h-8 w-4 justify-center rounded-full border border-gray-200 bg-gray-900">
+        <div className="animate-fade-down h-2 w-2 rounded-full bg-gray-200" />
+      </div>
+      <p>{children}</p>
+    </div>
+  );
+};
+
+export default ScrollExplanation;

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

@@ -1,5 +1,3 @@
-import { cn } from '@/lib/classnames';
-
 import { useGetCategories } from '@/types/generated/category';
 
 import ContentLoader from '@/components/ui/loader';
@@ -8,37 +6,32 @@ import { Skeleton } from '@/components/ui/skeleton';
 import Category from './item';
 
 const Categories = () => {
-  const { data, isError, isSuccess, isPlaceholderData, isFetched, isFetching } = useGetCategories();
+  const { data, isError, isPlaceholderData, isFetched, isFetching } = useGetCategories();
 
   const categories = data?.data;
 
   return (
-    <div className="w-full">
+    <div className="pointer-events-none w-full">
       <ContentLoader
         isPlaceholderData={isPlaceholderData}
         data={data}
         isError={isError}
         isFetched={isFetched}
         isFetching={isFetching}
         errorMessage="Error loading the categories"
-        className="3xl:mb-4 mx-auto mb-14 h-10 w-full max-w-3xl text-center"
+        className="mx-auto mb-8 h-10 w-full max-w-3xl text-center"
         SkeletonComponent={
-          <div className="flex w-full gap-8">
+          <div className="mb-8 flex w-full items-center justify-center gap-8">
             {[...Array(11)].map((_, i) => (
               <Skeleton key={i} className="bg-background h-10 w-10 rounded-full" />
             ))}
           </div>
         }
       >
-        <div className="3xl:mb-4 mx-auto mb-14 mt-4 w-full max-w-3xl">
-          <div className="flex w-full gap-8">
-            <div className="w-12">
-              <p
-                className={cn(
-                  'text-center text-sm leading-4',
-                  isSuccess ? 'text-primary' : 'text-gray-500'
-                )}
-              >
+        <div className="mx-auto mb-8 mt-4 w-full max-w-3xl">
+          <div className="flex w-full gap-8 xl:flex-col xl:items-center xl:gap-4">
+            <div className="w-min xl:w-fit">
+              <p className="font-notes text-center text-sm font-bold leading-4 text-gray-500">
                 Select category
               </p>
             </div>

client/src/containers/globe/categories/item.tsx

@@ -30,12 +30,12 @@ const CategoryItem = ({ name, slug }: CategoryProps) => {
           title={name}
           onClick={() => handleClick(slug)}
           className={cn(
-            'hover:fill-secondary transition-all delay-200 ease-out hover:-translate-y-2 hover:opacity-100',
+            'hover:fill-secondary pointer-events-auto transition-all delay-200 ease-out hover:-translate-y-2 hover:opacity-100',
             slug === 'placeholder-category'
               ? 'animate-pulse'
               : category === slug
               ? 'fill-secondary opacity-70'
-              : 'fill-primary  opacity-50'
+              : 'fill-primary'
           )}
         >
           <CategoryIcon slug={slug} />

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

@@ -6,15 +6,19 @@ import DashboardRegions from './regions';
 
 const Dashboard = () => {
   return (
-    <div className="w-60">
-      <Card>
-        <DashboardNumbers />
-      </Card>
-      <GradientLine />
-      <Card title="Regions">
+    <>
+      <div>
+        <Card className="h-fit">
+          <DashboardNumbers />
+        </Card>
+        <div>
+          <GradientLine />
+        </div>
+      </div>
+      <Card className="max-h-[calc(100%-142px)]" title="Regions">
         <DashboardRegions />
       </Card>
-    </div>
+    </>
   );
 };
 

client/src/containers/globe/dashboard/regions.tsx

@@ -15,10 +15,10 @@ const DashboardRegions = () => {
 
   return (
     <div>
-      <ul>
+      <ul className="space-y-4">
         {regions.map(({ name, stories }) => (
-          <li key={name}>
-            <div className="flex justify-between py-2 text-sm">
+          <li key={name} className="space-y-2">
+            <div className="flex justify-between text-sm">
               <p>{name}</p>
               <p className="font-semibold">{stories}</p>
             </div>