feat: add contact modal

2026-02-04 08:38:34 +00:00 · 2022-10-19 11:51:01 +08:00
parent 90dba82a59
commit 0a4c262b50
13 changed files with 547 additions and 69 deletions
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -19,6 +19,7 @@
    "@emotion/styled": "^11.10.4",
    "@mui/base": "^5.0.0-alpha.87",
    "@mui/material": "^5.8.6",
+    "@mui/icons-material": "^5.10.9",
    "css-spring": "^4.1.0",
    "lit": "^2.3.1",
    "next": "12.3.1",
--- a/packages/app/src/components/Header/index.tsx
+++ b/packages/app/src/components/Header/index.tsx
@@ -14,6 +14,7 @@ import { useEditor } from '@/components/editor-provider';
 import EditorModeSwitch from '@/components/editor-mode-switch';
 import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons';
 import ThemeModeSwitch from '@/components/theme-mode-switch';
+import ContactModal from '@/components/contact-modal';

 const PopoverContent = () => {
  const { editor, mode, setMode } = useEditor();
@@ -50,6 +51,7 @@ const PopoverContent = () => {
 export const Header = () => {
  const [title, setTitle] = useState('');
  const [isHover, setIsHover] = useState(false);
+  const [showContactModal, setShowContactModal] = useState(false);

  const { editor } = useEditor();

@@ -63,38 +65,48 @@ export const Header = () => {
  }, [editor]);

  return (
-    <StyledHeader>
-      <StyledLogo>
-        <LogoIcon onClick={() => {}} />
-      </StyledLogo>
-      <StyledTitle
-        onMouseEnter={() => {
-          setIsHover(true);
-        }}
-        onMouseLeave={() => {
-          setIsHover(false);
-        }}
-      >
-        <EditorModeSwitch
-          isHover={isHover}
-          style={{
-            marginRight: '12px',
+    <>
+      <ContactModal
+        open={showContactModal}
+        onClose={() => setShowContactModal(false)}
+      />
+      <StyledHeader>
+        <StyledLogo>
+          <LogoIcon
+            onClick={() => {
+              setShowContactModal(true);
+            }}
+          />
+        </StyledLogo>
+        <StyledTitle
+          onMouseEnter={() => {
+            setIsHover(true);
+          }}
+          onMouseLeave={() => {
+            setIsHover(false);
          }}
-        />
-        <StyledTitleWrapper>{title}</StyledTitleWrapper>
-      </StyledTitle>
-
-      <StyledHeaderRightSide>
-        <ThemeModeSwitch />
-        <Popover
-          popoverContent={<PopoverContent />}
-          style={{ marginLeft: '20px' }}
        >
-          <IconButton>
-            <MoreIcon />
-          </IconButton>
-        </Popover>
-      </StyledHeaderRightSide>
-    </StyledHeader>
+          <EditorModeSwitch
+            isHover={isHover}
+            style={{
+              marginRight: '12px',
+            }}
+          />
+          <StyledTitleWrapper>{title}</StyledTitleWrapper>
+        </StyledTitle>
+
+        <StyledHeaderRightSide>
+          <ThemeModeSwitch />
+          <Popover
+            popoverContent={<PopoverContent />}
+            style={{ marginLeft: '20px' }}
+          >
+            <IconButton>
+              <MoreIcon />
+            </IconButton>
+          </Popover>
+        </StyledHeaderRightSide>
+      </StyledHeader>
+    </>
  );
 };
--- a/packages/app/src/components/contact-modal/affine-text-logo.png
+++ b/packages/app/src/components/contact-modal/affine-text-logo.png
--- a/packages/app/src/components/contact-modal/icons.tsx
+++ b/packages/app/src/components/contact-modal/icons.tsx
@@ -0,0 +1,55 @@
+// export const CloseIcon = () => {
+//   return (
+//     <svg
+//       width="14"
+//       height="14"
+//       viewBox="0 0 14 14"
+//       fill="currentColor"
+//       xmlns="http://www.w3.org/2000/svg"
+//     >
+//       <path d="M7.94 7.00014L13.4667 1.47348C13.5759 1.34594 13.633 1.18189 13.6265 1.01411C13.62 0.846324 13.5504 0.687165 13.4317 0.568435C13.313 0.449706 13.1538 0.38015 12.986 0.37367C12.8183 0.367189 12.6542 0.42426 12.5267 0.533477L7 6.06014L1.47334 0.526811C1.3478 0.401275 1.17754 0.33075 1 0.33075C0.822468 0.33075 0.652205 0.401275 0.526669 0.526811C0.401133 0.652346 0.330608 0.82261 0.330608 1.00014C0.330608 1.17768 0.401133 1.34794 0.526669 1.47348L6.06 7.00014L0.526669 12.5268C0.456881 12.5866 0.400201 12.6601 0.360186 12.7428C0.32017 12.8255 0.297683 12.9156 0.294137 13.0074C0.290591 13.0993 0.306061 13.1908 0.339577 13.2764C0.373094 13.3619 0.423932 13.4396 0.488902 13.5046C0.553872 13.5695 0.63157 13.6204 0.71712 13.6539C0.80267 13.6874 0.894225 13.7029 0.986038 13.6993C1.07785 13.6958 1.16794 13.6733 1.25065 13.6333C1.33336 13.5933 1.4069 13.5366 1.46667 13.4668L7 7.94014L12.5267 13.4668C12.6542 13.576 12.8183 13.6331 12.986 13.6266C13.1538 13.6201 13.313 13.5506 13.4317 13.4319C13.5504 13.3131 13.62 13.154 13.6265 12.9862C13.633 12.8184 13.5759 12.6543 13.4667 12.5268L7.94 7.00014Z" />
+//     </svg>
+//   );
+// };
+
+export const LogoIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        d="M10.552 2 4 21h3.838l4.168-13.14L16.176 21H20L13.447 2h-2.895Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const DiscordIcon = (props: any) => {
+  return (
+    <svg
+      {...props}
+      width="71"
+      height="55"
+      viewBox="0 0 71 55"
+      fill="currentcolor"
+    >
+      <g clipPath="url(#clip0)">
+        <path
+          d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"
+          fill="currentcolor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect width="71" height="55" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
--- a/packages/app/src/components/contact-modal/index.tsx
+++ b/packages/app/src/components/contact-modal/index.tsx
@@ -0,0 +1,141 @@
+import { createPortal } from 'react-dom';
+import Fade from '@mui/material/Fade';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import RedditIcon from '@mui/icons-material/Reddit';
+import TelegramIcon from '@mui/icons-material/Telegram';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import CloseIcon from '@mui/icons-material/Close';
+
+import { LogoIcon, DiscordIcon } from './icons';
+import logo from './affine-text-logo.png';
+import {
+  StyledModalContainer,
+  StyledModalWrapper,
+  StyledYellowBall,
+  StyledBlueBall,
+  StyledBigLink,
+  StyledSmallLink,
+  StyledSubTitle,
+  StyledLeftContainer,
+  StyledRightContainer,
+  StyledContent,
+  StyledBackdrop,
+  StyledLogo,
+  StyledModalHeader,
+  StyledModalHeaderLeft,
+  CloseButton,
+  StyledModalFooter,
+} from './style';
+
+const linkList = [
+  {
+    icon: <GitHubIcon />,
+    title: 'Github',
+    link: 'https://github.com/toeverything/AFFiNE',
+  },
+  {
+    icon: <RedditIcon />,
+    title: 'Reddit',
+    link: 'https://www.reddit.com/r/Affine/',
+  },
+  {
+    icon: <TwitterIcon />,
+    title: 'Twitter',
+    link: 'https://twitter.com/AffineOfficial',
+  },
+  {
+    icon: <TelegramIcon />,
+    title: 'Telegram',
+    link: 'https://t.me/affineworkos',
+  },
+  {
+    icon: <DiscordIcon />,
+    title: 'Discord',
+    link: 'https://discord.gg/Arn7TqJBvG',
+  },
+];
+const rightLinkList = [
+  {
+    icon: <LogoIcon />,
+    title: 'Official Website AFFiNE.pro',
+    link: 'https://affine.pro',
+  },
+  {
+    icon: <GitHubIcon />,
+    title: 'Check Our Docs Open Source',
+    link: 'https://github.com/toeverything/AFFiNE',
+  },
+];
+
+type TransitionsModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
+  return createPortal(
+    <Fade in={open}>
+      <StyledModalContainer>
+        <StyledBackdrop onClick={onClose} />
+        <StyledModalWrapper>
+          <StyledYellowBall />
+          <StyledBlueBall />
+
+          <StyledModalHeader>
+            <StyledModalHeaderLeft>
+              <StyledLogo src={logo.src} alt="" />
+              <span>2.0</span>
+              <span>live demo</span>
+            </StyledModalHeaderLeft>
+            <CloseButton
+              onClick={() => {
+                onClose();
+              }}
+            >
+              <CloseIcon />
+            </CloseButton>
+          </StyledModalHeader>
+
+          <StyledContent>
+            <StyledLeftContainer>
+              {rightLinkList.map(({ icon, title, link }) => {
+                return (
+                  <StyledBigLink key={title} href={link} target="_blank">
+                    {icon}
+                    {title}
+                  </StyledBigLink>
+                );
+              })}
+            </StyledLeftContainer>
+            <StyledRightContainer>
+              <StyledSubTitle>
+                Get in touch! <br />
+                Join our community.
+              </StyledSubTitle>
+              {linkList.map(({ icon, title, link }) => {
+                return (
+                  <StyledSmallLink key={title} href={link} target="_blank">
+                    {icon}
+                    {title}
+                  </StyledSmallLink>
+                );
+              })}
+            </StyledRightContainer>
+          </StyledContent>
+
+          <StyledModalFooter>
+            <p>
+              <a href="javascript:;">
+                What is the different from the affine 1.0?
+              </a>
+            </p>
+            <p>Copyright &copy; 2022 Toeverything</p>
+          </StyledModalFooter>
+        </StyledModalWrapper>
+      </StyledModalContainer>
+    </Fade>,
+    document.body
+  );
+};
+
+export default ContactModal;
--- a/packages/app/src/components/contact-modal/style.ts
+++ b/packages/app/src/components/contact-modal/style.ts
@@ -0,0 +1,214 @@
+import { styled } from '@/styles';
+
+export const StyledModalContainer = styled('div')(({ theme }) => {
+  return {
+    width: '100vw',
+    height: '100vh',
+    position: 'fixed',
+    left: '0',
+    top: '0',
+    zIndex: theme.zIndex.modal,
+  };
+});
+
+export const StyledModalWrapper = styled('div')(({ theme }) => {
+  return {
+    width: '1000px',
+    height: '626px',
+    background: ' #FFFFFF',
+    padding: '0 48px',
+    borderRadius: '20px',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    margin: 'auto',
+  };
+});
+
+export const StyledYellowBall = styled('div')`
+  position: absolute;
+  top: 189px;
+  left: 186px;
+  display: block;
+  width: 122px;
+  height: 122px;
+  background-color: #dda82a;
+  opacity: 0.45;
+  filter: blur(78px);
+`;
+export const StyledBlueBall = styled('div')`
+  content: '';
+  position: absolute;
+  top: 332px;
+  left: 296px;
+  display: block;
+  width: 122px;
+  height: 122px;
+  background-color: #4461f2;
+  filter: blur(78px);
+`;
+
+export const StyledBigLink = styled('a')(({ theme }) => {
+  return {
+    width: '335px',
+    height: '110px',
+    marginBottom: '52px',
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '24px',
+    lineHeight: '36px',
+    padding: '0 24px',
+    fontWeight: '600',
+    color: theme.colors.textColor,
+    borderRadius: '10px',
+
+    ':visited': {
+      color: theme.colors.textColor,
+    },
+    ':hover': {
+      color: theme.colors.primaryColor,
+      background: theme.colors.hoverBackground,
+    },
+    ':last-of-type': {
+      marginBottom: 0,
+    },
+    svg: {
+      width: '50px',
+      height: '50px',
+      marginRight: '40px',
+      color: theme.colors.primaryColor,
+    },
+    p: {
+      width: '197px',
+      height: '73px',
+    },
+  };
+});
+export const StyledSmallLink = styled('a')(({ theme }) => {
+  return {
+    width: '214px',
+    height: '37px',
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '18px',
+    fontWeight: '500',
+    paddingLeft: '24px',
+    borderRadius: '5px',
+    color: theme.colors.textColor,
+    ':visited': {
+      color: theme.colors.textColor,
+    },
+    ':hover': {
+      color: theme.colors.primaryColor,
+      background: theme.colors.hoverBackground,
+    },
+    svg: {
+      width: '22px',
+      marginRight: '30px',
+      color: theme.colors.primaryColor,
+    },
+  };
+});
+export const StyledSubTitle = styled('div')({
+  width: '189px',
+  fontSize: '18px',
+  fontWeight: '600',
+  color: '#3A4C5C',
+  marginBottom: '24px',
+});
+
+export const StyledLeftContainer = styled('div')({
+  // height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+});
+export const StyledRightContainer = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'flex-end',
+});
+
+export const StyledContent = styled('div')({
+  height: '276px',
+  width: '100%',
+  padding: '0 160px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  color: '#3A4C5C',
+  marginTop: '100px',
+});
+
+export const StyledBackdrop = styled('div')(({ theme }) => {
+  return { width: '100%', height: '100%', background: 'rgba(58, 76, 92, 0.2)' };
+});
+export const StyledLogo = styled('img')({
+  height: '22px',
+  width: 'auto',
+});
+
+export const StyledModalHeader = styled('div')(({ theme }) => {
+  return {
+    height: '30px',
+    marginTop: '54px',
+    padding: '0 48px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  };
+});
+
+export const StyledModalHeaderLeft = styled('div')(({ theme }) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    color: theme.colors.primaryColor,
+
+    'span:first-of-type': {
+      fontSize: '28px',
+      lineHeight: 1,
+      fontWeight: '600',
+      margin: '0 12px',
+    },
+    'span:last-of-type': {
+      height: '26px',
+      border: `1px solid ${theme.colors.primaryColor}`,
+      borderRadius: '10px',
+      padding: '0 10px',
+      lineHeight: '26px',
+      fontSize: '16px',
+    },
+  };
+});
+
+export const CloseButton = styled('div')(({ theme }) => {
+  return {
+    width: '24px',
+    height: '24px',
+    borderRadius: '5px',
+    color: theme.colors.iconColor,
+    cursor: 'pointer',
+    ':hover': {
+      background: theme.colors.hoverBackground,
+    },
+  };
+});
+
+export const StyledModalFooter = styled('div')(({ theme }) => {
+  return {
+    fontSize: '14px',
+    lineHeight: '20px',
+    textAlign: 'center',
+    color: theme.colors.textColor,
+
+    marginTop: '75px',
+    'p:first-of-type': {
+      color: theme.colors.primaryColor,
+      marginBottom: '10px',
+    },
+  };
+});
--- a/packages/app/src/components/faq/index.tsx
+++ b/packages/app/src/components/faq/index.tsx
@@ -1,21 +1,14 @@
-import React from 'react';
+import { useState } from 'react';
 import { StyledFAQ, StyledIconWrapper, StyledFAQWrapper } from './style';
 import { ContactIcon, HelpIcon, KeyboardIcon } from './icons';
 import Grow from '@mui/material/Grow';
 import { Tooltip } from '../tooltip';
-import { Modal } from '@/components/modal';
+import ContactModal from '@/components/contact-modal';
 const Contact = () => {
-  const [openModal, setOpenModal] = React.useState(false);
+  const [openModal, setOpenModal] = useState(false);
  return (
    <>
-      <Modal
-        open={openModal}
-        onClose={() => {
-          setOpenModal(false);
-        }}
-      >
-        <div>modal content</div>
-      </Modal>
+      <ContactModal open={openModal} onClose={() => setOpenModal(false)} />
      <Tooltip content="Contact with us" placement="left-end">
        <StyledIconWrapper
          onClick={() => {
@@ -29,31 +22,34 @@ const Contact = () => {
  );
 };
 export const FAQ = () => {
-  const [showContent, setShowContent] = React.useState(false);
-  return (
-    <StyledFAQ
-      className=""
-      onMouseEnter={() => {
-        setShowContent(true);
-      }}
-      onMouseLeave={() => {
-        setShowContent(false);
-      }}
-    >
-      <Grow in={showContent}>
-        <StyledFAQWrapper>
-          <Contact />
-          <Tooltip content="Keyboard shorts" placement="left-end">
-            <StyledIconWrapper>
-              <KeyboardIcon />
-            </StyledIconWrapper>
-          </Tooltip>
-        </StyledFAQWrapper>
-      </Grow>
+  const [showContent, setShowContent] = useState(false);

-      <StyledIconWrapper style={{ margin: '0', cursor: 'inherit' }}>
-        <HelpIcon />
-      </StyledIconWrapper>
-    </StyledFAQ>
+  return (
+    <>
+      <StyledFAQ
+        className=""
+        onMouseEnter={() => {
+          setShowContent(true);
+        }}
+        onMouseLeave={() => {
+          setShowContent(false);
+        }}
+      >
+        <Grow in={showContent}>
+          <StyledFAQWrapper>
+            <Contact />
+            <Tooltip content="Keyboard shorts" placement="left-end">
+              <StyledIconWrapper>
+                <KeyboardIcon />
+              </StyledIconWrapper>
+            </Tooltip>
+          </StyledFAQWrapper>
+        </Grow>
+
+        <StyledIconWrapper style={{ margin: '0', cursor: 'inherit' }}>
+          <HelpIcon />
+        </StyledIconWrapper>
+      </StyledFAQ>
+    </>
  );
 };
--- a/packages/app/src/components/shortcuts-modal/icons.tsx
+++ b/packages/app/src/components/shortcuts-modal/icons.tsx
@@ -0,0 +1,13 @@
+export const CloseIcon = () => {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M7.94 7.00014L13.4667 1.47348C13.5759 1.34594 13.633 1.18189 13.6265 1.01411C13.62 0.846324 13.5504 0.687165 13.4317 0.568435C13.313 0.449706 13.1538 0.38015 12.986 0.37367C12.8183 0.367189 12.6542 0.42426 12.5267 0.533477L7 6.06014L1.47334 0.526811C1.3478 0.401275 1.17754 0.33075 1 0.33075C0.822468 0.33075 0.652205 0.401275 0.526669 0.526811C0.401133 0.652346 0.330608 0.82261 0.330608 1.00014C0.330608 1.17768 0.401133 1.34794 0.526669 1.47348L6.06 7.00014L0.526669 12.5268C0.456881 12.5866 0.400201 12.6601 0.360186 12.7428C0.32017 12.8255 0.297683 12.9156 0.294137 13.0074C0.290591 13.0993 0.306061 13.1908 0.339577 13.2764C0.373094 13.3619 0.423932 13.4396 0.488902 13.5046C0.553872 13.5695 0.63157 13.6204 0.71712 13.6539C0.80267 13.6874 0.894225 13.7029 0.986038 13.6993C1.07785 13.6958 1.16794 13.6733 1.25065 13.6333C1.33336 13.5933 1.4069 13.5366 1.46667 13.4668L7 7.94014L12.5267 13.4668C12.6542 13.576 12.8183 13.6331 12.986 13.6266C13.1538 13.6201 13.313 13.5506 13.4317 13.4319C13.5504 13.3131 13.62 13.154 13.6265 12.9862C13.633 12.8184 13.5759 12.6543 13.4667 12.5268L7.94 7.00014Z" />
+    </svg>
+  );
+};
--- a/packages/app/src/components/shortcuts-modal/index.tsx
+++ b/packages/app/src/components/shortcuts-modal/index.tsx
@@ -0,0 +1,19 @@
+import { styled } from '@/styles';
+import Fade from '@mui/material/Fade';
+
+
+const StyledModal = styled('div')(({ theme }) => {
+  return {
+    color: theme.colors.textColor,
+  };
+});
+
+type TransitionsModalProps = {
+  open: boolean;
+  onClose: () => void;
+  children: JSX.Element;
+};
+
+export const ShortcutsModal = (props: TransitionsModalProps) => {
+  return <div>111</div>;
+};
--- a/packages/app/src/components/shortcuts-modal/style.ts
+++ b/packages/app/src/components/shortcuts-modal/style.ts
--- a/packages/app/src/styles/theme.ts
+++ b/packages/app/src/styles/theme.ts
@@ -34,6 +34,10 @@ export const lightTheme: AffineTheme = {
    family: `Avenir Next, ${basicFontFamily}`,
    family2: `Roboto Mono, ${basicFontFamily}`,
  },
+  zIndex: {
+    modal: 1000,
+    popover: 100,
+  },
 };

 export const darkTheme: AffineTheme = {
--- a/packages/app/src/styles/types.ts
+++ b/packages/app/src/styles/types.ts
@@ -42,6 +42,10 @@ export interface AffineTheme {
    family: string;
    family2: string;
  };
+  zIndex: {
+    modal: number;
+    popover: number;
+  };
 }

 export interface AffineThemeCSSVariables {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,7 @@ importers:
      '@emotion/server': ^11.10.0
      '@emotion/styled': ^11.10.4
      '@mui/base': ^5.0.0-alpha.87
+      '@mui/icons-material': ^5.10.9
      '@mui/material': ^5.8.6
      '@types/node': 18.7.18
      '@types/react': 18.0.20
@@ -52,6 +53,7 @@ importers:
      '@emotion/server': 11.10.0_@emotion+css@11.10.0
      '@emotion/styled': 11.10.4_yiaqs725o7pcd7rteavrnhgj4y
      '@mui/base': 5.0.0-alpha.101_7ey2zzynotv32rpkwno45fsx4e
+      '@mui/icons-material': 5.10.9_5fncb4nagb4cvvcnwamw2rozfa
      '@mui/material': 5.10.9_af5ln35zuaotaffazii6n6bke4
      css-spring: 4.1.0
      lit: 2.4.0
@@ -407,6 +409,23 @@ packages:
    resolution: {integrity: sha512-rqoFu4qww6KJBbXYhyRd9YXjwBHa3ylnBPSWbGf1bdfG0AYMKmVzg8zxkWvxAWOp97kvx3M2kNPb0xMIDZiogQ==}
    dev: false

+  /@mui/icons-material/5.10.9_5fncb4nagb4cvvcnwamw2rozfa:
+    resolution: {integrity: sha512-sqClXdEM39WKQJOQ0ZCPTptaZgqwibhj2EFV9N0v7BU1PO8y4OcX/a2wIQHn4fNuDjIZktJIBrmU23h7aqlGgg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.0.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@mui/material': 5.10.9_af5ln35zuaotaffazii6n6bke4
+      '@types/react': 18.0.20
+      react: 18.2.0
+    dev: false
+
  /@mui/material/5.10.9_af5ln35zuaotaffazii6n6bke4:
    resolution: {integrity: sha512-sdOzlgpCmyw48je+E7o9UGGJpgBaF+60FlTRpVpcd/z+LUhnuzzuis891yPI5dPPXLBDL/bO4SsGg51lgNeLBw==}
    engines: {node: '>=12.0.0'}
@@ -1370,7 +1389,7 @@ packages:
      eslint-import-resolver-webpack:
        optional: true
    dependencies:
-      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
+      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
      debug: 3.2.7
      eslint: 8.22.0
      eslint-import-resolver-node: 0.3.6
@@ -1389,7 +1408,7 @@ packages:
      '@typescript-eslint/parser':
        optional: true
    dependencies:
-      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
+      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
      array-includes: 3.1.5
      array.prototype.flat: 1.3.0
      debug: 2.6.9