feat: modify import modal

packages/app/src/ui/layout/content.tsx

@@ -5,9 +5,10 @@ import { styled, textEllipsis } from '@/styles';
 export type ContentProps = {
   width?: CSSProperties['width'];
   maxWidth?: CSSProperties['maxWidth'];
+  align?: CSSProperties['textAlign'];
   color?: CSSProperties['color'];
   fontSize?: CSSProperties['fontSize'];
-  fontWeight?: CSSProperties['fontWeight'];
+  weight?: CSSProperties['fontWeight'];
   lineHeight?: CSSProperties['lineHeight'];
   ellipsis?: boolean;
   lineNum?: number;
@@ -19,20 +20,22 @@ export const Content = styled.div<ContentProps>(
     theme,
     color,
     fontSize,
-    fontWeight,
+    weight,
     lineHeight,
     ellipsis,
     lineNum,
     width,
     maxWidth,
+    align,
   }) => {
     return {
       width,
       maxWidth,
+      textAlign: align,
       display: 'inline-block',
       color: color ?? theme.colors.textColor,
       fontSize: fontSize ?? theme.font.base,
-      fontWeight: fontWeight ?? 400,
+      fontWeight: weight ?? 400,
       lineHeight: lineHeight ?? 1.5,
       ...(ellipsis ? textEllipsis(lineNum) : {}),
     };

packages/app/src/ui/layout/wrapper.tsx

@@ -6,19 +6,19 @@ export type WrapperProps = {
   flexDirection?: CSSProperties['flexDirection'];
   justifyContent?: CSSProperties['justifyContent'];
   alignItems?: CSSProperties['alignItems'];
-  flexWrap?: CSSProperties['flexWrap'];
+  wrap?: boolean;
   flexShrink?: CSSProperties['flexShrink'];
   flexGrow?: CSSProperties['flexGrow'];
 };
 
 // Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it.
-export const Wrapper = styled('button', {
+export const Wrapper = styled('div', {
   shouldForwardProp: prop => {
     return ![
       'display',
       'justifyContent',
       'alignItems',
-      'flexWrap',
+      'wrap',
       'flexDirection',
       'flexShrink',
       'flexGrow',
@@ -29,7 +29,7 @@ export const Wrapper = styled('button', {
     display = 'flex',
     justifyContent = 'flex-start',
     alignItems = 'center',
-    flexWrap = 'nowrap',
+    wrap = false,
     flexDirection = 'row',
     flexShrink = '0',
     flexGrow = '0',
@@ -38,7 +38,7 @@ export const Wrapper = styled('button', {
       display,
       justifyContent,
       alignItems,
-      flexWrap,
+      flexWrap: wrap ? 'wrap' : 'nowrap',
       flexDirection,
       flexShrink,
       flexGrow,

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

@@ -4,10 +4,12 @@ import { styled } from '@/styles';
 export const ModalWrapper = styled.div<{
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
-}>(({ theme, width, height }) => {
+  minHeight?: CSSProperties['minHeight'];
+}>(({ theme, width, height, minHeight }) => {
   return {
     width,
     height,
+    minHeight,
     backgroundColor: theme.colors.popoverBackground,
     borderRadius: '12px',
     position: 'relative',