Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): board collapse button styling

Browse Source
This commit is contained in:
psychedelicious 2023-12-29 08:50:29 +11:00 committed by Kent Keirsey
parent ed96c40239
commit e99b715e9e
1 changed files with 13 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
View File

@ -1,9 +1,8 @@
import { ChevronUpIcon } from '@chakra-ui/icons'; import { ChevronUpIcon } from '@chakra-ui/icons';
import { Button, Flex } from '@chakra-ui/react'; import { Button, Flex, Spacer } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store'; import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { InvText } from 'common/components/InvText/wrapper';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { useBoardName } from 'services/api/hooks/useBoardName'; import { useBoardName } from 'services/api/hooks/useBoardName';
@ -35,32 +34,20 @@ const GalleryBoardName = (props: Props) => {
as={Button} as={Button}
onClick={onToggle} onClick={onToggle}
size="sm" size="sm"
sx={{ position="relative"
position: 'relative', gap={2}
gap: 2, w="full"
w: 'full', justifyContent="center"
justifyContent: 'space-between', alignItems="center"
alignItems: 'center', px={2}
px: 2,
}}
> >
<InvText <Spacer />
noOfLines={1} {formattedBoardName}
sx={{ <Spacer />
fontWeight: 'semibold',
w: '100%',
textAlign: 'center',
color: 'base.200',
}}
>
{formattedBoardName}
</InvText>
<ChevronUpIcon <ChevronUpIcon
sx={{ transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)', transitionProperty="common"
transitionProperty: 'common', transitionDuration="normal"
transitionDuration: 'normal',
}}
/> />
</Flex> </Flex>
); );