hunk.code_window: export const StyledJumpTo = styled('div')(({ theme }) => {
     return {
       ...displayFlex('center', 'start'),
       flexDirection: 'column',
       padding: '10px 10px 10px 0',
       fontSize: theme.font.sm,
       strong: {
         fontWeight: '500',
         marginBottom: '10px',
       },
  
hunk.labels: keep keep keep keep keep replace keep keep keep keep
hunk.after_edit:     fontSize: theme.font.base,
  
hunk.file_path: packages/app/src/components/quick-search/style.ts
hunk.type: replace
file: import React from 'react';
  import { IconButton, IconButtonProps } from '@affine/component';
  import { ArrowDownIcon } from '@blocksuite/icons';
  import { useModal } from '@/providers/GlobalModalProvider';
  import { styled } from '@affine/component';
  
  const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => {
    return {
      svg: {
        transition: 'transform 0.15s ease-in-out',
      },
      ':hover': {
        svg: {
          transform: 'translateY(3px)',
        },
        '::after': {
          background: theme.colors.pageBackground,
        },
      },
    };
  });
  export const QuickSearchButton = ({
    onClick,
    ...props
  }: Omit<IconButtonProps, 'children'>) => {
    const { triggerQuickSearchModal } = useModal();
    return (
      <StyledIconButtonWithAnimate
        data-testid="header-quickSearchButton"
        {...props}
        onClick={e => {
          onClick?.(e);
          triggerQuickSearchModal();
        }}
      >
        <ArrowDownIcon />
      </StyledIconButtonWithAnimate>
    );
  };
  
  export default QuickSearchButton;
  