update file modals

Author: xyzqm

src/components/Editor/EditorFileModal.tsx

@@ -1,6 +1,7 @@
-import { Dialog, Transition } from '@headlessui/react';
-import React, { Fragment } from 'react';
+import { Dialog } from '@headlessui/react';
+import React from 'react';
 import { AlgoliaEditorFile } from '../../models/algoliaEditorFile';
+import Modal from '../Modal';
 import EditorFileModalInterface from './EditorFileModalInterface';
 
 export interface EditorFileModalProps {
@@ -15,42 +16,10 @@ export const EditorFileModal: React.FC<EditorFileModalProps> = ({
   onSelect,
 }) => {
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog
-        as="div"
-        static
-        className="fixed z-10 inset-0 overflow-y-auto"
-        open={isOpen}
-        onClose={() => onClose()}
-      >
-        <div className="min-h-screen text-center sm:p-0">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enterTo="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <div className="inline-block bg-white dark:bg-dark-surface rounded-lg text-left overflow-hidden shadow-xl transform transition-all my-8 sm:my-16 sm:align-middle sm:max-w-lg w-full">
-              <EditorFileModalInterface onSelect={onSelect} />
-            </div>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <Modal isOpen={isOpen} onClose={onClose} bg="bg-black/60">
+      <Dialog.Panel className="inline-block bg-white dark:bg-dark-surface rounded-lg text-left overflow-hidden shadow-xl transform transition-all my-8 sm:my-16 sm:align-middle sm:max-w-lg w-full self-start">
+        <EditorFileModalInterface onSelect={onSelect} />
+      </Dialog.Panel>
+    </Modal>
   );
 };

src/components/Modal.tsx

@@ -1,6 +1,11 @@
 import { Dialog, Transition } from '@headlessui/react';
 import React from 'react';
-export default function mModal({ children, isOpen, onClose }) {
+export default function mModal({
+  children,
+  isOpen,
+  onClose,
+  bg = 'bg-black/25',
+}) {
   return (
     <Transition appear show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-10" onClose={onClose}>
@@ -13,7 +18,7 @@ export default function mModal({ children, isOpen, onClose }) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black/25" />
+          <div className={`fixed inset-0 ${bg}`} />
         </Transition.Child>
 
         <div className="fixed inset-0 overflow-y-auto">