Merge pull request #131 from RENCI/126-move-layer-delete-trash-can-to…

…-the-layer-panel

126 move layer delete trash can to the layer panel

src/components/trays/layers/delete-layer-button.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  DeleteForever as RemoveIcon,
+} from '@mui/icons-material';
+import { useLayers } from '@context';
+import { ActionButton } from '@components/buttons';
+
+export const DeleteLayerButton = ({ layerId }) => {
+  const { removeLayer } = useLayers();
+
+  return (
+    <ActionButton
+      color="danger"
+      variant="outlined"
+      onClick={ () => removeLayer(layerId) }
+      sx={{
+        'filter': 'opacity(0.2)',
+        transition: 'filter 250ms',
+        '&:hover': {
+          'filter': 'opacity(1.0)',
+        },
+      }}
+    >
+      <RemoveIcon />
+    </ActionButton>
+  );
+};
+
+DeleteLayerButton.propTypes = {
+  layerId: PropTypes.string.isRequired
+};

src/components/trays/layers/layer-card-actions.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Box,
-  Divider,
   FormControl,
   FormLabel,
   ListItemDecorator,
@@ -14,16 +13,14 @@ import {
   Stack,
 } from '@mui/joy';
 import {
-  DeleteForever as RemoveIcon,
   FormatPaint as AppearanceIcon,
   DataObject as MetadataIcon,
 } from '@mui/icons-material';
 import { useLayers, useSettings } from '@context';
-import { ActionButton } from '@components/buttons';
 
 export const LayerActions = ({ layer }) => {
   const { darkMode } = useSettings();
-  const { removeLayer, setLayerOpacity } = useLayers();
+  const { setLayerOpacity } = useLayers();
 
   return (
     <Tabs defaultValue={0}>
@@ -45,19 +42,6 @@ export const LayerActions = ({ layer }) => {
             Metadata
           </Tab>
         </TabList>
-
-        <Divider orientation="vertical" />
-
-        <ActionButton
-          color="warning"
-          onClick={ () => removeLayer(layer.id) }
-          sx={{
-            borderRadius: 0,
-            borderBottom: '1px solid var(--joy-palette-divider)',
-          }}
-        >
-          <RemoveIcon />
-        </ActionButton>
       </Stack>
 
       <TabPanel value={ 0 } sx={{

src/components/trays/layers/layer-card.js

@@ -19,6 +19,7 @@ import { useLayers } from '@context';
 import { useToggleState } from '@hooks';
 import { LayerActions } from './layer-card-actions';
 import { ActionButton } from '@components/buttons';
+import { DeleteLayerButton } from './delete-layer-button';
 
 export const LayerCard = ({ index, layer }) => {
   const {
@@ -66,7 +67,7 @@ export const LayerCard = ({ index, layer }) => {
             <Avatar variant="outlined">
               <LayerIcon size="lg" color="primary" />
             </Avatar>
-            <Typography level="title-md">
+            <Typography level="title-md" sx={{ flex: 1 }}>
               {layer.properties.product_name}
             </Typography>
             <Switch
@@ -75,6 +76,7 @@ export const LayerCard = ({ index, layer }) => {
               onChange={ () => toggleLayerVisibility(layer.id) }
               className="action-button"
             />
+            <DeleteLayerButton layerId={ layer.id }/>
           </Stack>
 
           <Stack