Merge branch 'feat/dev' into feat/quick-search

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

@@ -1,4 +1,4 @@
-import { Modal, ModalCloseButton } from '@/ui/modal';
+import { Modal, ModalCloseButton, ModalWrapper } from '@/ui/modal';
 import {
   LogoIcon,
   DocIcon,
@@ -11,7 +11,6 @@ import {
 } from './icons';
 import logo from './affine-text-logo.png';
 import {
-  StyledModalWrapper,
   StyledBigLink,
   StyledSmallLink,
   StyledSubTitle,
@@ -23,6 +22,7 @@ import {
   StyledModalHeaderLeft,
   StyledModalFooter,
 } from './style';
+import bg from '@/components/contact-modal/bg.png';
 
 const linkList = [
   {
@@ -74,7 +74,11 @@ type TransitionsModalProps = {
 export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
   return (
     <Modal open={open} onClose={onClose}>
-      <StyledModalWrapper data-testid="contact-us-modal-content">
+      <ModalWrapper
+        width={860}
+        height={540}
+        style={{ backgroundImage: `url(${bg.src})` }}
+      >
         <StyledModalHeader>
           <StyledModalHeaderLeft>
             <StyledLogo src={logo.src} alt="" />
@@ -83,8 +87,6 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
           <ModalCloseButton
             top={6}
             right={6}
-            size={[30, 30]}
-            iconSize={[20, 20]}
             onClick={() => {
               onClose();
             }}
@@ -134,7 +136,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
           </p>
           <p>Copyright &copy; 2022 Toeverything</p>
         </StyledModalFooter>
-      </StyledModalWrapper>
+      </ModalWrapper>
     </Modal>
   );
 };

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

@@ -1,21 +1,4 @@
 import { absoluteCenter, displayFlex, styled } from '@/styles';
-import bg from './bg.png';
-
-export const StyledModalWrapper = styled('div')(({ theme }) => {
-  return {
-    width: '860px',
-    height: '540px',
-    backgroundColor: theme.colors.popoverBackground,
-    backgroundImage: `url(${bg.src})`,
-    borderRadius: '20px',
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    margin: 'auto',
-  };
-});
 
 export const StyledBigLink = styled('a')(({ theme }) => {
   return {

packages/app/src/components/editor.tsx

@@ -12,7 +12,7 @@ export const Editor = () => {
 
       editorContainer.current?.appendChild(editor);
 
-      initDefaultContent(editor);
+      // initDefaultContent(editor);
     }
   }, [editor]);
 

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

@@ -1,12 +1,8 @@
 import React, { useState } from 'react';
-import Modal, { ModalCloseButton } from '@/ui/modal';
+import Modal, { ModalCloseButton, ModalWrapper } from '@/ui/modal';
 import getIsMobile from '@/utils/get-is-mobile';
-import {
-  ModalWrapper,
-  StyledButton,
-  StyledContent,
-  StyledTitle,
-} from './styles';
+import { StyledButton, StyledContent, StyledTitle } from './styles';
+import bg from './bg.png';
 export const MobileModal = () => {
   const [showModal, setShowModal] = useState(getIsMobile());
   return (
@@ -16,7 +12,11 @@ export const MobileModal = () => {
         setShowModal(false);
       }}
     >
-      <ModalWrapper>
+      <ModalWrapper
+        width={348}
+        height={388}
+        style={{ backgroundImage: `url(${bg.src})` }}
+      >
         <ModalCloseButton
           size={[30, 30]}
           iconSize={[20, 20]}

packages/app/src/components/mobile-modal/styles.ts

@@ -1,16 +1,4 @@
 import { displayFlex, styled } from '@/styles';
-import bg from './bg.png';
-
-export const ModalWrapper = styled.div(({ theme }) => {
-  return {
-    width: '348px',
-    height: '388px',
-    background: theme.colors.popoverBackground,
-    borderRadius: '28px',
-    position: 'relative',
-    backgroundImage: `url(${bg.src})`,
-  };
-});
 
 export const StyledTitle = styled.div(({ theme }) => {
   return {

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Router from 'next/router';
+import { useRouter } from 'next/router';
 import {
   StyledArrowButton,
   StyledListItem,
@@ -8,11 +8,13 @@ import {
   StyledSubListItem,
 } from './style';
 import { Arrow } from './icons';
-import { useModal } from '@/providers/global-modal-provider';
-
+import Link from 'next/link';
+import { useEditor } from '@/providers/editor-provider';
 export const WorkSpaceSliderBar = () => {
   const { triggerQuickSearchModal } = useModal();
   const [show, setShow] = useState(false);
+  const { createPage } = useEditor();
+  const router = useRouter();
   return (
     <>
       <StyledSliderBar show={show}>
@@ -25,11 +27,19 @@ export const WorkSpaceSliderBar = () => {
         </StyledListItem>
         <StyledListItem
           onClick={() => {
-            Router.push('/all-page');
+            router.push({
+              pathname: '/',
+              query: {
+                pageId: new Date().getTime().toString(),
+              },
+            });
           }}
         >
-          All pages
+          Back to Doc
         </StyledListItem>
+        <Link href={{ pathname: '/all-page', query: { name: 'test' } }}>
+          <StyledListItem>All pages</StyledListItem>
+        </Link>
         <StyledListItem>Favourites</StyledListItem>
         <StyledSubListItem>
           document 1, this is a paper icondocument 1
@@ -39,7 +49,13 @@ export const WorkSpaceSliderBar = () => {
         <StyledListItem>Import</StyledListItem>
         <StyledListItem>Bin</StyledListItem>
 
-        <StyledNewPageButton>New Page</StyledNewPageButton>
+        <StyledNewPageButton
+          onClick={() => {
+            createPage();
+          }}
+        >
+          New Page
+        </StyledNewPageButton>
       </StyledSliderBar>
       <StyledArrowButton
         isShow={show}