update padding in color picker

This commit is contained in:
Mary Hipp 2024-03-05 15:12:16 -05:00 committed by Kent Keirsey
parent f2744fd7d1
commit b9a9507422

View File

@ -20,7 +20,7 @@ const sx: ChakraProps['sx'] = {
'.react-colorful__hue-pointer': colorPickerPointerStyles, '.react-colorful__hue-pointer': colorPickerPointerStyles,
'.react-colorful__saturation-pointer': colorPickerPointerStyles, '.react-colorful__saturation-pointer': colorPickerPointerStyles,
'.react-colorful__alpha-pointer': colorPickerPointerStyles, '.react-colorful__alpha-pointer': colorPickerPointerStyles,
gap: 2, gap: 5,
flexDir: 'column', flexDir: 'column',
}; };
@ -39,8 +39,8 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
<Flex sx={sx}> <Flex sx={sx}>
<RgbaColorPicker color={color} onChange={onChange} style={colorPickerStyles} {...rest} /> <RgbaColorPicker color={color} onChange={onChange} style={colorPickerStyles} {...rest} />
{withNumberInput && ( {withNumberInput && (
<Flex> <Flex gap={5}>
<FormControl> <FormControl gap={0}>
<FormLabel>{t('common.red')}</FormLabel> <FormLabel>{t('common.red')}</FormLabel>
<CompositeNumberInput <CompositeNumberInput
value={color.r} value={color.r}
@ -52,7 +52,7 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
defaultValue={90} defaultValue={90}
/> />
</FormControl> </FormControl>
<FormControl> <FormControl gap={0}>
<FormLabel>{t('common.green')}</FormLabel> <FormLabel>{t('common.green')}</FormLabel>
<CompositeNumberInput <CompositeNumberInput
value={color.g} value={color.g}
@ -64,7 +64,7 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
defaultValue={90} defaultValue={90}
/> />
</FormControl> </FormControl>
<FormControl> <FormControl gap={0}>
<FormLabel>{t('common.blue')}</FormLabel> <FormLabel>{t('common.blue')}</FormLabel>
<CompositeNumberInput <CompositeNumberInput
value={color.b} value={color.b}
@ -76,7 +76,7 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
defaultValue={255} defaultValue={255}
/> />
</FormControl> </FormControl>
<FormControl> <FormControl gap={0}>
<FormLabel>{t('common.alpha')}</FormLabel> <FormLabel>{t('common.alpha')}</FormLabel>
<CompositeNumberInput <CompositeNumberInput
value={color.a} value={color.a}