feat: rewrite async 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',
+  };
+});