feat: add shortcuts modal

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

@@ -43,3 +43,17 @@ export const KeyboardIcon = () => {
     </svg>
   );
 };
+
+export const CloseIcon = () => {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6.88173 5.9864L11.8557 1.0257C11.954 0.911231 12.0054 0.76398 11.9996 0.613378C11.9937 0.462776 11.9311 0.319916 11.8243 0.213345C11.7174 0.106774 11.5742 0.0443419 11.4232 0.0385248C11.2722 0.0327077 11.1245 0.0839342 11.0097 0.181967L6.03573 5.14266L1.06173 0.175983C0.948744 0.063303 0.795507 0 0.635726 0C0.475945 0 0.322708 0.063303 0.209726 0.175983C0.0967439 0.288663 0.0332711 0.44149 0.0332711 0.600844C0.0332711 0.760197 0.0967439 0.913024 0.209726 1.0257L5.18973 5.9864L0.209726 10.9471C0.146917 11.0007 0.0959048 11.0668 0.0598909 11.141C0.0238769 11.2152 0.00363881 11.2961 0.000447115 11.3785C-0.00274458 11.4609 0.0111787 11.5431 0.0413434 11.6199C0.0715082 11.6967 0.117263 11.7664 0.175736 11.8247C0.234209 11.8831 0.304137 11.9287 0.381132 11.9588C0.458127 11.9889 0.540527 12.0027 0.623158 11.9996C0.70579 11.9964 0.786869 11.9762 0.861308 11.9403C0.935747 11.9044 1.00194 11.8535 1.05573 11.7908L6.03573 6.83014L11.0097 11.7908C11.1245 11.8889 11.2722 11.9401 11.4232 11.9343C11.5742 11.9285 11.7174 11.866 11.8243 11.7595C11.9311 11.6529 11.9937 11.51 11.9996 11.3594C12.0054 11.2088 11.954 11.0616 11.8557 10.9471L6.88173 5.9864Z" />
+    </svg>
+  );
+};

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

@@ -1,9 +1,15 @@
 import { useState } from 'react';
-import { StyledFAQ, StyledIconWrapper, StyledFAQWrapper } from './style';
-import { ContactIcon, HelpIcon, KeyboardIcon } from './icons';
+import {
+  StyledFAQ,
+  StyledIconWrapper,
+  StyledFAQWrapper,
+  StyledTransformIcon,
+} from './style';
+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 (
@@ -21,9 +27,32 @@ const Contact = () => {
     </>
   );
 };
+
+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);
-
   return (
     <>
       <StyledFAQ
@@ -38,17 +67,18 @@ export const FAQ = () => {
         <Grow in={showContent}>
           <StyledFAQWrapper>
             <Contact />
-            <Tooltip content="Keyboard shorts" placement="left-end">
-              <StyledIconWrapper>
-                <KeyboardIcon />
-              </StyledIconWrapper>
-            </Tooltip>
+            <Shortcuts />
           </StyledFAQWrapper>
         </Grow>
 
-        <StyledIconWrapper style={{ margin: '0', cursor: 'inherit' }}>
-          <HelpIcon />
-        </StyledIconWrapper>
+        <div style={{ position: 'relative' }}>
+          <StyledIconWrapper>
+            <HelpIcon />
+          </StyledIconWrapper>
+          <StyledTransformIcon in={showContent}>
+            <CloseIcon />
+          </StyledTransformIcon>
+        </div>
       </StyledFAQ>
     </>
   );

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

@@ -4,20 +4,38 @@ export const StyledFAQ = styled('div')(({ theme }) => {
   return {
     width: '32px',
     height: '32px',
-    backgroundColor: '#fff',
     color: theme.colors.iconColor,
     position: 'fixed',
     right: '30px',
     bottom: '30px',
     borderRadius: '50%',
-    zIndex: 1000,
+    zIndex: theme.zIndex.popover,
     ':hover': {
       backgroundColor: theme.colors.popoverBackground,
       color: theme.colors.primaryColor,
     },
   };
 });
-
+export const StyledTransformIcon = styled.div<{ in: boolean }>(
+  ({ in: isIn, theme }) => ({
+    height: '32px',
+    width: '32px',
+    borderRadius: '50%',
+    position: 'absolute',
+    left: '0',
+    right: '0',
+    bottom: '0',
+    top: '0',
+    margin: 'auto',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    opacity: isIn ? 1 : 0,
+    backgroundColor: isIn
+      ? theme.colors.hoverBackground
+      : theme.colors.pageBackground,
+  })
+);
 export const StyledIconWrapper = styled('div')(({ theme }) => {
   return {
     color: theme.colors.iconColor,
@@ -26,10 +44,12 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
     justifyContent: 'center',
     alignItems: 'center',
     cursor: 'pointer',
-    backgroundColor: 'transparent',
+    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,