use base modal on the simulator modal

Author: pettinarip

src/components/Simulator/SimulatorModal.tsx

@@ -1,14 +1,12 @@
 import React from "react"
 import {
-  Modal as ChakraModal,
-  ModalCloseButton,
-  ModalContent,
   type ModalContentProps,
-  ModalOverlay,
   type ModalProps,
   UseDisclosureReturn,
 } from "@chakra-ui/react"
 
+import Modal from "../Modal"
+
 type SimulatorModalProps = ModalContentProps &
   Pick<ModalProps, "size"> & {
     isOpen: UseDisclosureReturn["isOpen"]
@@ -24,39 +22,15 @@ export const SimulatorModal = ({
   ...restProps
 }: SimulatorModalProps) => {
   return (
-    <ChakraModal
+    <Modal
       isOpen={isOpen}
       onClose={onClose}
       isCentered
       size="full"
       scrollBehavior="inside"
+      contentProps={restProps}
     >
-      <ModalOverlay bgColor="blackAlpha.700" />
-
-      <ModalContent
-        py={8}
-        px={{ base: 4, sm: 8 }}
-        shadow="md"
-        border="1px"
-        borderColor="border"
-        borderRadius="md"
-        overflowY="auto"
-        overflowX="hidden"
-        minH="unset"
-        h="100%"
-        maxH={{
-          base: "calc(100vh - 1rem)",
-          md: "min(calc(100vh - 2rem), 792px)",
-        }}
-        maxW={{
-          base: "calc(100vw - 1rem)",
-          md: "min(calc(100vw - 2rem), 1000px)",
-        }}
-        {...restProps}
-      >
-        <ModalCloseButton />
-        {children}
-      </ModalContent>
-    </ChakraModal>
+      {children}
+    </Modal>
   )
 }

src/pages/developers/tutorials.tsx

@@ -242,7 +242,12 @@ const TutorialPage = ({
         <Translation id="page-developers-tutorials:page-tutorial-subtitle" />
       </Text>
 
-      <Modal isOpen={isModalOpen} setIsOpen={setModalOpen} dir={dir}>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => setModalOpen(false)}
+        size="xl"
+        contentProps={{ dir }}
+      >
         <Heading fontSize="2rem" lineHeight="1.4" mb={4}>
           <Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
         </Heading>