minor styling

fix move button flex minor styling remove comment
RENCI · May 4, 2024 · 9f9993d · 9f9993d
1 parent 3cd34d7
commit 9f9993d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js
@@ -78,15 +78,9 @@ export const LayersList = () => {
                     p: 1,
                     borderLeft: '6px solid',
                     borderLeftColor: isVisible ? 'primary.400' : 'primary.100',
-                    '.MuiIconButton-root': { filter: 'opacity(0.1)', transition: 'filter 250ms' },
-                    '.MuiSwitch-root': {
-                      filter: 'opacity(0.1)',
-                      transition: 'filter 250ms',
-                    },
-                    '&:hover .MuiIconButton-root': { filter: 'opacity(0.5)' },
-                    '&:hover .MuiSwitch-root': { filter: 'opacity(0.5)' },
-                    '& .MuiIconButton-root:hover': { filter: 'opacity(1.0)' },
-                    '& .MuiSwitch-root:hover': { filter: 'opacity(1.0)' },
+                    '.actions': { filter: 'opacity(0.1)', transition: 'filter 250ms' },
+                    '&:hover .actions': { filter: 'opacity(0.5)' },
+                    '& .actions:hover': { filter: 'opacity(1.0)' },
                   }}
                 >
                   <Stack direction="column" sx={{ flex: 1 }}>
@@ -123,7 +117,8 @@ export const LayersList = () => {
                     </Stack>
                   </Stack>
 
-                  <Stack justifyContent="space-around">
+                  {/* card actions start */}
+                  <Stack justifyContent="space-around" className="actions">
                     <Switch
                       size="sm"
                       checked={ isVisible }
@@ -139,16 +134,27 @@ export const LayersList = () => {
                     </IconButton>
                   </Stack>
 
-                  <ButtonGroup orientation="vertical" size="sm" sx={{ transform: 'scaleX(0.75)' }}>
+                  <ButtonGroup
+                    orientation="vertical"
+                    size="sm"
+                    className="actions"
+                    sx={{
+                      transform: 'scaleX(0.75)',
+                      '.MuiIconButton-root': { flex: 1 }
+                    }}
+                  >
                     <IconButton
                       onClick={ () => swapLayers(layer.state.order, layer.state.order - 1) }
+                      sx={{ flex: 1 }}
                     ><MoveUpArrow /></IconButton> 
                     <IconButton
                       onClick={ () => swapLayers(layer.state.order, layer.state.order + 1) }
+                      sx={{ flex: 1 }}
                     ><MoveDownArrow /></IconButton> 
                   </ButtonGroup>
+                  {/* card actions end */}
 
-                  <IconButton onClick={ handleToggleExpansion(layer.id) } size="sm">
+                  <IconButton onClick={ handleToggleExpansion(layer.id) } size="sm" variant="soft">
                     <ExpandIcon
                       fontSize="sm"
                       sx={{

diff --git a/src/context/map-context.js b/src/context/map-context.js
@@ -97,9 +97,6 @@ export const LayersProvider = ({ children }) => {
     }, []);
 
     setDefaultModelLayers(newLayers);
-    /* todo: update `layer.state.order`s
-    layer.state.order - 1 for all layers l with l.state.order > this layer's state.order
-    */
   };
-Original file line number
+Diff line change
@@ Expand Up / @@ -97,9 +97,6 @@ export const LayersProvider = ({ children }) => { @@
         }, []);
         setDefaultModelLayers(newLayers);
-        /* todo: update `layer.state.order`s
-        layer.state.order - 1 for all layers l with l.state.order > this layer's state.order
-        */
       };
@@ Expand Down @@