Update the map legends

frontend/src/containers/map/content/map/index.tsx

@@ -15,8 +15,6 @@ import { CustomMapProps } from '@/components/map/types';
 import DrawControls from '@/containers/map/content/map/draw-controls';
 import LabelsManager from '@/containers/map/content/map/labels-manager';
 import LayersToolbox from '@/containers/map/content/map/layers-toolbox';
-import EEZLayerLegend from '@/containers/map/content/map/layers-toolbox/legend/eez';
-import EstablishmentLayerLegend from '@/containers/map/content/map/layers-toolbox/legend/establishment';
 import Modelling from '@/containers/map/content/map/modelling';
 import Popup from '@/containers/map/content/map/popup';
 import EEZLayerPopup from '@/containers/map/content/map/popup/eez';
@@ -342,11 +340,9 @@ MainMap.messages = [
   ...ZoomControls.messages,
   // Indirectly imported by the layer manager
   ...EEZLayerPopup.messages,
-  ...EEZLayerLegend.messages,
   ...GenericPopup.messages,
   ...ProtectedAreaPopup.messages,
   ...RegionsPopup.messages,
-  ...EstablishmentLayerLegend.messages,
 ];
 
 export default MainMap;

frontend/src/containers/map/content/map/layers-toolbox/index.tsx

@@ -29,12 +29,11 @@ const LayersToolbox: FCWithMessages = () => {
             )}
           </CollapsibleTrigger>
           <CollapsibleContent className="border-l border-t border-black bg-white fill-mode-none data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
-            <div className="relative h-full max-h-[calc(100vh-200px)] w-[300px] overflow-y-auto border ">
+            <div className="relative h-full max-h-[calc(100vh-200px)] w-[380px] overflow-y-auto border ">
               <LayersLegend />
             </div>
           </CollapsibleContent>
         </Collapsible>
-        <div className="absolute bottom-0 left-0 h-6 w-full bg-gradient-to-b from-transparent to-white" />
       </div>
     </div>
   );

frontend/src/containers/map/content/map/layers-toolbox/legend/index.tsx

