feat: setting style

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

@@ -13,7 +13,6 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
   const sizeStr = size + 'px';
   const { dataCenter, currentWorkspace } = useAppState();
   dataCenter.getBlob(currentWorkspace, props.avatar).then(res => {
-    console.log(res);
     setAvatar(res ?? '');
   });
   const [avatar, setAvatar] = useState<string>(props.avatar);

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

@@ -10,6 +10,7 @@ import {
   StyledMemberRoleContainer,
   StyledMemberTitleContainer,
   StyledMoreVerticalButton,
+  StyledPublishExplanation,
 } from './style';
 import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
 import { useEffect, useState } from 'react';
@@ -173,10 +174,8 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
         </>
       ) : (
         <StyledMemberWarp>
-          <div style={{ flex: 1 }}>
-            Collaborating with other members requires AFFiNE Cloud service.
-          </div>
-          <div style={{ height: '40px' }}>
+          <>Collaborating with other members requires AFFiNE Cloud service.</>
+          <StyledPublishExplanation>
             <Button
               type="primary"
               shape="circle"
@@ -200,7 +199,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
             >
               Enable AFFiNE Cloud
             </Button>
-          </div>
+          </StyledPublishExplanation>
         </StyledMemberWarp>
       )}
     </div>

packages/app/src/components/workspace-setting/SyncPage.tsx

@@ -6,29 +6,27 @@ import {
 import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
 import { Menu, MenuItem } from '@/ui/menu';
-import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { WorkspaceInfo } from '@affine/datacenter';
 export const SyncPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
   console.log('workspace: ', workspace);
-  const { currentWorkspace, updateWorkspaceMeta } = useTemporaryHelper();
 
   return (
     <div>
       <StyledPublishContent>
-        {currentWorkspace?.type === 'local' ? (
+        {workspace?.provider === 'local' ? (
           <>
             <StyledPublishExplanation>
-              {currentWorkspace.name} is Local Workspace. All data is stored on
-              the current device. You can enable AFFiNE Cloud for this workspace
-              to keep data in sync with the cloud.
+              {workspace.name ?? 'Affine'} is Local Workspace. All data is
+              stored on the current device. You can enable AFFiNE Cloud for this
+              workspace to keep data in sync with the cloud.
             </StyledPublishExplanation>
 
             <StyledPublishCopyContainer>
               <Button
                 onClick={() => {
-                  updateWorkspaceMeta(currentWorkspace.id, {
-                    type: 'cloud',
-                  });
+                  // updateWorkspaceMeta(currentWorkspace.id, {
+                  //   type: 'cloud',
+                  // });
                 }}
                 type="primary"
                 shape="circle"
@@ -40,8 +38,8 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceInfo }) => {
         ) : (
           <>
             <StyledPublishExplanation>
-              <code>{currentWorkspace && currentWorkspace.name}</code> is Cloud
-              Workspace. All data will be synchronized and saved to the AFFiNE
+              <code>{workspace.name ?? 'Affine'}</code> is Cloud Workspace. All
+              data will be synchronized and saved to the AFFiNE
             </StyledPublishExplanation>
             <StyledPublishCopyContainer>
               <Menu

packages/app/src/components/workspace-setting/general/style.ts

@@ -30,8 +30,7 @@ export const StyledSettingAvatar = styled(MuiAvatar)(() => {
 export const StyledMemberWarp = styled('div')(() => {
   return {
     display: 'flex',
-    height: '500px',
     flexDirection: 'column',
-    padding: '60px 0',
+    padding: '40px 0',
   };
 });

packages/app/src/components/workspace-setting/style.ts

@@ -7,6 +7,8 @@ export const StyledSettingContainer = styled('div')(({ theme }) => {
     display: 'flex',
     padding: '50px',
     flexDirection: 'column',
+    height: '100vh',
+    overflow: 'auto',
   };
 });