From 454335d6778e462eccf5b0f23b2140db39ecf81d Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Fri, 21 Oct 2022 17:46:45 +0800
Subject: [PATCH] feat: modify styles

---
 packages/app/src/components/Header/index.tsx  | 32 ++++---
 packages/app/src/components/loading/index.tsx | 14 +++
 packages/app/src/components/loading/styled.ts | 93 +++++++++++++++++++
 .../src/components/shortcuts-modal/config.ts  | 12 +--
 packages/app/src/pages/affine.tsx             | 10 +-
 packages/app/src/pages/index.tsx              | 25 ++++-
 packages/app/src/styles/theme.ts              |  2 +-
 7 files changed, 162 insertions(+), 26 deletions(-)
 create mode 100644 packages/app/src/components/loading/index.tsx
 create mode 100644 packages/app/src/components/loading/styled.ts

diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx
index 037362061d..fb4df965db 100644
--- a/packages/app/src/components/Header/index.tsx
+++ b/packages/app/src/components/Header/index.tsx
@@ -73,22 +73,24 @@ export const Header = () => {
         >
           <LogoIcon />
         </StyledLogo>
-        <StyledTitle
-          onMouseEnter={() => {
-            setIsHover(true);
-          }}
-          onMouseLeave={() => {
-            setIsHover(false);
-          }}
-        >
-          <EditorModeSwitch
-            isHover={isHover}
-            style={{
-              marginRight: '12px',
+        {title ? (
+          <StyledTitle
+            onMouseEnter={() => {
+              setIsHover(true);
             }}
-          />
-          <StyledTitleWrapper>{title}</StyledTitleWrapper>
-        </StyledTitle>
+            onMouseLeave={() => {
+              setIsHover(false);
+            }}
+          >
+            <EditorModeSwitch
+              isHover={isHover}
+              style={{
+                marginRight: '12px',
+              }}
+            />
+            <StyledTitleWrapper>{title}</StyledTitleWrapper>
+          </StyledTitle>
+        ) : null}
 
         <StyledHeaderRightSide>
           <ThemeModeSwitch />
diff --git a/packages/app/src/components/loading/index.tsx b/packages/app/src/components/loading/index.tsx
new file mode 100644
index 0000000000..a04cffefb5
--- /dev/null
+++ b/packages/app/src/components/loading/index.tsx
@@ -0,0 +1,14 @@
+import { StyledLoading, StyledLoadingItem } from './styled';
+
+export const Loading = () => {
+  return (
+    <StyledLoading>
+      <StyledLoadingItem />
+      <StyledLoadingItem />
+      <StyledLoadingItem />
+      <StyledLoadingItem />
+    </StyledLoading>
+  );
+};
+
+export default Loading;
diff --git a/packages/app/src/components/loading/styled.ts b/packages/app/src/components/loading/styled.ts
new file mode 100644
index 0000000000..43c7254d22
--- /dev/null
+++ b/packages/app/src/components/loading/styled.ts
@@ -0,0 +1,93 @@
+import { styled } from '@/styles';
+
+const loadingItemSize = '40px';
+export const StyledLoading = styled.div`
+  position: relative;
+  left: 50%;
+  transform: rotateX(55deg) rotateZ(-45deg)
+    translate(calc(${loadingItemSize} * -2), 0);
+  margin-bottom: calc(3 * ${loadingItemSize});
+
+  @keyframes slide {
+    0% {
+      transform: translate(var(--sx), var(--sy));
+    }
+    65% {
+      transform: translate(var(--ex), var(--sy));
+    }
+    95%,
+    100% {
+      transform: translate(var(--ex), var(--ey));
+    }
+  }
+  @keyframes load {
+    20% {
+      content: '.';
+    }
+    40% {
+      content: '..';
+    }
+    80%,
+    100% {
+      content: '...';
+    }
+  }
+`;
+
+export const StyledLoadingItem = styled.div`
+  position: absolute;
+  width: ${loadingItemSize};
+  height: ${loadingItemSize};
+  background: #9dacf9;
+  animation: slide 0.9s cubic-bezier(0.65, 0.53, 0.59, 0.93) infinite;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  &::before {
+    background: #5260b9;
+    transform: skew(0deg, -45deg);
+    right: 100%;
+    top: 50%;
+  }
+
+  &::after {
+    background: #6880ff;
+    transform: skew(-45deg, 0deg);
+    top: 100%;
+    right: 50%;
+  }
+
+  &:nth-child(1) {
+    --sx: 50%;
+    --sy: -50%;
+    --ex: 150%;
+    --ey: 50%;
+  }
+
+  &:nth-child(2) {
+    --sx: -50%;
+    --sy: -50%;
+    --ex: 50%;
+    --ey: -50%;
+  }
+
+  &:nth-child(3) {
+    --sx: 150%;
+    --sy: 50%;
+    --ex: 50%;
+    --ey: 50%;
+  }
+
+  &:nth-child(4) {
+    --sx: 50%;
+    --sy: 50%;
+    --ex: -50%;
+    --ey: -50%;
+  }
+`;
diff --git a/packages/app/src/components/shortcuts-modal/config.ts b/packages/app/src/components/shortcuts-modal/config.ts
index 7a868e3d75..948a8a54f3 100644
--- a/packages/app/src/components/shortcuts-modal/config.ts
+++ b/packages/app/src/components/shortcuts-modal/config.ts
@@ -19,11 +19,11 @@ export const macKeyboardShortcuts = {
 };
 
 export const macMarkdownShortcuts = {
-  Bold: '**Text**',
-  Italic: '*Text*',
-  Underline: '~Text~',
-  Strikethrough: '~~Text~~',
-  'Inline code': '`Code`',
+  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',
@@ -38,7 +38,7 @@ export const windowsKeyboardShortcuts = {
   Bold: 'Ctrl + B',
   Italic: 'Ctrl + I',
   Underline: 'Ctrl + U',
-  Strikethrough: 'Ctrl + ⇧ + S',
+  Strikethrough: 'Ctrl + Shift + S',
   'Inline code': ' Ctrl + E',
   Link: 'Ctrl + K',
   'Body text': 'Ctrl + Shift + 0',
diff --git a/packages/app/src/pages/affine.tsx b/packages/app/src/pages/affine.tsx
index 5596e2778e..b822906d2a 100644
--- a/packages/app/src/pages/affine.tsx
+++ b/packages/app/src/pages/affine.tsx
@@ -1,5 +1,6 @@
 import { displayFlex, styled } from '@/styles';
 import { ThemeModeSwitch } from '@/components/theme-mode-switch';
+import { Loading } from '@/components/loading';
 
 export const StyledHeader = styled('div')({
   height: '60px',
@@ -12,9 +13,12 @@ export const StyledHeader = styled('div')({
 
 const Affine = () => {
   return (
-    <StyledHeader>
-      <ThemeModeSwitch></ThemeModeSwitch>
-    </StyledHeader>
+    <>
+      <StyledHeader>
+        <ThemeModeSwitch></ThemeModeSwitch>
+      </StyledHeader>
+      <Loading />
+    </>
   );
 };
 
diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
index 628b9f0334..741282b51a 100644
--- a/packages/app/src/pages/index.tsx
+++ b/packages/app/src/pages/index.tsx
@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic';
 import { styled } from '@/styles';
 import { Header } from '@/components/Header';
 import { FAQ } from '@/components/faq';
+import Loading from '@/components/loading';
 import EdgelessToolbar from '@/components/edgeless-toolbar';
 import '@/components/simple-counter';
 
@@ -21,8 +22,30 @@ const StyledPage = styled('div')(({ theme }) => {
   };
 });
 
+const StyledLoadingContainer = styled('div')(({ theme }) => {
+  return {
+    height: '100vh',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: theme.colors.primaryColor,
+    h1: {
+      fontSize: '2em',
+      marginTop: '150px',
+      fontWeight: '600',
+    },
+  };
+});
+
 const DynamicEditor = dynamic(() => import('../components/editor'), {
-  loading: () => <div style={{ textAlign: 'center' }}>Loading...</div>,
+  loading: () => (
+    <StyledLoadingContainer>
+      <div className="wrapper">
+        <Loading />
+        <h1>Loading...</h1>
+      </div>
+    </StyledLoadingContainer>
+  ),
   ssr: false,
 });
 
diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts
index 9f91b0e533..c24b835891 100644
--- a/packages/app/src/styles/theme.ts
+++ b/packages/app/src/styles/theme.ts
@@ -44,7 +44,7 @@ export const lightTheme: AffineTheme = {
       '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);',
   },
   space: {
-    paragraph: '18px',
+    paragraph: '8px',
   },
 };