update formatting

src/components/Layer.jsx

@@ -6,39 +6,41 @@ import { InputLabel } from "@mui/material";
 import { FormControl } from "@mui/material";
 import { Paper } from "@mui/material";
 import { IconButton } from "@mui/material";
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import DeleteIcon from '@mui/icons-material/Delete';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
 import React from 'react'
 import { display } from "@mui/system";
 
 function makeColorGradients(colorMapValues) {
   let gradients = ''
   let c = colorMapValues
   let n = c.R.length
-  gradients += `rgba(${c.R[n-1]},${c.G[n-1]},${c.B[n-1]},${1})`
+  gradients += `rgba(${c.R[n - 1]},${c.G[n - 1]},${c.B[n - 1]},${1})`
   gradients += `linear-gradient(90deg,`
-  for (let j=0; j< n; j++) {
-    gradients += `rgba(${c.R[j]},${c.G[j]},${c.B[j]},${1}) ${(j/(n-1))*100}%,`
+  for (let j = 0; j < n; j++) {
+    gradients += `rgba(${c.R[j]},${c.G[j]},${c.B[j]},${1}) ${(j / (n - 1)) * 100}%,`
   }
-  gradients = gradients.slice(0,-1)
+  gradients = gradients.slice(0, -1)
   gradients += ')'
   return gradients
 }
 
-export default function Layer(props){
+export default function Layer(props) {
   const image = props.image
   const [detailsOpen, setDetailsOpen] = React.useState(false)
   const [color, setColor] = React.useState(image.colorMap)
-  let ArrowIcon = detailsOpen ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon /> 
+  let ArrowIcon = detailsOpen ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />
   console.log(props.colorMapValues)
   let allColors = image.colorMaps().map((colorName) => {
     return (
       <MenuItem value={colorName} key={colorName}>
-        
+
         <Box
           sx={{
-            display:'flex',
+            display: 'flex',
             flexDirection: 'row',
             width: '100%'
           }}
@@ -49,7 +51,7 @@ export default function Layer(props){
               flexDirection: 'row',
             }}
           >
-            {colorName} 
+            {colorName}
           </Box>
           <Box
             sx={{
@@ -63,17 +65,17 @@ export default function Layer(props){
             }}
           >
           </Box>
-          
+
         </Box>
       </MenuItem>
     )
   })
-  
-  function handleDetails(){
+
+  function handleDetails() {
     setDetailsOpen(!detailsOpen)
   }
 
-  function handleColorChange(event){
+  function handleColorChange(event) {
     let clr = event.target.value
     let id = image.id
     console.log(clr)
@@ -82,7 +84,7 @@ export default function Layer(props){
     setColor(clr)
   }
 
-  function handleDelete(){
+  function handleDelete() {
     props.onRemoveLayer(image)
   }
 
@@ -93,14 +95,14 @@ export default function Layer(props){
         flexDirection: 'column',
       }}
     >
-      <Paper 
+      <Paper
         elevation={2}
         sx={{
           marginTop: 0.5,
           marginBottom: 0.5
         }}
       >
-        <Box 
+        <Box
           sx={{
             margin: 1,
             display: 'flex',
@@ -117,22 +119,53 @@ export default function Layer(props){
           >
             {image.name}
           </Typography>
-          
-          <IconButton 
+
+          <IconButton
             onClick={handleDetails}
-            style={{marginLeft:'auto'}}
+            style={{ marginLeft: 'auto' }}
           >
             {ArrowIcon}
           </IconButton>
         </Box>
         <Box
           sx={{
-            display: detailsOpen ? 'flex' : 'none'
+            display: detailsOpen ? 'flex' : 'none',
+            flexDirection: 'column'
           }}>
           <Box
             sx={{
               display: 'flex',
-              flexDirection:'row',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              width: '100%'
+            }}
+            m={1}
+          >
+            <IconButton
+            >
+              <KeyboardDoubleArrowUpIcon />
+            </IconButton>
+
+            <IconButton
+            >
+              <KeyboardArrowUpIcon />
+            </IconButton>
+
+            <IconButton
+            >
+              <KeyboardArrowDownIcon />
+            </IconButton>
+
+            <IconButton
+            >
+              <KeyboardDoubleArrowDownIcon />
+            </IconButton>
+
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
               justifyContent: 'space-between',
               width: '100%'
             }}
@@ -141,7 +174,7 @@ export default function Layer(props){
             <FormControl>
               <InputLabel>Color</InputLabel>
               <Select
-                style={{width: '200px'}}
+                style={{ width: '200px' }}
                 value={color}
                 label='Color'
                 size='small'