hunk.code_window: });
   export const StyledModalFooter = styled('div')(({ theme }) => {
     return {
       fontSize: theme.font.sm,
       lineHeight: '22px',
       marginBottom: '8px',
       textAlign: 'center',
       ...displayFlex('center', 'center'),
       color: theme.colors.popoverColor,
  
hunk.labels: keep keep keep keep replace keep 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 { createPortal } from 'react-dom';
  import { KeyboardIcon } from './Icons';
  import {
    StyledListItem,
    StyledModalHeader,
    StyledShortcutsModal,
    StyledSubTitle,
    StyledTitle,
  } from './style';
  import {
    useMacKeyboardShortcuts,
    useMacMarkdownShortcuts,
    useWindowsKeyboardShortcuts,
    useWinMarkdownShortcuts,
  } from '@/components/shortcuts-modal/config';
  import { MuiSlide } from '@affine/component';
  import { ModalCloseButton } from '@affine/component';
  import { getUaHelper } from '@/utils';
  import { useTranslation } from '@affine/i18n';
  type ModalProps = {
    open: boolean;
    onClose: () => void;
  };
  
  const isMac = () => {
    return getUaHelper().isMacOs;
  };
  
  export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
    const { t } = useTranslation();
    const macMarkdownShortcuts = useMacMarkdownShortcuts();
    const winMarkdownShortcuts = useWinMarkdownShortcuts();
    const macKeyboardShortcuts = useMacKeyboardShortcuts();
    const windowsKeyboardShortcuts = useWindowsKeyboardShortcuts();
    const markdownShortcuts = isMac()
      ? macMarkdownShortcuts
      : winMarkdownShortcuts;
    const keyboardShortcuts = isMac()
      ? macKeyboardShortcuts
      : windowsKeyboardShortcuts;
  
    return createPortal(
      <MuiSlide direction="left" in={open} mountOnEnter unmountOnExit>
        <StyledShortcutsModal data-testid="shortcuts-modal">
          <>
            <StyledModalHeader>
              <StyledTitle>
                <KeyboardIcon />
                {t('Shortcuts')}
              </StyledTitle>
  
              <ModalCloseButton
                top={6}
                right={6}
                size={[24, 24]}
                iconSize={[15, 15]}
                onClick={() => {
                  onClose();
                }}
              />
            </StyledModalHeader>
            <StyledSubTitle style={{ marginTop: 0 }}>
              {t('Keyboard Shortcuts')}
            </StyledSubTitle>
            {Object.entries(keyboardShortcuts).map(([title, shortcuts]) => {
              return (
                <StyledListItem key={title}>
                  <span>{title}</span>
                  <span>{shortcuts}</span>
                </StyledListItem>
              );
            })}
            <StyledSubTitle>{t('Markdown Syntax')}</StyledSubTitle>
            {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
              return (
                <StyledListItem key={title}>
                  <span>{title}</span>
                  <span>{shortcuts}</span>
                </StyledListItem>
              );
            })}
          </>
        </StyledShortcutsModal>
      </MuiSlide>,
      document.body
    );
  };
  
  export default ShortcutsModal;
  