ui: Bolden text & add activation color for expanded state

This commit is contained in:
blessedcoolant 2024-01-04 04:58:52 +05:30 committed by Kent Keirsey
parent 71f6f77ae8
commit 0db47dd5e7
2 changed files with 17 additions and 4 deletions

View File

@ -21,7 +21,13 @@ export const InvAccordionButton = (props: InvAccordionButtonProps) => {
{children} {children}
<Spacer /> <Spacer />
{badges?.map((b, i) => ( {badges?.map((b, i) => (
<InvBadge key={`${b}.${i}`} variant="solid"> <InvBadge
key={`${b}.${i}`}
variant="solid"
background="blue.400"
fontSize={10}
fontWeight={800}
>
{b} {b}
</InvBadge> </InvBadge>
))} ))}

View File

@ -24,10 +24,17 @@ export const InvExpander = ({
> >
<Icon <Icon
as={isOpen ? BiCollapseVertical : BiExpandVertical} as={isOpen ? BiCollapseVertical : BiExpandVertical}
fontSize="12px" fontSize="14px"
color="base.400" color={isOpen ? 'blue.400' : 'base.400'}
/> />
<InvText variant="subtext" fontSize="sm" flexShrink={0} mb="2px"> <InvText
variant="subtext"
fontSize="sm"
fontWeight="bold"
flexShrink={0}
mb="2px"
color={isOpen ? 'blue.400' : 'base.400'}
>
{label} {label}
</InvText> </InvText>
</Flex> </Flex>