fix: modal centering

Author: ZanzyTHEbar

GUI/ETVR/src/components/Modal/index.tsx

@@ -1,4 +1,4 @@
-import { HStack, Modal } from '@hope-ui/core'
+import { HStack, Modal, Center } from '@hope-ui/core'
 import { children, createEffect } from 'solid-js'
 import { openModalStatus } from '@src/store/ui/selectors'
 import { setOpenModal, type IModalMenu } from '@src/store/ui/ui'
@@ -10,21 +10,28 @@ const ModalMenu = (props: IModalMenu) => {
         console.log('openModalStatus:', openModalStatus())
     })
     return (
-        <>
-            <Modal
-                isOpen={openModalStatus() ?? false}
-                onClose={() => setOpenModal(false)}
-                initialFocusSelector={props.initialFocus}>
-                <Modal.Overlay />
-                <Modal.Content p={4}>
-                    <HStack justifyContent="space-between" mb={4}>
-                        <Modal.Heading fontWeight="semibold">Title</Modal.Heading>
-                        <Modal.CloseButton />
-                    </HStack>
-                    {Children()}
-                </Modal.Content>
-            </Modal>
-        </>
+        <Modal
+            isCentered
+            size="xl"
+            isOpen={openModalStatus() ?? false}
+            onClose={() => setOpenModal(false)}
+            initialFocusSelector={props.initialFocus}
+            contentTransitionOptions={{
+                transition: 'pop',
+                duration: 400,
+                exitDuration: 250,
+                easing: 'ease-out',
+                exitEasing: 'ease-in',
+            }}>
+            <Modal.Overlay />
+            <Modal.Content p={4}>
+                <HStack justifyContent="space-between" mb={4}>
+                    <Modal.Heading fontWeight="semibold"> {props.title} </Modal.Heading>
+                    <Modal.CloseButton />
+                </HStack>
+                {Children()}
+            </Modal.Content>
+        </Modal>
     )
 }
 

GUI/ETVR/src/store/ui/ui.ts

@@ -20,6 +20,7 @@ export interface INewMenu {
 
 export interface IModalMenu {
     children: JSXElement
+    title?: string
     initialFocus?: string
 }