Commit 51c99be8 authored by tom's avatar tom

remove unnecessary styles

parent 15539ccb
...@@ -31,10 +31,6 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl ...@@ -31,10 +31,6 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
const bgColorDefault = useColorModeValue('blackAlpha.50', 'whiteAlpha.100'); const bgColorDefault = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
const bgColorError = useColorModeValue('red.50', 'red.900'); const bgColorError = useColorModeValue('red.50', 'red.900');
// TODO @tom2drum remove these custom colors after #1903 is done
const inputBgColor = useColorModeValue('white', 'black');
const inputBgColorDisabled = useColorModeValue('#ececec', '#232425');
const handleAddClick = React.useCallback(() => { const handleAddClick = React.useCallback(() => {
onAddClick?.(index); onAddClick?.(index);
}, [ index, onAddClick ]); }, [ index, onAddClick ]);
...@@ -58,8 +54,6 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl ...@@ -58,8 +54,6 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
isInvalid={ Boolean(errors?.name) } isInvalid={ Boolean(errors?.name) }
isDisabled={ isDisabled } isDisabled={ isDisabled }
autoComplete="off" autoComplete="off"
bgColor={ inputBgColor }
_disabled={{ bgColor: inputBgColorDisabled }}
/> />
<InputPlaceholder text="Tag (max 35 characters)" error={ errors?.name }/> <InputPlaceholder text="Tag (max 35 characters)" error={ errors?.name }/>
</FormControl> </FormControl>
...@@ -74,8 +68,6 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl ...@@ -74,8 +68,6 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
isInvalid={ Boolean(errors?.url) } isInvalid={ Boolean(errors?.url) }
isDisabled={ isDisabled } isDisabled={ isDisabled }
autoComplete="off" autoComplete="off"
bgColor={ inputBgColor }
_disabled={{ bgColor: inputBgColorDisabled }}
/> />
<InputPlaceholder text="Label URL" error={ errors?.url }/> <InputPlaceholder text="Label URL" error={ errors?.url }/>
</FormControl> </FormControl>
...@@ -105,9 +97,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl ...@@ -105,9 +97,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
isInvalid={ Boolean(errors?.tooltipDescription) } isInvalid={ Boolean(errors?.tooltipDescription) }
isDisabled={ isDisabled } isDisabled={ isDisabled }
autoComplete="off" autoComplete="off"
bgColor={ inputBgColor }
maxH="160px" maxH="160px"
_disabled={{ bgColor: inputBgColorDisabled }}
/> />
<InputPlaceholder <InputPlaceholder
text="Label description - any text to be shown on label hover (max 80 characters)" text="Label description - any text to be shown on label hover (max 80 characters)"
......
...@@ -23,10 +23,6 @@ interface Props<Type extends ColorFieldTypes> { ...@@ -23,10 +23,6 @@ interface Props<Type extends ColorFieldTypes> {
const PublicTagsSubmitFieldTagColor = <Type extends ColorFieldTypes>({ isDisabled, error, fieldName, placeholder, fieldType }: Props<Type>) => { const PublicTagsSubmitFieldTagColor = <Type extends ColorFieldTypes>({ isDisabled, error, fieldName, placeholder, fieldType }: Props<Type>) => {
const { getValues, register } = useFormContext<FormFields>(); const { getValues, register } = useFormContext<FormFields>();
// TODO @tom2drum remove these custom colors after #1903 is done
const inputBgColor = useColorModeValue('white', 'black');
const inputBgColorDisabled = useColorModeValue('#ececec', '#232425');
const circleBgColorDefault = { const circleBgColorDefault = {
bgColor: useColorModeValue('gray.100', 'gray.700'), bgColor: useColorModeValue('gray.100', 'gray.700'),
textColor: useColorModeValue('blackAlpha.800', 'whiteAlpha.800'), textColor: useColorModeValue('blackAlpha.800', 'whiteAlpha.800'),
...@@ -43,9 +39,7 @@ const PublicTagsSubmitFieldTagColor = <Type extends ColorFieldTypes>({ isDisable ...@@ -43,9 +39,7 @@ const PublicTagsSubmitFieldTagColor = <Type extends ColorFieldTypes>({ isDisable
isInvalid={ Boolean(error) } isInvalid={ Boolean(error) }
isDisabled={ isDisabled } isDisabled={ isDisabled }
autoComplete="off" autoComplete="off"
bgColor={ inputBgColor }
maxLength={ 6 } maxLength={ 6 }
_disabled={{ bgColor: inputBgColorDisabled }}
/> />
<InputPlaceholder text={ placeholder } error={ error }/> <InputPlaceholder text={ placeholder } error={ error }/>
<InputRightElement w="30px" right={ 4 } zIndex={ 10 }> <InputRightElement w="30px" right={ 4 } zIndex={ 10 }>
......
import { chakra, Flex, FormControl, useColorModeValue } from '@chakra-ui/react'; import { chakra, Flex, FormControl } from '@chakra-ui/react';
import type { GroupBase, SelectComponentsConfig, SingleValueProps } from 'chakra-react-select'; import type { GroupBase, SelectComponentsConfig, SingleValueProps } from 'chakra-react-select';
import { chakraComponents } from 'chakra-react-select'; import { chakraComponents } from 'chakra-react-select';
import _capitalize from 'lodash/capitalize'; import _capitalize from 'lodash/capitalize';
...@@ -24,9 +24,6 @@ const PublicTagsSubmitFieldTagType = ({ index, tagTypes, isDisabled }: Props) => ...@@ -24,9 +24,6 @@ const PublicTagsSubmitFieldTagType = ({ index, tagTypes, isDisabled }: Props) =>
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const { control, watch } = useFormContext<FormFields>(); const { control, watch } = useFormContext<FormFields>();
// TODO @tom2drum remove these custom colors after #1903 is done
const inputBgColor = useColorModeValue('white', 'black');
const typeOptions = React.useMemo(() => tagTypes?.map((type) => ({ const typeOptions = React.useMemo(() => tagTypes?.map((type) => ({
value: type.type, value: type.type,
label: _capitalize(type.type), label: _capitalize(type.type),
...@@ -79,14 +76,10 @@ const PublicTagsSubmitFieldTagType = ({ index, tagTypes, isDisabled }: Props) => ...@@ -79,14 +76,10 @@ const PublicTagsSubmitFieldTagType = ({ index, tagTypes, isDisabled }: Props) =>
isAsync={ false } isAsync={ false }
isSearchable={ false } isSearchable={ false }
components={ selectComponents } components={ selectComponents }
formControlStyles={{
bgColor: inputBgColor,
borderRadius: 'base',
}}
/> />
</FormControl> </FormControl>
); );
}, [ inputBgColor, isDisabled, isMobile, selectComponents, typeOptions ]); }, [ isDisabled, isMobile, selectComponents, typeOptions ]);
return ( return (
<Controller <Controller
......
import type { ChakraProps } from '@chakra-ui/react';
import { FormControl, useToken, useColorMode } from '@chakra-ui/react'; import { FormControl, useToken, useColorMode } from '@chakra-ui/react';
import type { CSSObjectWithLabel, GroupBase, SingleValue, MultiValue, AsyncProps, Props as SelectProps } from 'chakra-react-select'; import type { CSSObjectWithLabel, GroupBase, SingleValue, MultiValue, AsyncProps, Props as SelectProps } from 'chakra-react-select';
import { Select, AsyncSelect } from 'chakra-react-select'; import { Select, AsyncSelect } from 'chakra-react-select';
...@@ -13,7 +12,6 @@ import InputPlaceholder from 'ui/shared/InputPlaceholder'; ...@@ -13,7 +12,6 @@ import InputPlaceholder from 'ui/shared/InputPlaceholder';
interface CommonProps { interface CommonProps {
error?: Merge<FieldError, FieldErrorsImpl<Option>> | undefined; error?: Merge<FieldError, FieldErrorsImpl<Option>> | undefined;
placeholderIcon?: React.ReactNode; placeholderIcon?: React.ReactNode;
formControlStyles?: ChakraProps;
} }
interface RegularSelectProps extends SelectProps<Option, boolean, GroupBase<Option>>, CommonProps { interface RegularSelectProps extends SelectProps<Option, boolean, GroupBase<Option>>, CommonProps {
...@@ -49,7 +47,6 @@ const FancySelect = (props: Props, ref: React.LegacyRef<HTMLDivElement>) => { ...@@ -49,7 +47,6 @@ const FancySelect = (props: Props, ref: React.LegacyRef<HTMLDivElement>) => {
{ ...(props.error ? { 'aria-invalid': true } : {}) } { ...(props.error ? { 'aria-invalid': true } : {}) }
{ ...(props.isDisabled ? { 'aria-disabled': true } : {}) } { ...(props.isDisabled ? { 'aria-disabled': true } : {}) }
{ ...(props.value ? { 'data-active': true } : {}) } { ...(props.value ? { 'data-active': true } : {}) }
{ ...props.formControlStyles }
> >
<SelectComponent <SelectComponent
{ ...props } { ...props }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment