Merge pull request #71 from Vizzuality/client/fix/home-styles

Fix home styles

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

@@ -35,15 +35,15 @@ async function prefetchQueries(searchParams: HomePageProps['searchParams']) {
     });
 
     // Stories
-    let categoryId;
+    let categoryId: string | undefined;
 
     // If there is a category in the search params, we need to get the category id to use as a category filter
     if (searchParams.category) {
       const categories = queryClient.getQueryData<CategoryListResponse>(categoriesQueryKey);
 
       categoryId = categories?.data?.find((category) => {
         return `"${category.attributes?.slug}"` === searchParams.category;
-      })?.id;
+      })?.attributes?.slug;
     }
 
     const params = getStoriesParams(categoryId ? { category: categoryId } : {});

client/src/app/(landing)/stories/[id]/page.tsx

@@ -10,32 +10,6 @@ import Story from '@/containers/story';
 
 type StoryPageProps = { params: { id: string } };
 
-// You can't generate static params for dynamic routes if they are using useSearchParams https://nextjs.org/docs/messages/deopted-into-client-rendering
-// The solution is to wrap the component with Suspense
-// By doing this, we will have errors related to hydration
-// As we use it inside RecoilURLSyncNext, we can't generate static params
-
-// export async function generateStaticParams() {
-//   try {
-//     const { data: storiesData } = await getStories({
-//       'pagination[limit]': 200,
-//     });
-
-//     if (!storiesData) {
-//       throw new Error('Failed to parse storiesData');
-//     }
-
-//     console.log('storiesData', storiesData);
-
-//     return storiesData.map((s) => ({
-//       id: `${s.id}`,
-//     }));
-//   } catch (e) {
-//     console.error(e);
-//     return [];
-//   }
-// }
-
 export async function generateMetadata({ params }: StoryPageProps): Promise<Metadata> {
   try {
     // read route params

client/src/components/map/constants.ts

@@ -1,7 +1,16 @@
 import type { ViewState } from 'react-map-gl';
 
+import { CustomMapProps } from './types';
+
 export const DEFAULT_VIEW_STATE: Partial<ViewState> = {
   zoom: 2,
   latitude: 0,
   longitude: 0,
 };
+
+export const DEFAULT_PROPS: CustomMapProps = {
+  id: 'default',
+  initialViewState: DEFAULT_VIEW_STATE,
+  minZoom: 1,
+  maxZoom: 14,
+};

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

@@ -23,28 +23,28 @@ export const Legend: React.FC<LegendProps> = ({
     isChildren && (
       <div
         className={cn({
-          'bg-card-map relative flex-col space-y-2 rounded-lg p-2 px-3 backdrop-blur-sm': true,
+          'bg-card-map relative flex-col space-y-2 rounded-lg p-4 backdrop-blur-sm': true,
           hidden: !isChildren,
           [className]: !!className,
         })}
       >
         {isChildren && (
-          <div className="flex flex-col gap-4 overflow-x-hidden">
+          <div className="flex flex-col overflow-x-hidden">
             {!!sortable?.enabled && !!onChangeOrder ? (
               <SortableList sortable={sortable} onChangeOrder={onChangeOrder}>
                 {children}
               </SortableList>
             ) : Array.isArray(children) && children.length > 1 ? (
-              <Collapsible defaultOpen className="space-y-2">
+              <Collapsible defaultOpen>
                 <CollapsibleTrigger className="font-open-sans group flex w-full items-center justify-between gap-2 text-sm font-semibold text-white">
-                  Legends <ChevronDown className="w-5 group-data-[state=closed]:rotate-180" />
+                  Legend <ChevronDown className="w-5 group-data-[state=closed]:rotate-180" />
                 </CollapsibleTrigger>
-                <CollapsibleContent className="flex flex-col gap-2 overflow-x-hidden">
+                <CollapsibleContent className="flex flex-col overflow-x-hidden">
                   {children}
                 </CollapsibleContent>
               </Collapsible>
             ) : (
-              children
+              <div className="-mt-3">{children}</div>
             )}
           </div>
         )}

client/src/components/map/legend/item-types/basic/index.tsx

@@ -13,7 +13,7 @@ export const LegendTypeBasic: React.FC<LegendTypeProps> = ({
 }) => {
   return (
     <div
-      className={cn({
+      className={cn('mt-3', {
         [className]: !!className,
       })}
     >

client/src/components/map/legend/item-types/choropleth/index.tsx

@@ -13,7 +13,7 @@ export const LegendTypeChoropleth: React.FC<LegendTypeProps> = ({
 }) => {
   return (
     <div
-      className={cn('font-open', {
+      className={cn('font-open mt-3', {
         [className]: !!className,
       })}
     >

client/src/components/map/legend/item-types/gradient/index.tsx

@@ -13,7 +13,7 @@ export const LegendTypeGradient: React.FC<LegendTypeProps> = ({
 }) => {
   return (
     <div
-      className={cn({
+      className={cn('mt-3', {
         [className || '']: !!className,
       })}
     >

client/src/components/map/legend/item-types/header.tsx

@@ -10,7 +10,7 @@ type LegendHeaderProps = {
 
 const LegendHeader = ({ title, info }: LegendHeaderProps) => {
   return (
-    <div className="font-open-sans mb-4 flex items-center justify-between gap-2 text-white">
+    <div className="font-open-sans mb-2 flex items-center justify-between gap-2 text-white">
       {!!title && <div className="text-sm font-semibold text-white">{title}</div>}
       {!!info && (
         <Popover>

client/src/components/map/legend/item-types/matrix/index.tsx

@@ -10,7 +10,7 @@ export const LegendTypeMatrix: React.FC<LegendTypeProps & LegendMatrixIntersecti
   intersections = [],
 }) => {
   return (
-    <div className="flex items-center space-x-14">
+    <div className="mt-3 flex items-center space-x-14">
       <div className="relative ml-10 w-16 flex-shrink-0 py-12">
         <p className="font-heading absolute left-1/2 top-1 -translate-x-1/2 transform text-xs font-medium text-white">
           Always

client/src/components/map/legend/item-types/switch/index.tsx

@@ -34,7 +34,7 @@ const LegendTypeSwitch = ({
   );
 
   return (
-    <div style={props.style} className="flex items-center justify-between gap-2">
+    <div style={props.style} className="mt-3 flex items-center justify-between gap-2">
       <div className="flex">
         <label
           className="font-open-sans cursor-pointer text-sm text-white"

client/src/components/map/legend/item-types/timeline/index.tsx

@@ -182,7 +182,7 @@ export const LegendTypeTimeline: React.FC<LegendTypeTimelineProps> = ({
   }
 
   return (
-    <div style={props?.style} className="z-30 mt-4">
+    <div style={props?.style} className="z-30 mt-3">
       <LegendHeader title={title} info={info} />
       <div className="flex items-center gap-8">
         <Button

client/src/components/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        secondary: 'bg-secondary text-gray-200 hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         icon: '',

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-card flex h-full flex-col rounded border border-[#335E6F] pt-4 backdrop-blur-sm',
+        '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',
         className
       )}
     >
@@ -26,7 +26,10 @@ const Card = ({ children, title, info, className }: CardProps) => {
           {info && <InfoIcon className="h-4 w-4" />}
         </div>
       )}
-      <ScrollArea type="always" className={cn('px-4', !title ? 'h-[calc(100%-20px)]' : 'h-full')}>
+      <ScrollArea
+        type="always"
+        className={cn('overflow-x-visible', !title ? 'h-[calc(100%-20px)]' : 'h-full')}
+      >
         <div className="pb-4">{children}</div>
       </ScrollArea>
     </div>

client/src/components/ui/checkbox-button.tsx

@@ -6,10 +6,8 @@ import { cn } from '@/lib/classnames';
 
 const buttonClasses = {
   default: 'w-fit rounded-3xl px-6 py-2 text-sm transition-all duration-300',
-  unchecked:
-    'border-gray-200 border-[1.5px] text-gray-200 hover:border-secondary hover:text-secondary',
-  checked:
-    'text-background border-[1.5px] border-secondary bg-secondary opacity-70 hover:opacity-100',
+  unchecked: 'border-gray-200 border text-gray-200 hover:border-secondary hover:text-secondary',
+  checked: 'text-background border border-secondary bg-secondary opacity-70 hover:opacity-100',
 };
 
 const CheckboxButton = React.forwardRef<

client/src/components/ui/dialog.tsx

@@ -60,22 +60,22 @@ const DialogContentHome = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
   <DialogPortal>
-    <DialogOverlay className="bg-background opacity-60" />
+    <DialogOverlay className="bg-background/40" />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-[498px] max-w-[45vw] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-t-2xl border border-gray-800 bg-[hsla(198,100%,14%,0.31)] leading-relaxed text-white shadow-lg backdrop-blur-2xl duration-200 sm:rounded-lg',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] group fixed left-[50%] top-[50%] z-50 grid w-[498px] max-w-[45vw] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-t-2xl border border-gray-800 bg-[hsla(198,100%,14%,0.31)] leading-relaxed text-white shadow-lg backdrop-blur-2xl duration-200 sm:rounded-lg',
         className
       )}
       {...props}
     >
-      <div className="">{children}</div>
+      <div>{children}</div>
       <DialogPrimitive.Close
         className={cn(
-          'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute  right-1/2  top-0 -translate-y-1/2  translate-x-1/2 rounded-full border border-gray-800 bg-gray-900 p-4 px-4 py-2 opacity-100 backdrop-blur-lg transition-opacity hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none'
+          'ring-offset-background focus:ring-ring hover:border-secondary hover:text-secondary transition-color absolute right-1/2 top-0 -translate-y-1/2 translate-x-1/2 rounded-full border border-gray-800 bg-gray-900 p-4 px-4 py-2 text-gray-200 duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none group-data-[button-side=right]:right-6 group-data-[button-side=right]:-translate-x-0'
         )}
       >
-        <X className="h-6 w-6 fill-white" />
+        <X className="h-6 w-6" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

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

@@ -44,7 +44,7 @@ const CategoryItem = ({ name, slug }: CategoryProps) => {
       <TooltipContent
         align="center"
         side="top"
-        className="border-none bg-transparent text-sm font-bold text-gray-200 shadow-none"
+        className="bg-background border-none py-1 text-sm font-bold text-gray-200 shadow-none"
       >
         {name}
       </TooltipContent>

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

@@ -6,9 +6,9 @@ const numbers = [
 
 const DashboardNumbers = () => {
   return (
-    <div className="flex gap-x-1">
+    <div className="flex gap-x-1 px-4">
       {numbers.map(({ stat, number }) => (
-        <div key={stat} className="space-y-1 text-center text-xs">
+        <div key={stat} className="flex-1 space-y-1 text-center text-xs">
           <p className="text-4xl font-bold">{number}</p>
           <p className="font-open-sans font-semibold text-gray-400">{stat}</p>
         </div>

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

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

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

@@ -10,12 +10,18 @@ import {
 } from '@radix-ui/react-dialog';
 import { FilterIcon, XIcon } from 'lucide-react';
 
+import { cn } from '@/lib/classnames';
+
 import { useGetIfis } from '@/types/generated/ifi';
 import { useGetTags } from '@/types/generated/tag';
 
 import FilterItem from './item';
 
-export const Filters = () => {
+type FiltersProps = {
+  filtersActive: boolean;
+};
+
+const Filters = ({ filtersActive }: FiltersProps) => {
   const { data: tagsData } = useGetTags({ 'pagination[limit]': 1000 });
   const { data: ifisData } = useGetIfis({ 'pagination[limit]': 1000 });
 
@@ -30,8 +36,8 @@ export const Filters = () => {
         title: 'Status',
         id: 'status',
         options: [
-          { attributes: { name: 'In progress' }, id: 'in-progress' },
-          { attributes: { name: 'Completed' }, id: 'completed' },
+          { attributes: { name: 'In progress' }, id: 'In progress' },
+          { attributes: { name: 'Completed' }, id: 'Completed' },
         ],
       },
       {
@@ -45,16 +51,24 @@ export const Filters = () => {
   return (
     <div>
       <Dialog>
-        <DialogTrigger className="bg-background flex items-center gap-2 rounded-sm border border-gray-800 px-4 py-2">
-          <FilterIcon className="h-4 w-4" />
+        <DialogTrigger className="bg-background hover:border-secondary hover:text-secondary flex items-center gap-2 rounded-sm border border-gray-800 px-4 py-2 text-gray-200">
+          <div className="relative">
+            <div
+              className={cn(
+                'bg-secondary absolute right-0 h-1.5 w-1.5 rounded-full transition-opacity duration-300',
+                filtersActive ? 'opacity-100' : 'opacity-0'
+              )}
+            ></div>
+            <FilterIcon className="h-4 w-4" />
+          </div>
           Filters
         </DialogTrigger>
         <DialogPortal>
           <DialogOverlay />
           <DialogContent className="bg-card-foreground shadow-filters absolute left-0 top-0 z-50 h-screen w-[345px] overflow-hidden rounded-lg backdrop-blur-lg transition-all duration-500">
             <div className="">
-              <DialogClose className="bg-map-background absolute right-4 top-4 rounded-full border border-gray-800 px-4 py-2 text-gray-200">
-                <XIcon className="h-4 w-4 stroke-gray-200" />
+              <DialogClose className="bg-map-background hover:border-secondary hover:text-secondary absolute right-4 top-4 rounded-full border border-gray-800 px-4  py-2 text-gray-200">
+                <XIcon className="h-4 w-4" />
               </DialogClose>
 
               <div className="space-y-8 p-8">
@@ -81,3 +95,5 @@ export const Filters = () => {
     </div>
   );
 };
+
+export default Filters;

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

@@ -25,11 +25,12 @@ const FilterItem = ({ filter: { id, options, title } }: FilterItemProps) => {
 
   const setFilter = (value: (string | number)[] | null) => setFilters({ ...filters, [id]: value });
 
-  const handleChangeFilter = (optionId: string | number) => {
-    if (!filter?.includes(optionId)) {
-      setFilter([...(filter || []), optionId]);
+  const handleChangeFilter = (option?: string | number) => {
+    if (!option) return;
+    if (!filter?.includes(option)) {
+      setFilter([...(filter || []), option]);
     } else {
-      setFilter(filter?.filter((item) => item !== optionId) || null);
+      setFilter(filter?.filter((item) => item !== option) || null);
     }
   };
 
@@ -40,7 +41,9 @@ const FilterItem = ({ filter: { id, options, title } }: FilterItemProps) => {
       setFilter([]);
     } else {
       setFilter(
-        options.reduce<(string | number)[]>((acc, { id }) => (!!id ? [...acc, id] : acc), [])
+        options.reduce<string[]>((acc, { attributes }) => {
+          return !!attributes?.name ? [...acc, attributes?.name] : acc;
+        }, [])
       );
     }
   };
@@ -62,7 +65,7 @@ const FilterItem = ({ filter: { id, options, title } }: FilterItemProps) => {
       </div>
       <div className="flex flex-wrap gap-2">
         {options.map(({ id: optionId, attributes }) => {
-          if (!optionId) return null;
+          if (!optionId || !attributes?.name) return null;
           return (
             <CheckboxButton
               key={optionId}