feat: reset modal

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 ShortcutsModal from '@/components/shortcuts-modal';
-const Contact = () => {
-  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>
-    </>
-  );
-};
+import { useEditor } from '@/components/editor-provider';
+import { useModal } from '@/components/global-modal-provider';
+import { useTheme } from '@/styles';
 
-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 />
-            <Shortcuts />
+            <Tooltip content="Contact with us" placement="left-end">
+              <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 }) => {
-  return {
-    color: theme.colors.iconColor,
-    marginBottom: '24px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    cursor: 'pointer',
-    backgroundColor: theme.colors.pageBackground,
-    borderRadius: '50%',
-    width: '32px',
-    height: '32px',
-    transition: 'background-color 0.3s',
-    position: 'relative',
-    ':hover': {
-      color: theme.colors.primaryColor,
-      backgroundColor: theme.colors.hoverBackground,
-    },
-  };
-});
+export const StyledIconWrapper = styled('div')<{ isEdgelessDark: boolean }>(
+  ({ theme, isEdgelessDark }) => {
+    return {
+      color: isEdgelessDark
+        ? theme.colors.popoverBackground
+        : theme.colors.iconColor,
+      marginBottom: '24px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      cursor: 'pointer',
+      backgroundColor: isEdgelessDark
+        ? 'transparent'
+        : theme.colors.pageBackground,
+      borderRadius: '50%',
+      width: '32px',
+      height: '32px',
+      transition: 'background-color 0.3s',
+      position: 'relative',
+      ':hover': {
+        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,
   };