From 7c10e04869e7290f453650a7494640701c80ea29 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Mon, 15 Jan 2024 15:04:55 +0100
Subject: [PATCH 1/2] location popup close btn

---
 src/containers/map/index.tsx                 |  1 +
 src/containers/map/location-pop-up/index.tsx | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx
index 1baa425f5..a4e83fdfb 100644
--- a/src/containers/map/index.tsx
+++ b/src/containers/map/index.tsx
@@ -382,6 +382,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
                 {!isEmpty(locationPopUp?.info) ? (
                   <LocationPopup
                     locationPopUpInfo={locationPopUp}
+                    onClose={() => removePopup('location')}
                     className={cn({
                       '!w-[360px] rounded-3xl pt-6':
                         isEmpty(iucnEcoregionPopUp?.popupInfo) &&
diff --git a/src/containers/map/location-pop-up/index.tsx b/src/containers/map/location-pop-up/index.tsx
index 310e89513..95bae0aa6 100644
--- a/src/containers/map/location-pop-up/index.tsx
+++ b/src/containers/map/location-pop-up/index.tsx
@@ -13,12 +13,16 @@ import { useRecoilState } from 'recoil';
 
 import { useLocations } from 'containers/datasets/locations/hooks';
 
+import Icon from 'components/icon';
 import { WIDGET_SUBTITLE_STYLE } from 'styles/widgets';
 import type { LocationPopUp } from 'types/map';
 
+import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
+
 const LocationPopUP = ({
   locationPopUpInfo,
   nonExpansible,
+  onClose,
   className,
 }: {
   locationPopUpInfo: {
@@ -26,6 +30,7 @@ const LocationPopUP = ({
     feature: MapboxGeoJSONFeature;
   };
   nonExpansible: boolean;
+  onClose: () => void;
   className?: string;
 }) => {
   const [open, setOpen] = useState(nonExpansible);
@@ -62,12 +67,18 @@ const LocationPopUP = ({
   return (
     <div
       className={cn({
-        'box-border flex !w-[500px] cursor-pointer flex-col items-start rounded-t-3xl border-t border-slate-100 bg-white p-6 font-sans':
+        'relative box-border  flex !w-[500px] cursor-pointer flex-col items-start rounded-t-3xl border-t border-slate-100 bg-white p-6 font-sans':
           true,
         'max-h-[86px] w-full overflow-hidden': !open,
         [className]: !!className,
       })}
     >
+      <button
+        className="absolute -right-9 top-8 -right-[40px] h-11 w-10 cursor-pointer items-center justify-end rounded-r-[20px] bg-white/70 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
+        onClick={onClose}
+      >
+        <Icon icon={CLOSE_SVG} className="ml-1 h-6 w-6" description="Close" />
+      </button>
       <button
         className="flex w-full items-center justify-between"
         disabled={nonExpansible}

From 8cb2ef021b5ccfd7a9febe456766a510f7555f32 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Mon, 15 Jan 2024 15:22:36 +0100
Subject: [PATCH 2/2] add close btn to all tooltips

---
 src/containers/map/index.tsx                 | 10 +++++++++-
 src/containers/map/location-pop-up/index.tsx | 12 +++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx
index a4e83fdfb..2da2285e0 100644
--- a/src/containers/map/index.tsx
+++ b/src/containers/map/index.tsx
@@ -36,6 +36,7 @@ import Legend from 'containers/map/legend';
 import MobileLegend from 'containers/map/mobile/legend';
 import RestorationPopup from 'containers/map/restoration-popup';
 
+import Icon from 'components/icon';
 import Map from 'components/map';
 import Controls from 'components/map/controls';
 import BasemapSettingsControl from 'components/map/controls/basemap-settings';
@@ -51,6 +52,8 @@ import Popup from 'components/popup';
 import { breakpoints } from 'styles/styles.config';
 import type { RestorationPopUp, PopUpKey, LocationPopUp } from 'types/map';
 
+import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
+
 import LayerManager from './layer-manager';
 import LocationPopup from './location-pop-up';
 
@@ -379,10 +382,15 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
                 latitude={locationPopUp?.popup[0]}
                 onClose={() => removePopup('location')}
               >
+                <button
+                  className="absolute -right-9 top-8 -right-[40px] h-11 w-10 cursor-pointer items-center justify-end rounded-r-[20px] bg-white/70 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
+                  onClick={() => removePopup('location')}
+                >
+                  <Icon icon={CLOSE_SVG} className="ml-1 h-6 w-6" description="Close" />
+                </button>
                 {!isEmpty(locationPopUp?.info) ? (
                   <LocationPopup
                     locationPopUpInfo={locationPopUp}
-                    onClose={() => removePopup('location')}
                     className={cn({
                       '!w-[360px] rounded-3xl pt-6':
                         isEmpty(iucnEcoregionPopUp?.popupInfo) &&
diff --git a/src/containers/map/location-pop-up/index.tsx b/src/containers/map/location-pop-up/index.tsx
index 95bae0aa6..e48f38172 100644
--- a/src/containers/map/location-pop-up/index.tsx
+++ b/src/containers/map/location-pop-up/index.tsx
@@ -22,7 +22,7 @@ import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
 const LocationPopUP = ({
   locationPopUpInfo,
   nonExpansible,
-  onClose,
+
   className,
 }: {
   locationPopUpInfo: {
@@ -30,7 +30,7 @@ const LocationPopUP = ({
     feature: MapboxGeoJSONFeature;
   };
   nonExpansible: boolean;
-  onClose: () => void;
+
   className?: string;
 }) => {
   const [open, setOpen] = useState(nonExpansible);
@@ -67,18 +67,12 @@ const LocationPopUP = ({
   return (
     <div
       className={cn({
-        'relative box-border  flex !w-[500px] cursor-pointer flex-col items-start rounded-t-3xl border-t border-slate-100 bg-white p-6 font-sans':
+        'box-border flex !w-[500px] cursor-pointer flex-col items-start rounded-t-3xl border-t border-slate-100 bg-white p-6 font-sans':
           true,
         'max-h-[86px] w-full overflow-hidden': !open,
         [className]: !!className,
       })}
     >
-      <button
-        className="absolute -right-9 top-8 -right-[40px] h-11 w-10 cursor-pointer items-center justify-end rounded-r-[20px] bg-white/70 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
-        onClick={onClose}
-      >
-        <Icon icon={CLOSE_SVG} className="ml-1 h-6 w-6" description="Close" />
-      </button>
       <button
         className="flex w-full items-center justify-between"
         disabled={nonExpansible}