feat: modify styles

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 />

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;

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%;
+  }
+`;

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',