feat: rewrite async style

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)}

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}
     />
   );
 };

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>

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',
   };
 });
 

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',
+  };
+});