WIP

lama_cleaner/app/src/components/shared/Modal.tsx

@@ -1,6 +1,6 @@
 import { XIcon } from '@heroicons/react/outline'
 import React, { ReactNode, useRef } from 'react'
-import { useClickAway, useKey } from 'react-use'
+import { useClickAway, useKey, useKeyPress, useKeyPressEvent } from 'react-use'
 import Button from './Button'
 
 export interface ModalProps {
@@ -19,8 +19,8 @@ export default function Modal(props: ModalProps) {
     onClose?.()
   })
 
-  useKey('Escape', onClose, {
-    event: 'keydown',
+  useKeyPressEvent('Escape', e => {
+    onClose?.()
   })
 
   return (
@@ -30,7 +30,7 @@ export default function Modal(props: ModalProps) {
     >
       <div ref={ref} className={`modal ${className}`}>
         <div className="modal-header">
-          <h3>{title}</h3>
+          <h2>{title}</h2>
           <Button icon={<XIcon />} onClick={onClose} />
         </div>
         {children}