feat: modify import modal

packages/app/src/components/import/index.tsx

@@ -1,7 +1,7 @@
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { StyledButtonWrapper, StyledTitle } from './styles';
 import { Button } from '@/ui/button';
-import { Wrapper } from '@/ui/layout';
+import { Wrapper, Content } from '@/ui/layout';
 import { Loading } from '@/components/loading';
 import { useEffect, useState } from 'react';
 type ImportModalProps = {
@@ -9,21 +9,19 @@ type ImportModalProps = {
   onClose: () => void;
 };
 export const ImportModal = ({ open, onClose }: ImportModalProps) => {
-  const [status, setStatus] = useState<'unImported' | 'importing'>(
-    'unImported'
-  );
+  const [status, setStatus] = useState<'unImported' | 'importing'>('importing');
 
   useEffect(() => {
     if (status === 'importing') {
       setTimeout(() => {
         setStatus('unImported');
-      }, 3000);
+      }, 1500);
     }
   }, [status]);
 
   return (
     <Modal open={open} onClose={onClose}>
-      <ModalWrapper width={460} height={240}>
+      <ModalWrapper width={460} minHeight={240}>
         <ModalCloseButton onClick={onClose} />
         <StyledTitle>Import</StyledTitle>
 
@@ -47,8 +45,16 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
         )}
 
         {status === 'importing' && (
-          <Wrapper justifyContent="center" style={{ marginTop: 22 }}>
+          <Wrapper
+            wrap={true}
+            justifyContent="center"
+            style={{ marginTop: 22, paddingBottom: '32px' }}
+          >
             <Loading size={25}></Loading>
+            <Content align="center" weight="500">
+              OOOOPS! Sorry forgot to remind you that we are working on the
+              import function
+            </Content>
           </Wrapper>
         )}
       </ModalWrapper>

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',