chore: update searchArrowButton style

This commit is contained in:
JimmFly 2023-01-12 17:28:18 +08:00
parent d8a580dfae
commit 03a827e759

View File

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