feat: modify Modal component style

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