Feature/exploration map controls polish (#702)

![Screenshot 2023-10-17 at 12 32 57](https://github.com/NASA-IMPACT/veda-ui/assets/1583415/89cb1445-3bb1-4282-907e-62974b101793) Changed layout, colors and icons according to designs.
NASA-IMPACT · Oct 17, 2023 · 47f9405 · 47f9405
2 parents 7e42de9 + 57c5e7e
commit 47f9405
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 45 deletions.
diff --git a/app/scripts/components/common/map/controls/geocoder.tsx b/app/scripts/components/common/map/controls/geocoder.tsx
@@ -12,7 +12,7 @@ export default function GeocoderControl() {
       });
     },
     {
-      position: 'top-left'
+      position: 'top-right'
     }
   );
 

diff --git a/app/scripts/components/common/map/controls/map-options/index.tsx b/app/scripts/components/common/map/controls/map-options/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
-import { CollecticonGlobe } from '@devseed-ui/collecticons';
+import { CollecticonMap } from '@devseed-ui/collecticons';
 import {
   Dropdown,
   DropMenu,
@@ -61,6 +61,13 @@ const MapOptionsDropdown = styled(Dropdown)`
 const SelectorButton = styled(Button)`
   &&& {
     ${createButtonStyles({ variation: 'primary-fill', fitting: 'skinny' })}
+    background-color: ${themeVal('color.surface')};
+    &:hover {
+      background-color: ${themeVal('color.surface')};
+    }
+    & path {
+      fill: ${themeVal('color.base')};
+    }
   }
 `;
 
@@ -133,11 +140,11 @@ function MapOptions(props: MapOptionsProps) {
     <MapOptionsDropdown
       triggerElement={(bag) => (
         <SelectorButton {...bag}>
-          <CollecticonGlobe meaningful title='Configure map options' />
+          <CollecticonMap meaningful title='Configure map options' />
         </SelectorButton>
       )}
       direction='down'
-      alignment='left'
+      alignment='right'
     >
       <DropHeader>
         <DropTitle>Map options</DropTitle>
@@ -266,7 +273,7 @@ function MapOptions(props: MapOptionsProps) {
 
 export default function MapOptionsControl(props: MapOptionsProps) {
   useThemedControl(() => <MapOptions {...props} />, {
-    position: 'top-left'
+    position: 'top-right'
   });
   return null;
 }
diff --git a/app/scripts/components/common/map/mapbox-style-override.ts b/app/scripts/components/common/map/mapbox-style-override.ts
@@ -9,7 +9,7 @@ import {
   CollecticonMinusSmall,
   CollecticonMagnifierLeft,
   CollecticonXmarkSmall,
-  CollecticonPencil,
+  CollecticonArea,
   CollecticonTrashBin
 } from '@devseed-ui/collecticons';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
@@ -25,7 +25,7 @@ const MapboxStyleOverride = css`
 
     > * {
       display: flex;
-      flex-flow: column nowrap;
+      flex-flow: row nowrap;
       gap: ${variableGlsp(0.5)};
       align-items: flex-start;
       float: none;
@@ -90,7 +90,7 @@ const MapboxStyleOverride = css`
   }
 
   .mapboxgl-ctrl-group {
-    ${createButtonGroupStyles({ orientation: 'vertical' } as any)}
+    ${createButtonGroupStyles({ orientation: 'horizontal' } as any)}
     background: none;
 
     &,
@@ -113,15 +113,11 @@ const MapboxStyleOverride = css`
       }
     }
 
