Add styling, margin, and padding changes

This commit is contained in:
Daniel S. Hansen
2025-08-22 12:46:08 -07:00
parent 3ef85bbcbf
commit 66d1220fbe
@@ -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>
<Button variant="subtle">COPY</Button>
<Button colorScheme="red" variant="solid">DELETE</Button>
<ButtonGroup variant="surface">
<Button >EDIT</Button>
<Button>COPY</Button>
<Button variant="solid" colorPalette="red">DELETE</Button>
</ButtonGroup>
</HStack>
</Box>
);