feat(ui): make invexpander button styles less complex

just make it like a normal button - normal and hover state, no difference when its expanded. the icon clearly indicates this, and you see the extra components
This commit is contained in:
psychedelicious 2024-01-04 15:56:16 +11:00 committed by Kent Keirsey
parent c56a6a4ddd
commit 7ad74e680d

View File

@ -4,30 +4,28 @@ import { Collapse, Icon, useDisclosure } from '@chakra-ui/react';
import type { InvExpanderProps } from 'common/components/InvExpander/types';
import { InvText } from 'common/components/InvText/wrapper';
import { t } from 'i18next';
import { useMemo } from 'react';
import { BiCollapseVertical, BiExpandVertical } from 'react-icons/bi';
const buttonStyles: SystemStyleObject = {
color: 'base.400',
borderColor: 'base.400',
transitionDuration: 'normal',
transitionProperty: 'common',
':hover, :hover *': {
transitionDuration: 'normal',
transitionProperty: 'common',
color: 'base.300',
borderColor: 'base.300',
},
};
export const InvExpander = ({
children,
label = t('common.advancedOptions'),
defaultIsOpen = false,
}: InvExpanderProps) => {
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen });
const buttonStyles = useMemo<SystemStyleObject>(
() => ({
color: isOpen ? 'base.300' : 'base.400',
borderColor: isOpen ? 'base.300' : 'base.400',
transitionDuration: 'normal',
transitionProperty: 'common',
':hover, :hover *': {
transitionDuration: 'normal',
transitionProperty: 'common',
color: isOpen ? 'base.200' : 'base.300',
borderColor: isOpen ? 'base.200' : 'base.300',
},
}),
[isOpen]
);
return (
<Flex flexDir="column" w="full">
<Flex