Improve item menus

Author: danielfdsilva

packages/client/src/components/StacBrowserMenuItem.tsx

@@ -15,7 +15,6 @@ export function StacBrowserMenuItem(
     <MenuItem
       icon={<CollecticonGlobe />}
       as={SmartLink}
-      _hover={{ textDecoration: 'none' }}
       to={`${baseStacBrowserUrl}${resourcePath}`}
       {...rest}
     >

packages/client/src/pages/CollectionDetail/index.tsx

@@ -25,6 +25,7 @@ import { useCollection, useStacSearch } from '@developmentseed/stac-react';
 import {
   CollecticonEllipsisVertical,
   CollecticonPencil,
+  CollecticonTextBlock,
   CollecticonTrashBin
 } from '@devseed-ui/collecticons-chakra';
 import { StacCollection, StacItem } from 'stac-ts';
@@ -294,6 +295,7 @@ function CollectionDetail() {
                         <MenuItem
                           as={SmartLink}
                           to={`/collections/${id}/items/${item.id}`}
+                          icon={<CollecticonTextBlock />}
                         >
                           View
                         </MenuItem>

packages/client/src/pages/CollectionList/index.tsx

@@ -19,7 +19,9 @@ import {
 import {
   CollecticonEllipsisVertical,
   CollecticonMagnifierRight,
-  CollecticonPlusSmall
+  CollecticonPencil,
+  CollecticonPlusSmall,
+  CollecticonTextBlock
 } from '@devseed-ui/collecticons-chakra';
 import { useCollections } from '@developmentseed/stac-react';
 import type { StacCollection } from 'stac-ts';
@@ -158,16 +160,22 @@ function CollectionList() {
                       as={IconButton}
                       aria-label='Options'
                       icon={<CollecticonEllipsisVertical />}
-                      variant='outline'
+                      variant='soft-outline'
+                      colorScheme='base'
                       size='sm'
                     />
                     <MenuList>
-                      <MenuItem as={SmartLink} to={`/collections/${col.id}/`}>
+                      <MenuItem
+                        as={SmartLink}
+                        to={`/collections/${col.id}/`}
+                        icon={<CollecticonTextBlock />}
+                      >
                         View
                       </MenuItem>
                       <MenuItem
                         as={SmartLink}
                         to={`/collections/${col.id}/edit`}
+                        icon={<CollecticonPencil />}
                       >
                         Edit
                       </MenuItem>

packages/client/src/theme/theme.ts

@@ -71,6 +71,11 @@ const theme = {
         color: 'primary.500'
       }
     },
+    Menu: {
+      baseStyle: {
+        item: { _hover: { textDecoration: 'none !important' } }
+      }
+    },
     FormLabel: {
       baseStyle: {
         fontSize: 'sm'