Merge pull request #113 from Vizzuality/AF-128-close-btns-modal

[FE](fix): [AF-128]
Vizzuality · Apr 12, 2024 · 53d0808 · 53d0808
2 parents 9c03617 + 6b10049
commit 53d0808
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git 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/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,14 +193,17 @@ 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}
                     </Markdown>
                   </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/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

diff --git 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>
   );