chore: adjust file

packages/app/src/components/mobile-modal/index.tsx

@@ -1,14 +1,12 @@
 import React, { useState } from 'react';
-import Modal from '@/ui/modal';
+import Modal, { ModalCloseButton } from '@/ui/modal';
 import getIsMobile from '@/utils/get-is-mobile';
 import {
   ModalWrapper,
   StyledButton,
-  StyledCloseButton,
   StyledContent,
   StyledTitle,
 } from './styles';
-import CloseIcon from '@mui/icons-material/Close';
 export const MobileModal = () => {
   const [showModal, setShowModal] = useState(getIsMobile());
   return (
@@ -19,13 +17,13 @@ export const MobileModal = () => {
       }}
     >
       <ModalWrapper>
-        <StyledCloseButton
+        <ModalCloseButton
+          size={[30, 30]}
+          iconSize={[20, 20]}
           onClick={() => {
             setShowModal(false);
           }}
-        >
-          <CloseIcon />
-        </StyledCloseButton>
+        />
 
         <StyledTitle>Ooops!</StyledTitle>
         <StyledContent>

packages/app/src/components/mobile-modal/styles.ts

@@ -12,26 +12,6 @@ export const ModalWrapper = styled.div(({ theme }) => {
   };
 });
 
-export const StyledCloseButton = styled.div(({ theme }) => {
-  return {
-    width: '66px',
-    height: '66px',
-    color: theme.colors.iconColor,
-    cursor: 'pointer',
-    ...displayFlex('center', 'center'),
-    position: 'absolute',
-    right: '0',
-    top: '0',
-
-    svg: {
-      width: '15px',
-      height: '15px',
-      position: 'relative',
-      zIndex: 1,
-    },
-  };
-});
-
 export const StyledTitle = styled.div(({ theme }) => {
   return {
     ...displayFlex('center', 'center'),