chore(website): migrate headless ui to use DialogPanel instead of Dia…

…log.Overlay See https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v1.6.0 for migration guide
loculus-project · Jun 29, 2024 · e466809 · e466809
1 parent 9b464f9
commit e466809
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/website/src/components/SearchPage/CustomizeModal.tsx b/website/src/components/SearchPage/CustomizeModal.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react';
 
 const titleCaseWords = (str: string) => {
     return str
@@ -52,16 +52,16 @@ export const CustomizeModal: React.FC<CustomizeModalProps> = ({
         <Transition appear show={isCustomizeModalOpen}>
             <Dialog as='div' className='fixed inset-0 z-50 overflow-y-auto' onClose={toggleCustomizeModal}>
                 <div className='min-h-screen px-4 text-center'>
-                    <Dialog.Overlay className='fixed inset-0 bg-black opacity-30' />
+                    <div className='fixed inset-0 bg-black opacity-30' />
 
                     <span className='inline-block h-screen align-middle' aria-hidden='true'>
                         &#8203;
                     </span>
 
-                    <div className='inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl text-sm'>
-                        <Dialog.Title as='h3' className='text-lg font-medium leading-6 text-gray-900'>
+                    <DialogPanel className='inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl text-sm'>
+                        <DialogTitle as='h3' className='text-lg font-medium leading-6 text-gray-900'>
                             Customize {titleCaseWords(thingToCustomize)}s
-                        </Dialog.Title>
+                        </DialogTitle>
 
                         <div className='mt-4 text-gray-700 text-sm'>Toggle the visibility of {thingToCustomize}s</div>
 
@@ -91,7 +91,7 @@ export const CustomizeModal: React.FC<CustomizeModalProps> = ({
                                 Close
                             </button>
                         </div>
-                    </div>
+                    </DialogPanel>
                 </div>
             </Dialog>
         </Transition>

diff --git a/website/src/components/SearchPage/SeqPreviewModal.tsx b/website/src/components/SearchPage/SeqPreviewModal.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, DialogPanel, Transition } from '@headlessui/react';
 import React, { useEffect, useState } from 'react';
 
 import { routes } from '../../routes/routes';
@@ -124,11 +124,11 @@ export const SeqPreviewModal: React.FC<SeqPreviewModalProps> = ({
             ) : (
                 <Dialog as='div' className='fixed inset-0 z-10 overflow-y-auto' onClose={onClose}>
                     <div className='min-h-screen px-8 text-center'>
-                        <Dialog.Overlay className='fixed inset-0 bg-black opacity-30' />
-                        <div className='inline-block w-full p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl pb-0'>
+                        <div className='fixed inset-0 bg-black opacity-30' />
+                        <DialogPanel className='inline-block w-full p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl pb-0'>
                             {controls}
                             {content}
-                        </div>
+                        </DialogPanel>
                     </div>
                 </Dialog>
             )}