diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx index f5a391d4a..2c26ec6b5 100644 --- a/packages/web/components/elements/FormElements.tsx +++ b/packages/web/components/elements/FormElements.tsx @@ -1,8 +1,8 @@ import { styled } from '../tokens/stitches.config' import { useState } from 'react' import Checkbox from './Checkbox' -import { Box, HStack, VStack } from './LayoutPrimitives' -import { StyledText } from './StyledText' +import { HStack, VStack } from './LayoutPrimitives' +import { Label } from '@radix-ui/react-dropdown-menu' export interface FormInputProps { name: string @@ -43,25 +43,30 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element { const [input, setInput] = useState(props) if (props.type === 'checkbox') { + const StyledLabel = styled(Label, { + color: '$grayTextContrast', + fontSize: 13, + padding: '5px 10px', + cursor: 'default', + }) + return ( {input.options?.map((label, index) => ( - - {label} - - { - input.value[index] = arg - setInput(input) - props.onChange && - props.onChange( - input.options?.filter((_, i) => input.value[i]) - ) - }} - > - + + { + input.value[index] = arg + setInput(input) + props.onChange && + props.onChange( + input.options?.filter((_, i) => input.value[i]) + ) + }} + > + {label} ))}