feat: modify Modal component style

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

@@ -91,8 +91,6 @@ export const ContactModal = ({
             <span>Alpha</span>
           </StyledModalHeaderLeft>
           <ModalCloseButton
-            top={6}
-            right={6}
             onClick={() => {
               onClose();
             }}

packages/app/src/components/delete-workspace/index.tsx

@@ -29,8 +29,6 @@ export const DeleteModal = ({
         <ModalWrapper width={620} height={334}>
           <Header>
             <ModalCloseButton
-              top={6}
-              right={6}
               onClick={() => {
                 onClose();
               }}

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

@@ -14,8 +14,6 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => {
       <ModalWrapper width={560} height={292}>
         <Header>
           <ModalCloseButton
-            top={6}
-            right={6}
             onClick={() => {
               onClose();
             }}

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

@@ -15,8 +15,6 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
       <ModalWrapper width={560} height={292}>
         <Header>
           <ModalCloseButton
-            top={6}
-            right={6}
             onClick={() => {
               onClose(true);
             }}

packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx

@@ -76,8 +76,6 @@ export const InviteMemberModal = ({
         <ModalWrapper width={460} height={236}>
           <Header>
             <ModalCloseButton
-              top={6}
-              right={6}
               onClick={() => {
                 onClose();
               }}

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

@@ -5,6 +5,7 @@ import { styled } from '@/styles';
 export type ModalCloseButtonProps = {
   top?: number;
   right?: number;
+  absolute?: boolean;
 } & Omit<IconButtonProps, 'children'> &
   HTMLAttributes<HTMLButtonElement>;
 
@@ -13,16 +14,23 @@ const StyledIconButton = styled(IconButton)<
 >(({ top, right }) => {
   return {
     position: 'absolute',
-    top: top ?? 6,
-    right: right ?? 6,
+    top: top ?? 24,
+    right: right ?? 40,
   };
 });
 
-export const ModalCloseButton = ({ ...props }: ModalCloseButtonProps) => {
-  return (
+export const ModalCloseButton = ({
+  absolute = true,
+  ...props
+}: ModalCloseButtonProps) => {
+  return absolute ? (
     <StyledIconButton {...props}>
       <CloseIcon />
     </StyledIconButton>
+  ) : (
+    <IconButton>
+      <CloseIcon />
+    </IconButton>
   );
 };
 

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

@@ -11,7 +11,7 @@ export const ModalWrapper = styled.div<{
     height,
     minHeight,
     backgroundColor: theme.colors.popoverBackground,
-    borderRadius: '12px',
+    borderRadius: '24px',
     position: 'relative',
   };
 });