mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
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:
parent
c56a6a4ddd
commit
7ad74e680d
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user