chore: fix issue where tag could not be added to vault

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx

@@ -28,7 +28,7 @@ const ContactItem = ({ contact }: Props) => {
         <EditContactModal editContactUuid={contact.contactUuid} onCloseDialog={closeContactModal} />
       </ModalOverlay>
 
-      <div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
+      <div className="flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
         <Icon type="user" size="custom" className="mt-2 h-5 w-5 flex-shrink-0" />
         <div className="flex flex-col gap-1 py-1.5 overflow-hidden">
           <span

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx

@@ -107,15 +107,15 @@ const VaultItem = ({ vault }: Props) => {
         <EditVaultModal existingVaultUuid={vault.uuid} onCloseDialog={closeVaultModal} />
       </ModalOverlay>
 
-      <div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md">
-        <Icon type={'safe-square'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
+      <div className="flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
+        <Icon type="safe-square" size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
         <div className="flex flex-col gap-2 py-1.5">
           <span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span>
           <span className="mr-auto overflow-hidden text-ellipsis text-sm">{vault.description}</span>
           <span className="mr-auto overflow-hidden text-ellipsis text-sm">Vault ID: {vault.systemIdentifier}</span>
 
-          <div className="mt-2.5 flex w-full flex-row justify-between">
-            <div className="mt-2.5 flex flex-row">
+          <div className="mt-2 flex w-full flex-row justify-between">
+            <div className="flex flex-row">
               <Button label="Edit" className={'mr-3 text-xs'} onClick={openEditModal} />
               {isAdmin && (
                 <Button colorStyle="danger" label="Delete" className={'mr-3 text-xs'} onClick={deleteVault} />
@@ -124,7 +124,7 @@ const VaultItem = ({ vault }: Props) => {
                 <Button label="Leave Vault" className={'mr-3 text-xs'} onClick={leaveVault} />
               )}
             </div>
-            <div className="mt-2.5 flex flex-row">
+            <div className="flex flex-row">
               {vault.isSharedVaultListing() ? (
                 <Button label="Invite Contacts" className={'mr-3 text-xs'} onClick={openInviteModal} />
               ) : (

packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx

@@ -1,11 +1,10 @@
 import { observer } from 'mobx-react-lite'
-import { useCallback, useRef, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { SNTag, VectorIconNameOrEmoji, DefaultTagIconName } from '@standardnotes/snjs'
-import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { formatDateForContextMenu } from '@/Utils/DateUtils'
@@ -29,11 +28,6 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
 
   const { contextMenuOpen, contextMenuClickLocation } = navigationController
 
-  const contextMenuRef = useRef<HTMLDivElement>(null)
-
-  /** @TODO Needs fixing to handle clicking on the vault selection sub menu */
-  useCloseOnClickOutside(contextMenuRef, () => navigationController.setContextMenuOpen(false))
-
   const onClickAddSubtag = useCallback(() => {
     if (!isEntitledToFolders) {
       premiumModal.activate('Folders')
@@ -77,7 +71,6 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
       togglePopover={() => navigationController.setContextMenuOpen(!contextMenuOpen)}
       className="py-2"
     >
-      <div ref={contextMenuRef}>
       <Menu a11yLabel="Tag context menu" isOpen={contextMenuOpen}>
         <IconPicker
           key={'icon-picker'}
@@ -126,7 +119,6 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
           <span className="font-semibold">Tag ID:</span> {selectedTag.uuid}
         </div>
       </div>
-      </div>
     </Popover>
   )
 }

packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx

@@ -107,7 +107,6 @@ const VaultMenu = ({ items }: { items: DecryptedItemInterface[] }) => {
 }
 
 const AddToVaultMenuOption = ({ iconClassName, items }: { iconClassName: string; items: DecryptedItemInterface[] }) => {
-  const menuContainerRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
 
   const [isSubMenuOpen, setIsSubMenuOpen] = useState(false)
@@ -121,7 +120,7 @@ const AddToVaultMenuOption = ({ iconClassName, items }: { iconClassName: string;
   }
 
   return (
-    <div ref={menuContainerRef}>
+    <>
       <MenuItem
         className="justify-between"
         onClick={toggleSubMenu}
@@ -150,7 +149,7 @@ const AddToVaultMenuOption = ({ iconClassName, items }: { iconClassName: string;
       >
         <VaultMenu items={items} />
       </Popover>
-    </div>
+    </>
   )
 }
 

packages/web/src/javascripts/Hooks/useCloseOnClickOutside.ts

@@ -1,26 +0,0 @@
-import { useCallback, useEffect } from 'react'
-
-export function useCloseOnClickOutside(container: { current: HTMLDivElement | null }, callback: () => void): void {
-  const closeOnClickOutside = useCallback(
-    (event: { target: EventTarget | null }) => {
-      if (!container.current) {
-        return
-      }
-      const isDescendantOfContainer = container.current.contains(event.target as Node)
-      const isDescendantOfDialog = (event.target as HTMLElement).closest('[role="dialog"]')
-      if (!isDescendantOfContainer && !isDescendantOfDialog) {
-        callback()
-      }
-    },
-    [container, callback],
-  )
-
-  useEffect(() => {
-    document.addEventListener('click', closeOnClickOutside, { capture: true })
-    return () => {
-      document.removeEventListener('click', closeOnClickOutside, {
-        capture: true,
-      })
-    }
-  }, [closeOnClickOutside])
-}