feat: reset modal

packages/app/public/globals.css

@@ -158,6 +158,9 @@ a,
 a:hover {
   color: var(--affine-link-color);
 }
+a:visited {
+  color: var(--affine-link-visited-color);
+}
 
 input {
   border: none;

packages/app/src/components/Header/index.tsx

@@ -14,7 +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';
+import { useModal } from '@/components/global-modal-provider';
 
 const PopoverContent = () => {
   const { editor, mode, setMode } = useEditor();
@@ -51,8 +51,7 @@ const PopoverContent = () => {
 export const Header = () => {
   const [title, setTitle] = useState('');
   const [isHover, setIsHover] = useState(false);
-  const [showContactModal, setShowContactModal] = useState(false);
+  const { contactModalHandler } = useModal();
-
   const { editor } = useEditor();
 
   useEffect(() => {
@@ -66,15 +65,11 @@ export const Header = () => {
 
   return (
     <>
-      <ContactModal
-        open={showContactModal}
-        onClose={() => setShowContactModal(false)}
-      />
       <StyledHeader>
         <StyledLogo>
           <LogoIcon
             onClick={() => {
-              setShowContactModal(true);
+              contactModalHandler(true);
             }}
           />
         </StyledLogo>

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

@@ -79,7 +79,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
           <StyledModalHeader>
             <StyledModalHeaderLeft>
               <StyledLogo src={logo.src} alt="" />
-              <span>2.0</span>
+              <span>Alpha</span>
               <span>live demo</span>
             </StyledModalHeaderLeft>
             <CloseButton

packages/app/src/components/faq/index.tsx

@@ -8,51 +8,17 @@ import {
 import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './icons';
 import Grow from '@mui/material/Grow';
 import { Tooltip } from '../tooltip';
-import ContactModal from '@/components/contact-modal';
+import { useEditor } from '@/components/editor-provider';
-import ShortcutsModal from '@/components/shortcuts-modal';
+import { useModal } from '@/components/global-modal-provider';
-const Contact = () => {
+import { useTheme } from '@/styles';
-  const [openModal, setOpenModal] = useState(false);
-  return (
-    <>
-      <ContactModal open={openModal} onClose={() => setOpenModal(false)} />
-      <Tooltip content="Contact with us" placement="left-end">
-        <StyledIconWrapper
-          onClick={() => {
-            setOpenModal(true);
-          }}
-        >
-          <ContactIcon />
-        </StyledIconWrapper>
-      </Tooltip>
-    </>
-  );
-};
 
-const Shortcuts = () => {
-  const [openModal, setOpenModal] = useState(false);
-  return (
-    <>
-      <ShortcutsModal
-        open={openModal}
-        onClose={() => {
-          setOpenModal(false);
-        }}
-      />
-
-      <Tooltip content="Keyboard shorts" placement="left-end">
-        <StyledIconWrapper
-          onClick={() => {
-            setOpenModal(true);
-          }}
-        >
-          <KeyboardIcon />
-        </StyledIconWrapper>
-      </Tooltip>
-    </>
-  );
-};
 export const FAQ = () => {
   const [showContent, setShowContent] = useState(false);
+  const { mode } = useTheme();
+  const { mode: editorMode } = useEditor();
+  const { shortcutsModalHandler, contactModalHandler } = useModal();
+  const isEdgelessDark = mode === 'dark' && editorMode === 'edgeless';
+
   return (
     <>
       <StyledFAQ
@@ -66,13 +32,31 @@ export const FAQ = () => {
       >
         <Grow in={showContent}>
           <StyledFAQWrapper>
-            <Contact />
+            <Tooltip content="Contact with us" placement="left-end">
-            <Shortcuts />
+              <StyledIconWrapper
+                isEdgelessDark={isEdgelessDark}
+                onClick={() => {
+                  contactModalHandler(true);
+                }}
+              >
+                <ContactIcon />
+              </StyledIconWrapper>
+            </Tooltip>
+            <Tooltip content="Keyboard shorts" placement="left-end">
+              <StyledIconWrapper
+                isEdgelessDark={isEdgelessDark}
+                onClick={() => {
+                  shortcutsModalHandler(true);
+                }}
+              >
+                <KeyboardIcon />
+              </StyledIconWrapper>
+            </Tooltip>
           </StyledFAQWrapper>
         </Grow>
 
         <div style={{ position: 'relative' }}>
-          <StyledIconWrapper>
+          <StyledIconWrapper isEdgelessDark={isEdgelessDark}>
             <HelpIcon />
           </StyledIconWrapper>
           <StyledTransformIcon in={showContent}>

packages/app/src/components/faq/style.ts

@@ -10,10 +10,6 @@ export const StyledFAQ = styled('div')(({ theme }) => {
     bottom: '30px',
     borderRadius: '50%',
     zIndex: theme.zIndex.popover,
-    ':hover': {
-      backgroundColor: theme.colors.popoverBackground,
-      color: theme.colors.primaryColor,
-    },
   };
 });
 export const StyledTransformIcon = styled.div<{ in: boolean }>(
@@ -36,26 +32,34 @@ export const StyledTransformIcon = styled.div<{ in: boolean }>(
       : theme.colors.pageBackground,
   })
 );
-export const StyledIconWrapper = styled('div')(({ theme }) => {
+export const StyledIconWrapper = styled('div')<{ isEdgelessDark: boolean }>(
+  ({ theme, isEdgelessDark }) => {
     return {
-    color: theme.colors.iconColor,
+      color: isEdgelessDark
+        ? theme.colors.popoverBackground
+        : theme.colors.iconColor,
       marginBottom: '24px',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
       cursor: 'pointer',
-    backgroundColor: theme.colors.pageBackground,
+      backgroundColor: isEdgelessDark
+        ? 'transparent'
+        : theme.colors.pageBackground,
       borderRadius: '50%',
       width: '32px',
       height: '32px',
       transition: 'background-color 0.3s',
       position: 'relative',
       ':hover': {
-      color: theme.colors.primaryColor,
+        color: isEdgelessDark
+          ? theme.colors.iconColor
+          : theme.colors.primaryColor,
         backgroundColor: theme.colors.hoverBackground,
       },
     };
-});
+  }
+);
 
 export const StyledFAQWrapper = styled('div')(({ theme }) => {
   return {

packages/app/src/components/global-modal-provider.tsx

@@ -0,0 +1,53 @@
+import { createContext, useContext, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import ShortcutsModal from './shortcuts-modal';
+import ContactModal from '@/components/contact-modal';
+
+type ModalContextValue = {
+  shortcutsModalHandler: (visible: boolean) => void;
+  contactModalHandler: (visible: boolean) => void;
+};
+type ModalContextProps = PropsWithChildren<{}>;
+
+export const ModalContext = createContext<ModalContextValue>({
+  shortcutsModalHandler: () => {},
+  contactModalHandler: () => {},
+});
+
+export const useModal = () => useContext(ModalContext);
+
+export const ModalProvider = ({
+  children,
+}: PropsWithChildren<ModalContextProps>) => {
+  const [openContactModal, setOpenContactModal] = useState(false);
+  const [openShortcutsModal, setOpenShortcutsModal] = useState(false);
+
+  return (
+    <ModalContext.Provider
+      value={{
+        shortcutsModalHandler: visible => {
+          setOpenShortcutsModal(visible);
+        },
+        contactModalHandler: visible => {
+          setOpenContactModal(visible);
+        },
+      }}
+    >
+      <ContactModal
+        open={openContactModal}
+        onClose={() => {
+          setOpenContactModal(false);
+        }}
+      ></ContactModal>
+      <ShortcutsModal
+        open={openShortcutsModal}
+        onClose={() => {
+          setOpenShortcutsModal(false);
+        }}
+      ></ShortcutsModal>
+      {children}
+    </ModalContext.Provider>
+  );
+};
+
+export default ModalProvider;

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

@@ -50,7 +50,9 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
               <CloseIcon />
             </CloseButton>
           </StyledModalHeader>
-          <StyledSubTitle>Keyboard shortcuts</StyledSubTitle>
+          <StyledSubTitle style={{ marginTop: 0 }}>
+            Keyboard shortcuts
+          </StyledSubTitle>
           {Object.entries(keyboardShortcuts).map(([title, shortcuts]) => {
             return (
               <StyledListItem key={title}>

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

@@ -35,6 +35,7 @@ export const StyledSubTitle = styled.div(({ theme }) => ({
   fontSize: '12px',
   height: '36px',
   lineHeight: '36px',
+  marginTop: '28px',
 }));
 export const StyledModalHeader = styled.div(({ theme }) => ({
   display: 'flex',

packages/app/src/components/tooltip/Tooltip.tsx

@@ -26,11 +26,14 @@ export const placementToContainerDirection: Record<
 };
 
 const useTooltipStyle = (): CSSProperties => {
-  const { theme } = useTheme();
+  const { theme, mode } = useTheme();
   return {
     boxShadow: '1px 1px 4px rgba(0, 0, 0, 0.14)',
     padding: '4px 12px',
-    backgroundColor: theme.colors.primaryColor,
+    backgroundColor:
+      mode === 'dark'
+        ? theme.colors.popoverBackground
+        : theme.colors.primaryColor,
     color: '#fff',
     fontSize: theme.font.xs,
   };

packages/app/src/pages/_app.tsx

@@ -4,6 +4,7 @@ import '../../public/globals.css';
 import '../../public/variable.css';
 import './temporary.css';
 import { EditorProvider } from '@/components/editor-provider';
+import { ModalProvider } from '@/components/global-modal-provider';
 
 const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
   ssr: false,
@@ -12,9 +13,11 @@ const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider>
+      <ModalProvider>
         <EditorProvider>
           <Component {...pageProps} />
         </EditorProvider>
+      </ModalProvider>
     </ThemeProvider>
   );
 }

packages/app/src/pages/_document.tsx

@@ -42,7 +42,12 @@ export default class AppDocument extends Document {
   render() {
     return (
       <Html>
-        <Head />
+        <Head>
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+          />
+        </Head>
         <body>
           <Main />
           <NextScript />

packages/app/src/pages/index.tsx

@@ -34,30 +34,6 @@ const Home: NextPage = () => {
       <StyledEditorContainer>
         <DynamicEditor />
       </StyledEditorContainer>
-      {/*<Button>A button use the theme styles</Button>*/}
-      {/*<simple-counter name="A counter created by web component" />*/}
-      {/*<p>current mode {mode}</p>*/}
-      {/*<button*/}
-      {/*  onClick={() => {*/}
-      {/*    changeMode('light');*/}
-      {/*  }}*/}
-      {/*>*/}
-      {/*  light*/}
-      {/*</button>*/}
-      {/*<button*/}
-      {/*  onClick={() => {*/}
-      {/*    changeMode('dark');*/}
-      {/*  }}*/}
-      {/*>*/}
-      {/*  dark*/}
-      {/*</button>*/}
-      {/*<button*/}
-      {/*  onClick={() => {*/}
-      {/*    changeMode('auto');*/}
-      {/*  }}*/}
-      {/*>*/}
-      {/*  auto*/}
-      {/*</button>*/}
       <FAQ />
     </StyledPage>
   );

packages/app/src/pages/temporary.css

@@ -1,44 +1,7 @@
 debug-menu {
   display: none !important;
 }
-/*.affine-editor-container {*/
+.affine-block-children-container.edgeless {
-/*  height: 100%;*/
+  background-color: #fff;
-/*  padding: 0 !important;*/
+}
-/*}*/
-/*.affine-default-page-block-container {*/
-/*  width: 720px;*/
-/*  height: 100%;*/
-/*  margin: 0 auto;*/
-/*}*/
 
-/*u {*/
-/*  text-decoration: none;*/
-/*  border-bottom: 1px solid #4c6275 !important;*/
-/*}*/
-/*u::after {*/
-/*  display: none;*/
-/*}*/
-
-/*.affine-paragraph-block-container.text {*/
-/*  margin-top: 18px !important;*/
-/*}*/
-
-/*.affine-default-page-block-title {*/
-/*  width: 100%;*/
-/*}*/
-/*s {*/
-/*  text-decoration: line-through !important;*/
-/*}*/
-
-/*.affine-edgeless-page-block-container {*/
-/*  height: 100% !important;*/
-/*}*/
-/*.affine-block-children-container.edgeless {*/
-/*  height: 100% !important;*/
-/*}*/
-/*.affine-list-rich-text-wrapper > div {*/
-/*  box-sizing: content-box;*/
-/*  color: var(--affine-highlight-color);*/
-/*  min-width: unset !important;*/
-/*  max-width: 26px;*/
-/*}*/

packages/app/src/styles/theme.ts

@@ -29,7 +29,7 @@ export const lightTheme: AffineTheme = {
     sm: '16px',
     base: '18px',
     family: `Avenir Next, ${basicFontFamily}`,
-    family2: `Roboto Mono, ${basicFontFamily}`,
+    family2: `Roboto, ${basicFontFamily}`,
   },
   zIndex: {
     modal: 1000,
@@ -55,8 +55,8 @@ export const darkTheme: AffineTheme = {
 
     textColor: '#fff',
     iconColor: '#9096A5',
-    linkColor: '#6880FF',
+    linkColor: '#7D91FF',
-    linkColor2: '#7D91FF',
+    linkColor2: '#6880FF',
     linkVisitedColor: '#505FAB',
     popoverColor: '#A9B1C6',
     codeColor: '#BDDBFD',