Menu changes

Author: dineshsingh1

apps/webapp/src/Components/CreateTodoModal/TaskEditor/styled.tsx

@@ -7,7 +7,7 @@ import { ModalSection } from '../../../Style/Refactor'
 export const TaskEditorWrapper = styled.section<{ withMaxHeight?: boolean }>`
   padding: ${({ theme }) => theme.spacing.medium};
   border-radius: ${({ theme }) => theme.borderRadius.small};
-  background: ${({ theme }) => theme.tokens.surfaces.app};
+  background-color: ${({ theme }) => theme.tokens.surfaces.s[0]};
   margin: ${({ theme }) => theme.spacing.large} 0;
   ${({ withMaxHeight }) => withMaxHeight && `height: 22vh;`}
   max-height: 24vh;

apps/webapp/src/Components/Modals/CreateTodoModal.tsx

@@ -10,7 +10,7 @@ import { Button, DisplayShortcut, LoadingButton } from '@workduck-io/mex-compone
 import { tinykeys } from '@workduck-io/tinykeys'
 
 import { getDefaultContent, ModalsType, mog, useModalStore } from '@mexit/core'
-import { DefaultMIcons, IconDisplay, InsertMenu, PrimaryText } from '@mexit/shared'
+import { DefaultMIcons, IconDisplay, InsertMenu, MexIcon, PrimaryText } from '@mexit/shared'
 
 import useUpdateBlock from '../../Editor/Hooks/useUpdateBlock'
 import { useApi } from '../../Hooks/API/useNodeAPI'
@@ -157,6 +157,14 @@ const CreateTodoModal = ({ children }) => {
               ?
             </Title>
           </Group>
+          <MexIcon
+            color={theme.tokens.text.fade}
+            $cursor
+            height={24}
+            width={24}
+            icon={DefaultMIcons.CLEAR.value}
+            onClick={onRequestClose}
+          />
         </Header>
         <DeletionWarning>
           <Group>

apps/webapp/src/Components/Modals/DeleteSpaceModal/index.tsx

@@ -9,14 +9,13 @@ import { tinykeys } from '@workduck-io/tinykeys'
 
 import {
   API,
-  DefaultMIcons,
   ModalsType,
   useDataStore,
   useLayoutStore,
   useModalStore,
   userPreferenceStore as useUserPreferenceStore
 } from '@mexit/core'
-import { Group, IconDisplay, PrimaryText } from '@mexit/shared'
+import { DefaultMIcons, Group, IconDisplay, MexIcon, PrimaryText } from '@mexit/shared'
 
 import { useNamespaceApi } from '../../../Hooks/API/useNamespaceAPI'
 import { useNamespaces } from '../../../Hooks/useNamespaces'
@@ -116,6 +115,14 @@ const DeleteSpaceModal = () => {
               ?
             </Title>
           </Group>
+          <MexIcon
+            color={theme.tokens.text.fade}
+            $cursor
+            height={24}
+            width={24}
+            icon={DefaultMIcons.CLEAR.value}
+            onClick={onRequestClose}
+          />
         </Header>
         <DeletionWarning>
           All (<PrimaryText>{notesSize}</PrimaryText>) Note(s) created within this Space will be permanently deleted.{' '}

apps/webapp/src/Components/Refactor/DeleteModal.tsx

@@ -4,19 +4,21 @@ import { useLocation } from 'react-router-dom'
 
 import archiveLine from '@iconify/icons-ri/archive-line'
 import { Icon } from '@iconify/react'
+import { useTheme } from 'styled-components'
 import create from 'zustand'
 
 import { Button, DisplayShortcut, PrimaryButton } from '@workduck-io/mex-components'
 import { tinykeys } from '@workduck-io/tinykeys'
 
 import { isReserved, RefactorPath, useEditorStore, useHelpStore } from '@mexit/core'
-import { isOnEditableElement } from '@mexit/shared'
+import { DefaultMIcons, isOnEditableElement, MexIcon } from '@mexit/shared'
 
 import { useKeyListener } from '../../Hooks/useChangeShortcutListener'
 import { useDelete } from '../../Hooks/useDelete'
 import { useEditorBuffer } from '../../Hooks/useEditorBuffer'
 import { NavigationType, ROUTE_PATHS, useRouting } from '../../Hooks/useRouting'
-import { DeleteIcon, MockRefactorMap, ModalControls, ModalHeader, MRMHead, MRMRow } from '../../Style/Refactor'
+import { DeleteIcon, MockRefactorMap, ModalControls, MRMHead, MRMRow } from '../../Style/Refactor'
+import { Header, Title } from '../Modals/DeleteSpaceModal/styled'
 import { QuickLink, WrappedNodeSelect } from '../NodeSelect/NodeSelect'
 
 interface DeleteStoreState {
@@ -63,8 +65,9 @@ const Delete = () => {
   const { getMockArchive, execArchive } = useDelete()
   const shortcuts = useHelpStore((store) => store.shortcuts)
 
-  const location = useLocation()
+  const theme = useTheme()
   const { goTo } = useRouting()
+  const location = useLocation()
 
   const openModal = useDeleteStore((store) => store.openModal)
   const closeModal = useDeleteStore((store) => store.closeModal)
@@ -141,7 +144,17 @@ const Delete = () => {
 
   return (
     <Modal className="ModalContent" overlayClassName="ModalOverlay" onRequestClose={closeModal} isOpen={open}>
-      <ModalHeader>Archive</ModalHeader>
+      <Header>
+        <Title>Archive</Title>
+        <MexIcon
+          color={theme.tokens.text.fade}
+          $cursor
+          height={24}
+          width={24}
+          icon={DefaultMIcons.CLEAR.value}
+          onClick={closeModal}
+        />
+      </Header>
       <WrappedNodeSelect
         autoFocusSelectAll
         autoFocus

apps/webapp/src/Components/Template/TemplateModal.tsx

@@ -3,10 +3,12 @@ import { useForm } from 'react-hook-form'
 import toast from 'react-hot-toast'
 import Modal from 'react-modal'
 
+import { useTheme } from 'styled-components'
+
 import { LoadingButton, Title } from '@workduck-io/mex-components'
 
 import { API, ModalsType, mog, Snippet, useMetadataStore, useModalStore, useSnippetStore } from '@mexit/core'
-import { ButtonFields, TemplateContainer } from '@mexit/shared'
+import { ButtonFields, DefaultMIcons, FlexBetween, MexIcon, TemplateContainer } from '@mexit/shared'
 
 import { defaultContent } from '../../Data/baseData'
 import EditorPreviewRenderer from '../../Editor/EditorPreviewRenderer'
@@ -18,6 +20,7 @@ import SidebarList from '../Sidebar/SidebarList'
 import { RemovalButton } from './TemplateModal.styles'
 
 const TemplateModal = () => {
+  const theme = useTheme()
   const { getILinkFromNodeid } = useLinks()
   const { toggleOpen, open, data } = useModalStore()
 
@@ -93,18 +96,32 @@ const TemplateModal = () => {
     toggleOpen(ModalsType.template)
   }
 
+  const onRequestClose = () => {
+    toggleOpen(ModalsType.template)
+  }
+
   return (
     <Modal
       className="ModalContent"
       overlayClassName="ModalOverlay"
-      onRequestClose={() => toggleOpen(ModalsType.template)}
+      onRequestClose={onRequestClose}
       isOpen={open === ModalsType.template}
     >
       <InviteWrapper>
         {templates.length !== 0 ? (
           !currentTemplate ? (
             <>
-              <Title>Set Template for {getTitleFromPath(node?.path)}</Title>
+              <FlexBetween>
+                <Title>Set Template for {getTitleFromPath(node?.path)}</Title>
+                <MexIcon
+                  color={theme.tokens.text.fade}
+                  $cursor
+                  height={24}
+                  width={24}
+                  icon={DefaultMIcons.CLEAR.value}
+                  onClick={onRequestClose}
+                />
+              </FlexBetween>
               <p>Auto fill new notes using template</p>
             </>
           ) : (

apps/webapp/src/Components/Todo/Todo.tsx

@@ -96,7 +96,7 @@ export const TodoBase = ({
   return (
     <TodoContainer
       key={`BasicTodo_${todo.nodeid}_${todo.id}_${oid}`}
-      id={`BasicTodo_${todo.nodeid}_${todo.id}_${oid}`}
+      id="mexit-todo-container"
       checked={todo?.metadata.status === TodoStatus.completed}
     >
       <CheckBoxWrapper id={`TodoStatusFor_${todo.id}_${oid}`} contentEditable={false}>

libs/shared/src/Components/AIPreview/index.tsx

@@ -133,7 +133,7 @@ const AIPreviewContainer: React.FC<AIPreviewProps> = (props) => {
               Replace
             </StyledButton>
           )}
-          <InsertMenu root={props.root} isMenu={props.insertInNote} onClick={handleOnInsert} />
+          <InsertMenu type="modal" root={props.root} isMenu={props.insertInNote} onClick={handleOnInsert} />
         </Group>
       </AIContainerFooter>
     </StyledAIContainer>

libs/shared/src/Components/FloatingElements/Autocomplete.tsx

@@ -169,6 +169,7 @@ export const AutoComplete: React.FC<AutoCompleteProps> = (props) => {
         {open && items.length > 0 && !disableMenu && (
           <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss>
             <AutoCompleteSuggestions
+              type="modal"
               {...getFloatingProps({
                 className: MenuClassName,
                 ref: refs.setFloating,

libs/shared/src/Components/FloatingElements/Dropdown.tsx

@@ -192,7 +192,13 @@ export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonE
     const { x, y, reference, floating, strategy, refs, context } = useFloating<HTMLButtonElement>({
       open,
       onOpenChange: setOpen,
-      middleware: [offset({ mainAxis: 4, alignmentAxis: nested ? -5 : 0 }), flip(), shift()],
+      middleware: [
+        offset({ mainAxis: 4, alignmentAxis: nested ? -5 : 0 }),
+        flip(),
+        shift({
+          padding: 25
+        })
+      ],
       placement: nested ? 'right-start' : 'bottom-start',
       nodeId
       // whileElementsMounted: autoUpdate
@@ -216,7 +222,8 @@ export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonE
         ignoreMouse: nested
       }),
       useDismiss(context, {
-        escapeKey: true
+        escapeKey: true,
+        bubbles: false
       }),
       useListNavigation(context, {
         listRef: listItemsRef,