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

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(() => {