feat: modify shortcut key style (#3807)

apps/core/src/components/pure/shortcuts-modal/index.tsx

@@ -6,46 +6,80 @@ import {
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 import {
+  type ShortcutsInfo,
   useEdgelessShortcuts,
   useGeneralShortcuts,
   useMarkdownShortcuts,
   usePageShortcuts,
 } from '../../../hooks/affine/use-shortcuts';
 import { KeyboardIcon } from './icons';
-import {
-  StyledListItem,
-  StyledModalHeader,
-  StyledShortcutsModal,
-  StyledSubTitle,
-  StyledTitle,
-} from './style';
+import * as styles from './style.css';
+// import {
+//   StyledListItem,
+//   StyledModalHeader,
+//   StyledShortcutsModal,
+//   StyledSubTitle,
+//   StyledTitle,
+// } from './style';
 type ModalProps = {
   open: boolean;
   onClose: () => void;
 };
 
+const ShortcutsPanel = ({
+  shortcutsInfo,
+}: {
+  shortcutsInfo: ShortcutsInfo;
+}) => {
+  return (
+    <>
+      <div className={styles.subtitle}>{shortcutsInfo.title}</div>
+
+      {Object.entries(shortcutsInfo.shortcuts).map(([title, shortcuts]) => {
+        return (
+          <div className={styles.listItem} key={title}>
+            <span>{title}</span>
+            <div className={styles.keyContainer}>
+              {shortcuts.map(key => {
+                return (
+                  <span className={styles.key} key={key}>
+                    {key}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
 export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
   const t = useAFFiNEI18N();
 
-  const markdownShortcuts = useMarkdownShortcuts();
-  const pageShortcuts = usePageShortcuts();
-  const edgelessShortcuts = useEdgelessShortcuts();
-  const generalShortcuts = useGeneralShortcuts();
+  const markdownShortcutsInfo = useMarkdownShortcuts();
+  const pageShortcutsInfo = usePageShortcuts();
+  const edgelessShortcutsInfo = useEdgelessShortcuts();
+  const generalShortcutsInfo = useGeneralShortcuts();
 
   return (
     <MuiSlide direction="left" in={open} mountOnEnter unmountOnExit>
-      <StyledShortcutsModal data-testid="shortcuts-modal">
+      <div className={styles.shortcutsModal} data-testid="shortcuts-modal">
         <MuiClickAwayListener
           onClickAway={() => {
             onClose();
           }}
         >
           <div>
-            <StyledModalHeader>
-              <StyledTitle>
+            <div
+              className={styles.modalHeader}
+              style={{ marginBottom: '-28px' }}
+            >
+              <div className={styles.title}>
                 <KeyboardIcon />
                 {t['Shortcuts']()}
-              </StyledTitle>
+              </div>
 
               <ModalCloseButton
                 top={6}
@@ -54,48 +88,14 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
                   onClose();
                 }}
               />
-            </StyledModalHeader>
-            <StyledSubTitle style={{ marginTop: 0 }}>
-              {t['General']()}
-            </StyledSubTitle>
-            {Object.entries(generalShortcuts).map(([title, shortcuts]) => {
-              return (
-                <StyledListItem key={title}>
-                  <span>{title}</span>
-                  <span>{shortcuts}</span>
-                </StyledListItem>
-              );
-            })}
-            <StyledSubTitle>{t['Page']()}</StyledSubTitle>
-            {Object.entries(pageShortcuts).map(([title, shortcuts]) => {
-              return (
-                <StyledListItem key={title}>
-                  <span>{title}</span>
-                  <span>{shortcuts}</span>
-                </StyledListItem>
-              );
-            })}
-            <StyledSubTitle>{t['Edgeless']()}</StyledSubTitle>
-            {Object.entries(edgelessShortcuts).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>
-              );
-            })}
+            </div>
+            <ShortcutsPanel shortcutsInfo={generalShortcutsInfo} />
+            <ShortcutsPanel shortcutsInfo={pageShortcutsInfo} />
+            <ShortcutsPanel shortcutsInfo={edgelessShortcutsInfo} />
+            <ShortcutsPanel shortcutsInfo={markdownShortcutsInfo} />
           </div>
         </MuiClickAwayListener>
-      </StyledShortcutsModal>
+      </div>
     </MuiSlide>
   );
 };

apps/core/src/components/pure/shortcuts-modal/style.css.ts

@@ -0,0 +1,89 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const shortcutsModal = style({
+  width: '288px',
+  height: '74vh',
+  paddingBottom: '28px',
+  backgroundColor: 'var(--affine-white)',
+  boxShadow: 'var(--affine-popover-shadow)',
+  borderRadius: `var(--affine-popover-radius)`,
+  overflow: 'auto',
+  position: 'fixed',
+  right: '12px',
+  top: '0',
+  bottom: '0',
+  margin: 'auto',
+  zIndex: 'var(--affine-z-index-modal)',
+});
+// export const shortcutsModal = style({
+//   color: 'var(--affine-text-primary-color)',
+//   fontWeight: '500',
+//   fontSize: 'var(--affine-font-sm)',
+//   height: '44px',
+//   display: 'flex',
+//   justifyContent: 'center',
+//   alignItems: 'center',
+//   svg: {
+//     width: '20px',
+//     marginRight: '14px',
+//     color: 'var(--affine-primary-color)',
+//   },
+// });
+export const title = style({
+  color: 'var(--affine-text-primary-color)',
+  fontWeight: '500',
+  fontSize: 'var(--affine-font-sm)',
+  height: '44px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+globalStyle(`${title} svg`, {
+  width: '20px',
+  marginRight: '14px',
+  color: 'var(--affine-primary-color)',
+});
+
+export const subtitle = style({
+  fontWeight: '500',
+  fontSize: 'var(--affine-font-sm)',
+  height: '34px',
+  lineHeight: '36px',
+  marginTop: '28px',
+  padding: '0 16px',
+});
+export const modalHeader = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingTop: '8px 4px 0 4px',
+  width: '100%',
+  padding: '8px 16px 0 16px',
+  position: 'sticky',
+  left: '0',
+  top: '0',
+  background: 'var(--affine-white)',
+  transition: 'background-color 0.5s',
+});
+
+export const listItem = style({
+  height: '34px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  fontSize: 'var(--affine-font-sm)',
+  padding: '0 16px',
+});
+export const keyContainer = style({
+  display: 'flex',
+});
+
+export const key = style({
+  selectors: {
+    '&:not(:last-child)::after': {
+      content: '+',
+      margin: '0 4px',
+    },
+  },
+});

apps/core/src/components/pure/shortcuts-modal/style.ts

@@ -1,56 +0,0 @@
-import { displayFlex, styled } from '@affine/component';
-
-export const StyledShortcutsModal = styled('div')(() => ({
-  width: '288px',
-  height: '74vh',
-  paddingBottom: '28px',
-  backgroundColor: 'var(--affine-white)',
-  boxShadow: 'var(--affine-popover-shadow)',
-  borderRadius: `var(--affine-popover-radius)`,
-  overflow: 'auto',
-  boxRadius: '10px',
-  position: 'fixed',
-  right: '12px',
-  top: '0',
-  bottom: '0',
-  margin: 'auto',
-  zIndex: 'var(--affine-z-index-modal)',
-}));
-export const StyledTitle = styled('div')(() => ({
-  color: 'var(--affine-text-primary-color)',
-  fontWeight: '500',
-  fontSize: 'var(--affine-font-sm)',
-  height: '44px',
-  ...displayFlex('center', 'center'),
-  svg: {
-    width: '20px',
-    marginRight: '14px',
-    color: 'var(--affine-primary-color)',
-  },
-}));
-export const StyledSubTitle = styled('div')(() => ({
-  fontWeight: '500',
-  fontSize: 'var(--affine-font-sm)',
-  height: '34px',
-  lineHeight: '36px',
-  marginTop: '28px',
-  padding: '0 16px',
-}));
-export const StyledModalHeader = styled('div')(() => ({
-  ...displayFlex('space-between', 'center'),
-  paddingTop: '8px 4px 0 4px',
-  width: '100%',
-  padding: '8px 16px 0 16px',
-  position: 'sticky',
-  left: '0',
-  top: '0',
-  background: 'var(--affine-white)',
-  transition: 'background-color 0.5s',
-}));
-
-export const StyledListItem = styled('div')(() => ({
-  height: '34px',
-  ...displayFlex('space-between', 'center'),
-  fontSize: 'var(--affine-font-sm)',
-  padding: '0 16px',
-}));