From 13b6cb30399af3adff6b100cbc8e5be9f5c2c5d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Thu, 24 Oct 2024 17:00:26 +0200
Subject: [PATCH 1/4] refactor(fishing-widget): Change colour of chart

---
 frontend/src/constants/fishing-protection-chart-colors.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/constants/fishing-protection-chart-colors.ts b/frontend/src/constants/fishing-protection-chart-colors.ts
index cf8f6054..fc6cd79e 100644
--- a/frontend/src/constants/fishing-protection-chart-colors.ts
+++ b/frontend/src/constants/fishing-protection-chart-colors.ts
@@ -1,3 +1,3 @@
 export const FISHING_PROTECTION_CHART_COLORS = {
-  highly: '#2768B4',
+  highly: '#526EFF',
 };

From 21b98f3cf9f08cf3d12e0c9b586d416cb016ce6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Thu, 24 Oct 2024 17:19:46 +0200
Subject: [PATCH 2/4] refactor(map): Update styles of popup

---
 .../content/map/popup/boundaries/index.tsx    | 21 +++++++++----------
 .../map/content/map/popup/index.tsx           |  2 +-
 frontend/translations/en.json                 |  2 +-
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/src/containers/map/content/map/popup/boundaries/index.tsx b/frontend/src/containers/map/content/map/popup/boundaries/index.tsx
index 2bc8b0b2..1165b512 100644
--- a/frontend/src/containers/map/content/map/popup/boundaries/index.tsx
+++ b/frontend/src/containers/map/content/map/popup/boundaries/index.tsx
@@ -203,16 +203,16 @@ const BoundariesPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
   if (!geometryData) return null;
 
   return (
-    <div className="space-y-2">
-      <h3 className="text-xl font-semibold">{localizedLocationName || '-'}</h3>
-      {isFetching && <div className="my-4 text-center font-mono text-xs">{t('loading')}</div>}
+    <div className="flex flex-col gap-2">
+      <h3 className="font-sans text-xl font-black">{localizedLocationName || '-'}</h3>
+      {isFetching && <div className="my-4 text-center font-mono text-xl">{t('loading')}</div>}
       {!isFetching && !protectionCoverageStats && (
         <div className="my-4 text-center font-mono text-xs">{t('no-data-available')}</div>
       )}
       {!isFetching && !!protectionCoverageStats && (
         <>
-          <div className="space-y-2">
-            <div className="my-4 max-w-[95%] font-mono">
+          <div className="flex flex-col gap-2">
+            <div className="max-w-[95%] font-mono">
               {environment === 'marine'
                 ? t('marine-conservation-coverage')
                 : t('terrestrial-conservation-coverage')}
@@ -222,18 +222,17 @@ const BoundariesPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
                 t.rich('percentage-bold', {
                   percentage: formattedStats.percentage,
                   b1: (chunks) => (
-                    <span className="text-[64px] font-bold leading-[80%]">{chunks}</span>
+                    <span className="text-[32px] font-bold leading-none">{chunks}</span>
                   ),
                   b2: (chunks) => <span className="text-lg">{chunks}</span>,
                 })}
               {formattedStats.percentage === '-' && (
-                <span className="text-[64px] font-bold leading-[80%]">
-                  {formattedStats.percentage}
-                </span>
+                <span className="text-xl font-bold leading-none">{formattedStats.percentage}</span>
               )}
             </div>
             <div className="space-x-1 font-mono font-medium text-black">
-              {t('protected-area', {
+              {t.rich('protected-area', {
+                br: () => <br />,
                 protectedArea: formattedStats.protectedArea,
                 totalArea: formatKM(
                   locale,
@@ -248,7 +247,7 @@ const BoundariesPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
           </div>
           <button
             type="button"
-            className="block w-full border border-black p-4 text-center font-mono uppercase"
+            className="mt-3 block w-full border border-black py-2.5 px-4 text-center font-mono text-xs"
             onClick={handleLocationSelected}
           >
             {t(POPUP_BUTTON_CONTENT_BY_SOURCE[source?.['id']])}
diff --git a/frontend/src/containers/map/content/map/popup/index.tsx b/frontend/src/containers/map/content/map/popup/index.tsx
index 36799dcf..c656d769 100644
--- a/frontend/src/containers/map/content/map/popup/index.tsx
+++ b/frontend/src/containers/map/content/map/popup/index.tsx
@@ -125,7 +125,7 @@ const PopupContainer: FCWithMessages = () => {
       offset={10}
       closeOnClick={false}
       closeButton={false}
-      maxWidth="300px"
+      maxWidth="230px"
       onClose={closePopup}
       className={cn({
         'min-w-[250px]': !isHoveredTooltip,
diff --git a/frontend/translations/en.json b/frontend/translations/en.json
index aad5a3a9..1ef81bb8 100644
--- a/frontend/translations/en.json
+++ b/frontend/translations/en.json
@@ -257,7 +257,7 @@
       "terrestrial-conservation-coverage": "Terrestrial Conservation Coverage",
       "percentage": "{percentage}%",
       "percentage-bold": "<b1>{percentage}</b1><b2>%</b2>",
-      "protected-area": "{protectedArea} km² out of {totalArea} km²",
+      "protected-area": "{protectedArea} km² out of<br></br>{totalArea} km²",
       "open-country-insights": "Open country insights",
       "global-coverage": "Global coverage",
       "area-km2": "{area} km²",

From b58f74bab6a2dcb901956bcda84c8fe063817033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Thu, 24 Oct 2024 17:24:52 +0200
Subject: [PATCH 3/4] fix(conservation-widget): Change legend line style

---
 .../src/components/charts/conservation-chart/legend/index.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/charts/conservation-chart/legend/index.tsx b/frontend/src/components/charts/conservation-chart/legend/index.tsx
index 685f7b40..07a0767e 100644
--- a/frontend/src/components/charts/conservation-chart/legend/index.tsx
+++ b/frontend/src/components/charts/conservation-chart/legend/index.tsx
@@ -47,7 +47,7 @@ const ChartLegend: FCWithMessages<ChartLegendProps> = ({
       </span>
       {displayTarget && (
         <span className="inline-flex w-full items-center gap-3">
-          <span className="block w-10 border-b border-orange"></span>
+          <span className="block w-10 border-b border-dashed border-orange"></span>
           <span>
             {t.rich('target-xx-by', {
               target,

From f316dcae0215980087b7d556c87efc7032ace14d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Thu, 24 Oct 2024 17:25:45 +0200
Subject: [PATCH 4/4] refactor(map): Adjust icon sizes

---
 frontend/src/components/map/zoom-controls/index.tsx | 2 +-
 frontend/src/containers/map/sidebar/index.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/map/zoom-controls/index.tsx b/frontend/src/components/map/zoom-controls/index.tsx
index 484ee211..4cee7a47 100644
--- a/frontend/src/components/map/zoom-controls/index.tsx
+++ b/frontend/src/components/map/zoom-controls/index.tsx
@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/button';
 import { FCWithMessages } from '@/types';
 
 const BUTTON_CLASSES = 'group bg-white';
-const ICON_CLASSES = 'h-6 w-6 text-black group-hover:text-white';
+const ICON_CLASSES = 'h-4 w-4 text-black group-hover:text-white';
 
 const ZoomControls: FCWithMessages = () => {
   const t = useTranslations('components.map');
diff --git a/frontend/src/containers/map/sidebar/index.tsx b/frontend/src/containers/map/sidebar/index.tsx
index fb619b27..ffa3baf5 100644
--- a/frontend/src/containers/map/sidebar/index.tsx
+++ b/frontend/src/containers/map/sidebar/index.tsx
@@ -121,7 +121,7 @@ const MapSidebar: FCWithMessages<MapSidebarProps> = ({ type }) => {
             onClick={() => setSidebarOpen(!isSidebarOpen)}
           >
             <LuChevronLeft
-              className={cn('-ml-px h-6 w-6', { 'rotate-180': !isSidebarOpen })}
+              className={cn('-ml-px h-5 w-5', { 'rotate-180': !isSidebarOpen })}
               aria-hidden
             />
             <span className="sr-only">{t('toggle-sidebar')}</span>