feat: reset modal

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 {