chore: adjust file

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

@@ -1,5 +1,4 @@
-import Modal from '@/ui/modal';
-import CloseIcon from '@mui/icons-material/Close';
+import { Modal, ModalCloseButton } from '@/ui/modal';
 import {
   LogoIcon,
   DocIcon,
@@ -22,7 +21,6 @@ import {
   StyledLogo,
   StyledModalHeader,
   StyledModalHeaderLeft,
-  StyledCloseButton,
   StyledModalFooter,
 } from './style';
 
@@ -82,13 +80,15 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
             <StyledLogo src={logo.src} alt="" />
             <span>Alpha</span>
           </StyledModalHeaderLeft>
-          <StyledCloseButton
+          <ModalCloseButton
+            top={6}
+            right={6}
+            size={[30, 30]}
+            iconSize={[20, 20]}
             onClick={() => {
               onClose();
             }}
-          >
-            <CloseIcon width={12} height={12} />
-          </StyledCloseButton>
+          />
         </StyledModalHeader>
 
         <StyledContent>

packages/app/src/components/contact-modal/style.ts

@@ -162,40 +162,6 @@ export const StyledModalHeaderLeft = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledCloseButton = styled('div')(({ theme }) => {
-  return {
-    width: '60px',
-    height: '60px',
-    color: theme.colors.iconColor,
-    cursor: 'pointer',
-    ...displayFlex('center', 'center'),
-    position: 'absolute',
-    right: '0',
-    top: '0',
-
-    // TODO: we need to add @emotion/babel-plugin
-    '::after': {
-      content: '""',
-      width: '30px',
-      height: '30px',
-      borderRadius: '6px',
-      ...absoluteCenter({ horizontal: true, vertical: true }),
-    },
-    ':hover': {
-      color: theme.colors.primaryColor,
-      '::after': {
-        background: theme.colors.hoverBackground,
-      },
-    },
-    svg: {
-      width: '20px',
-      height: '20px',
-      position: 'relative',
-      zIndex: 1,
-    },
-  };
-});
-
 export const StyledModalFooter = styled('div')(({ theme }) => {
   return {
     fontSize: '14px',