From 9a717f7ed2e7bfa64c7ec5878519ff03460cf0e0 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Mon, 23 Jan 2023 11:36:04 +0800
Subject: [PATCH] feat: rewrite async style

---
 .../src/components/workspace-avatar/Avatar.tsx    |  7 +++++++
 .../workspace-avatar/WorkspaceUnitAvatar.tsx      |  3 +++
 .../src/components/workspace-setting/SyncPage.tsx | 15 +++++++--------
 .../components/workspace-setting/member/style.ts  |  2 +-
 .../app/src/components/workspace-setting/style.ts | 10 ++++++++--
 5 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/components/workspace-avatar/Avatar.tsx b/packages/app/src/components/workspace-avatar/Avatar.tsx
index c01808e68f..e9bea0aadd 100644
--- a/packages/app/src/components/workspace-avatar/Avatar.tsx
+++ b/packages/app/src/components/workspace-avatar/Avatar.tsx
@@ -3,6 +3,7 @@ interface IWorkspaceAvatar {
   size: number;
   name: string;
   avatar: string;
+  style?: React.CSSProperties;
 }
 
 export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
@@ -14,12 +15,15 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
       {props.avatar ? (
         <div
           style={{
+            ...props.style,
             width: sizeStr,
             height: sizeStr,
             border: '1px solid #fff',
             color: '#fff',
             borderRadius: '50%',
             overflow: 'hidden',
+            display: 'inline-block',
+            verticalAlign: 'middle',
           }}
         >
           <picture>
@@ -33,6 +37,7 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
       ) : (
         <div
           style={{
+            ...props.style,
             width: sizeStr,
             height: sizeStr,
             border: '1px solid #fff',
@@ -42,6 +47,8 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
             borderRadius: '50%',
             textAlign: 'center',
             lineHeight: size + 'px',
+            display: 'inline-block',
+            verticalAlign: 'middle',
           }}
         >
           {(props.name || 'AFFiNE').substring(0, 1)}
diff --git a/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx b/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx
index 4144d9645d..bdb8431e2c 100644
--- a/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx
+++ b/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx
@@ -24,10 +24,12 @@ export const WorkspaceUnitAvatar = ({
   size = 20,
   name,
   workspaceUnit,
+  style,
 }: {
   size?: number;
   name?: string;
   workspaceUnit?: WorkspaceUnit | null;
+  style?: React.CSSProperties;
 }) => {
   const avatarUrl = useAvatar(workspaceUnit || undefined);
   return (
@@ -35,6 +37,7 @@ export const WorkspaceUnitAvatar = ({
       size={size}
       name={name || workspaceUnit?.name || ''}
       avatar={avatarUrl}
+      style={style}
     />
   );
 };
diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx
index c9d0523f6e..6969461a38 100644
--- a/packages/app/src/components/workspace-setting/SyncPage.tsx
+++ b/packages/app/src/components/workspace-setting/SyncPage.tsx
@@ -1,6 +1,6 @@
 import {
+  StyleAsync,
   StyledPublishContent,
-  StyledPublishCopyContainer,
   StyledPublishExplanation,
   StyledWorkspaceName,
   StyledWorkspaceType,
@@ -24,19 +24,18 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                 size={32}
                 name={workspace.name}
                 workspaceUnit={workspace}
+                style={{ marginRight: '12px' }}
               />
-              <StyledWorkspaceName>
-                &nbsp;{workspace.name}&nbsp;
-              </StyledWorkspaceName>
+              <StyledWorkspaceName>{workspace.name};</StyledWorkspaceName>
               <StyledWorkspaceType>is a Local Workspace.</StyledWorkspaceType>
             </StyledPublishExplanation>
             <StyledWorkspaceType>
               All data is stored on the current device. You can enable AFFiNE
               Cloud for this workspace to keep data in sync with the cloud.
             </StyledWorkspaceType>
-            <StyledPublishCopyContainer>
+            <StyleAsync>
               <EnableWorkspaceButton></EnableWorkspaceButton>
-            </StyledPublishCopyContainer>
+            </StyleAsync>
           </>
         ) : (
           <>
@@ -47,7 +46,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                 the AFFiNE
               </Trans>
             </StyledPublishExplanation>
-            <StyledPublishCopyContainer>
+            <StyleAsync>
               <Menu
                 content={
                   <>
@@ -76,7 +75,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                   {t('Download data to device', { CoreOrAll: 'all' })}
                 </Button>
               </Menu>
-            </StyledPublishCopyContainer>
+            </StyleAsync>
           </>
         )}
       </StyledPublishContent>
diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts
index 46eeaa9bed..ce18dcb0ad 100644
--- a/packages/app/src/components/workspace-setting/member/style.ts
+++ b/packages/app/src/components/workspace-setting/member/style.ts
@@ -105,7 +105,7 @@ export const StyledPublishExplanation = styled('div')(() => {
     fontSize: '18px',
     lineHeight: '26px',
     flex: 1,
-    marginTop: '60px',
+    marginTop: '64px',
   };
 });
 
diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts
index 2f95a29b89..dcde665f31 100644
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/packages/app/src/components/workspace-setting/style.ts
@@ -107,14 +107,14 @@ export const StyledPublishExplanation = styled('div')(() => {
     marginBottom: '22px',
   };
 });
-export const StyledWorkspaceName = styled('div')(() => {
+export const StyledWorkspaceName = styled('span')(() => {
   return {
     fontWeight: '400',
     fontSize: '18px',
     lineHeight: '26px',
   };
 });
-export const StyledWorkspaceType = styled('div')(() => {
+export const StyledWorkspaceType = styled('span')(() => {
   return {
     fontWeight: '500',
     fontSize: '18px',
@@ -148,3 +148,9 @@ export const StyledPublishContent = styled('div')(() => {
     flexDirection: 'column',
   };
 });
+
+export const StyleAsync = styled('div')(() => {
+  return {
+    marginTop: '64px',
+  };
+});