toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-02 02:12:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update searchArrowButton style

Browse Source
This commit is contained in:
JimmFly 2023-01-12 17:28:18 +08:00
parent d8a580dfae
commit 03a827e759
1 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/app/src/components/header/QuickSearchButton.tsx
View File

@ -1,12 +1,10 @@
import React from 'react'; import React from 'react';
import { IconButton, IconButtonProps } from '@/ui/button'; import { IconButton, IconButtonProps } from '@/ui/button';
import { Tooltip } from '@/ui/tooltip';
import { ArrowDownIcon } from '@blocksuite/icons'; import { ArrowDownIcon } from '@blocksuite/icons';
import { useModal } from '@/providers/GlobalModalProvider'; import { useModal } from '@/providers/GlobalModalProvider';
import { useTranslation } from '@affine/i18n';
import { styled } from '@/styles'; import { styled } from '@/styles';
const StyledIconButtonWithAnimate = styled(IconButton)(() => { const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => {
return { return {
svg: { svg: {
transition: 'transform 0.15s ease-in-out', transition: 'transform 0.15s ease-in-out',
@ -15,6 +13,9 @@ const StyledIconButtonWithAnimate = styled(IconButton)(() => {
svg: { svg: {
transform: 'translateY(3px)', transform: 'translateY(3px)',
}, },
'::after': {
background: theme.colors.pageBackground,
},
}, },
}; };
}); });
@ -23,20 +24,17 @@ export const QuickSearchButton = ({
...props ...props
}: Omit<IconButtonProps, 'children'>) => { }: Omit<IconButtonProps, 'children'>) => {
const { triggerQuickSearchModal } = useModal(); const { triggerQuickSearchModal } = useModal();
const { t } = useTranslation();
return ( return (
<Tooltip content={t('Jump to')} placement="bottom"> <StyledIconButtonWithAnimate
<StyledIconButtonWithAnimate data-testid="header-quickSearchButton"
data-testid="header-quickSearchButton" {...props}
{...props} onClick={e => {
onClick={e => { onClick?.(e);
onClick?.(e); triggerQuickSearchModal();
triggerQuickSearchModal(); }}
}} >
> <ArrowDownIcon />
<ArrowDownIcon /> </StyledIconButtonWithAnimate>
</StyledIconButtonWithAnimate>
</Tooltip>
); );
}; };