feat: modify style of modal

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',
+    },
+  };
+});
+