Merge branch 'feat/datacenter' into feat/datacenter-i18n

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, Content } from '@/ui/layout';
+import { Content, FlexWrapper } from '@/ui/layout';
 import Loading from '@/components/loading';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useAppState } from '@/providers/app-state-provider';
@@ -116,7 +116,7 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
         )}
 
         {status === 'importing' && (
-          <Wrapper
+          <FlexWrapper
             wrap={true}
             justifyContent="center"
             style={{ marginTop: 22, paddingBottom: '32px' }}
@@ -126,7 +126,7 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
               OOOOPS! Sorry forgot to remind you that we are working on the
               import function
             </Content>
-          </Wrapper>
+          </FlexWrapper>
         )}
       </ModalWrapper>
     </Modal>

packages/app/src/components/page-list/OperationCell.tsx

@@ -1,7 +1,7 @@
 import { useConfirm } from '@/providers/ConfirmProvider';
 import { PageMeta } from '@/providers/app-state-provider';
 import { Menu, MenuItem } from '@/ui/menu';
-import { Wrapper } from '@/ui/layout';
+import { FlexWrapper } from '@/ui/layout';
 import { IconButton } from '@/ui/button';
 import {
   MoreVerticalIcon,
@@ -63,13 +63,13 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
     </>
   );
   return (
-    <Wrapper alignItems="center" justifyContent="center">
+    <FlexWrapper alignItems="center" justifyContent="center">
       <Menu content={OperationMenu} placement="bottom-end" disablePortal={true}>
         <IconButton darker={true}>
           <MoreVerticalIcon />
         </IconButton>
       </Menu>
-    </Wrapper>
+    </FlexWrapper>
   );
 };
 
@@ -80,7 +80,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { confirm } = useConfirm();
   const { t } = useTranslation();
   return (
-    <Wrapper>
+    <FlexWrapper>
       <IconButton
         darker={true}
         style={{ marginRight: '12px' }}
@@ -108,6 +108,6 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
       >
         <DeleteIcon />
       </IconButton>
-    </Wrapper>
+    </FlexWrapper>
   );
 };

packages/app/src/components/workspace-modal/Footer.tsx

@@ -1,5 +1,5 @@
 import { CloudInsyncIcon, LogOutIcon } from '@blocksuite/icons';
-import { Wrapper } from '@/ui/layout';
+import { FlexWrapper } from '@/ui/layout';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { IconButton } from '@/ui/button';
 import { useAppState } from '@/providers/app-state-provider';
@@ -20,7 +20,7 @@ export const Footer = ({
     <StyledFooter>
       {user && (
         <>
-          <Wrapper>
+          <FlexWrapper>
             <WorkspaceAvatar
               size={40}
               name={user.name}
@@ -30,7 +30,7 @@ export const Footer = ({
               <p>{user.name}</p>
               <p>{user.email}</p>
             </StyleUserInfo>
-          </Wrapper>
+          </FlexWrapper>
           <IconButton
             onClick={() => {
               onLogout();

packages/app/src/components/workspace-modal/WorkspaceCard.tsx

@@ -8,8 +8,8 @@ import { PublishIcon, UsersIcon } from '@blocksuite/icons';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useAppState } from '@/providers/app-state-provider';
 import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles';
-import { Wrapper } from '@/ui/layout';
 import { useTranslation } from '@affine/i18n';
+import { FlexWrapper } from '@/ui/layout';
 
 export const WorkspaceCard = ({
   workspaceData,
@@ -27,9 +27,9 @@ export const WorkspaceCard = ({
       }}
       active={workspaceData.id === currentWorkspace?.id}
     >
-      <Wrapper>
+      <FlexWrapper>
         <WorkspaceUnitAvatar size={58} workspaceUnit={workspaceData} />
-      </Wrapper>
+      </FlexWrapper>
 
       <StyleWorkspaceInfo>
         <StyleWorkspaceTitle>

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

@@ -1,5 +1,5 @@
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { Wrapper } from '@/ui/layout';
+import { FlexWrapper } from '@/ui/layout';
 import { useState } from 'react';
 import { CreateWorkspaceModal } from '../create-workspace';
 
@@ -97,11 +97,11 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                 setCreateWorkspaceOpen(true);
               }}
             >
-              <Wrapper>
+              <FlexWrapper>
                 <StyleWorkspaceAdd className="add-icon">
                   <AddIcon fontSize={18} />
                 </StyleWorkspaceAdd>
-              </Wrapper>
+              </FlexWrapper>
 
               <StyleWorkspaceInfo>
                 <StyleWorkspaceTitle>{t('New Workspace')}</StyleWorkspaceTitle>

packages/app/src/components/workspace-modal/styles.ts

@@ -45,6 +45,7 @@ export const StyledCard = styled.div<{
     borderRadius: '12px',
     border: `1px solid ${borderColor}`,
     ...displayFlex('flex-start', 'flex-start'),
+    marginBottom: '24px',
     ':hover': {
       background: theme.colors.hoverBackground,
       '.add-icon': {
@@ -125,7 +126,7 @@ export const StyledModalContent = styled('div')({
   padding: '8px 40px',
   marginTop: '72px',
   overflow: 'auto',
-  ...displayFlex('space-between', 'flex-start', 'column'),
+  ...displayFlex('space-between', 'flex-start', 'flex-start'),
   flexWrap: 'wrap',
 });
 export const StyledOperationWrapper = styled.div(() => {

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

@@ -25,7 +25,7 @@ import { useConfirm } from '@/providers/ConfirmProvider';
 import { toast } from '@/ui/toast';
 import useMembers from '@/hooks/use-members';
 import Loading from '@/components/loading';
-import { Wrapper } from '@/ui/layout';
+import { FlexWrapper } from '@/ui/layout';
 import { useTranslation } from '@affine/i18n';
 import { EnableWorkspaceButton } from '@/components/enable-workspace';
 
@@ -41,9 +41,9 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
       <StyledMemberContainer>
         <StyledMemberListContainer>
           {!loaded && (
-            <Wrapper justifyContent="center">
+            <FlexWrapper justifyContent="center">
               <Loading size={25} />
-            </Wrapper>
+            </FlexWrapper>
           )}
           {loaded && members.length === 0 && (
             <Empty width={648} sx={{ marginTop: '60px' }} height={300} />