@@ -177,7 +177,7 @@ const Legend: FCWithMessages = () => {
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <div className="overflow-hidden text-ellipsis whitespace-nowrap font-mono text-xs ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 [&_svg]:aria-[expanded=true]:rotate-180">
+                        <div className="overflow-hidden text-ellipsis whitespace-nowrap font-mono text-xs font-bold ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 [&_svg]:aria-[expanded=true]:rotate-180">
                           {title}
                         </div>
                       </TooltipTrigger>

frontend/src/containers/map/content/map/layers-toolbox/legend/item.tsx

@@ -2,35 +2,30 @@ import { ReactElement, isValidElement, useMemo } from 'react';
 
 import TooltipButton from '@/components/tooltip-button';
 import Icon from '@/components/ui/icon';
-import EEZLayerLegend from '@/containers/map/content/map/layers-toolbox/legend/eez';
-import EstablishmentLayerLegend from '@/containers/map/content/map/layers-toolbox/legend/establishment';
 import EEZLayerPopup from '@/containers/map/content/map/popup/eez';
 import GenericPopup from '@/containers/map/content/map/popup/generic';
 import ProtectedAreaPopup from '@/containers/map/content/map/popup/protected-area';
 import RegionsPopup from '@/containers/map/content/map/popup/regions';
 import { cn } from '@/lib/classnames';
 import { parseConfig } from '@/lib/json-converter';
+import CircleWithDottedRedStrokeIcon from '@/styles/icons/circle-with-dotted-red-stroke.svg';
+import CircleWithFillIcon from '@/styles/icons/circle-with-fill.svg';
+import CircleWithoutFillIcon from '@/styles/icons/circle-without-fill.svg';
 import EstablishmentDesignatedIcon from '@/styles/icons/designated.svg';
-import EEZIcon from '@/styles/icons/eez.svg';
 import EstablishmentImplementedIcon from '@/styles/icons/implemented.svg';
 import EstablishmentManagedIcon from '@/styles/icons/managed.svg';
-import MPAIcon from '@/styles/icons/mpa.svg';
-import OECMIcon from '@/styles/icons/oecm.svg';
 import EstablishmentProposedIcon from '@/styles/icons/proposed.svg';
-import EEZSelectedIcon from '@/styles/icons/selected-eez.svg';
-import EEZMultipleIcon from '@/styles/icons/several-eez.svg';
 import { FCWithMessages } from '@/types';
 import { LayerTyped, LegendConfig } from '@/types/layers';
+
 export interface LegendItemsProps {
   config: LayerTyped['legend_config'];
 }
 
 const ICONS_MAPPING = {
-  eez: EEZIcon,
-  'eez-selected': EEZSelectedIcon,
-  'eez-multiple': EEZMultipleIcon,
-  oecm: OECMIcon,
-  mpa: MPAIcon,
+  'circle-with-fill': CircleWithFillIcon,
+  'circle-without-fill': CircleWithoutFillIcon,
+  'circle-with-dotted-red-stroke': CircleWithDottedRedStrokeIcon,
   'establishment-proposed': EstablishmentProposedIcon,
   'establishment-managed': EstablishmentManagedIcon,
   'establishment-designated': EstablishmentDesignatedIcon,
@@ -61,16 +56,16 @@ const LegendItem: FCWithMessages<LegendItemsProps> = ({ config }) => {
       return (
         <ul className="flex w-full flex-col">
           {items.map(({ value, color, description }) => (
-            <li key={`${value}`} className="flex items-center space-x-2 p-1 text-xs">
+            <li key={`${value}`} className="flex items-start space-x-2 p-1 text-xs">
               <div
-                className={'h-3 w-3 flex-shrink-0 rounded-full'}
+                className={'h-[18px] w-[18px] shrink-0 rounded-full'}
                 style={{
                   backgroundColor: color,
                 }}
               />
-              <span className="flex">
+              <span className="text-xs">
                 <span className="font-mono">{value}</span>
-                {description && <TooltipButton className="-my-1" text={description} />}
+                {description && <TooltipButton className="align-bottom" text={description} />}
               </span>
             </li>
           ))}
@@ -80,20 +75,21 @@ const LegendItem: FCWithMessages<LegendItemsProps> = ({ config }) => {
     case 'icon':
       return (
         <ul className="flex w-full flex-col">
-          {items.map(({ value, icon, description }) => (
-            <li key={`${value}`} className="flex items-center space-x-2 p-1">
-              <span className="h-3.5 w-3.5">
+          {items.map(({ value, icon, description, color }) => (
+            <li key={`${value}`} className="flex items-start space-x-2 p-1">
+              <span className="h-[18px] w-[18px] shrink-0">
                 <Icon
                   icon={ICONS_MAPPING[icon]}
                   className={cn({
-                    'h-3.5 w-3.5': true,
+                    'h-full w-full': true,
                     'rounded-full border border-black': icon.startsWith('establishment'),
                   })}
+                  style={color ? { color } : undefined}
                 />
               </span>
-              <span className="flex items-center text-xs">
+              <span className="text-xs">
                 <span className="font-mono">{value}</span>
-                {description && <TooltipButton className="-my-1" text={description} />}
+                {description && <TooltipButton className="align-bottom" text={description} />}
               </span>
             </li>
           ))}
@@ -162,11 +158,9 @@ const LegendItem: FCWithMessages<LegendItemsProps> = ({ config }) => {
 LegendItem.messages = [
   // Imported by `parseConfig`
   ...EEZLayerPopup.messages,
-  ...EEZLayerLegend.messages,
   ...GenericPopup.messages,
   ...ProtectedAreaPopup.messages,
   ...RegionsPopup.messages,
-  ...EstablishmentLayerLegend.messages,
 ];
 
 export default LegendItem;

frontend/src/containers/map/content/map/popup/item.tsx

@@ -2,8 +2,6 @@ import { ReactElement, isValidElement, useMemo } from 'react';
 
 import { useLocale } from 'next-intl';
 
-import EEZLayerLegend from '@/containers/map/content/map/layers-toolbox/legend/eez';
-import EstablishmentLayerLegend from '@/containers/map/content/map/layers-toolbox/legend/establishment';
 import EEZLayerPopup from '@/containers/map/content/map/popup/eez';
 import GenericPopup from '@/containers/map/content/map/popup/generic';
 import ProtectedAreaPopup from '@/containers/map/content/map/popup/protected-area';
@@ -55,11 +53,9 @@ const PopupItem: FCWithMessages<PopupItemProps> = ({ id }) => {
 PopupItem.messages = [
   // These components are used by `parseConfig`
   ...EEZLayerPopup.messages,
-  ...EEZLayerLegend.messages,
   ...GenericPopup.messages,
   ...ProtectedAreaPopup.messages,
   ...RegionsPopup.messages,
-  ...EstablishmentLayerLegend.messages,
 ];
 
 export default PopupItem;

frontend/src/lib/json-converter/index.ts

@@ -8,8 +8,6 @@ import { JSONConfiguration, JSONConverter } from '@deck.gl/json/typed';
 //   LegendTypeChoropleth,
 //   LegendTypeGradient,
 // } from '@/components/map/legend/item-types';
-import EEZLayerLegend from '@/containers/map/content/map/layers-toolbox/legend/eez';
-import EstablishmentLayerLegend from '@/containers/map/content/map/layers-toolbox/legend/establishment';
 import EEZLayerPopup from '@/containers/map/content/map/popup/eez';
 import GenericPopup from '@/containers/map/content/map/popup/generic';
 import ProtectedAreaPopup from '@/containers/map/content/map/popup/protected-area';
@@ -29,11 +27,9 @@ export const JSON_CONFIGURATION = new JSONConfiguration({
   enumerations: {},
   reactComponents: {
     EEZLayerPopup,
-    EEZLayerLegend, // Deprecated
     GenericPopup,
     ProtectedAreaPopup,
     RegionsPopup,
-    EstablishmentLayerLegend, // Deprecated
     // LegendTypeBasic,
     // LegendTypeChoropleth,
     // LegendTypeGradient,

frontend/src/styles/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 .mapboxgl-ctrl-bottom-right {
-  @apply !right-[335px];
+  @apply !right-[400px];
 }
 .mapboxgl-ctrl-bottom-left {
   @apply !right-[345px] !bottom-5 !left-auto;

frontend/translations/en.json

@@ -257,9 +257,6 @@
       "percentage-bold": "<b1>{percentage}</b1><b2>%</b2>",
       "marine-protected-area": "{protectedArea} km² out of {totalArea} km²",
       "open-country-insights": "Open country insights",
-      "eezs": "EEZs",
-      "selected-eez": "Selected EEZ",
-      "area-corresponding-to-more-than-1-eez": "Area corresponding to more <br></br> than one EEZ",
       "global-coverage": "Global coverage",
       "area-km2": "{area} km²",
       "open-region-insights": "Open region insights",