Merge pull request #1017 from Vizzuality/GMW-refinement-3

[FE](fix): refinement 3
Vizzuality · Jan 11, 2024 · 15a82cf · 15a82cf
2 parents 225b593 + 4450af0
commit 15a82cf
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 12 deletions.
diff --git a/src/components/map/legend/sortable/list.tsx b/src/components/map/legend/sortable/list.tsx
@@ -94,7 +94,7 @@ export const SortableList: React.FC<SortableListProps> = ({
       const { active, over } = event;
       setActiveId(null);
 
-      if (active.id !== over.id) {
+      if (active.id !== over?.id) {
         const oldIndex = itemsIds.indexOf(active.id);
         const newIndex = itemsIds.indexOf(over.id);
 

diff --git a/src/containers/datasets/national-dashboard/indicator-source/index.tsx b/src/containers/datasets/national-dashboard/indicator-source/index.tsx
@@ -133,14 +133,15 @@ const IndicatorSource = ({
               </span>
             </PopoverTrigger>
 
-            <PopoverContent>
-              <ul className="max-h-56 space-y-2">
+            <PopoverContent className="rounded-2xl px-2 shadow-dropdown">
+              <ul className="z-20 max-h-32 space-y-0.5">
                 {years?.map((u) => (
-                  <li key={u} className="last-of-type:pb-4">
+                  <li key={u}>
                     <button
                       aria-label="set year"
                       className={cn({
-                        'font-bold': true,
+                        'rounded-lg py-1 px-2 hover:bg-brand-800/20': true,
+                        'font-semibold text-brand-800': yearSelected === u,
                       })}
                       type="button"
                       onClick={() => setYearSelected(u)}
@@ -155,6 +156,7 @@ const IndicatorSource = ({
           </Popover>
         )}
       </div>
+
       {dataSource?.value && (
         <span>
           {numberFormat(dataSource.value)}

diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx
@@ -349,7 +349,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
                 onSetCustomPolygon={handleCustomPolygon}
               />
             )}
-            <Controls className="absolute bottom-11 right-6 items-center print:hidden">
+            <Controls className="absolute bottom-9 right-6 items-center print:hidden">
               <Helper
                 className={{
                   button: 'top-1 left-8 z-[20]',
@@ -413,7 +413,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
         </div>
       </Media>
       <Media greaterThanOrEqual="md">
-        <div className="absolute bottom-11 right-18 z-50 mr-0.5 print:hidden">
+        <div className="absolute bottom-9 right-18 z-50 mr-0.5 print:hidden">
           <Legend />
         </div>
       </Media>

diff --git a/src/containers/map/legend/index.tsx b/src/containers/map/legend/index.tsx
@@ -153,7 +153,12 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
 
                       const WidgetLegend = MAP_LEGENDS[l.id] as React.ElementType;
 
-                      const Widget = WIDGETS[l.id] as React.ElementType;
+                      const widgetId =
+                        l.id === 'mangrove_national_dashboard_layer'
+                          ? 'mangrove_national_dashboard'
+                          : l.id;
+
+                      const Widget = WIDGETS[widgetId] as React.ElementType;
 
                       const visibility = l.visibility === 'visible';
 
@@ -232,10 +237,10 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
                                         <WidgetWrapper
                                           key={l.id}
                                           title={title}
-                                          id={l.id as WidgetSlugType}
+                                          id={widgetId as WidgetSlugType}
                                           info
                                         >
-                                          <Widget id={l.id} />
+                                          <Widget id={widgetId} />
                                         </WidgetWrapper>
                                       </div>
                                       <DialogClose />

diff --git a/src/containers/widgets/widgets-menu/index.tsx b/src/containers/widgets/widgets-menu/index.tsx
@@ -89,8 +89,6 @@ const WidgetsMenu: FC = () => {
     [activeLayers, activeLayersIds, setActiveLayers]
   );
 
-  console.log({ widgets, activeWidgets, enabledWidgets });
-
   return (
     <div>
       <div className="grid grid-cols-[57px_42px_auto] gap-4 text-xs font-bold uppercase tracking-[1px]">

diff --git a/src/styles/mapbox.css b/src/styles/mapbox.css
@@ -635,4 +635,15 @@
     white-space: nowrap !important;
     bottom: -15px !important;
     right: 0px !important;
+  }
+
+  .mapboxgl-ctrl-attrib-inner {
+    font-size: 0.75rem;
+    visibility: collapse;
+    :nth-child(1), :nth-child(2) {
+      display: none;
+    }
+    :nth-child(3), :nth-child(4), :nth-child(5) {
+      visibility: visible;
+    }
   }