From e466809237041b741ac3e9e67f9658ed71ac2a63 Mon Sep 17 00:00:00 2001
From: Cornelius Roemer <cornelius.roemer@gmail.com>
Date: Sat, 29 Jun 2024 17:46:13 +0200
Subject: [PATCH] chore(website): migrate headless ui to use DialogPanel
 instead of Dialog.Overlay

See https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v1.6.0 for migration guide
---
 website/src/components/SearchPage/CustomizeModal.tsx | 12 ++++++------
 .../src/components/SearchPage/SeqPreviewModal.tsx    |  8 ++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/website/src/components/SearchPage/CustomizeModal.tsx b/website/src/components/SearchPage/CustomizeModal.tsx
index fc2313fd2..fad67075c 100644
--- 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
index e4b3cbef3..23b7c2049 100644
--- 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>
             )}