setting content header & close button

web/app/components/header/account-setting/index.tsx

@@ -8,7 +8,6 @@ import {
   RiApps2AddLine,
   RiBrainFill,
   RiBrainLine,
-  RiCloseLine,
   RiColorFilterFill,
   RiColorFilterLine,
   RiDatabase2Fill,
@@ -163,7 +162,7 @@ export default function AccountSetting({
   return (
     <MenuDialog
       show
-      onClose={() => { }}
+      onClose={onCancel}
     >
       <div className='mx-auto max-w-[1048px] h-[100vh] flex'>
         <div className='w-[44px] sm:w-[224px] pl-4 pr-6 border-r border-divider-burn flex flex-col'>
@@ -213,9 +212,6 @@ export default function AccountSetting({
                 onChange={e => setSearchValue(e.target.value)}
                 value={searchValue}
               />
-              <div className='flex items-center justify-center -mr-4 w-6 h-6 cursor-pointer' onClick={onCancel}>
-                <RiCloseLine className='w-4 h-4 text-gray-400' />
-              </div>
             </div>
           </div>
           <div className='px-4 sm:px-8 pt-2'>

web/app/components/header/account-setting/menu-dialog.tsx

@@ -1,6 +1,8 @@
-import { Fragment, useCallback } from 'react'
+import { Fragment, useCallback, useEffect } from 'react'
 import type { ReactNode } from 'react'
+import { RiCloseLine } from '@remixicon/react'
 import { Dialog, Transition } from '@headlessui/react'
+import Button from '@/app/components/base/button'
 import cn from '@/utils/classnames'
 
 type DialogProps = {
@@ -17,9 +19,22 @@ const MenuDialog = ({
   onClose,
 }: DialogProps) => {
   const close = useCallback(() => onClose?.(), [onClose])
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape')
+        close()
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [close])
+
   return (
     <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-40" onClose={close}>
+      <Dialog as="div" className="relative z-40" onClose={() => {}}>
         <div className="fixed inset-0">
           <div className="flex flex-col items-center justify-center min-h-full">
             <Transition.Child
@@ -33,6 +48,17 @@ const MenuDialog = ({
             >
               <Dialog.Panel className={cn('grow relative w-full h-full p-0 overflow-hidden text-left align-middle transition-all transform bg-background-sidenav-bg backdrop-blur-md', className)}>
                 <div className='absolute right-0 top-0 h-full w-1/2 bg-components-panel-bg'/>
+                <div className='absolute top-6 right-6 flex flex-col items-center'>
+                  <Button
+                    variant='tertiary'
+                    size='large'
+                    className='px-2'
+                    onClick={close}
+                  >
+                    <RiCloseLine className='w-5 h-5' />
+                  </Button>
+                  <div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>ESC</div>
+                </div>
                 {children}
               </Dialog.Panel>
             </Transition.Child>