Update AOI button styles

app/scripts/components/common/map/controls/aoi/index.tsx

@@ -19,6 +19,7 @@ const Css = createGlobalStyle`
 export default function DrawControl(props: DrawControlProps) {
   const control = useRef<MapboxDraw>();
   const aoisFeatures = useAtomValue(aoisFeaturesAtom);
+  const areSelectedFeatures = aoisFeatures.some((f) => f.selected);
 
   const { onUpdate, onDelete, onSelectionChange } = useAois();
 
@@ -51,5 +52,5 @@ export default function DrawControl(props: DrawControlProps) {
     }
   );
 
-  return aoisFeatures.length ? null : <Css />;
+  return areSelectedFeatures ? null : <Css />;
 }

app/scripts/components/common/map/controls/aoi/reset-aoi-control.tsx

@@ -1,28 +1,27 @@
 import React, { useCallback } from 'react';
 import { CollecticonArrowLoop } from '@devseed-ui/collecticons';
-import { Button, createButtonStyles } from '@devseed-ui/button';
+import { Button } from '@devseed-ui/button';
 import styled from 'styled-components';
-import { useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { themeVal } from '@devseed-ui/theme-provider';
 import useThemedControl from '../hooks/use-themed-control';
 import useMaps from '../../hooks/use-maps';
-import { aoiDeleteAllAtom } from './atoms';
+import { aoiDeleteAllAtom, aoisFeaturesAtom } from './atoms';
 
 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')};
-    }
   }
 `;
 
 function ResetAoI({ map }: { map: any }) {
   const aoiDeleteAll = useSetAtom(aoiDeleteAllAtom);
+  const aoisFeatures = useAtomValue(aoisFeaturesAtom);
+
   const onReset = useCallback(() => {
     const mbDraw = map?._drawControl;
     if (!mbDraw) return;
@@ -32,8 +31,13 @@ function ResetAoI({ map }: { map: any }) {
 
   return (
     <>
-      <SelectorButton onClick={onReset}>
-        <CollecticonArrowLoop title='Upload geoJSON' meaningful />
+      <SelectorButton
+        fitting='skinny'
+        variation='primary-fill'
+        onClick={onReset}
+        disabled={!aoisFeatures.length}
+      >
+        <CollecticonArrowLoop color='base' title='Upload geoJSON' meaningful />
       </SelectorButton>
     </>
   );