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/mobile-modal/index.tsx

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

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

@@ -1,38 +1,6 @@
 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 StyledCloseButton = styled.div(({ theme }) => {
-  return {
-    width: '66px',
-    height: '66px',
-    color: theme.colors.iconColor,
-    cursor: 'pointer',
-    ...displayFlex('center', 'center'),
-    position: 'absolute',
-    right: '0',
-    top: '0',
-
-    svg: {
-      width: '15px',
-      height: '15px',
-      position: 'relative',
-      zIndex: 1,
-    },
-  };
-});
-
-export const StyledTitle = styled.div(({ theme }) => {
+export const StyledTitle = styled.div(() => {
   return {
     ...displayFlex('center', 'center'),
     fontSize: '20px',
@@ -42,7 +10,7 @@ export const StyledTitle = styled.div(({ theme }) => {
   };
 });
 
-export const StyledContent = styled.div(({ theme }) => {
+export const StyledContent = styled.div(() => {
   return {
     padding: '0 40px',
     marginTop: '32px',