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 = {

packages/app/src/styles/helper.ts

@@ -17,6 +17,23 @@ export const displayFlex = (
     alignContent,
   };
 };
+export const displayInlineFlex = (
+  justifyContent: CSSProperties['justifyContent'] = 'unset',
+  alignItems: CSSProperties['alignContent'] = 'unset',
+  alignContent: CSSProperties['alignContent'] = 'unset'
+): {
+  display: CSSProperties['display'];
+  justifyContent: CSSProperties['justifyContent'];
+  alignItems: CSSProperties['alignContent'];
+  alignContent: CSSProperties['alignContent'];
+} => {
+  return {
+    display: 'inline-flex',
+    justifyContent,
+    alignItems,
+    alignContent,
+  };
+};
 
 export const absoluteCenter = ({
   horizontal = false,

packages/app/src/ui/button/styles.ts

@@ -1,4 +1,4 @@
-import { absoluteCenter, displayFlex, styled } from '@/styles';
+import { absoluteCenter, displayInlineFlex, styled } from '@/styles';
 import { CSSProperties } from 'react';
 
 export const StyledIconButton = styled.button<{
@@ -23,7 +23,7 @@ export const StyledIconButton = styled.button<{
       width,
       height,
       color: theme.colors.iconColor,
-      ...displayFlex('center', 'center'),
+      ...displayInlineFlex('center', 'center'),
       position: 'relative',
       ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
       transition: 'background .15s',

packages/app/src/ui/confirm/styles.ts

@@ -1,13 +1,13 @@
 import { displayFlex, styled, AffineTheme } from '@/styles';
 import { ConfirmProps } from '@/ui/confirm/confirm';
+import { ModalWrapper } from '@/ui/modal';
 
-export const StyledModalWrapper = styled.div(({ theme }) => {
+export const StyledModalWrapper = styled(ModalWrapper)(({ theme }) => {
   return {
     width: '460px',
     height: '240px',
     padding: '0 60px',
     background: theme.colors.popoverBackground,
-    borderRadius: '28px',
     position: 'relative',
   };
 });

packages/app/src/ui/modal/index.tsx

@@ -1,6 +1,7 @@
 import Modal from './modal';
 
 export * from './modal-close-button';
+export * from './modal-wrapper';
 export * from './modal';
 
 export default Modal;

packages/app/src/ui/modal/modal-close-button.tsx

@@ -1,24 +1,28 @@
 import { HTMLAttributes } from 'react';
-import { StyledCloseButton } from './style';
 import { CloseIcon } from '@blocksuite/icons';
-
+import { IconButton, IconButtonProps } from '@/ui/button';
+import { styled } from '@/styles';
 export type ModalCloseButtonProps = {
   top?: number;
   right?: number;
-  triggerSize?: [number, number];
-  size?: [number, number];
-  iconSize?: [number, number];
-} & HTMLAttributes<HTMLButtonElement>;
+} & Omit<IconButtonProps, 'children'> &
+  HTMLAttributes<HTMLButtonElement>;
 
-export const ModalCloseButton = ({
-  iconSize = [24, 24],
-  ...props
-}: ModalCloseButtonProps) => {
-  const [iconWidth, iconHeight] = iconSize;
+const StyledIconButton = styled(IconButton)<
+  Pick<ModalCloseButtonProps, 'top' | 'right'>
+>(({ top, right }) => {
+  return {
+    position: 'absolute',
+    top: top ?? 6,
+    right: right ?? 6,
+  };
+});
+
+export const ModalCloseButton = ({ ...props }: ModalCloseButtonProps) => {
   return (
-    <StyledCloseButton {...props}>
-      <CloseIcon width={iconWidth} height={iconHeight} />
-    </StyledCloseButton>
+    <StyledIconButton {...props}>
+      <CloseIcon />
+    </StyledIconButton>
   );
 };
 

packages/app/src/ui/modal/modal-wrapper.tsx

@@ -0,0 +1,17 @@
+import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
+import { styled } from '@/styles';
+
+export const ModalWrapper = styled.div<{
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+}>(({ theme, width, height }) => {
+  return {
+    width,
+    height,
+    backgroundColor: theme.colors.popoverBackground,
+    borderRadius: '12px',
+    position: 'relative',
+  };
+});
+
+export default ModalWrapper;

packages/app/src/ui/modal/modal.tsx

@@ -1,5 +1,5 @@
 import Fade from '@mui/material/Fade';
-import { StyledModal, StyledBackdrop } from './style';
+import { StyledModal, StyledBackdrop } from './styles';
 import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
 
 const Backdrop = ({
@@ -21,11 +21,9 @@ export type ModalProps = ModalUnstyledOwnProps;
 export const Modal = (props: ModalProps) => {
   const { components, open, children, ...otherProps } = props;
   return (
-    <div>
-      <StyledModal {...otherProps} open={open} components={{ Backdrop }}>
-        <Fade in={open}>{children}</Fade>
-      </StyledModal>
-    </div>
+    <StyledModal {...otherProps} open={open} components={{ Backdrop }}>
+      <Fade in={open}>{children}</Fade>
+    </StyledModal>
   );
 };
 

packages/app/src/ui/modal/style.ts

@@ -1,68 +0,0 @@
-import { absoluteCenter, displayFlex, fixedCenter, styled } from '@/styles';
-import ModalUnstyled from '@mui/base/ModalUnstyled';
-import { ModalCloseButtonProps } from '@/ui/modal/modal-close-button';
-
-export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => {
-  return {
-    zIndex: '-1',
-    position: 'fixed',
-    right: '0',
-    bottom: '0',
-    top: '0',
-    left: '0',
-    backgroundColor: 'rgba(58, 76, 92, 0.2)',
-  };
-});
-
-export const StyledModal = styled(ModalUnstyled)(({ theme }) => {
-  return {
-    width: '100vw',
-    height: '100vh',
-    position: 'fixed',
-    left: '0',
-    top: '0',
-    zIndex: theme.zIndex.modal,
-    ...displayFlex('center', 'center'),
-    '*': {
-      WebkitTapHighlightColor: 'transparent',
-      outline: 'none',
-    },
-  };
-});
-
-export const StyledCloseButton = styled.button<
-  Pick<ModalCloseButtonProps, 'size' | 'triggerSize' | 'top' | 'right'>
->(({ theme, triggerSize = [], size = [32, 32], top, right }) => {
-  const [triggerWidth, triggerHeight] = triggerSize;
-  const [width, height] = size;
-
-  return {
-    width: triggerWidth ?? width * 2,
-    height: triggerHeight ?? height * 2,
-    color: theme.colors.iconColor,
-    cursor: 'pointer',
-    ...displayFlex('center', 'center'),
-    position: 'absolute',
-    top: top ?? 0,
-    right: right ?? 0,
-
-    // TODO: we need to add @emotion/babel-plugin
-    '::after': {
-      content: '""',
-      width,
-      height,
-      borderRadius: '6px',
-      ...absoluteCenter({ horizontal: true, vertical: true }),
-    },
-    ':hover': {
-      color: theme.colors.primaryColor,
-      '::after': {
-        background: theme.colors.hoverBackground,
-      },
-    },
-    svg: {
-      position: 'relative',
-      zIndex: 1,
-    },
-  };
-});

packages/app/src/ui/modal/styles.ts

@@ -0,0 +1,32 @@
+import { absoluteCenter, displayFlex, fixedCenter, styled } from '@/styles';
+import ModalUnstyled from '@mui/base/ModalUnstyled';
+import { ModalCloseButtonProps } from '@/ui/modal/modal-close-button';
+
+export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => {
+  return {
+    zIndex: '-1',
+    position: 'fixed',
+    right: '0',
+    bottom: '0',
+    top: '0',
+    left: '0',
+    backgroundColor: 'rgba(58, 76, 92, 0.2)',
+  };
+});
+
+export const StyledModal = styled(ModalUnstyled)(({ theme }) => {
+  return {
+    width: '100vw',
+    height: '100vh',
+    position: 'fixed',
+    left: '0',
+    top: '0',
+    zIndex: theme.zIndex.modal,
+    ...displayFlex('center', 'center'),
+    '*': {
+      WebkitTapHighlightColor: 'transparent',
+      outline: 'none',
+    },
+  };
+});
+