Add styling, margin, and padding changes

client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Box, Button, Text, List, HStack, RadioGroup, Table, createListCollection } from "@chakra-ui/react"
+import { Box, Button, ButtonGroup, Text, List, HStack, RadioGroup, Table, createListCollection } from "@chakra-ui/react"
 import DropDownMenu from "../../CanvasComponents/DropDownMenu"
 
 const startYear = 1970;
@@ -43,13 +43,13 @@ export function MEDataEntry() {
     const [rows, setRows] = useState([]);
 
     return(
-        <Box m={4} border="1px solid" borderRadius="sm" borderColor="gray.500">
+        <Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500">
             <HStack spacing={6} m={2}>
                 <DropDownMenu collection={years} placeholder="Year" width="130px" />
                 <DropDownMenu collection={quarters} placeholder="Quarter" width="130px" />
                 <DropDownMenu collection={sections} placeholder="Section" width="130px" />
             </HStack>
-            <Text fontSize="sm" pl={2} pt={4}>
+            <Text fontSize="sm" pl={2} pt={2}>
                 Use Volcano names as found in GVP and dashboard. (e.g. Nevado del Ruiz, Chiles-Cerro Negro).
             </Text>
             <List.Root as="ul" styleType="circle" fontSize="sm" pl={6}>
@@ -58,7 +58,7 @@ export function MEDataEntry() {
                 <List.Item>Copy entry to form. Then hitting 'Save' will create a new entry.</List.Item>
             </List.Root>
             <Box m={4} border="1px solid">
-                <Box border="1px solid" borderColor="gray.300" overflow="hidden">
+                <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.300" overflow="hidden">
                     Number of people benefitting from VDAP activities, disaggregate by sex
                 </Box>
                 
@@ -112,17 +112,17 @@ export function MEDataEntry() {
                                     )))   
                                 }
                             </Table.Body>
-
-                            
                         </Table.Root>
                     </RadioGroup.Root>
                 </Box>
             </Box>
             {/* Row actions aligned right */}
             <HStack justify="flex-end" p={3} borderTop="1px solid" borderColor="gray.300" spacing={3} >
-                <Button variant="subtle">EDIT</Button>
+                <ButtonGroup variant="surface">  
-                <Button variant="subtle">COPY</Button>
+                    <Button >EDIT</Button>
-                <Button colorScheme="red" variant="solid">DELETE</Button>
+                    <Button>COPY</Button>
+                    <Button variant="solid" colorPalette="red">DELETE</Button>
+                </ButtonGroup>
             </HStack>
         </Box>
     );