feat: modify style of modal

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

@@ -1,4 +1,4 @@
-import { Modal, ModalCloseButton } from '@/ui/modal';
+import { Modal, ModalCloseButton, ModalWrapper } from '@/ui/modal';
 import {
   LogoIcon,
   DocIcon,
@@ -11,7 +11,6 @@ import {
 } from './icons';
 import logo from './affine-text-logo.png';
 import {
-  StyledModalWrapper,
   StyledBigLink,
   StyledSmallLink,
   StyledSubTitle,
@@ -23,6 +22,7 @@ import {
   StyledModalHeaderLeft,
   StyledModalFooter,
 } from './style';
+import bg from '@/components/contact-modal/bg.png';
 
 const linkList = [
   {
@@ -74,7 +74,11 @@ type TransitionsModalProps = {
 export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
   return (
     <Modal open={open} onClose={onClose}>
-      <StyledModalWrapper data-testid="contact-us-modal-content">
+      <ModalWrapper
+        width={860}
+        height={540}
+        style={{ backgroundImage: `url(${bg.src})` }}
+      >
         <StyledModalHeader>
           <StyledModalHeaderLeft>
             <StyledLogo src={logo.src} alt="" />
@@ -83,8 +87,6 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
           <ModalCloseButton
             top={6}
             right={6}
-            size={[30, 30]}
-            iconSize={[20, 20]}
             onClick={() => {
               onClose();
             }}
@@ -134,7 +136,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
           </p>
           <p>Copyright &copy; 2022 Toeverything</p>
         </StyledModalFooter>
-      </StyledModalWrapper>
+      </ModalWrapper>
     </Modal>
   );
 };

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

@@ -1,15 +1,4 @@
 import { absoluteCenter, displayFlex, styled } from '@/styles';
-import bg from './bg.png';
-
-export const StyledModalWrapper = styled('div')(({ theme }) => {
-  return {
-    width: '860px',
-    height: '540px',
-    backgroundColor: theme.colors.popoverBackground,
-    backgroundImage: `url(${bg.src})`,
-    borderRadius: '20px',
-  };
-});
 
 export const StyledBigLink = styled('a')(({ theme }) => {
   return {

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

@@ -1,12 +1,8 @@
 import React, { useState } from 'react';
-import Modal, { ModalCloseButton } from '@/ui/modal';
+import Modal, { ModalCloseButton, ModalWrapper } from '@/ui/modal';
 import getIsMobile from '@/utils/get-is-mobile';
-import {
-  ModalWrapper,
-  StyledButton,
-  StyledContent,
-  StyledTitle,
-} from './styles';
+import { StyledButton, StyledContent, StyledTitle } from './styles';
+import bg from './bg.png';
 export const MobileModal = () => {
   const [showModal, setShowModal] = useState(getIsMobile());
   return (
@@ -16,7 +12,11 @@ export const MobileModal = () => {
         setShowModal(false);
       }}
     >
-      <ModalWrapper>
+      <ModalWrapper
+        width={348}
+        height={388}
+        style={{ backgroundImage: `url(${bg.src})` }}
+      >
         <ModalCloseButton
           size={[30, 30]}
           iconSize={[20, 20]}

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

@@ -1,16 +1,4 @@
 import { displayFlex, styled } from '@/styles';
-import bg from './bg.png';
-
-export const ModalWrapper = styled.div(({ theme }) => {
-  return {
-    width: '348px',
-    height: '388px',
-    background: theme.colors.popoverBackground,
-    borderRadius: '28px',
-    position: 'relative',
-    backgroundImage: `url(${bg.src})`,
-  };
-});
 
 export const StyledTitle = styled.div(({ theme }) => {
   return {

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

@@ -13,7 +13,6 @@ import {
   windowsKeyboardShortcuts,
   winMarkdownShortcuts,
 } from '@/components/shortcuts-modal/config';
-import CloseIcon from '@mui/icons-material/Close';
 import Slide from '@mui/material/Slide';
 import { ModalCloseButton } from '@/ui/modal';
 type ModalProps = {