From f30657f9e1fd20ddb1471688f4277de6d3e74313 Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Mon, 24 Oct 2022 15:29:21 +0800
Subject: [PATCH] feat: modify shortcuts modal

---
 .../src/components/shortcuts-modal/config.ts  | 44 +++++++++----------
 .../src/components/shortcuts-modal/style.ts   | 20 +++++----
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/packages/app/src/components/shortcuts-modal/config.ts b/packages/app/src/components/shortcuts-modal/config.ts
index 948a8a54f3..26b9ea6555 100644
--- a/packages/app/src/components/shortcuts-modal/config.ts
+++ b/packages/app/src/components/shortcuts-modal/config.ts
@@ -19,17 +19,17 @@ export const macKeyboardShortcuts = {
 };
 
 export const macMarkdownShortcuts = {
-  Bold: '**Text** Space',
-  Italic: '*Text* Space',
-  Underline: '~Text~ Space',
-  Strikethrough: '~~Text~~ Space',
-  'Inline code': '`Code` Space',
-  'Heading 1': '# Space',
-  'Heading 2': '## Space',
-  'Heading 3': '### Space',
-  'Heading 4': '#### Space',
-  'Heading 5': '##### Space',
-  'Heading 6': '###### Space',
+  Bold: '**Text** ',
+  Italic: '*Text* ',
+  Underline: '~Text~ ',
+  Strikethrough: '~~Text~~ ',
+  'Inline code': '`Code` ',
+  'Heading 1': '# ',
+  'Heading 2': '## ',
+  'Heading 3': '### ',
+  'Heading 4': '#### ',
+  'Heading 5': '##### ',
+  'Heading 6': '###### ',
 };
 
 export const windowsKeyboardShortcuts = {
@@ -52,15 +52,15 @@ export const windowsKeyboardShortcuts = {
   'Reduce indent': 'Shift + Tab',
 };
 export const winMarkdownShortcuts = {
-  Bold: '**Text** Space',
-  Italic: '*Text* Space',
-  Underline: '~Text~ Space',
-  Strikethrough: '~~Text~~ Space',
-  'Inline code': '`Code` Space',
-  'Heading 1': '# Space',
-  'Heading 2': '## Space',
-  'Heading 3': '### Space',
-  'Heading 4': '#### Space',
-  'Heading 5': '##### Space',
-  'Heading 6': '###### Space',
+  Bold: '**Text** ',
+  Italic: '*Text* ',
+  Underline: '~Text~ ',
+  Strikethrough: '~~Text~~ ',
+  'Inline code': '`Code` ',
+  'Heading 1': '# ',
+  'Heading 2': '## ',
+  'Heading 3': '### ',
+  'Heading 4': '#### ',
+  'Heading 5': '##### ',
+  'Heading 6': '###### ',
 };
diff --git a/packages/app/src/components/shortcuts-modal/style.ts b/packages/app/src/components/shortcuts-modal/style.ts
index e9a34cf679..c9bf33e301 100644
--- a/packages/app/src/components/shortcuts-modal/style.ts
+++ b/packages/app/src/components/shortcuts-modal/style.ts
@@ -1,8 +1,9 @@
 import { displayFlex, styled } from '@/styles';
 
 export const StyledShortcutsModal = styled.div(({ theme }) => ({
-  width: '268px',
-  height: '66vh',
+  width: '288px',
+  height: '74vh',
+  paddingBottom: '28px',
   backgroundColor: theme.colors.popoverBackground,
   boxShadow: theme.shadow.popover,
   color: theme.colors.popoverColor,
@@ -17,8 +18,9 @@ export const StyledShortcutsModal = styled.div(({ theme }) => ({
 }));
 export const StyledTitle = styled.div(({ theme }) => ({
   color: theme.colors.textColor,
-  fontWeight: '600',
+  fontWeight: '500',
   fontSize: theme.font.sm,
+  height: '44px',
   ...displayFlex('center', 'center'),
   svg: {
     width: '20px',
@@ -27,17 +29,17 @@ export const StyledTitle = styled.div(({ theme }) => ({
   },
 }));
 export const StyledSubTitle = styled.div(({ theme }) => ({
-  color: theme.colors.textColor,
+  color: theme.colors.popoverColor,
   fontWeight: '500',
-  fontSize: '12px',
-  height: '36px',
+  fontSize: theme.font.sm,
+  height: '34px',
   lineHeight: '36px',
   marginTop: '28px',
   padding: '0 16px',
 }));
 export const StyledModalHeader = styled.div(({ theme }) => ({
   ...displayFlex('space-between', 'center'),
-  height: '36px',
+  paddingTop: '8px 4px 0 4px',
   width: '100%',
   padding: '8px 16px 0 16px',
   position: 'sticky',
@@ -49,9 +51,9 @@ export const StyledModalHeader = styled.div(({ theme }) => ({
 }));
 
 export const StyledListItem = styled.div(({ theme }) => ({
-  height: '32px',
+  height: '34px',
   ...displayFlex('space-between', 'center'),
-  fontSize: theme.font.xs,
+  fontSize: theme.font.sm,
   padding: '0 16px',
 }));