fix: improve modal

vechain · Nov 25, 2024 · 06c49d8 · 06c49d8
1 parent 436f098
commit 06c49d8
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/...es/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/ConnectModal.tsx b/...es/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/ConnectModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Dialog, Transition } from "@headlessui/react";
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
 import { Fragment } from "react";
 import { usePrivy } from "@privy-io/react-auth";
 import { useWalletModal } from "@vechain/dapp-kit-react";
@@ -20,7 +20,7 @@ export const ConnectModal = ({ isOpen, onClose, logo }: Props) => {
   return (
     <Transition appear show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={onClose}>
-        <Transition.Child
+        <TransitionChild
           as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
@@ -30,11 +30,11 @@ export const ConnectModal = ({ isOpen, onClose, logo }: Props) => {
           leaveTo="opacity-0"
         >
           <div className="fixed inset-0 bg-black bg-opacity-25" />
-        </Transition.Child>
+        </TransitionChild>
 
         <div className="fixed inset-0 overflow-y-auto">
           <div className="flex items-center justify-center min-h-full p-4 text-center">
-            <Transition.Child
+            <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
@@ -43,13 +43,13 @@ export const ConnectModal = ({ isOpen, onClose, logo }: Props) => {
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="w-full max-w-md p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
-                <Dialog.Title
+              <DialogPanel className="w-full max-w-md p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
+                <DialogTitle
                   as="h3"
                   className="text-lg font-medium leading-6 text-gray-900 text-center"
                 >
                   Log in or sign up
-                </Dialog.Title>
+                </DialogTitle>
 
                 <div className="mt-4 flex justify-center">
                   <img
@@ -98,8 +98,8 @@ export const ConnectModal = ({ isOpen, onClose, logo }: Props) => {
                     </button>
                   </div>
                 </div>
-              </Dialog.Panel>
-            </Transition.Child>
+              </DialogPanel>
+            </TransitionChild>
           </div>
         </div>
       </Dialog>