milestone: publish alpha version (#637)

- document folder
- full-text search
- blob storage
- basic edgeless support

Co-authored-by: tzhangchi <terry.zhangchi@outlook.com>
Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com>
Co-authored-by: DiamondThree <diamond.shx@gmail.com>
Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Yifeng Wang <doodlewind@toeverything.info>
Co-authored-by: Himself65 <himself65@outlook.com>
Co-authored-by: lawvs <18554747+lawvs@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>

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

@@ -71,7 +71,7 @@ export const GithubIcon = () => {
     </svg>
   );
 };
-export const DiscordIcon = (props: any) => {
+export const DiscordIcon = () => {
   return (
     <svg
       width="22"

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

@@ -1,5 +1,4 @@
-import Modal from '@/ui/modal';
-import CloseIcon from '@mui/icons-material/Close';
+import { Modal, ModalCloseButton, ModalWrapper } from '@/ui/modal';
 import {
   LogoIcon,
   DocIcon,
@@ -12,7 +11,6 @@ import {
 } from './icons';
 import logo from './affine-text-logo.png';
 import {
-  StyledModalWrapper,
   StyledBigLink,
   StyledSmallLink,
   StyledSubTitle,
@@ -22,9 +20,9 @@ import {
   StyledLogo,
   StyledModalHeader,
   StyledModalHeaderLeft,
-  StyledCloseButton,
   StyledModalFooter,
 } from './style';
+import bg from '@/components/contact-modal/bg.png';
 
 const linkList = [
   {
@@ -62,9 +60,9 @@ const rightLinkList = [
   },
   {
     icon: <DocIcon />,
-    title: 'Check Our Docs',
-    subTitle: 'docs.AFFiNE.pro',
-    link: 'https://docs.affine.pro',
+    title: 'AFFiNE Community',
+    subTitle: 'community.affine.pro',
+    link: 'https://community.affine.pro',
   },
 ];
 
@@ -75,20 +73,24 @@ type TransitionsModalProps = {
 
 export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
   return (
-    <Modal open={open} onClose={onClose}>
-      <StyledModalWrapper data-testid="contact-us-modal-content">
+    <Modal open={open} onClose={onClose} data-testid="contact-us-modal-content">
+      <ModalWrapper
+        width={860}
+        height={540}
+        style={{ backgroundImage: `url(${bg.src})` }}
+      >
         <StyledModalHeader>
           <StyledModalHeaderLeft>
             <StyledLogo src={logo.src} alt="" />
             <span>Alpha</span>
           </StyledModalHeaderLeft>
-          <StyledCloseButton
+          <ModalCloseButton
+            top={6}
+            right={6}
             onClick={() => {
               onClose();
             }}
-          >
-            <CloseIcon width={12} height={12} />
-          </StyledCloseButton>
+          />
         </StyledModalHeader>
 
         <StyledContent>
@@ -107,10 +109,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
             })}
           </StyledLeftContainer>
           <StyledRightContainer>
-            <StyledSubTitle>
-              Get in touch! <br />
-              Join our community.
-            </StyledSubTitle>
+            <StyledSubTitle>Get in touch!</StyledSubTitle>
             {linkList.map(({ icon, title, link }) => {
               return (
                 <StyledSmallLink key={title} href={link} target="_blank">
@@ -134,7 +133,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,28 +1,11 @@
 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 {
-    width: '320px',
+    width: '334px',
     height: '100px',
     marginBottom: '48px',
-    paddingLeft: '114px',
+    paddingLeft: '90px',
     fontSize: '24px',
     lineHeight: '36px',
     fontWeight: '600',
@@ -46,7 +29,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
       height: '50px',
       marginRight: '40px',
       color: theme.colors.primaryColor,
-      ...absoluteCenter({ vertical: true, position: { left: '32px' } }),
+      ...absoluteCenter({ vertical: true, position: { left: '20px' } }),
     },
     p: {
       width: '100%',
@@ -102,6 +85,7 @@ export const StyledSmallLink = styled('a')(({ theme }) => {
 });
 export const StyledSubTitle = styled('div')(({ theme }) => {
   return {
+    width: '190px',
     fontSize: '18px',
     fontWeight: '600',
     color: theme.colors.textColor,
@@ -136,7 +120,7 @@ export const StyledLogo = styled('img')({
   width: 'auto',
 });
 
-export const StyledModalHeader = styled('div')(({ theme }) => {
+export const StyledModalHeader = styled('div')(() => {
   return {
     height: '20px',
     marginTop: '36px',
@@ -162,40 +146,6 @@ export const StyledModalHeaderLeft = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledCloseButton = styled('div')(({ theme }) => {
-  return {
-    width: '60px',
-    height: '60px',
-    color: theme.colors.iconColor,
-    cursor: 'pointer',
-    ...displayFlex('center', 'center'),
-    position: 'absolute',
-    right: '0',
-    top: '0',
-
-    // TODO: we need to add @emotion/babel-plugin
-    '::after': {
-      content: '""',
-      width: '30px',
-      height: '30px',
-      borderRadius: '6px',
-      ...absoluteCenter({ horizontal: true, vertical: true }),
-    },
-    ':hover': {
-      color: theme.colors.primaryColor,
-      '::after': {
-        background: theme.colors.hoverBackground,
-      },
-    },
-    svg: {
-      width: '20px',
-      height: '20px',
-      position: 'relative',
-      zIndex: 1,
-    },
-  };
-});
-
 export const StyledModalFooter = styled('div')(({ theme }) => {
   return {
     fontSize: '14px',