fix: ui problem

packages/app/src/components/Header/index.tsx

@@ -26,7 +26,7 @@ const PopoverContent = () => {
         }}
       >
         {mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
-        Convert to {mode === 'page' ? 'edgeless' : 'page'}
+        Convert to {mode === 'page' ? 'Edgeless' : 'Page'}
       </StyledMoreMenuItem>
       <StyledMoreMenuItem
         onClick={() => {
@@ -42,7 +42,7 @@ const PopoverContent = () => {
         }}
       >
         <ExportIcon />
-        Export to markdown
+        Export to Markdown
       </StyledMoreMenuItem>
     </>
   );

packages/app/src/components/Header/styles.ts

@@ -6,8 +6,13 @@ export const StyledHeader = styled('div')({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  position: 'relative',
+  background: 'var(--affine-page-background)',
+  transition: 'background-color 0.5s',
+  position: 'fixed',
+  left: '0',
+  top: '0',
   padding: '0 22px',
+  zIndex: '10',
 });
 
 export const StyledTitle = styled('div')({

packages/app/src/components/faq/index.tsx

@@ -32,20 +32,22 @@ export const FAQ = () => {
       >
         <Grow in={showContent}>
           <StyledFAQWrapper>
-            <Tooltip content="Contact with us" placement="left-end">
+            <Tooltip content="Contact Us" placement="left-end">
               <StyledIconWrapper
                 isEdgelessDark={isEdgelessDark}
                 onClick={() => {
+                  setShowContent(false);
                   contactModalHandler(true);
                 }}
               >
                 <ContactIcon />
               </StyledIconWrapper>
             </Tooltip>
-            <Tooltip content="Keyboard shorts" placement="left-end">
+            <Tooltip content="Keyboard Shortcuts" placement="left-end">
               <StyledIconWrapper
                 isEdgelessDark={isEdgelessDark}
                 onClick={() => {
+                  setShowContent(false);
                   shortcutsModalHandler(true);
                 }}
               >
@@ -67,3 +69,14 @@ export const FAQ = () => {
     </>
   );
 };
+
+const routesLIst: any = [
+  {
+    path: '/',
+    children: [
+      {
+        element: <HelpIcon />,
+      },
+    ],
+  },
+];

packages/app/src/components/shortcuts-modal/config.ts

@@ -1,21 +1,21 @@
 export const macKeyboardShortcuts = {
-  Undo: 'cmd + Z',
+  Undo: '⌘ + Z',
-  Redo: 'cmd + shift + Z',
+  Redo: '⌘ + ⇧ + Z',
-  Bold: 'cmd + B',
+  Bold: '⌘ + B',
-  Italic: 'cmd + I',
+  Italic: '⌘ + I',
-  Underline: 'cmd + U',
+  Underline: '⌘ + U',
-  Strikethrough: 'cmd + Shit + S',
+  Strikethrough: '⌘ + ⇧ + S',
-  'Inline code': ' cmd + E',
+  'Inline code': ' ⌘ + E',
-  Link: 'cmd + K',
+  Link: '⌘ + K',
-  'Body text': 'cmd + Option + 0',
+  'Body text': '⌘ + ⌥ + 0',
-  'Heading 1': 'cmd + Option + 1',
+  'Heading 1': '⌘ + ⌥ + 1',
-  'Heading 2': 'cmd + Option + 2',
+  'Heading 2': '⌘ + ⌥ + 2',
-  'Heading 3': 'cmd + Option + 3',
+  'Heading 3': '⌘ + ⌥ + 3',
-  'Heading 4': 'cmd + Option + 4',
+  'Heading 4': '⌘ + ⌥ + 4',
-  'Heading 5': 'cmd + Option + 5',
+  'Heading 5': '⌘ + ⌥ + 5',
-  'Heading 6': 'cmd + Option + 6',
+  'Heading 6': '⌘ + ⌥ + 6',
   'Increase indent': 'Tab',
-  'Reduce indent': 'Shift + Tab',
+  'Reduce indent': '⇧ + Tab',
 };
 
 export const macMarkdownShortcuts = {
@@ -24,12 +24,12 @@ export const macMarkdownShortcuts = {
   Underline: '~Text~',
   Strikethrough: '~~Text~~',
   'Inline code': '`Code`',
-  'Heading 1': '# + Space',
+  'Heading 1': '# Space',
-  'Heading 2': '## + Space',
+  'Heading 2': '## Space',
-  'Heading 3': '### + Space',
+  'Heading 3': '### Space',
-  'Heading 4': '#### + Space',
+  'Heading 4': '#### Space',
-  'Heading 5': '##### + Space',
+  'Heading 5': '##### Space',
-  'Heading 6': '###### + Space',
+  'Heading 6': '###### Space',
 };
 
 export const windowsKeyboardShortcuts = {
@@ -38,7 +38,7 @@ export const windowsKeyboardShortcuts = {
   Bold: 'Ctrl + B',
   Italic: 'Ctrl + I',
   Underline: 'Ctrl + U',
-  Strikethrough: 'Ctrl + Shit + S',
+  Strikethrough: 'Ctrl + ⇧ + S',
   'Inline code': ' Ctrl + E',
   Link: 'Ctrl + K',
   'Body text': 'Ctrl + Shift + 0',
@@ -52,15 +52,15 @@ export const windowsKeyboardShortcuts = {
   'Reduce indent': 'Shift + Tab',
 };
 export const winMarkdownShortcuts = {
-  Bold: '**Text** + Space',
+  Bold: '**Text** Space',
-  Italic: '*Text* + Space',
+  Italic: '*Text* Space',
-  Underline: '~Text~ + Space',
+  Underline: '~Text~ Space',
-  Strikethrough: '~~Text~~ + Space',
+  Strikethrough: '~~Text~~ Space',
-  'Inline code': '`Code` + Space',
+  'Inline code': '`Code` Space',
-  'Heading 1': '# + Space',
+  'Heading 1': '# Space',
-  'Heading 2': '## + Space',
+  'Heading 2': '## Space',
-  'Heading 3': '### + Space',
+  'Heading 3': '### Space',
-  'Heading 4': '#### + Space',
+  'Heading 4': '#### Space',
-  'Heading 5': '##### + Space',
+  'Heading 5': '##### Space',
-  'Heading 6': '###### + Space',
+  'Heading 6': '###### Space',
 };

packages/app/src/components/shortcuts-modal/index.tsx

@@ -51,7 +51,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
             </CloseButton>
           </StyledModalHeader>
           <StyledSubTitle style={{ marginTop: 0 }}>
-            Keyboard shortcuts
+            Keyboard Shortcuts
           </StyledSubTitle>
           {Object.entries(keyboardShortcuts).map(([title, shortcuts]) => {
             return (
@@ -61,7 +61,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
               </StyledListItem>
             );
           })}
-          <StyledSubTitle>Markdown shortcuts</StyledSubTitle>
+          <StyledSubTitle>Markdown Syntax</StyledSubTitle>
           {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
             return (
               <StyledListItem key={title}>

packages/app/src/components/shortcuts-modal/style.ts

@@ -6,7 +6,6 @@ export const StyledShortcutsModal = styled.div(({ theme }) => ({
   backgroundColor: theme.colors.popoverBackground,
   boxShadow: theme.shadow.popover,
   color: theme.colors.popoverColor,
-  padding: '8px 16px',
   overflow: 'auto',
   boxRadius: '10px',
   position: 'fixed',
@@ -36,12 +35,21 @@ export const StyledSubTitle = styled.div(({ theme }) => ({
   height: '36px',
   lineHeight: '36px',
   marginTop: '28px',
+  padding: '0 16px',
 }));
 export const StyledModalHeader = styled.div(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   height: '36px',
+  width: '100%',
+  padding: '8px 16px 0 16px',
+  position: 'sticky',
+  left: '0',
+  top: '0',
+  background: 'var(--affine-popover-background)',
+
+  transition: 'background-color 0.5s',
 }));
 
 export const StyledListItem = styled.div(({ theme }) => ({
@@ -50,6 +58,7 @@ export const StyledListItem = styled.div(({ theme }) => ({
   justifyContent: 'space-between',
   alignItems: 'center',
   fontSize: theme.font.xs,
+  padding: '0 16px',
 }));
 
 export const CloseButton = styled('div')(({ theme }) => {

packages/app/src/pages/index.tsx

@@ -1,29 +1,27 @@
 import type { NextPage } from 'next';
 import dynamic from 'next/dynamic';
-import { styled, useTheme } from '@/styles';
+import { styled } from '@/styles';
 import { Header } from '@/components/Header';
 import { FAQ } from '@/components/faq';
 import '@/components/simple-counter';
 
 const StyledEditorContainer = styled('div')(({ theme }) => {
   return {
-    flexGrow: 1,
+    height: 'calc(100vh - 60px)',
-    paddingTop: '78px',
   };
 });
 
 const StyledPage = styled('div')(({ theme }) => {
   return {
     height: '100vh',
-    display: 'flex',
+    paddingTop: '60px',
-    flexDirection: 'column',
     backgroundColor: theme.colors.pageBackground,
     transition: 'background-color .5s',
   };
 });
 
 const DynamicEditor = dynamic(() => import('../components/editor'), {
-  loading: () => <div>Loading...</div>,
+  loading: () => <div style={{ textAlign: 'center' }}>Loading...</div>,
   ssr: false,
 });
 

packages/app/src/pages/temporary.css

@@ -5,3 +5,19 @@ debug-menu {
   background-color: #fff;
 }
 
+.affine-editor-container {
+  background: var(--affine-page-background);
+  transition: background-color 0.5s;
+  overflow-y: auto !important;
+  overflow-x: hidden;
+}
+
+.affine-default-page-block-title-container {
+  margin-top: 78px;
+}
+.affine-default-page-block-container {
+  min-height: calc(100% - 78px);
+  height: auto !important;
+  overflow: hidden;
+  padding-bottom: 150px !important;
+}