[WEB-834] fix: close shortcut modle on outside click. (#4078)

This commit is contained in:
Prateek Shourya 2024-03-28 15:04:56 +05:30 committed by GitHub
parent 8bdf8fa24f
commit 97fb08928f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -36,7 +36,8 @@ export const ShortcutsModal: FC<Props> = (props) => {
<div className="fixed inset-0 bg-custom-backdrop transition-opacity" /> <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
<div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -46,8 +47,7 @@ export const ShortcutsModal: FC<Props> = (props) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="h-full w-full"> <Dialog.Panel className="relative flex h-full items-center justify-center">
<div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
<div className="flex h-[61vh] w-full flex-col space-y-4 overflow-hidden rounded-lg bg-custom-background-100 p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]"> <div className="flex h-[61vh] w-full flex-col space-y-4 overflow-hidden rounded-lg bg-custom-background-100 p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]">
<Dialog.Title as="h3" className="flex justify-between"> <Dialog.Title as="h3" className="flex justify-between">
<span className="text-lg font-medium">Keyboard shortcuts</span> <span className="text-lg font-medium">Keyboard shortcuts</span>
@ -71,10 +71,10 @@ export const ShortcutsModal: FC<Props> = (props) => {
</div> </div>
<ShortcutCommandsList searchQuery={query} /> <ShortcutCommandsList searchQuery={query} />
</div> </div>
</div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>
</div>
</Dialog> </Dialog>
</Transition.Root> </Transition.Root>
); );