From 1ba22e5e3dc9293ac9d94520096fc5dff383f175 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Thu, 11 Apr 2024 16:54:31 +0200
Subject: [PATCH 1/2] add close btn to modal and fix fade into country info
 modals

---
 client/src/containers/countries/detail/panel.tsx | 8 ++++++--
 client/src/containers/share/index.tsx            | 6 +++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
index 51a36924..a1646bec 100644
--- a/client/src/containers/countries/detail/panel.tsx
+++ b/client/src/containers/countries/detail/panel.tsx
@@ -7,6 +7,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { notFound, useParams } from 'next/navigation';
 
+import { X } from 'lucide-react';
 import { ArrowLeft, Download, ExternalLink, Info } from 'lucide-react';
 import remarkGfm from 'remark-gfm';
 
@@ -31,7 +32,7 @@ import { COLUMNS, CSV_COLUMNS_ORDER } from '@/containers/countries/detail/consta
 import Share from '@/containers/share';
 
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 import ContentLoader from '@/components/ui/loader';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -192,7 +193,7 @@ export default function CountryDetailPanel() {
                   )}
                   <p>{data?.data?.attributes?.name}</p>
                 </div>
-                <div className='after:rounded-b-4xl z-10 flex flex-col after:absolute after:bottom-0.5 after:left-0 after:h-10 after:w-full after:bg-gradient-to-b after:from-white/0 after:to-white/100 after:content-[""]'>
+                <div className='after:rounded-b-4xl z-10 flex flex-col after:absolute after:bottom-0.5 after:left-0 after:h-10 after:w-full after:bg-gradient-to-t after:from-white/0 after:to-white/100 after:content-[""]'>
                   <div className="no-scrollbar max-h-[65vh] overflow-y-auto pb-10 text-sm text-gray-900">
                     <Markdown remarkPlugins={[remarkGfm]} className="prose markdown-links">
                       {data?.data?.attributes?.description}
@@ -200,6 +201,9 @@ export default function CountryDetailPanel() {
                   </div>
                 </div>
               </div>
+              <DialogClose className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent absolute right-8 top-9 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:text-green-900">
+                <X className="h-4 w-4 text-yellow-400" />
+              </DialogClose>
             </DialogContent>
           </Dialog>
 
diff --git a/client/src/containers/share/index.tsx b/client/src/containers/share/index.tsx
index 6c653aa1..4fa9c72f 100644
--- a/client/src/containers/share/index.tsx
+++ b/client/src/containers/share/index.tsx
@@ -4,12 +4,13 @@ import { EmailShareButton, FacebookShareButton, TwitterShareButton } from 'react
 
 import { usePathname } from 'next/navigation';
 
+import { X } from 'lucide-react';
 import { Facebook, Twitter, Mail, Share2 } from 'lucide-react';
 
 import { cn } from '@/lib/classnames';
 
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 export default function Share() {
@@ -114,6 +115,9 @@ export default function Share() {
             </Button>
           </div>
         </div>
+        <DialogClose className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent absolute right-7 top-6 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:text-green-900">
+          <X className="h-4 w-4 text-yellow-400" />
+        </DialogClose>
       </DialogContent>
     </Dialog>
   );

From 6b10049e6959cf5ecdaf904d5ee3530097520ec6 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Thu, 11 Apr 2024 16:56:14 +0200
Subject: [PATCH 2/2] fix scroll area padding in datasets

---
 client/src/app/(landing)/datasets/page.tsx | 4 ++--
 client/src/containers/datasets/list.tsx    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/app/(landing)/datasets/page.tsx b/client/src/app/(landing)/datasets/page.tsx
index 65c93e7a..72f85041 100644
--- a/client/src/app/(landing)/datasets/page.tsx
+++ b/client/src/app/(landing)/datasets/page.tsx
@@ -11,8 +11,8 @@ export const metadata: Metadata = {
 export default function DatasetsPage() {
   return (
     <Panel>
-      <div className="space-y-4 px-6 py-8">
-        <h2 className="text-3xl font-normal">Datasets</h2>
+      <div className="space-y-4 py-8">
+        <h2 className="px-6 text-3xl font-normal">Datasets</h2>
 
         <DatasetsList />
       </div>
diff --git a/client/src/containers/datasets/list.tsx b/client/src/containers/datasets/list.tsx
index 91702e5e..1c220ab2 100644
--- a/client/src/containers/datasets/list.tsx
+++ b/client/src/containers/datasets/list.tsx
@@ -25,7 +25,7 @@ export default function DatasetsList() {
       isError={isError}
       loaderClassName="mt-40"
     >
-      <ScrollArea className="h-[84vh]">
+      <ScrollArea className="h-[84vh] px-6">
         <h3 className="text-xs text-gray-500">Activate data layers on the map</h3>
         <div className="mb-10 mt-2 flex flex-col">
           {layers