-    > button + button {
-      margin-top: -${themeVal('button.shape.border')};
-    }
-
     > button:first-child:not(:last-child) {
       &,
       &::after {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
+        border-top-right-radius: 0;
+        border-bottom-left-radius: 0.25rem;
       }
 
       &::after {
@@ -132,7 +128,8 @@ const MapboxStyleOverride = css`
       &,
       &::after {
         border-top-left-radius: 0;
-        border-top-right-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: 0.25rem;
       }
 
       &::after {
@@ -154,19 +151,21 @@ const MapboxStyleOverride = css`
   .mapboxgl-ctrl-zoom-in.mapboxgl-ctrl-zoom-in,
   .mapboxgl-ctrl-zoom-out.mapboxgl-ctrl-zoom-out {
     ${createButtonStyles({ variation: 'primary-fill', fitting: 'skinny' })}
+    background-color: ${themeVal('color.surface')};
+    color: ${themeVal('color.primary')};
   }
 
   .mapboxgl-ctrl-zoom-in.mapboxgl-ctrl-zoom-in::before {
     background-image: url(${({ theme }) =>
       iconDataURI(CollecticonPlusSmall, {
-        color: theme.color?.surface
+        color: theme.color?.base
       })});
   }
 
   .mapboxgl-ctrl-zoom-out.mapboxgl-ctrl-zoom-out::before {
     background-image: url(${({ theme }) =>
       iconDataURI(CollecticonMinusSmall, {
-        color: theme.color?.surface
+        color: theme.color?.base
       })});
   }
 
@@ -182,28 +181,29 @@ const MapboxStyleOverride = css`
 
   .mapbox-gl-draw_ctrl-draw-btn {
     ${createButtonStyles({ variation: 'primary-fill', fitting: 'skinny' })}
+    background-color: ${themeVal('color.surface')};
   }
 
   .mapbox-gl-draw_ctrl-draw-btn.active {
-    background-color: ${themeVal('color.base-400a')};
+    background-color: ${themeVal('color.surface')};
   }
 
   .mapbox-gl-draw_ctrl-draw-btn:not(:disabled):hover {
-    background-color: ${themeVal('color.base-400a')};
+    background-color: ${themeVal('color.surface')};
   }
 
   .mapbox-gl-draw_polygon.mapbox-gl-draw_polygon::before {
     background-image: url(${({ theme }) =>
-      iconDataURI(CollecticonPencil, {
-        color: theme.color?.surface
+      iconDataURI(CollecticonArea, {
+        color: theme.color?.base
       })});
     }
   }
 
   .mapbox-gl-draw_trash.mapbox-gl-draw_trash::before {
     background-image: url(${({ theme }) =>
       iconDataURI(CollecticonTrashBin, {
-        color: theme.color?.surface
+        color: theme.color?.base
       })});
     }
   }
@@ -214,7 +214,8 @@ const MapboxStyleOverride = css`
     color: ${themeVal('type.base.color')};
     font: ${themeVal('type.base.style')} ${themeVal('type.base.weight')}
       0.875rem/1.25rem ${themeVal('type.base.family')};
-    transition: all 0.24s ease 0s;
+    transition: none;
+    overflow: hidden;
 
     &::before {
       position: absolute;
@@ -225,20 +226,21 @@ const MapboxStyleOverride = css`
       height: 1rem;
       background-image: url(${({ theme }) =>
         iconDataURI(CollecticonMagnifierLeft, {
-          color: theme.color?.primary
+          color: theme.color?.base
         })});
       background-repeat: no-repeat;
     }
 
     &.mapboxgl-ctrl-geocoder--collapsed {
       width: 2rem;
       min-width: 2rem;
-      background-color: ${themeVal('color.primary')};
+      background-color: ${themeVal('color.surface')};
+      transition: none;
 
       &::before {
         background-image: url(${({ theme }) =>
           iconDataURI(CollecticonMagnifierLeft, {
-            color: theme.color?.surface
+            color: theme.color?.base
           })});
       }
     }
@@ -259,7 +261,7 @@ const MapboxStyleOverride = css`
       right: 0;
       background: none;
       border-radius: ${themeVal('shape.rounded')};
-      transition: all 0.24s ease 0s;
+      transition: none;
       color: inherit;
 
       &:hover {

diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
@@ -13,10 +13,7 @@ import { Layer } from './layer';
 import Map, { Compare } from '$components/common/map';
 import { Basemap } from '$components/common/map/style-generators/basemap';
 import GeocoderControl from '$components/common/map/controls/geocoder';
-import {
-  NavigationControl,
-  ScaleControl
-} from '$components/common/map/controls';
+import { ScaleControl } from '$components/common/map/controls';
 import MapCoordsControl from '$components/common/map/controls/coords';
 import MapOptionsControl from '$components/common/map/controls/map-options';
 import { projectionDefault } from '$components/common/map/controls/map-options/projections';
@@ -73,10 +70,20 @@ export function ExplorationMap(props: { comparing: boolean }) {
           />
         ))}
       {/* Map controls */}
+      <DrawControl
+        displayControlsDefault={false}
+        controls={
+          {
+            polygon: true,
+            trash: true
+          } as any
+        }
+        onCreate={onUpdate}
+        onUpdate={onUpdate}
+        onDelete={onDelete}
+        onSelectionChange={onSelectionChange}
+      />
       <GeocoderControl />
-      <NavigationControl />
-      <ScaleControl />
-      <MapCoordsControl />
       <MapOptionsControl
         projection={projection}
         onProjectionChange={setProjection}
@@ -86,17 +93,9 @@ export function ExplorationMap(props: { comparing: boolean }) {
         boundariesOption={boundariesOption}
         onOptionChange={onOptionChange}
       />
-      <DrawControl
-        displayControlsDefault={false}
-        controls={{
-          polygon: true,
-          trash: true
-        } as any}
-        onCreate={onUpdate}
-        onUpdate={onUpdate}
-        onDelete={onDelete}
-        onSelectionChange={onSelectionChange}
-      />
+
+      <ScaleControl />
+      <MapCoordsControl />
       {props.comparing && (
         // Compare map layers
         <Compare>
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,7 @@ export default function GeocoderControl() { @@
           });
         },
         {
-          position: 'top-left'
+          position: 'top-right'
         }
       );
@@ Expand Down @@