Add more info to settings

src-web/components/core/Dialog.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
-import { useKeyPressEvent } from 'react-use';
+import { useHotKey } from '../../hooks/useHotKey';
 import { Overlay } from '../Overlay';
 import { Heading } from './Heading';
 import { IconButton } from './IconButton';
@@ -34,10 +34,7 @@ export function Dialog({
     [description],
   );
 
-  useKeyPressEvent('Escape', (e) => {
-    e.preventDefault();
-    onClose();
-  });
+  useHotKey('popup.close', onClose);
 
   return (
     <Overlay open={open} onClose={onClose} portalName="dialog">

src-web/components/core/Dropdown.tsx

@@ -237,7 +237,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
     [handleClose],
   );
 
-  useHotKey('dropdown.close', handleClose);
+  useHotKey('popup.close', handleClose);
 
   const handlePrev = useCallback(() => {
     setSelectedIndex((currIndex) => {