Fix/UI issue (#946)

Co-authored-by: JimmFly <yangjinfei001@gmail.com>
2024-09-21 16:38:32 +03:00 · 2023-02-11 00:19:21 +08:00 · 2023-02-11 00:19:21 +08:00 · d5f4c4210d
commit d5f4c4210d
parent 8a7393a961
52 changed files with 610 additions and 659 deletions
--- a/apps/desktop/scripts/buildAffine.mjs
+++ b/apps/desktop/scripts/buildAffine.mjs
@ -7,7 +7,7 @@
 const repoDirectory = path.join(__dirname, '..', '..', '..');
 const clientAppDirectory = path.join(__dirname, '..');
 const publicDistributionDirectory = path.join(clientAppDirectory, 'public');
-const affineSrcDirectory = path.join(repoDirectory, 'packages', 'app');
+const affineSrcDirectory = path.join(repoDirectory, 'apps', 'web');
 const affineSrcOutDirectory = path.join(affineSrcDirectory, 'out');
 const publicAffineOutDirectory = path.join(
  publicDistributionDirectory,
--- a/apps/desktop/src/preload/components/enable-workspace-modal/index.tsx
+++ b/apps/desktop/src/preload/components/enable-workspace-modal/index.tsx
@ -1,12 +1,13 @@
-import { styled } from '@affine/component';
 import { Modal, ModalWrapper } from '@affine/component';
-import { Button, IconButton } from '@affine/component';
+import { IconButton } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { useAppState } from '@/providers/app-state-provider';
 import { useState } from 'react';
 import router from 'next/router';
 import { toast } from '@affine/component';
 import { CloseIcon } from '@blocksuite/icons';
+import { Header, Content, ContentTitle, StyleTips, StyleButton } from './style';
+
 interface EnableWorkspaceModalProps {
  open: boolean;
  onClose: () => void;
@ -71,41 +72,3 @@ export const EnableWorkspaceModal = ({
    </Modal>
  );
 };
-
-const Header = styled('div')({
-  height: '44px',
-  display: 'flex',
-  flexDirection: 'row-reverse',
-  paddingRight: '10px',
-  paddingTop: '10px',
-});
-
-const Content = styled('div')({
-  textAlign: 'center',
-});
-
-const ContentTitle = styled('h1')({
-  fontSize: '20px',
-  lineHeight: '28px',
-  fontWeight: 600,
-  textAlign: 'center',
-});
-
-const StyleTips = styled('div')(() => {
-  return {
-    userSelect: 'none',
-    width: '400px',
-    margin: 'auto',
-    marginBottom: '32px',
-    marginTop: '12px',
-  };
-});
-
-const StyleButton = styled(Button)(() => {
-  return {
-    width: '284px',
-    display: 'block',
-    margin: 'auto',
-    marginTop: '16px',
-  };
-});
--- a/apps/desktop/src/preload/components/enable-workspace-modal/style.ts
+++ b/apps/desktop/src/preload/components/enable-workspace-modal/style.ts
@ -0,0 +1,39 @@
+import { Button, styled } from '@affine/component';
+
+export const Header = styled('div')({
+  height: '44px',
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  paddingRight: '10px',
+  paddingTop: '10px',
+});
+
+export const Content = styled('div')({
+  textAlign: 'center',
+});
+
+export const ContentTitle = styled('h1')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'center',
+});
+
+export const StyleTips = styled('div')(() => {
+  return {
+    userSelect: 'none',
+    width: '400px',
+    margin: 'auto',
+    marginBottom: '32px',
+    marginTop: '12px',
+  };
+});
+
+export const StyleButton = styled(Button)(() => {
+  return {
+    width: '284px',
+    display: 'block',
+    margin: 'auto',
+    marginTop: '16px',
+  };
+});
--- a/apps/desktop/src/preload/components/icons/index.tsx
+++ b/apps/desktop/src/preload/components/icons/index.tsx
@ -0,0 +1,28 @@
+import {
+  JoinedWorkspaceIcon as DefaultJoinedWorkspaceIcon,
+  LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
+  CloudWorkspaceIcon as DefaultCloudWorkspaceIcon,
+  LocalDataIcon as DefaultLocalDataIcon,
+  PublishIcon as DefaultPublishIcon,
+} from '@blocksuite/icons';
+
+// Here are some icons with special color or size
+
+export const JoinedWorkspaceIcon = () => {
+  return <DefaultJoinedWorkspaceIcon style={{ color: '#FF646B' }} />;
+};
+export const LocalWorkspaceIcon = () => {
+  return <DefaultLocalWorkspaceIcon style={{ color: '#FDBD32' }} />;
+};
+
+export const CloudWorkspaceIcon = () => {
+  return <DefaultCloudWorkspaceIcon style={{ color: '##60A5FA' }} />;
+};
+
+export const LocalDataIcon = () => {
+  return <DefaultLocalDataIcon style={{ color: '#62CD80' }} />;
+};
+
+export const PublishIcon = () => {
+  return <DefaultPublishIcon style={{ color: '##8699FF' }} />;
+};
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -14,7 +14,7 @@
    "@affine/i18n": "workspace:*",
    "@blocksuite/blocks": "0.4.0-20230210031655-264744e",
    "@blocksuite/editor": "0.4.0-20230210031655-264744e",
-    "@blocksuite/icons": "^2.0.2",
+    "@blocksuite/icons": "^2.0.14",
    "@blocksuite/store": "0.4.0-20230210031655-264744e",
    "@emotion/css": "^11.10.5",
    "@emotion/react": "^11.10.5",
--- a/apps/web/src/components/enable-workspace-modal/index.tsx
+++ b/apps/web/src/components/enable-workspace-modal/index.tsx
@ -0,0 +1,74 @@
+import { Modal, ModalWrapper } from '@affine/component';
+import { IconButton } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import { useAppState } from '@/providers/app-state-provider';
+import { useState } from 'react';
+import router from 'next/router';
+import { toast } from '@affine/component';
+import { CloseIcon } from '@blocksuite/icons';
+import { Header, Content, ContentTitle, StyleTips, StyleButton } from './style';
+
+interface EnableWorkspaceModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const EnableWorkspaceModal = ({
+  open,
+  onClose,
+}: EnableWorkspaceModalProps) => {
+  const { t } = useTranslation();
+  const { user, dataCenter, login, currentWorkspace } = useAppState();
+  const [loading, setLoading] = useState(false);
+  return (
+    <Modal open={open} onClose={onClose} data-testid="logout-modal">
+      <ModalWrapper width={560} height={292}>
+        <Header>
+          <IconButton
+            onClick={() => {
+              onClose();
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Header>
+        <Content>
+          <ContentTitle>{t('Enable AFFiNE Cloud')}?</ContentTitle>
+          <StyleTips>{t('Enable AFFiNE Cloud Description')}</StyleTips>
+          {/* <StyleTips>{t('Retain local cached data')}</StyleTips> */}
+          <div>
+            <StyleButton
+              shape="round"
+              type="primary"
+              loading={loading}
+              onClick={async () => {
+                setLoading(true);
+                if (!user) {
+                  await login();
+                }
+                if (currentWorkspace) {
+                  const workspace = await dataCenter.enableWorkspaceCloud(
+                    currentWorkspace
+                  );
+                  workspace &&
+                    router.push(`/workspace/${workspace.id}/setting`);
+                  toast(t('Enabled success'));
+                }
+              }}
+            >
+              {user ? t('Enable') : t('Sign in and Enable')}
+            </StyleButton>
+            <StyleButton
+              shape="round"
+              onClick={() => {
+                onClose();
+              }}
+            >
+              {t('Not now')}
+            </StyleButton>
+          </div>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};
--- a/apps/web/src/components/enable-workspace-modal/style.ts
+++ b/apps/web/src/components/enable-workspace-modal/style.ts
@ -0,0 +1,39 @@
+import { Button, styled } from '@affine/component';
+
+export const Header = styled('div')({
+  height: '44px',
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  paddingRight: '10px',
+  paddingTop: '10px',
+});
+
+export const Content = styled('div')({
+  textAlign: 'center',
+});
+
+export const ContentTitle = styled('h1')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'center',
+});
+
+export const StyleTips = styled('div')(() => {
+  return {
+    userSelect: 'none',
+    width: '400px',
+    margin: 'auto',
+    marginBottom: '32px',
+    marginTop: '12px',
+  };
+});
+
+export const StyleButton = styled(Button)(() => {
+  return {
+    width: '284px',
+    display: 'block',
+    margin: 'auto',
+    marginTop: '16px',
+  };
+});
--- a/apps/web/src/components/enable-workspace/index.tsx
+++ b/apps/web/src/components/enable-workspace/index.tsx
@ -1,28 +0,0 @@
-import { Button } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
-import { useState } from 'react';
-import { EnableWorkspaceModal } from './EnableWorkspaceModal';
-
-export const EnableWorkspaceButton = () => {
-  const { t } = useTranslation();
-  const [enableModalOpen, setEnableModalOpen] = useState(false);
-  return (
-    <>
-      <Button
-        type="light"
-        shape="circle"
-        onClick={async () => {
-          setEnableModalOpen(true);
-        }}
-      >
-        {t('Enable AFFiNE Cloud')}
-      </Button>
-      <EnableWorkspaceModal
-        open={enableModalOpen}
-        onClose={() => {
-          setEnableModalOpen(false);
-        }}
-      ></EnableWorkspaceModal>
-    </>
-  );
-};
--- a/apps/web/src/components/header/header-right-items/SyncUser.tsx
+++ b/apps/web/src/components/header/header-right-items/SyncUser.tsx
@ -1,50 +1,47 @@
-import { CloudUnsyncedIcon } from '@blocksuite/icons';
-import { useModal } from '@/store/globalModal';
+import { LocalWorkspaceIcon, CloudWorkspaceIcon } from '@blocksuite/icons';
 import { useAppState } from '@/providers/app-state-provider';
-import { IconButton } from '@affine/component';
+import { styled, Tooltip } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
+import { useModal } from '@/store/globalModal';

-// Temporary solution to use this component, since the @blocksuite/icons has not been published yet
-const DefaultSyncIcon = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M3 13.6493C3 16.6044 5.41766 19 8.4 19L16.5 19C18.9853 19 21 16.9839 21 14.4969C21 12.6503 19.8893 10.9449 18.3 10.25C18.1317 7.32251 15.684 5 12.6893 5C10.3514 5 8.34694 6.48637 7.5 8.5C4.8 8.9375 3 11.2001 3 13.6493Z"
-        stroke="#888A9E"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M11.4571 9L9 16H10.4392L12.0021 11.1586L13.5657 16H15L12.5425 9H11.4571Z"
-        fill="#888A9E"
-      />
-    </svg>
-  );
-};
+const IconWrapper = styled.div(() => {
+  return {
+    width: '20px',
+    height: '20px',
+    marginRight: '12px',
+    fontSize: '20px',
+  };
+});
 export const SyncUser = () => {
-  const { triggerLoginModal } = useModal();
-  const appState = useAppState();
+  const { currentWorkspace } = useAppState();
+  const { triggerEnableWorkspaceModal } = useModal();

-  return appState.user ? (
-    <IconButton iconSize="middle" disabled>
-      <DefaultSyncIcon />
-    </IconButton>
-  ) : (
-    <IconButton
-      iconSize="middle"
-      data-testid="cloud-unsync-icon"
-      onClick={triggerLoginModal}
-    >
-      <CloudUnsyncedIcon />
-    </IconButton>
+  const { t } = useTranslation();
+
+  if (currentWorkspace?.provider === 'local') {
+    return (
+      <Tooltip
+        content={t('Saved then enable AFFiNE Cloud')}
+        placement="bottom-end"
+      >
+        <IconWrapper
+          onClick={() => {
+            triggerEnableWorkspaceModal();
+          }}
+          style={{ cursor: 'pointer' }}
+        >
+          <LocalWorkspaceIcon />
+        </IconWrapper>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip content={t('AFFiNE Cloud')} placement="bottom-end">
+      <IconWrapper>
+        <CloudWorkspaceIcon />
+      </IconWrapper>
+    </Tooltip>
  );
 };

--- a/apps/web/src/components/header/styles.ts
+++ b/apps/web/src/components/header/styles.ts
@ -4,6 +4,7 @@ export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
  ({ hasWarning }) => {
    return {
      height: hasWarning ? '96px' : '60px',
+      padding: '0 28px',
    };
  }
 );
@ -39,6 +40,9 @@ export const StyledHeaderRightSide = styled('div')({
  height: '100%',
  display: 'flex',
  alignItems: 'center',
+  '>*:not(:last-child)': {
+    marginRight: '12px',
+  },
 });

 export const StyledBrowserWarning = styled.div<{ show: boolean }>(
--- a/apps/web/src/components/help-island/index.tsx
+++ b/apps/web/src/components/help-island/index.tsx
@ -27,7 +27,9 @@ export const HelpIsland = ({
        setShowSpread(!spread);
      }}
    >
-      <StyledAnimateWrapper spread={spread}>
+      <StyledAnimateWrapper
+        style={{ height: spread ? `${showList.length * 44}px` : 0 }}
+      >
        {showList.includes('contact') && (
          <Tooltip content={t('Contact Us')} placement="left-end">
            <StyledIconWrapper
--- a/apps/web/src/components/help-island/style.ts
+++ b/apps/web/src/components/help-island/style.ts
@ -51,10 +51,7 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
  };
 });

-export const StyledAnimateWrapper = styled('div', {
-  shouldForwardProp: prop => prop !== 'spread',
-})<{ spread: boolean }>(({ spread }) => ({
-  height: spread ? '88px' : '0',
+export const StyledAnimateWrapper = styled('div')(() => ({
  transition: 'height 0.2s cubic-bezier(0, 0, 0.55, 1.6)',
  overflow: 'hidden',
 }));
--- a/apps/web/src/components/icons/index.tsx
+++ b/apps/web/src/components/icons/index.tsx
@ -0,0 +1,28 @@
+import {
+  JoinedWorkspaceIcon as DefaultJoinedWorkspaceIcon,
+  LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
+  CloudWorkspaceIcon as DefaultCloudWorkspaceIcon,
+  LocalDataIcon as DefaultLocalDataIcon,
+  PublishIcon as DefaultPublishIcon,
+} from '@blocksuite/icons';
+
+// Here are some icons with special color or size
+
+export const JoinedWorkspaceIcon = () => {
+  return <DefaultJoinedWorkspaceIcon style={{ color: '#FF646B' }} />;
+};
+export const LocalWorkspaceIcon = () => {
+  return <DefaultLocalWorkspaceIcon style={{ color: '#FDBD32' }} />;
+};
+
+export const CloudWorkspaceIcon = () => {
+  return <DefaultCloudWorkspaceIcon style={{ color: '##60A5FA' }} />;
+};
+
+export const LocalDataIcon = () => {
+  return <DefaultLocalDataIcon style={{ color: '#62CD80' }} />;
+};
+
+export const PublishIcon = () => {
+  return <DefaultPublishIcon style={{ color: '##8699FF' }} />;
+};
--- a/apps/web/src/components/logout-modal/index.tsx
+++ b/apps/web/src/components/logout-modal/index.tsx
@ -14,6 +14,7 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
  const [localCache, setLocalCache] = useState(true);
  const { blobDataSynced } = useAppState();
  const { t } = useTranslation();
+
  return (
    <Modal open={open} onClose={onClose} data-testid="logout-modal">
      <ModalWrapper width={560} height={292}>
@ -28,8 +29,8 @@ export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
          <ContentTitle>{t('Sign out')}?</ContentTitle>
          <SignDes>
            {blobDataSynced
-              ? t('Set up an AFFiNE account to sync data')
-              : 'All data has been stored in the cloud'}
+              ? t('Sign out description')
+              : t('All data has been stored in the cloud')}
          </SignDes>
          <StyleTips>
            {localCache ? (
--- a/apps/web/src/components/page-list/OperationCell.tsx
+++ b/apps/web/src/components/page-list/OperationCell.tsx
@ -6,10 +6,10 @@ import { IconButton } from '@affine/component';
 import {
  MoreVerticalIcon,
  RestoreIcon,
-  DeleteIcon,
  FavouritesIcon,
  FavouritedIcon,
  OpenInNewIcon,
+  DeleteForeverIcon,
  TrashIcon,
 } from '@blocksuite/icons';
 import { toast } from '@affine/component';
@ -53,7 +53,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
            confirmType: 'danger',
          }).then(confirm => {
            confirm && toggleDeletePage(id);
-            toast(t('Moved to Trash'));
+            confirm && toast(t('Moved to Trash'));
          });
        }}
        icon={<TrashIcon />}
@ -106,7 +106,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
          });
        }}
      >
-        <DeleteIcon />
+        <DeleteForeverIcon />
      </IconButton>
    </FlexWrapper>
  );
--- a/apps/web/src/components/quick-search/Footer.tsx
+++ b/apps/web/src/components/quick-search/Footer.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { AddIcon } from '@blocksuite/icons';
+import { PlusIcon } from '@blocksuite/icons';
 import { StyledModalFooterContent } from './style';
 import { Command } from 'cmdk';
 import { usePageHelper } from '@/hooks/use-page-helper';
@ -21,7 +21,7 @@ export const Footer = (props: { query: string; onClose: () => void }) => {
      }}
    >
      <StyledModalFooterContent>
-        <AddIcon />
+        <PlusIcon />
        {query ? (
          <span>{t('New Keyword Page', { query: query })}</span>
        ) : (
--- a/apps/web/src/components/workspace-avatar/Avatar.tsx
+++ b/apps/web/src/components/workspace-avatar/Avatar.tsx
@ -18,7 +18,6 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
            ...props.style,
            width: sizeStr,
            height: sizeStr,
-            border: '1px solid #fff',
            color: '#fff',
            borderRadius: '50%',
            overflow: 'hidden',
--- a/apps/web/src/components/workspace-layout/index.tsx
+++ b/apps/web/src/components/workspace-layout/index.tsx
@ -4,11 +4,10 @@ import { useRouter } from 'next/router';
 import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles';
 import { PropsWithChildren } from 'react';
 import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
-import { PageLoading } from '@/components/loading';

 export const WorkspaceDefender = ({ children }: PropsWithChildren) => {
  const { workspaceLoaded } = useEnsureWorkspace();
-  return <>{workspaceLoaded ? children : <PageLoading />}</>;
+  return <>{workspaceLoaded ? children : null}</>;
 };

 export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
--- a/apps/web/src/components/workspace-modal/Footer.tsx
+++ b/apps/web/src/components/workspace-modal/Footer.tsx
@ -1,4 +1,4 @@
-import { CloudInsyncIcon, LogOutIcon } from '@blocksuite/icons';
+import { CloudWorkspaceIcon, SignOutIcon } from '@blocksuite/icons';
 import { FlexWrapper } from '@affine/component';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { IconButton } from '@affine/component';
@ -37,7 +37,7 @@ export const Footer = ({
                onLogout();
              }}
            >
-              <LogOutIcon />
+              <SignOutIcon />
            </IconButton>
          </Tooltip>
        </>
@ -49,7 +49,7 @@ export const Footer = ({
          bold
          icon={
            <div className="circle">
-              <CloudInsyncIcon fontSize={16} />
+              <CloudWorkspaceIcon fontSize={16} />
            </div>
          }
          onClick={async () => {
--- a/apps/web/src/components/workspace-modal/SelectLanguageMenu.tsx
+++ b/apps/web/src/components/workspace-modal/SelectLanguageMenu.tsx
@ -56,7 +56,7 @@ export const LanguageMenu = () => {
 const ListItem = styled(MenuItem)(({ theme }) => ({
  height: '38px',
  color: theme.colors.popoverColor,
-  fontSize: theme.font.sm,
+  fontSize: theme.font.base,
  textTransform: 'capitalize',
  padding: '0 24px',
 }));
--- a/apps/web/src/components/workspace-modal/WorkspaceCard.tsx
+++ b/apps/web/src/components/workspace-modal/WorkspaceCard.tsx
@ -1,16 +1,15 @@
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import {
-  CloudIcon,
-  LocalIcon,
-  OfflineIcon,
-  PublishedIcon,
-} from '@/components/workspace-modal/icons';
-import { UsersIcon } from '@blocksuite/icons';
+  JoinedWorkspaceIcon,
+  LocalWorkspaceIcon,
+  CloudWorkspaceIcon,
+  LocalDataIcon,
+  PublishIcon,
+} from '@/components/icons';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useAppState } from '@/providers/app-state-provider';
 import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles';
 import { useTranslation } from '@affine/i18n';
-import { FlexWrapper } from '@affine/component';

 const WorkspaceType = ({ workspaceData }: { workspaceData: WorkspaceUnit }) => {
  const { user } = useAppState();
@ -20,7 +19,7 @@ const WorkspaceType = ({ workspaceData }: { workspaceData: WorkspaceUnit }) => {
  if (workspaceData.provider === 'local') {
    return (
      <p>
-        <LocalIcon />
+        <LocalWorkspaceIcon />
        {t('Local Workspace')}
      </p>
    );
@ -28,12 +27,12 @@ const WorkspaceType = ({ workspaceData }: { workspaceData: WorkspaceUnit }) => {

  return isOwner ? (
    <p>
-      <CloudIcon />
+      <CloudWorkspaceIcon />
      {t('Cloud Workspace')}
    </p>
  ) : (
    <p>
-      <UsersIcon fontSize={20} color={'#FF646B'} />
+      <JoinedWorkspaceIcon />
      {t('Joined Workspace')}
    </p>
  );
@ -56,9 +55,7 @@ export const WorkspaceCard = ({
      }}
      active={workspaceData.id === currentWorkspace?.id}
    >
-      <FlexWrapper>
-        <WorkspaceUnitAvatar size={58} workspaceUnit={workspaceData} />
-      </FlexWrapper>
+      <WorkspaceUnitAvatar size={58} workspaceUnit={workspaceData} />

      <StyleWorkspaceInfo>
        <StyleWorkspaceTitle>
@ -67,13 +64,13 @@ export const WorkspaceCard = ({
        <WorkspaceType workspaceData={workspaceData} />
        {workspaceData.provider === 'local' && (
          <p>
-            <OfflineIcon />
+            <LocalDataIcon />
            {t('Available Offline')}
          </p>
        )}
        {workspaceData.published && (
          <p>
-            <PublishedIcon />
+            <PublishIcon />
            {t('Published to Web')}
          </p>
        )}
--- a/apps/web/src/components/workspace-modal/icons/index.tsx
+++ b/apps/web/src/components/workspace-modal/icons/index.tsx
@ -1,99 +0,0 @@
-export const LocalIcon = () => {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.86315 3.54163H13.1382C13.738 3.54162 14.2261 3.54161 14.6222 3.57398C15.0314 3.60741 15.3972 3.67848 15.7377 3.85196C16.2734 4.12493 16.709 4.5605 16.982 5.09624C17.1555 5.43671 17.2265 5.80252 17.26 6.21174C17.2923 6.60785 17.2923 7.09591 17.2923 7.69577V10.9153C17.2923 11.5151 17.2923 12.0032 17.26 12.3993C17.2265 12.8085 17.1555 13.1743 16.982 13.5148C16.709 14.0505 16.2734 14.4861 15.7377 14.7591C15.3972 14.9326 15.0314 15.0036 14.6222 15.0371C14.2261 15.0694 13.738 15.0694 13.1382 15.0694H12.8479V16.0416H13.7044C14.0495 16.0416 14.3294 16.3214 14.3294 16.6666C14.3294 17.0118 14.0495 17.2916 13.7044 17.2916H6.29695C5.95177 17.2916 5.67195 17.0118 5.67195 16.6666C5.67195 16.3214 5.95177 16.0416 6.29695 16.0416H7.15343V15.0694H6.86313C6.26327 15.0694 5.77521 15.0694 5.37909 15.0371C4.96988 15.0036 4.60407 14.9326 4.2636 14.7591C3.72786 14.4861 3.29229 14.0505 3.01931 13.5148C2.84583 13.1743 2.77477 12.8085 2.74134 12.3993C2.70897 12.0032 2.70898 11.5151 2.70898 10.9152V7.69579C2.70898 7.09592 2.70897 6.60786 2.74134 6.21174C2.77477 5.80252 2.84583 5.43671 3.01931 5.09624C3.29229 4.5605 3.72786 4.12493 4.2636 3.85196C4.60407 3.67848 4.96988 3.60741 5.37909 3.57398C5.77521 3.54161 6.26328 3.54162 6.86315 3.54163ZM3.96013 11.4583C3.96232 11.801 3.96868 12.071 3.98719 12.2975C4.0143 12.6294 4.06434 12.8124 4.13307 12.9473C4.2862 13.2478 4.53055 13.4922 4.83108 13.6453C4.96597 13.714 5.14897 13.7641 5.48088 13.7912C5.82009 13.8189 6.25695 13.8194 6.88954 13.8194H13.1118C13.7444 13.8194 14.1812 13.8189 14.5204 13.7912C14.8523 13.7641 15.0353 13.714 15.1702 13.6453C15.4708 13.4922 15.7151 13.2478 15.8682 12.9473C15.937 12.8124 15.987 12.6294 16.0141 12.2975C16.0326 12.071 16.039 11.801 16.0412 11.4583H3.96013ZM16.0423 10.2083H3.95898V7.72218C3.95898 7.08959 3.95947 6.65273 3.98719 6.31353C4.0143 5.98162 4.06434 5.79861 4.13307 5.66372C4.2862 5.36319 4.53055 5.11884 4.83108 4.96571C4.96597 4.89698 5.14897 4.84694 5.48088 4.81983C5.82009 4.79211 6.25695 4.79163 6.88954 4.79163H13.1118C13.7444 4.79163 14.1812 4.79211 14.5204 4.81983C14.8523 4.84694 15.0353 4.89698 15.1702 4.96571C15.4708 5.11884 15.7151 5.36319 15.8682 5.66372C15.937 5.79861 15.987 5.98162 16.0141 6.31353C16.0418 6.65273 16.0423 7.08959 16.0423 7.72218V10.2083ZM11.5979 15.0694H8.40343V16.0416H11.5979V15.0694ZM10.0007 11.9583C10.3458 11.9583 10.6257 12.2381 10.6257 12.5833V12.5916C10.6257 12.9368 10.3458 13.2166 10.0007 13.2166C9.65547 13.2166 9.37565 12.9368 9.37565 12.5916V12.5833C9.37565 12.2381 9.65547 11.9583 10.0007 11.9583Z"
-        fill="#FDBD32"
-      />
-    </svg>
-  );
-};
-
-export const OfflineIcon = () => {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.12249 3.54165C8.47134 3.54145 8.74594 3.54129 9.01129 3.60499C9.24512 3.66113 9.46866 3.75372 9.6737 3.87937C9.90638 4.02195 10.1004 4.21624 10.347 4.46306L10.4942 4.61035C10.8035 4.91964 10.889 4.99941 10.9794 5.05484C11.0726 5.11195 11.1742 5.15404 11.2805 5.17956C11.3837 5.20432 11.5005 5.20834 11.9379 5.20834L14.8587 5.20834C15.3038 5.20833 15.6754 5.20832 15.9789 5.23312C16.2955 5.25899 16.5927 5.31491 16.8737 5.45812C17.3049 5.67783 17.6555 6.02841 17.8752 6.45961C18.0184 6.74066 18.0744 7.03788 18.1002 7.35445C18.125 7.65797 18.125 8.02951 18.125 8.47463V13.192C18.125 13.6372 18.125 14.0087 18.1002 14.3122C18.0744 14.6288 18.0184 14.926 17.8752 15.2071C17.6555 15.6383 17.3049 15.9889 16.8737 16.2086C16.5927 16.3518 16.2955 16.4077 15.9789 16.4336C15.6754 16.4584 15.3039 16.4583 14.8587 16.4583H5.14129C4.69618 16.4583 4.32463 16.4584 4.02111 16.4336C3.70454 16.4077 3.40732 16.3518 3.12627 16.2086C2.69507 15.9889 2.34449 15.6383 2.12478 15.2071C1.98157 14.926 1.92565 14.6288 1.89978 14.3122C1.87498 14.0087 1.87499 13.6372 1.875 13.192V6.80798C1.87499 6.36285 1.87498 5.99131 1.89978 5.68778C1.92565 5.37121 1.98157 5.074 2.12478 4.79294C2.34449 4.36174 2.69507 4.01116 3.12627 3.79145C3.40732 3.64825 3.70454 3.59232 4.02111 3.56645C4.32464 3.54166 4.69618 3.54166 5.14131 3.54167L8.12249 3.54165ZM3.125 13.1667V6.83334C3.125 6.69601 3.12504 6.57168 3.12558 6.45836L14.8333 6.45834C15.3104 6.45834 15.6305 6.45882 15.8771 6.47897C16.1164 6.49852 16.2308 6.53342 16.3062 6.57187C16.5022 6.67174 16.6616 6.8311 16.7615 7.0271C16.7999 7.10257 16.8348 7.21697 16.8544 7.45624C16.8745 7.7028 16.875 8.02298 16.875 8.50001V13.1667C16.875 13.6437 16.8745 13.9639 16.8544 14.2104C16.8348 14.4497 16.7999 14.5641 16.7615 14.6396C16.6616 14.8356 16.5022 14.9949 16.3062 15.0948C16.2308 15.1333 16.1164 15.1682 15.8771 15.1877C15.6305 15.2079 15.3104 15.2083 14.8333 15.2083H5.16667C4.68964 15.2083 4.36946 15.2079 4.1229 15.1877C3.88363 15.1682 3.76923 15.1333 3.69376 15.0948C3.49776 14.9949 3.3384 14.8356 3.23854 14.6396C3.20008 14.5641 3.16518 14.4497 3.14563 14.2104C3.12549 13.9639 3.125 13.6437 3.125 13.1667ZM9.20211 7.49996C9.01802 7.49996 8.86878 7.6492 8.86878 7.83329V10.867H7.47722C7.17943 10.867 7.03108 11.2277 7.24271 11.4372L10 14.1666L12.7573 11.4372C12.9689 11.2277 12.8206 10.867 12.5228 10.867H11.1312V7.83329C11.1312 7.6492 10.982 7.49996 10.7979 7.49996H9.20211Z"
-        fill="#62CD80"
-      />
-    </svg>
-  );
-};
-export const PublishedIcon = () => {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125ZM9.99992 16.523C13.6024 16.523 16.5228 13.6026 16.5228 10.0001C16.5228 6.39761 13.6024 3.47722 9.99992 3.47722C6.39742 3.47722 3.47703 6.39761 3.47703 10.0001C3.47703 13.6026 6.39742 16.523 9.99992 16.523Z"
-        fill="#8699FF"
-      />
-      <path
-        d="M7.13957 8.05468C8.34659 8.05468 9.33537 7.12035 9.42212 5.93548C9.57023 5.97414 9.72565 5.99472 9.88588 5.99472H10.8014C11.8126 5.99472 12.6324 5.17496 12.6324 4.16374C12.6324 3.15251 11.8126 2.33275 10.8014 2.33275H9.88588C9.03665 2.33275 8.32245 2.91091 8.11542 3.69509C7.81941 3.55535 7.48862 3.47722 7.13957 3.47722C5.8756 3.47722 4.85094 4.50182 4.85084 5.76577H3.70524V8.39782L7.59609 12.2887V12.9753C7.59609 13.8601 8.31338 14.5774 9.1982 14.5774V16.4084L10.457 17.4383L14.6912 15.264C14.6912 14.1264 13.7689 13.2042 12.6313 13.2042H12.288C12.288 11.3713 10.8022 9.88549 8.96932 9.88549H6.79503V8.02892C6.90741 8.04589 7.02246 8.05468 7.13957 8.05468Z"
-        fill="#8699FF"
-      />
-    </svg>
-  );
-};
-
-export const CloudIcon = () => {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M2.5 11.3744C2.5 13.837 4.51472 15.8333 7 15.8333L13.75 15.8333C15.8211 15.8333 17.5 14.1532 17.5 12.0807C17.5 10.5419 16.5744 9.12069 15.25 8.54163C15.1098 6.10205 13.07 4.16663 10.5744 4.16663C8.62616 4.16663 6.95578 5.40527 6.25 7.08329C4 7.44788 2.5 9.33336 2.5 11.3744Z"
-        stroke="#60A5FA"
-        strokeWidth="1.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9.54757 7.5L7.5 13.3333H8.6993L10.0017 9.29884L11.3048 13.3333H12.5L10.4521 7.5H9.54757Z"
-        fill="#60A5FA"
-      />
-    </svg>
-  );
-};
-
-export const LineIcon = () => {
-  return (
-    <svg
-      width="2"
-      height="20"
-      viewBox="0 0 2 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M1 0V20" stroke="black" strokeOpacity="0.15" />
-    </svg>
-  );
-};
--- a/apps/web/src/components/workspace-modal/index.tsx
+++ b/apps/web/src/components/workspace-modal/index.tsx
@ -1,11 +1,10 @@
 import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
-import { FlexWrapper } from '@affine/component';
 import { useState } from 'react';
 import { CreateWorkspaceModal } from '../create-workspace';

 import { Tooltip } from '@affine/component';

-import { AddIcon, HelpCenterIcon } from '@blocksuite/icons';
+import { PlusIcon, HelpIcon } from '@blocksuite/icons';

 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
@ -62,7 +61,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                disablePortal={true}
              >
                <StyledHelperContainer>
-                  <HelpCenterIcon />
+                  <HelpIcon />
                </StyledHelperContainer>
              </Tooltip>
            </StyledModalHeaderLeft>
@ -98,11 +97,9 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                setCreateWorkspaceOpen(true);
              }}
            >
-              <FlexWrapper>
-                <StyleWorkspaceAdd className="add-icon">
-                  <AddIcon fontSize={18} />
-                </StyleWorkspaceAdd>
-              </FlexWrapper>
+              <StyleWorkspaceAdd className="add-icon">
+                <PlusIcon />
+              </StyleWorkspaceAdd>

              <StyleWorkspaceInfo>
                <StyleWorkspaceTitle>{t('New Workspace')}</StyleWorkspaceTitle>
--- a/apps/web/src/components/workspace-modal/styles.ts
+++ b/apps/web/src/components/workspace-modal/styles.ts
@ -19,12 +19,14 @@ export const StyleWorkspaceInfo = styled.div(({ theme }) => {
  return {
    marginLeft: '15px',
    p: {
+      color: theme.colors.popoverColor,
      height: '20px',
-      fontSize: theme.font.xs,
+      fontSize: theme.font.sm,
      ...displayFlex('flex-start', 'center'),
    },
    svg: {
      marginRight: '10px',
+      fontSize: '16px',
    },
  };
 });
@ -54,13 +56,12 @@ export const StyledCard = styled.div<{
    border: `1px solid ${borderColor}`,
    ...displayFlex('flex-start', 'flex-start'),
    marginBottom: '24px',
+    transition: 'background .2s',
    ':hover': {
      background: theme.colors.hoverBackground,
      '.add-icon': {
-        border: `1.5px dashed ${theme.colors.primaryColor}`,
-        svg: {
-          fill: theme.colors.primaryColor,
-        },
+        borderColor: theme.colors.primaryColor,
+        color: theme.colors.primaryColor,
      },
    },
  };
@ -103,6 +104,7 @@ export const StyledHelperContainer = styled.div(({ theme }) => {
    color: theme.colors.iconColor,
    marginLeft: '15px',
    fontWeight: 400,
+    fontSize: theme.font.h6,
    ...displayFlex('center', 'center'),
  };
 });
@ -126,11 +128,10 @@ export const StyleWorkspaceAdd = styled.div(() => {
    width: '58px',
    height: '58px',
    borderRadius: '100%',
-    textAlign: 'center',
    background: '#f4f5fa',
    border: '1.5px dashed #f4f5fa',
-    lineHeight: '58px',
-    marginTop: '2px',
+    transition: 'background .2s',
+    ...displayFlex('center', 'center'),
  };
 });
 export const StyledModalHeader = styled('div')(({ theme }) => {
--- a/apps/web/src/components/workspace-setting/ExportPage.tsx
+++ b/apps/web/src/components/workspace-setting/ExportPage.tsx
@ -9,7 +9,7 @@ export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
    <>
      <Wrapper marginBottom="32px"> {t('Export Description')}</Wrapper>
      <Button type="light" shape="circle" disabled>
-        {t('Export AFFINE backup file')}
+        {t('Export AFFiNE backup file')}
      </Button>
    </>
  );
--- a/apps/web/src/components/workspace-setting/PublishPage.tsx
+++ b/apps/web/src/components/workspace-setting/PublishPage.tsx
@ -5,11 +5,12 @@ import { toast } from '@affine/component';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
-import { EnableWorkspaceButton } from '../enable-workspace';
 import { Wrapper, Content, FlexWrapper } from '@affine/component';
+import { useModal } from '@/store/globalModal';
 export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  const shareUrl = window.location.host + '/public-workspace/' + workspace.id;
  const { publishWorkspace } = useWorkspaceHelper();
+  const { triggerEnableWorkspaceModal } = useModal();
  const { t } = useTranslation();
  const [loaded, setLoaded] = useState(false);
  const togglePublic = async (flag: boolean) => {
@ -83,7 +84,15 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  return (
    <>
      <Wrapper marginBottom="32px">{t('Publishing')}</Wrapper>
-      <EnableWorkspaceButton />
+      <Button
+        type="light"
+        shape="circle"
+        onClick={async () => {
+          triggerEnableWorkspaceModal();
+        }}
+      >
+        {t('Enable AFFiNE Cloud')}
+      </Button>
    </>
  );
 };
--- a/apps/web/src/components/workspace-setting/SyncPage.tsx
+++ b/apps/web/src/components/workspace-setting/SyncPage.tsx
@ -1,15 +1,10 @@
-import {
-  StyledWorkspaceName,
-  StyledEmail,
-  // StyledDownloadCard,
-  // StyledDownloadCardDes,
-} from './style';
+import { StyledWorkspaceName } from './style';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useTranslation, Trans } from '@affine/i18n';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
-import { EnableWorkspaceButton } from '../enable-workspace';
 import { useAppState } from '@/providers/app-state-provider';
-import { FlexWrapper, Content, Wrapper } from '@affine/component';
+import { FlexWrapper, Content, Wrapper, Button } from '@affine/component';
+import { useModal } from '@/store/globalModal';

 // // FIXME: Temporary solution, since the @blocksuite/icons is broken
 // const ActiveIcon = () => {
@ -40,6 +35,8 @@ import { FlexWrapper, Content, Wrapper } from '@affine/component';
 export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  const { t } = useTranslation();
  const { user } = useAppState();
+  const { triggerEnableWorkspaceModal } = useModal();
+
  if (workspace.provider === 'local') {
    return (
      <>
@ -55,7 +52,15 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
        </FlexWrapper>
        <p>{t('Local Workspace Description')}</p>
        <Wrapper marginTop="32px">
-          <EnableWorkspaceButton />
+          <Button
+            type="light"
+            shape="circle"
+            onClick={async () => {
+              triggerEnableWorkspaceModal();
+            }}
+          >
+            {t('Enable AFFiNE Cloud')}
+          </Button>
        </Wrapper>
      </>
    );
@ -74,11 +79,9 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
      </FlexWrapper>
      <Trans i18nKey="Cloud Workspace Description">
        All data will be synchronised and saved to the AFFiNE account
-        <StyledEmail>
-          {{
-            email: '{' + user?.email + '}.',
-          }}
-        </StyledEmail>
+        {{
+          email: user?.email,
+        }}
      </Trans>

      {/*<Wrapper marginBottom="12px" marginTop="32px">*/}
--- a/apps/web/src/components/workspace-setting/general/General.tsx
+++ b/apps/web/src/components/workspace-setting/general/General.tsx
@ -1,24 +1,34 @@
-import { StyledInput, StyledProviderInfo, StyledAvatar } from './style';
+import {
+  StyledInput,
+  StyledWorkspaceInfo,
+  StyledAvatar,
+  StyledEditButton,
+} from './style';
 import { StyledSettingKey, StyledRow } from '../style';
-import { FlexWrapper, Content } from '@affine/component';
+import { FlexWrapper } from '@affine/component';

 import { useState } from 'react';
 import { Button } from '@affine/component';
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
-import { UsersIcon } from '@blocksuite/icons';
+import {
+  JoinedWorkspaceIcon,
+  CloudWorkspaceIcon,
+  LocalWorkspaceIcon,
+} from '@/components/icons';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
-import { CloudIcon, LocalIcon } from '@/components/workspace-modal/icons';
 import { CameraIcon } from './icons';
 import { Upload } from '@/components/file-upload';
+import { MuiFade } from '@affine/component';
 export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  const [showDelete, setShowDelete] = useState<boolean>(false);
  const [showLeave, setShowLeave] = useState<boolean>(false);
  const [workspaceName, setWorkspaceName] = useState<string>(workspace?.name);
+  const [showEditInput, setShowEditInput] = useState(false);
  const { currentWorkspace, isOwner } = useAppState();
  const { updateWorkspace } = useWorkspaceHelper();
  const { t } = useTranslation();
@ -70,72 +80,86 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {

      <StyledRow>
        <StyledSettingKey>{t('Workspace Name')}</StyledSettingKey>
-        <FlexWrapper>
-          <StyledInput
-            width={284}
-            height={38}
-            value={workspaceName}
-            placeholder={t('Workspace Name')}
-            maxLength={15}
-            minLength={0}
-            disabled={!isOwner}
-            onChange={newName => {
-              setWorkspaceName(newName);
-            }}
-          ></StyledInput>
+
+        <div style={{ position: 'relative' }}>
+          <MuiFade in={!showEditInput}>
+            <FlexWrapper>
+              {workspace.name}
+              {isOwner && (
+                <StyledEditButton
+                  onClick={() => {
+                    setShowEditInput(true);
+                  }}
+                >
+                  Edit
+                </StyledEditButton>
+              )}
+            </FlexWrapper>
+          </MuiFade>
+
          {isOwner && (
-            <>
-              <Button
-                type="default"
-                shape="circle"
-                style={{ marginLeft: '24px' }}
-                onClick={() => {
-                  setWorkspaceName(workspace.name);
-                }}
-              >
-                {t('Cancel')}
-              </Button>
-              <Button
-                type="light"
-                shape="circle"
-                style={{ marginLeft: '24px' }}
-                onClick={() => {
-                  handleUpdateWorkspaceName();
-                }}
-              >
-                {t('Confirm')}
-              </Button>
-            </>
+            <MuiFade in={showEditInput}>
+              <FlexWrapper style={{ position: 'absolute', top: 0, left: 0 }}>
+                <StyledInput
+                  width={284}
+                  height={38}
+                  value={workspaceName}
+                  placeholder={t('Workspace Name')}
+                  maxLength={15}
+                  minLength={0}
+                  onChange={newName => {
+                    setWorkspaceName(newName);
+                  }}
+                ></StyledInput>
+                <Button
+                  type="light"
+                  shape="circle"
+                  style={{ marginLeft: '24px' }}
+                  disabled={workspaceName === workspace.name}
+                  onClick={() => {
+                    handleUpdateWorkspaceName();
+                    setShowEditInput(false);
+                  }}
+                >
+                  {t('Confirm')}
+                </Button>
+                <Button
+                  type="default"
+                  shape="circle"
+                  style={{ marginLeft: '24px' }}
+                  onClick={() => {
+                    setWorkspaceName(workspace.name);
+                    setShowEditInput(false);
+                  }}
+                >
+                  {t('Cancel')}
+                </Button>
+              </FlexWrapper>
+            </MuiFade>
          )}
-        </FlexWrapper>
+        </div>
      </StyledRow>

      <StyledRow>
        <StyledSettingKey>{t('Workspace Type')}</StyledSettingKey>
-        <FlexWrapper>
-          {isOwner ? (
-            currentWorkspace?.provider === 'local' ? (
-              <FlexWrapper alignItems="center">
-                <LocalIcon />
-                <Content style={{ marginLeft: '15px' }}>
-                  {t('Local Workspace')}
-                </Content>
-              </FlexWrapper>
-            ) : (
-              <FlexWrapper alignItems="center">
-                <CloudIcon />
-                <Content style={{ marginLeft: '15px' }}>
-                  {t('Available Offline')}
-                </Content>
-              </FlexWrapper>
-            )
+        {isOwner ? (
+          currentWorkspace?.provider === 'local' ? (
+            <StyledWorkspaceInfo>
+              <LocalWorkspaceIcon />
+              <span>{t('Local Workspace')}</span>
+            </StyledWorkspaceInfo>
          ) : (
-            <StyledProviderInfo>
-              <UsersIcon fontSize={20} color={'#FF646B'} />
-              {t('Joined Workspace')}
-            </StyledProviderInfo>
-          )}
-        </FlexWrapper>
+            <StyledWorkspaceInfo>
+              <CloudWorkspaceIcon />
+              <span>{t('Available Offline')}</span>
+            </StyledWorkspaceInfo>
+          )
+        ) : (
+          <StyledWorkspaceInfo>
+            <JoinedWorkspaceIcon />
+            <span>{t('Joined Workspace')}</span>
+          </StyledWorkspaceInfo>
+        )}
      </StyledRow>

      <StyledRow>
--- a/apps/web/src/components/workspace-setting/general/icons.tsx
+++ b/apps/web/src/components/workspace-setting/general/icons.tsx
@ -1,20 +1,18 @@
 export const CameraIcon = () => {
  return (
-    <span>
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M10.6236 4.25001C10.635 4.25001 10.6467 4.25002 10.6584 4.25002H13.3416C13.3533 4.25002 13.365 4.25001 13.3764 4.25001C13.5609 4.24995 13.7105 4.2499 13.8543 4.26611C14.5981 4.34997 15.2693 4.75627 15.6826 5.38026C15.7624 5.50084 15.83 5.63398 15.9121 5.79586C15.9173 5.80613 15.9226 5.81652 15.9279 5.82703C15.9538 5.87792 15.9679 5.90562 15.9789 5.9261C15.9832 5.9341 15.9857 5.93861 15.9869 5.94065C16.0076 5.97069 16.0435 5.99406 16.0878 5.99905L16.0849 5.99877C16.0849 5.99877 16.0907 5.99918 16.1047 5.99947C16.1286 5.99998 16.1604 6.00002 16.2181 6.00002L17.185 6.00001C17.6577 6 18.0566 5.99999 18.3833 6.02627C18.7252 6.05377 19.0531 6.11364 19.3656 6.27035C19.8402 6.50842 20.2283 6.88944 20.4723 7.36077C20.6336 7.67233 20.6951 7.99944 20.7232 8.33858C20.75 8.66166 20.75 9.05554 20.75 9.51992V16.2301C20.75 16.6945 20.75 17.0884 20.7232 17.4114C20.6951 17.7506 20.6336 18.0777 20.4723 18.3893C20.2283 18.8606 19.8402 19.2416 19.3656 19.4797C19.0531 19.6364 18.7252 19.6963 18.3833 19.7238C18.0566 19.75 17.6578 19.75 17.185 19.75H6.81497C6.34225 19.75 5.9434 19.75 5.61668 19.7238C5.27477 19.6963 4.94688 19.6364 4.63444 19.4797C4.15978 19.2416 3.77167 18.8606 3.52771 18.3893C3.36644 18.0777 3.30494 17.7506 3.27679 17.4114C3.24998 17.0884 3.24999 16.6945 3.25 16.2302V9.51987C3.24999 9.05551 3.24998 8.66164 3.27679 8.33858C3.30494 7.99944 3.36644 7.67233 3.52771 7.36077C3.77167 6.88944 4.15978 6.50842 4.63444 6.27035C4.94688 6.11364 5.27477 6.05377 5.61668 6.02627C5.9434 5.99999 6.34225 6 6.81498 6.00001L7.78191 6.00002C7.83959 6.00002 7.87142 5.99998 7.8953 5.99947C7.90607 5.99924 7.91176 5.99897 7.91398 5.99884C7.95747 5.99343 7.99267 5.9703 8.01312 5.94066C8.01429 5.93863 8.01684 5.93412 8.02113 5.9261C8.0321 5.90561 8.04622 5.87791 8.07206 5.82703C8.07739 5.81653 8.08266 5.80615 8.08787 5.79588C8.17004 5.63397 8.23759 5.50086 8.31745 5.38026C8.73067 4.75627 9.40192 4.34997 10.1457 4.26611C10.2895 4.2499 10.4391 4.24995 10.6236 4.25001ZM10.6584 5.75002C10.422 5.75002 10.3627 5.75114 10.3138 5.75666C10.0055 5.79142 9.73316 5.95919 9.56809 6.20845C9.54218 6.24758 9.51544 6.29761 9.40943 6.50633C9.40611 6.51287 9.40274 6.5195 9.39934 6.52622C9.36115 6.60161 9.31758 6.68761 9.26505 6.76694C8.9964 7.17261 8.56105 7.4354 8.08026 7.48961C7.98625 7.50021 7.89021 7.50011 7.80434 7.50003C7.79678 7.50002 7.7893 7.50002 7.78191 7.50002H6.84445C6.33444 7.50002 5.99634 7.50058 5.73693 7.52144C5.48594 7.54163 5.37478 7.57713 5.30693 7.61115C5.11257 7.70864 4.95675 7.86306 4.85983 8.05029C4.82733 8.11308 4.79194 8.21816 4.77165 8.46266C4.7506 8.71626 4.75 9.0474 4.75 9.55001V16.2C4.75 16.7026 4.7506 17.0338 4.77165 17.2874C4.79194 17.5319 4.82733 17.6369 4.85983 17.6997C4.95675 17.887 5.11257 18.0414 5.30693 18.1389C5.37478 18.1729 5.48594 18.2084 5.73693 18.2286C5.99634 18.2494 6.33444 18.25 6.84445 18.25H17.1556C17.6656 18.25 18.0037 18.2494 18.2631 18.2286C18.5141 18.2084 18.6252 18.1729 18.6931 18.1389C18.8874 18.0414 19.0433 17.887 19.1402 17.6997C19.1727 17.6369 19.2081 17.5319 19.2283 17.2874C19.2494 17.0338 19.25 16.7026 19.25 16.2V9.55001C19.25 9.0474 19.2494 8.71626 19.2283 8.46266C19.2081 8.21816 19.1727 8.11308 19.1402 8.05029C19.0433 7.86306 18.8874 7.70864 18.6931 7.61115C18.6252 7.57713 18.5141 7.54163 18.2631 7.52144C18.0037 7.50058 17.6656 7.50002 17.1556 7.50002H16.2181C16.2107 7.50002 16.2032 7.50002 16.1957 7.50003C16.1098 7.50011 16.0138 7.50021 15.9197 7.48961C15.4389 7.4354 15.0036 7.17261 14.735 6.76694C14.6824 6.68761 14.6389 6.60163 14.6007 6.52622C14.5973 6.5195 14.5939 6.51287 14.5906 6.50633C14.4846 6.29763 14.4578 6.24758 14.4319 6.20846C14.2668 5.95919 13.9945 5.79142 13.6862 5.75666C13.6373 5.75114 13.578 5.75002 13.3416 5.75002H10.6584ZM12 11C10.9303 11 10.0833 11.8506 10.0833 12.875C10.0833 13.8995 10.9303 14.75 12 14.75C13.0697 14.75 13.9167 13.8995 13.9167 12.875C13.9167 11.8506 13.0697 11 12 11ZM8.58333 12.875C8.58333 11 10.1242 9.50002 12 9.50002C13.8758 9.50002 15.4167 11 15.4167 12.875C15.4167 14.7501 13.8758 16.25 12 16.25C10.1242 16.25 8.58333 14.7501 8.58333 12.875Z"
-          fill="white"
-        />
-      </svg>
-    </span>
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.6236 4.25001C10.635 4.25001 10.6467 4.25002 10.6584 4.25002H13.3416C13.3533 4.25002 13.365 4.25001 13.3764 4.25001C13.5609 4.24995 13.7105 4.2499 13.8543 4.26611C14.5981 4.34997 15.2693 4.75627 15.6826 5.38026C15.7624 5.50084 15.83 5.63398 15.9121 5.79586C15.9173 5.80613 15.9226 5.81652 15.9279 5.82703C15.9538 5.87792 15.9679 5.90562 15.9789 5.9261C15.9832 5.9341 15.9857 5.93861 15.9869 5.94065C16.0076 5.97069 16.0435 5.99406 16.0878 5.99905L16.0849 5.99877C16.0849 5.99877 16.0907 5.99918 16.1047 5.99947C16.1286 5.99998 16.1604 6.00002 16.2181 6.00002L17.185 6.00001C17.6577 6 18.0566 5.99999 18.3833 6.02627C18.7252 6.05377 19.0531 6.11364 19.3656 6.27035C19.8402 6.50842 20.2283 6.88944 20.4723 7.36077C20.6336 7.67233 20.6951 7.99944 20.7232 8.33858C20.75 8.66166 20.75 9.05554 20.75 9.51992V16.2301C20.75 16.6945 20.75 17.0884 20.7232 17.4114C20.6951 17.7506 20.6336 18.0777 20.4723 18.3893C20.2283 18.8606 19.8402 19.2416 19.3656 19.4797C19.0531 19.6364 18.7252 19.6963 18.3833 19.7238C18.0566 19.75 17.6578 19.75 17.185 19.75H6.81497C6.34225 19.75 5.9434 19.75 5.61668 19.7238C5.27477 19.6963 4.94688 19.6364 4.63444 19.4797C4.15978 19.2416 3.77167 18.8606 3.52771 18.3893C3.36644 18.0777 3.30494 17.7506 3.27679 17.4114C3.24998 17.0884 3.24999 16.6945 3.25 16.2302V9.51987C3.24999 9.05551 3.24998 8.66164 3.27679 8.33858C3.30494 7.99944 3.36644 7.67233 3.52771 7.36077C3.77167 6.88944 4.15978 6.50842 4.63444 6.27035C4.94688 6.11364 5.27477 6.05377 5.61668 6.02627C5.9434 5.99999 6.34225 6 6.81498 6.00001L7.78191 6.00002C7.83959 6.00002 7.87142 5.99998 7.8953 5.99947C7.90607 5.99924 7.91176 5.99897 7.91398 5.99884C7.95747 5.99343 7.99267 5.9703 8.01312 5.94066C8.01429 5.93863 8.01684 5.93412 8.02113 5.9261C8.0321 5.90561 8.04622 5.87791 8.07206 5.82703C8.07739 5.81653 8.08266 5.80615 8.08787 5.79588C8.17004 5.63397 8.23759 5.50086 8.31745 5.38026C8.73067 4.75627 9.40192 4.34997 10.1457 4.26611C10.2895 4.2499 10.4391 4.24995 10.6236 4.25001ZM10.6584 5.75002C10.422 5.75002 10.3627 5.75114 10.3138 5.75666C10.0055 5.79142 9.73316 5.95919 9.56809 6.20845C9.54218 6.24758 9.51544 6.29761 9.40943 6.50633C9.40611 6.51287 9.40274 6.5195 9.39934 6.52622C9.36115 6.60161 9.31758 6.68761 9.26505 6.76694C8.9964 7.17261 8.56105 7.4354 8.08026 7.48961C7.98625 7.50021 7.89021 7.50011 7.80434 7.50003C7.79678 7.50002 7.7893 7.50002 7.78191 7.50002H6.84445C6.33444 7.50002 5.99634 7.50058 5.73693 7.52144C5.48594 7.54163 5.37478 7.57713 5.30693 7.61115C5.11257 7.70864 4.95675 7.86306 4.85983 8.05029C4.82733 8.11308 4.79194 8.21816 4.77165 8.46266C4.7506 8.71626 4.75 9.0474 4.75 9.55001V16.2C4.75 16.7026 4.7506 17.0338 4.77165 17.2874C4.79194 17.5319 4.82733 17.6369 4.85983 17.6997C4.95675 17.887 5.11257 18.0414 5.30693 18.1389C5.37478 18.1729 5.48594 18.2084 5.73693 18.2286C5.99634 18.2494 6.33444 18.25 6.84445 18.25H17.1556C17.6656 18.25 18.0037 18.2494 18.2631 18.2286C18.5141 18.2084 18.6252 18.1729 18.6931 18.1389C18.8874 18.0414 19.0433 17.887 19.1402 17.6997C19.1727 17.6369 19.2081 17.5319 19.2283 17.2874C19.2494 17.0338 19.25 16.7026 19.25 16.2V9.55001C19.25 9.0474 19.2494 8.71626 19.2283 8.46266C19.2081 8.21816 19.1727 8.11308 19.1402 8.05029C19.0433 7.86306 18.8874 7.70864 18.6931 7.61115C18.6252 7.57713 18.5141 7.54163 18.2631 7.52144C18.0037 7.50058 17.6656 7.50002 17.1556 7.50002H16.2181C16.2107 7.50002 16.2032 7.50002 16.1957 7.50003C16.1098 7.50011 16.0138 7.50021 15.9197 7.48961C15.4389 7.4354 15.0036 7.17261 14.735 6.76694C14.6824 6.68761 14.6389 6.60163 14.6007 6.52622C14.5973 6.5195 14.5939 6.51287 14.5906 6.50633C14.4846 6.29763 14.4578 6.24758 14.4319 6.20846C14.2668 5.95919 13.9945 5.79142 13.6862 5.75666C13.6373 5.75114 13.578 5.75002 13.3416 5.75002H10.6584ZM12 11C10.9303 11 10.0833 11.8506 10.0833 12.875C10.0833 13.8995 10.9303 14.75 12 14.75C13.0697 14.75 13.9167 13.8995 13.9167 12.875C13.9167 11.8506 13.0697 11 12 11ZM8.58333 12.875C8.58333 11 10.1242 9.50002 12 9.50002C13.8758 9.50002 15.4167 11 15.4167 12.875C15.4167 14.7501 13.8758 16.25 12 16.25C10.1242 16.25 8.58333 14.7501 8.58333 12.875Z"
+        fill="white"
+      />
+    </svg>
  );
 };
--- a/apps/web/src/components/workspace-setting/general/style.ts
+++ b/apps/web/src/components/workspace-setting/general/style.ts
@ -1,4 +1,4 @@
-import { styled } from '@affine/component';
+import { displayFlex, styled } from '@affine/component';
 import { Input } from '@affine/component';

 export const StyledInput = styled(Input)(({ theme }) => {
@ -8,17 +8,16 @@ export const StyledInput = styled(Input)(({ theme }) => {
    fontSize: theme.font.sm,
  };
 });
-
-export const StyledProviderInfo = styled('p')(({ theme }) => {
+export const StyledWorkspaceInfo = styled.div(({ theme }) => {
  return {
-    color: theme.colors.iconColor,
-    svg: {
-      verticalAlign: 'sub',
-      marginRight: '10px',
+    ...displayFlex('flex-start', 'center'),
+    fontSize: '20px',
+    span: {
+      fontSize: theme.font.base,
+      marginLeft: '15px',
    },
  };
 });
-
 export const StyledAvatar = styled('div')(
  ({ disabled }: { disabled: boolean }) => {
    return {
@ -27,21 +26,29 @@ export const StyledAvatar = styled('div')(
      cursor: disabled ? 'default' : 'pointer',
      ':hover': {
        '.camera-icon': {
-          display: 'block',
+          display: 'flex',
        },
      },
      '.camera-icon': {
        position: 'absolute',
+        top: 0,
+        left: 0,
        display: 'none',
        width: '100%',
        height: '100%',
        borderRadius: '50%',
        backgroundColor: 'rgba(60, 61, 63, 0.5)',
-        top: 0,
-        left: 0,
-        textAlign: 'center',
-        lineHeight: '72px',
+        justifyContent: 'center',
+        alignItems: 'center',
      },
    };
  }
 );
+
+export const StyledEditButton = styled('div')(({ theme }) => {
+  return {
+    color: theme.colors.primaryColor,
+    cursor: 'pointer',
+    marginLeft: '36px',
+  };
+});
--- a/apps/web/src/components/workspace-setting/member/MembersPage.tsx
+++ b/apps/web/src/components/workspace-setting/member/MembersPage.tsx
@ -26,11 +26,12 @@ import useMembers from '@/hooks/use-members';
 import Loading from '@/components/loading';
 import { FlexWrapper } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { EnableWorkspaceButton } from '@/components/enable-workspace';
+import { useModal } from '@/store/globalModal';

 export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  const [isInviteModalShow, setIsInviteModalShow] = useState(false);
  const { members, removeMember, loaded } = useMembers();
+  const { triggerEnableWorkspaceModal } = useModal();
  const { t } = useTranslation();
  const { confirm } = useConfirm();

@ -165,14 +166,17 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  }

  return (
-    <Wrapper
-      style={{
-        fontWeight: '500',
-        fontSize: '18px',
-      }}
-    >
+    <>
      <Wrapper marginBottom="32px">{t('Collaboration Description')}</Wrapper>
-      <EnableWorkspaceButton />
-    </Wrapper>
+      <Button
+        type="light"
+        shape="circle"
+        onClick={async () => {
+          triggerEnableWorkspaceModal();
+        }}
+      >
+        {t('Enable AFFiNE Cloud')}
+      </Button>
+    </>
  );
 };
--- a/apps/web/src/components/workspace-setting/style.ts
+++ b/apps/web/src/components/workspace-setting/style.ts
@ -4,8 +4,7 @@ export const StyledSettingContainer = styled('div')(() => {
  return {
    display: 'flex',
    flexDirection: 'column',
-
-    padding: '0 34px 20px 48px',
+    padding: '0 0 20px 48px',
    height: '100vh',
  };
 });
@ -79,12 +78,6 @@ export const StyledWorkspaceName = styled('span')(({ theme }) => {
  };
 });

-export const StyledEmail = styled('span')(() => {
-  return {
-    color: '#E8178A',
-  };
-});
-
 // export const StyledDownloadCard = styled.div<{ active?: boolean }>(
 //   ({ theme, active }) => {
 //     return {
--- a/apps/web/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
+++ b/apps/web/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx
@ -1,4 +1,4 @@
-import { Avatar, WorkspaceName, SelectorWrapper } from './styles';
+import { WorkspaceName, SelectorWrapper } from './styles';
 import { useEffect, useState } from 'react';
 import { WorkspaceModal } from '@/components/workspace-modal';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
@ -20,23 +20,16 @@ export const WorkspaceSelector = () => {
        }}
        data-testid="current-workspace"
      >
-        <Avatar
-          alt="Affine"
-          data-testid="workspace-avatar"
-          // src={currentWorkspace?.avatar}
-        >
-          <div
+        <div data-testid="workspace-avatar">
+          <WorkspaceUnitAvatar
            style={{
-              float: 'left',
+              flexShrink: 0,
            }}
-          >
-            <WorkspaceUnitAvatar
-              size={28}
-              name={currentWorkspace?.name ?? 'AFFiNE Test'}
-              workspaceUnit={currentWorkspace}
-            />
-          </div>
-        </Avatar>
+            size={32}
+            name={currentWorkspace?.name ?? 'AFFiNE Test'}
+            workspaceUnit={currentWorkspace}
+          />
+        </div>
        <WorkspaceName data-testid="workspace-name">
          {currentWorkspace?.name ?? 'AFFiNE Test'}
        </WorkspaceName>
--- a/apps/web/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts
+++ b/apps/web/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts
@ -1,12 +1,8 @@
-import { MuiAvatar } from '@affine/component';
+import { MuiAvatar, textEllipsis } from '@affine/component';
 import { styled } from '@affine/component';
-import { StyledPopperContainer } from '@affine/component';
-
 export const SelectorWrapper = styled('div')({
-  width: '100%',
  height: '100%',
  display: 'flex',
-  flexDirection: 'row',
  alignItems: 'center',
  ':hover': {
    cursor: 'pointer',
@ -21,21 +17,11 @@ export const Avatar = styled(MuiAvatar)({
 export const WorkspaceName = styled('span')(({ theme }) => {
  return {
    marginLeft: '12px',
-    lineHeight: 1,
-    fontSize: '18px',
+    fontSize: theme.font.h6,
    fontWeight: 500,
    color: theme.colors.iconColor,
+    marginTop: '4px',
+    flexGrow: 1,
+    ...textEllipsis(1),
  };
 });
-
-export const SelectorPopperContainer = styled(StyledPopperContainer)(
-  ({ theme }) => {
-    return {
-      width: '334px',
-      boxShadow: theme.shadow.tooltip,
-      padding: '24px 12px',
-      backgroundColor: theme.colors.pageBackground,
-      fontSize: theme.font.xs,
-    };
-  }
-);
--- a/apps/web/src/components/workspace-slider-bar/index.tsx
+++ b/apps/web/src/components/workspace-slider-bar/index.tsx
@ -17,7 +17,7 @@ import {
  AllPagesIcon,
  FavouritesIcon,
  TrashIcon,
-  AddIcon,
+  PlusIcon,
  SettingsIcon,
 } from '@blocksuite/icons';
 import Link from 'next/link';
@ -183,7 +183,7 @@ export const WorkSpaceSliderBar = () => {
              }
            }}
          >
-            <AddIcon /> {t('New Page')}
+            <PlusIcon /> {t('New Page')}
          </StyledNewPageButton>
        </StyledSliderBarWrapper>
      </StyledSliderBar>
--- a/apps/web/src/components/workspace-slider-bar/style.ts
+++ b/apps/web/src/components/workspace-slider-bar/style.ts
@ -6,6 +6,7 @@ export const StyledSliderBar = styled.div<{ show: boolean }>(
    return {
      width: show ? '256px' : '0',
      height: '100vh',
+      minHeight: '450px',
      background: theme.mode === 'dark' ? '#272727' : '#F9F9FB',
      boxShadow: theme.shadow.modal,
      transition: 'width .15s, padding .15s',
@ -81,8 +82,9 @@ export const StyledListItem = styled.div<{
  };
 });

-export const StyledListItemForWorkspace = styled(StyledListItem)({
-  height: '52px',
+export const StyledListItemForWorkspace = styled.div({
+  height: '42px',
+  padding: '0 12px',
 });

 export const StyledLink = styled(Link)(() => {
--- a/apps/web/src/pages/temporary.css
+++ b/apps/web/src/pages/temporary.css
@ -6,6 +6,9 @@
 .affine-default-page-block-container {
  width: 686px !important;
 }
+.affine-default-page-block-container > .affine-block-children-container {
+  margin-left: -26px !important;
+}

 affine-block-hub {
  position: unset !important;
--- a/apps/web/src/pages/workspace/[workspaceId]/setting.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/setting.tsx
@ -83,8 +83,9 @@ const WorkspaceSetting = () => {
      <Head>
        <title>{t('Settings')} - AFFiNE</title>
      </Head>
+      <PageListHeader icon={<SettingsIcon />}>{t('Settings')}</PageListHeader>
+
      <StyledSettingContainer>
-        <PageListHeader icon={<SettingsIcon />}>{t('Settings')}</PageListHeader>
        <StyledSettingSidebar>
          <StyledSettingTabContainer>
            {tableArr.map(({ name }) => {
--- a/apps/web/src/store/globalModal/index.tsx
+++ b/apps/web/src/store/globalModal/index.tsx
@ -8,6 +8,7 @@ import ShortcutsModal from '@/components/shortcuts-modal';
 import QuickSearch from '@/components/quick-search';
 import { LoginModal } from '@/components/login-modal';
 import ImportModal from '@/components/import';
+import { EnableWorkspaceModal } from '@/components/enable-workspace-modal';

 export type ModalState = {
  contact: boolean;
@ -15,6 +16,7 @@ export type ModalState = {
  quickSearch: boolean;
  import: boolean;
  login: boolean;
+  enableWorkspace: boolean;
 };

 export type ModalActions = {
@ -23,6 +25,7 @@ export type ModalActions = {
  triggerQuickSearchModal: (visible?: boolean) => void;
  triggerImportModal: () => void;
  triggerLoginModal: () => void;
+  triggerEnableWorkspaceModal: () => void;
 };

 const create = () =>
@ -35,6 +38,7 @@ const create = () =>
          quickSearch: false,
          import: false,
          login: false,
+          enableWorkspace: false,
        },
        set => ({
          triggerShortcutsModal: () => {
@ -62,6 +66,11 @@ const create = () =>
              login: !login,
            }));
          },
+          triggerEnableWorkspaceModal: () => {
+            set(({ enableWorkspace }) => ({
+              enableWorkspace: !enableWorkspace,
+            }));
+          },
        })
      )
    )
@ -131,6 +140,14 @@ const Modals: React.FC = function Modal() {
          });
        }, [api])}
      />
+      <EnableWorkspaceModal
+        open={useModal(state => state.enableWorkspace)}
+        onClose={useCallback(() => {
+          api.setState({
+            enableWorkspace: false,
+          });
+        }, [api])}
+      />
    </>
  );
 };
--- a/packages/component/src/styles/theme.ts
+++ b/packages/component/src/styles/theme.ts
@ -55,8 +55,8 @@ export const getLightTheme = (
      h5: '20px',
      h6: '18px',
      base: '16px',
-      xs: '14px',
-      sm: '12px',
+      sm: '14px',
+      xs: '12px',

      family: `Avenir Next, Poppins, ${basicFontFamily}`,
      numberFamily: `Roboto Mono, ${basicFontFamily}`,
--- a/packages/component/src/ui/button/styles.ts
+++ b/packages/component/src/ui/button/styles.ts
@ -213,7 +213,7 @@ export const StyledButton = styled('button', {
      },
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
-      ...getButtonColors(theme, type, {
+      ...getButtonColors(theme, type, disabled, {
        hoverBackground,
        hoverColor,
        hoverStyle,
--- a/packages/component/src/ui/button/utils.ts
+++ b/packages/component/src/ui/button/utils.ts
@ -66,7 +66,9 @@ export const getButtonColors = (
          borderColor: theme.colors.primaryColor,
        },
        ':hover': {
-          borderColor: theme.colors.primaryColor,
+          borderColor: disabled
+            ? theme.colors.hoverBackground
+            : theme.colors.primaryColor,
        },
      };
    case 'warning':
--- a/packages/component/src/ui/tooltip/Tooltip.tsx
+++ b/packages/component/src/ui/tooltip/Tooltip.tsx
@ -10,7 +10,7 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
    padding: '4px 12px',
    backgroundColor: theme.colors.tooltipBackground,
    color: '#fff',
-    fontSize: theme.font.xs,
+    fontSize: theme.font.sm,
  };
 });

--- a/packages/i18n/src/resources/en.json
+++ b/packages/i18n/src/resources/en.json
@ -1,7 +1,19 @@
 {
+  "Confirm": "Confirm",
+  "Download core data": "Download core data",
+  "It takes up little space on your device": {
+    "": "It takes up little space on your device."
+  },
+  "AFFiNE Cloud": "AFFiNE Cloud",
+  "It takes up more space on your device": {
+    "": "It takes up more space on your device."
+  },
+  "Export AFFiNE backup file": "Export AFFiNE backup file (coming soon)",
+  "Saved then enable AFFiNE Cloud": "All changes are saved locally, click to enable AFFiNE Cloud.",
+  "Not now": "Not now",
+  "Export Description": "You can export the entire Workspace data for backup, and the exported data can be re-impored.",
  "Quick search": "Quick search",
  "All pages": "All pages",
-  "Favorites": "Favorites",
  "No item": "No item",
  "Import": "Import",
  "Trash": "Trash",
@ -11,10 +23,10 @@
  "Find results": "Find {{number}} results",
  "Collapse sidebar": "Collapse sidebar",
  "Expand sidebar": "Expand sidebar",
-  "Added to Favorites": "Added to Favorites",
  "Add to favorites": "Add to favorites",
  "Paper": "Paper",
  "Edgeless": "Edgeless",
+  "Added to Favorites": "Added to Favorites",
  "Convert to ": "Convert to ",
  "Page": "Page",
  "Export": "Export",
@ -26,16 +38,14 @@
  "Created": "Created",
  "Updated": "Updated",
  "Open in new tab": "Open in new tab",
-  "Favorite": "Favorite",
-  "Favorited": "Favorited",
  "Delete page?": "Delete page?",
  "Delete permanently?": "Delete permanently?",
  "will be moved to Trash": "{{title}} will be moved to Trash",
+  "Favorite": "Favorite",
  "Moved to Trash": "Moved to Trash",
  "Permanently deleted": "Permanently deleted",
  "restored": "{{title}} restored",
  "Cancel": "Cancel",
-  "Confirm": "Confirm",
  "Keyboard Shortcuts": "Keyboard Shortcuts",
  "Contact Us": "Contact Us",
  "Official Website": "Official Website",
@ -51,6 +61,7 @@
  "Strikethrough": "Strikethrough",
  "Inline code": "Inline code",
  "Code block": "Code block",
+  "Favorited": "Favorited",
  "Body text": "Body text",
  "Heading": "Heading {{number}}",
  "Increase indent": "Increase indent",
@ -64,13 +75,7 @@
  "Removed from Favorites": "Removed from Favorites",
  "Jump to": "Jump to",
  "404 - Page Not Found": "404 - Page Not Found",
-  "Once deleted, you can't undo this action": {
-    "": "Once deleted, you can't undo this action."
-  },
-  "Remove from favorites": "Remove from favorites",
-  "Removed from Favorites": "Removed from Favorites",
  "New Workspace": "New Workspace",
-  "Workspace description": "A workspace is your virtual space to capture, create and plan as just one person or together as a team.",
  "Create": "Create",
  "Select": "Select",
  "Text": "Text (coming soon)",
@ -84,6 +89,7 @@
  "TrashButtonGroupDescription": "Once deleted, you can't undo this action. Do you confirm?",
  "Delete permanently": "Delete permanently",
  "Link": "Hyperlink (with selected text)",
+  "Workspace description": "A workspace is your virtual space to capture, create and plan as just one person or together as a team.",
  "Quick search placeholder": "Quick Search...",
  "Quick search placeholder2": "Search in {{workspace}}",
  "Settings": "Settings",
@ -105,14 +111,12 @@
  "mobile device description": "We are still working on mobile support and recommend you use a desktop device.",
  "Got it": "Got it",
  "emptyAllPages": "This workspace is empty. Create a new page to begin editing.",
-  "emptyFavorite": "Click Add to Favorites and the page will appear here.",
  "emptyTrash": "Click Add to Trash and the page will appear here.",
  "still designed": "(This page is still being designed.)",
  "My Workspaces": "My Workspaces",
-  "Create Or Import": "Create or Import",
  "Tips": "Tips: ",
  "login success": "Login success",
-  "Sign out": "Sign out",
+  "Create Or Import": "Create or Import",
  "Delete Workspace": "Delete Workspace",
  "Delete Workspace Description2": "Deleting (<1>{{workspace}}</1>) will delete both local and cloud data, this operation cannot be undone, please proceed with caution.",
  "Delete Workspace placeholder": "Please type “Delete” to confirm",
@ -129,15 +133,13 @@
  "Enable AFFiNE Cloud Description": "If enabled, the data in this workspace will be backed up and synchronised via AFFiNE Cloud.",
  "Enable": "Enable",
  "Sign in and Enable": "Sign in and Enable",
-  "Not now": "Not now",
+  "Skip": "Skip",
  "Publishing": "Publishing to web requires AFFiNE Cloud service.",
  "Share with link": "Share with link",
  "Copy Link": "Copy Link",
  "Publishing Description": "After publishing to the web, everyone can view the content of this workspace through the link.",
-  "Export Description": "You can export the entire Workspace data for backup, and the exported data can be re-impored.",
  "Stop publishing": "Stop publishing",
  "Publish to web": "Publish to web",
-  "Download data": "Download {{CoreOrAll}} data",
  "General": "General",
  "Sync": "Sync",
  "Collaboration": "Collaboration",
@ -145,12 +147,15 @@
  "Workspace Settings": "Workspace Settings",
  "Export Workspace": "Export Workspace <1>{{workspace}}</1> is coming soon",
  "Leave Workspace Description": "After you leave, you will no longer be able to access the contents of this workspace.",
-  "Sign in": "Sign in AFFiNE Cloud",
  "Sync Description": "{{workspaceName}} is a 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.",
  "Sync Description2": "<1>{{workspaceName}}</1> is a Cloud Workspace. All data will be synchronised and saved to AFFiNE Cloud.",
  "Delete Workspace Description": "Deleting (<1>{{workspace}}</1>) cannot be undone, please proceed with caution. All contents will be lost.",
+  "Sign in": "Sign in AFFiNE Cloud",
  "core": "core",
  "all": "all",
+  "Data sync mode": "Data sync mode",
+  "Favorites": "Favorites",
+  "Download data": "Download {{CoreOrAll}} data",
  "Back Home": "Back Home",
  "Set a Workspace name": "Set a Workspace name",
  "Retain local cached data": "Retain local cached data",
@ -177,10 +182,9 @@
  "Download data Description1": "It takes up more space on your device.",
  "Download data Description2": "It takes up little space on your device.",
  "Enabled success": "Enabled success",
-  "Export AFFINE backup file": "Export AFFINE backup file (coming soon)",
-  "Data sync mode": "Data sync mode",
+  "Sign out": "Sign out",
+  "All data has been stored in the cloud": "All data has been stored in the cloud. ",
  "Download all data": "Download all data",
-  "It takes up more space on your device.": "It takes up more space on your device.",
-  "Download core data": "Download core data",
-  "It takes up little space on your device.": "It takes up little space on your device."
+  "emptyFavorite": "Click Add to Favorites and the page will appear here.",
+  "Sign out description": "Signing out will cause the unsynchronised content to be lost."
 }
--- a/packages/i18n/src/resources/fr.json
+++ b/packages/i18n/src/resources/fr.json
@ -1,21 +1,24 @@
 {
  "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
+  "all": "tout",
  "Download data Description2": "Cela prendra peu d'espace sur votre appareil.",
+  "Copied link to clipboard": "Lien copié dans le presse-papier",
  "Enabled success": "Activation réussie",
-  "Cloud Workspace": "Espace de travail distant",
  "Failed to publish workspace": "La publication de l'espace de travail a échoué",
-  "Force Sign Out": "Forcer la déconnexion",
  "Joined Workspace": "L'espace de travail a été rejoint",
  "Local Workspace": "Espace de travail local",
-  "Local Workspace Description": "Toutes les données sont stockées sur le périphérique actuel. Vous pouvez activer AFFiNE Cloud pour garder les données de cet espace de travail synchronisé dans le cloud.",
-  "Published Description": "L'espace de travail courant a été publié sur le net, tout le monde peut voir son contenu à partir du lien.",
+  "Published Description": "L'espace de travail actuel a été publié sur Internet. Tout le monde peut voir son contenu à partir du lien.",
+  "Local Workspace Description": "Toutes les données sont stockées sur cet appareil. Vous pouvez activer AFFiNE Cloud pour garder les données de cet espace de travail synchronisé dans le cloud.",
  "Retain local cached data": "Conserver les données du cache local",
-  "Copied link to clipboard": "Lien copié dans le presse-papier",
-  "Published to Web": "Publié sur internet",
-  "Set a Workspace name": "Définir un nom pour l'espace de travail",
+  "Cloud Workspace": "Espace de travail distant",
+  "Force Sign Out": "Forcer la déconnexion",
  "Wait for Sync": "Attendre la synchronisation",
  "Available Offline": "Disponible hors ligne",
  "Delete Member?": "Supprimer le membre ?",
+  "All data has been stored in the cloud": "Toutes les données ont été sauvegardées dans le cloud.",
+  "Published to Web": "Publié sur Internet",
+  "Set a Workspace name": "Définir un nom pour l'espace de travail",
+  "Sign out description": "Se déconnecter provoquera la perte du contenu non synchronisé.",
  "404 - Page Not Found": "Erreur 404 - Page non trouvée",
  "AFFiNE Community": "Communauté AFFiNE",
  "Add to favorites": "Ajouter aux favoris",
@ -83,15 +86,15 @@
  "TrashButtonGroupTitle": "Supprimer définitivement",
  "restored": "{{title}} a été restauré ",
  "Heading": "Titre {{number}}",
-  "Upload": "Uploader ",
  "Code block": "Bloc de code",
+  "Member": "Membre",
  "Collapse sidebar": "Rabattre la barre latérale",
  "Connector": "Connecteur (bientôt disponible) ",
  "Increase indent": "Augmenter l'indentation",
  "Reduce indent": "Réduire l'indentation du texte",
  "Inline code": "Ligne de code",
  "Strikethrough": "Barré",
-  "Member": "Membre",
+  "Upload": "Uploader ",
  "ClearData": "Effacer les données locales",
  "Collaboration": "Collaboration",
  "Collaboration Description": "La collaboration avec d'autres membres nécessite AFFiNE Cloud.",
@ -148,13 +151,15 @@
  "login success": "Connexion réussie",
  "mobile device description": "Nous travaillons toujours sur le support des appareils mobiles. Ainsi, nous vous recommandons d'utiliser un ordinateur.",
  "still designed": "(Cette page est toujours en cours de conception.)",
-  "Body text": "Corps du texte",
  "Back Home": "Retour à l'accueil",
-  "Member has been removed": "{{name}} a été supprimé",
+  "Confirm": "Confirmer",
+  "Download core data": "Télécharger les données principales",
  "Not now": "Pas maintenant",
+  "Member has been removed": "{{name}} a été supprimé",
  "Owner": "Propriétaire",
  "Workspace Avatar": "Avatar de l'espace de travail",
-  "core": "l'essentiel",
+  "Body text": "Corps du texte",
+  "Data sync mode": "Mode de synchronisation des données",
  "All changes are saved locally": "Les changements sont sauvegardés localement",
  "Continue with Google": "Se connecter avec Google ",
  "Delete": "Supprimer objet ",
@ -162,14 +167,23 @@
  "Share with link": "Partager un lien",
  "Sync Description": "{{workspaceName}} est un espace de travail local. Toutes ses données sont stockées sur le périphérique actuel. Vous pouvez activer AFFiNE Cloud pour garder les données de cet espace de travail synchronisé dans le cloud.",
  "TrashButtonGroupDescription": "Une fois supprimé, vous ne pouvez pas retourner en arrière. Confirmez-vous la suppression ? ",
-  "all": "Tout",
  "mobile device": "Il semblerait que vous naviguiez sur un appareil mobile.",
  "recommendBrowser": "Pour une expérience optimale, nous vous recommandons le navigateur <1>Chrome</1>.",
  "upgradeBrowser": "Veuillez installer la dernière version de Chrome pour bénéficier d'une expérience optimale.",
+  "core": "l'essentiel",
+  "Download data": "Télécharger les données {{CoreOrAll}}",
+  "Export Description": "Vous pouvez exporter l'intégralité des données de l'espace de travail à titre de sauvegarde ; les données ainsi exportées peuvent être réimportées.",
+  "Download all data": "Télécharger toutes les données",
+  "Download data Description1": "Cela prendra davantage d'espace sur votre appareil.",
+  "It takes up more space on your device": {
+    "": "Cela prendra davantage d'espace sur votre appareil."
+  },
+  "It takes up little space on your device": {
+    "": "Cela prendra peu d'espace sur votre appareil."
+  },
  "is a Cloud Workspace": "est un espace de travail distant",
-  "is a Local Workspace": "est un espace de travail local",
  "will delete member": "supprimera le membre",
+  "is a Local Workspace": "est un espace de travail local",
  "Cloud Workspace Description": "Toutes les données vont être synchronisées et sauvegardées sur le compte AFFiNE <1>{{email}}</1>",
-  "Download data Description1": "Cela prendra plus d'espace sur votre appareil.",
-  "Download data": "Télécharger les données {{CoreOrAll}}"
+  "Export AFFiNE backup file": "Exporter un fichier de sauvegarde AFFiNE (à venir...)"
 }
--- a/packages/i18n/src/resources/index.ts
+++ b/packages/i18n/src/resources/index.ts
@ -1,7 +1,6 @@
 // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 // Run `pnpm run download-resources` to regenerate.
 // To overwrite this, please overwrite download.ts script.
-import pt_BR from './pt-BR.json';
 import en from './en.json';
 import zh_Hans from './zh-Hans.json';
 import fr from './fr.json';
@ -9,16 +8,6 @@ import de from './de.json';
 import ru from './ru.json';

 export const LOCALES = [
-  {
-    id: 1000040021,
-    name: 'Portuguese (Brazil)',
-    tag: 'pt-BR',
-    originalName: 'português (Brasil)',
-    flagEmoji: '🇧🇷',
-    base: false,
-    completeRate: 0.8022598870056498,
-    res: pt_BR,
-  },
  {
    id: 1000040001,
    name: 'English',
@ -26,7 +15,7 @@ export const LOCALES = [
    originalName: 'English',
    flagEmoji: '🇬🇧',
    base: true,
-    completeRate: 1.0169491525423728,
+    completeRate: 1,
    res: en,
  },
  {
@ -36,7 +25,7 @@ export const LOCALES = [
    originalName: '简体中文',
    flagEmoji: '🇨🇳',
    base: false,
-    completeRate: 0.9548022598870056,
+    completeRate: 0.9835164835164835,
    res: zh_Hans,
  },
  {
@ -46,7 +35,7 @@ export const LOCALES = [
    originalName: 'français',
    flagEmoji: '🇫🇷',
    base: false,
-    completeRate: 0.96045197740113,
+    completeRate: 0.989010989010989,
    res: fr,
  },
  {
@ -56,7 +45,7 @@ export const LOCALES = [
    originalName: 'Deutsch',
    flagEmoji: '🇩🇪',
    base: false,
-    completeRate: 0.9548022598870056,
+    completeRate: 0.9285714285714286,
    res: de,
  },
  {
@ -66,7 +55,7 @@ export const LOCALES = [
    originalName: 'русский',
    flagEmoji: '🇷🇺',
    base: false,
-    completeRate: 0.9887005649717514,
+    completeRate: 0.989010989010989,
    res: ru,
  },
 ] as const;
--- a/packages/i18n/src/resources/pt-BR.json
+++ b/packages/i18n/src/resources/pt-BR.json
@ -1,147 +0,0 @@
-{
-  "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
-  "404 - Page Not Found": "404 - Página não encontrada",
-  "AFFiNE Community": "Comunidade AFFiNE",
-  "Access level": "Nível de acesso",
-  "Add to favorites": "Adicionar aos favoritos",
-  "Added to Favorites": "Adicionado aos Favoritos",
-  "All changes are saved locally": "Todas as alterações estão salvas localmente",
-  "All pages": "Todas páginas",
-  "Body text": "Texto do Corpo",
-  "Bold": "Negrito",
-  "Cancel": "Cancelar",
-  "ClearData": "Limpar cache local",
-  "Code block": "Bloco de código",
-  "Collaboration": "Colaboração",
-  "Collaboration Description": "Colaborar com outros membros exige o serviço AFFiNE Cloud.",
-  "Collapse sidebar": "Ocultar barra lateral",
-  "Connector": "Conector (em breve)",
-  "Contact Us": "Entre em contato",
-  "Continue with Google": "Continue com o Google",
-  "Convert to ": "Converter para",
-  "Copy Link": "Copiar link",
-  "Create": "Criar",
-  "Create Or Import": "Criar ou Importar",
-  "Created": "Criado",
-  "Delete": "Deletar",
-  "Delete Workspace": "Deletar Workspace",
-  "login success": "Login feito com sucesso",
-  "core": "core",
-  "all": "todos",
-  "Users": "Usuários",
-  "Upload": "Upload",
-  "Updated": "Atualizado",
-  "Untitled": "Sem título",
-  "Undo": "Desfazer",
-  "Underline": "Sublinhar",
-  "TrashButtonGroupTitle": "Deletar permanentemente",
-  "TrashButtonGroupDescription": "Uma vez deletado, você não poderá desfazer esta ação. Deseja confirmar?",
-  "Trash": "Lixeira",
-  "Title": "Título",
-  "Tips": "Dicas:",
-  "Text": "Texto (em breve)",
-  "Sync": "Sincronizar",
-  "Stop publishing": "Para a publicação",
-  "Skip": "Pular",
-  "Sign out": "Deslogar da AFFiNE Cloud",
-  "Sign in and Enable": "Logar na conta e Habilitar",
-  "Sign in": "Logar na AFFiNE Cloud",
-  "Shortcuts": "Atalhos",
-  "Share with link": "Compartilhar com link",
-  "Shape": "Forma",
-  "Settings": "Configurações",
-  "Select": "Selecionar",
-  "Restore it": "Restaurar",
-  "Removed from Favorites": "Removido dos Favoritos",
-  "Remove from favorites": "Remover dos Favoritos",
-  "Reduce indent": "Reduzir o espaço do indento",
-  "Redo": "Refazer",
-  "Quick search placeholder2": "Pesquisar em  {{workspace}}",
-  "Quick search placeholder": "Pesquisa rápida...",
-  "Quick search": "Pesquisa rápida",
-  "Publish to web": "Publicar na Web",
-  "Publish": "Publicar",
-  "Permanently deleted": "Deletado permanentemente",
-  "Pending": "Pendente",
-  "Pen": "Caneta (em breve)",
-  "Paper": "Papel",
-  "Page": "Página",
-  "Open in new tab": "Abrir em uma nova aba",
-  "Ooops!": "Ooops!",
-  "Once deleted, you can't undo this action": {
-    "": "Uma vez deletado, esta ação não pode ser desfeita."
-  },
-  "Official Website": "Website Oficial",
-  "NotLoggedIn": "Você não está logado no momento",
-  "Non-Gmail": "Apenas o Gmail é suportado momento. Demais e-mails não são.",
-  "No item": "Nenhum item",
-  "New Workspace": "Nova Workspace",
-  "New Page": "Nova Página",
-  "New Keyword Page": "Nova página '{{query}}' ",
-  "My Workspaces": "Minhas Workspaces",
-  "Moved to Trash": "Movido para a Lixeira",
-  "Loading": "Carregando...",
-  "Link": "Hyperlink (com o texto selecionado)",
-  "Leave Workspace Description": "Depois de você sair, você não conseguirá acessar os conteúdos dessa Workspace.",
-  "Leave Workspace": "Sair da Workspace.",
-  "Leave": "Sair",
-  "Keyboard Shortcuts": "Atalhos do Teclado",
-  "Jump to": "Pular para",
-  "Italic": "Itálico",
-  "Invite Members": "Convidar Membros",
-  "Invite": "Convidar",
-  "Invite placeholder": "Pesquisar e-mail (Apenas Gmail)",
-  "Inline code": "Código inline",
-  "Increase indent": "Aumentar Indento",
-  "Import": "Importar",
-  "Got it": "Entendi",
-  "How is AFFiNE Alpha different?": "Como AFFiNE Alpha é diferente?",
-  "Heading": "Cabeçalho {{number}}",
-  "Get in touch!": "Entre em contato!",
-  "General": "Geral",
-  "Find 0 result": "Foram encontrados 0 resultados",
-  "Find results": "Foram encontrados {{number}} resultados",
-  "Favorites": "Favoritos",
-  "Favorited": "Favoritado",
-  "Favorite": "Favorito",
-  "Export to HTML": "Exportar para HTML",
-  "Export to Markdown": "Exportar para Markdown",
-  "Export": "Exportar",
-  "Export Workspace": "Exportar Workspace <1>{{workspace}}</1> (em breve)",
-  "Expand sidebar": "Expandir barra lateral",
-  "Enable AFFiNE Cloud Description": "Se habilitada, os dados desta Workspace serão salvos e sincronizados via AFFiNE Cloud.",
-  "Enable AFFiNE Cloud": "Habilitar AFFiNE Cloud",
-  "Enable": "Habilitar",
-  "Divider": "Divisor",
-  "Delete permanently?": "Deletar permanentemente?",
-  "Delete permanently": "Deletar permanentemente",
-  "Delete page?": "Deletar página?",
-  "Delete Workspace placeholder": "Por favor, digite \"Delete\" para confirmar",
-  "will be moved to Trash": "\n{{title}} será movido para a Lixeira",
-  "upgradeBrowser": "Por favor, atualize o seu Chrome para a última versão para poder usufruir da melhor experiência.",
-  "still designed": "(Está página está em construção.)",
-  "restored": "{{title}} foi restaurado",
-  "recommendBrowser": "Nós recomendamos o navegador <1>Chrome</1> para a melhor experiência de uso.",
-  "mobile device description": "Nós ainda estamos trabalhando na versão mobile e recomendamos que você utilize um computador.",
-  "mobile device": "Parece que você está acessando de um smartphone.",
-  "emptyTrash": "Clique Adicionar para Lixeira e a página irá aparecer aqui.",
-  "emptyFavorite": "Clique Adicionar para Favoritos e a página irá aparecer aqui.",
-  "emptyAllPages": "Esta Workspace está vazia. Crie uma nova página para começar a editá-la.",
-  "Workspace Type": "Tipo de Workspace",
-  "Workspace Settings": "Configurações da Workspace",
-  "Workspace Name": "Nome da Workspace",
-  "Workspace Icon": "Ícone da Workspace",
-  "Strikethrough": "Riscado",
-  "Sticky": "Sticky (em breve)",
-  "Stay logged out": "Permanecer deslogado",
-  "Set up an AFFiNE account to sync data": "Crie uma conta AFFiNE para sincronizar seus dados",
-  "Markdown Syntax": "Sintaxe Markdown",
-  "Publishing Description": "Após publicar para a web, qualquer pessoa poderá ver o conteúdo desta Workspace através do link.",
-  "Publishing": "Publicar para a web demanda o serviço AFFiNE Cloud.",
-  "Delete Workspace Description": "Deletar (<1>{{workspace}}</1>) não pode ser desfeito, por favor proceder com atenção. Todos os conteúdos da sua Workspace serão perdidos. ",
-  "Delete Workspace Description2": "Deletar (<1>{{workspace}}</1>) deletará na cópia local e na nuvem contratada, esta operação não pode ser desfeita, por favor proceda com atenção.",
-  "Workspace description": "Workspace é o seu espaço virtual para capturar, criar e planejar individualmente ou colaborando com sua equipe.",
-  "Sync Description2": "<1>{{workspaceName}}</1> é uma Workspace armazenada na Nuvem. Todos os dados serão sincronizados e salvos na AFFiNE Cloud.",
-  "Edgeless": "Sem Bordas",
-  "Sync Description": "{{workspaceName}} é uma Workspace local. Todo o conteúdo dela está armazenado no seu equipamento. Você pode habilitar a AFFiNE Cloud para esta Workspace para manter os dados salvos e sincronizados pela nuvem."
-}
--- a/packages/i18n/src/resources/ru.json
+++ b/packages/i18n/src/resources/ru.json
@ -1,5 +1,6 @@
 {
  "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
+  "Export AFFiNE backup file": "Экспорт файла резервной копии AFFiNE (скоро)",
  "Local Workspace Description": "Все данные сохраняются на текущем устройстве. Вы можете включить AFFiNE Cloud для этого рабочего пространства, чтобы синхронизировать данные с облаком.",
  "Member": "Участник",
  "Member has been removed": "{{name}} был удален",
@ -7,6 +8,8 @@
  "is a Cloud Workspace": "это облачное рабочее пространство.",
  "Workspace Avatar": "Аватар рабочего пространства",
  "Published to Web": "Опубликовано в Интернете",
+  "Sign out description": "Выход приведет к потере несинхронизированного контента.",
+  "Export Description": "Вы можете экспортировать все данные рабочего пространства, а экспортированные данные можно повторно импортировать.",
  "is a Local Workspace": "это локальное рабочее пространство",
  "Wait for Sync": "Дождитесь синхронизации",
  "Set a Workspace name": "Задайте имя рабочего пространства",
@ -16,6 +19,12 @@
  "will delete member": "удалит участника",
  "Not now": "Не сейчас",
  "Download all data": "Скачать все данные",
+  "It takes up little space on your device": {
+    "": "Занимает мало места на вашем устройстве."
+  },
+  "It takes up more space on your device": {
+    "": "Занимает много места на вашем устройстве."
+  },
  "All data has been stored in the cloud": "Все данные хранятся в облаке.",
  "Confirm": "Подтвердить",
  "Data sync mode": "Режим синхронизации данных",
--- a/packages/i18n/src/resources/zh-Hans.json
+++ b/packages/i18n/src/resources/zh-Hans.json
@ -6,6 +6,9 @@
  "will delete member": "将删除成员",
  "Download data Description1": "此操作会在你的设备上占用更多空间。",
  "Download data Description2": "此操作会在你的设备上占用少许空间。",
+  "It takes up more space on your device": {
+    "": "此操作会在你的设备上占用更多空间。"
+  },
  "Cloud Workspace": "云端工作区",
  "Cloud Workspace Description": "所有数据将被同步并保存在AFFiNE账户(<1>{{email}}</1>)中",
  "Copied link to clipboard": "复制链接到剪贴板",
@ -13,10 +16,14 @@
  "Back Home": "返回首页",
  "Enabled success": "启用成功",
  "Published Description": "当前工作区已被发布到Web，所有人都可以通过链接来查看此工作区内容。",
+  "All data has been stored in the cloud": "所有数据已被保存在云端。",
  "Download data": "下载 {{CoreOrAll}} 数据",
  "Force Sign Out": "强制登出",
  "Joined Workspace": "加入工作区",
  "Local Workspace": "本地工作区",
+  "Confirm": "确认",
+  "Download all data": "下载所有数据",
+  "Download core data": "下载核心数据",
  "Add to favorites": "加入收藏",
  "All pages": "全部页面",
  "Cancel": "取消",
@ -167,8 +174,13 @@
  "Member has been removed": "{{name}} 已被移除。",
  "Owner": "所有者",
  "Published to Web": "公开到互联网",
+  "Data sync mode": "数据同步模式",
+  "Export AFFiNE backup file": "导出 AFFiNE 备份文件（即将到来）",
  "Retain local cached data": "保留本地缓存数据",
  "Set a Workspace name": "设置工作区名字",
  "Workspace Avatar": "工作区头像",
-  "is a Local Workspace": "是本地工作区"
+  "is a Local Workspace": "是本地工作区",
+  "Sign out description": "登出会导致未同步的内容丢失",
+  "Not now": "稍后再说",
+  "Saved then enable AFFiNE Cloud": "所有改动已保存在本地，点击启用 AFFiNE 云服务"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -160,7 +160,7 @@ importers:
      '@affine/i18n': workspace:*
      '@blocksuite/blocks': 0.4.0-20230210031655-264744e
      '@blocksuite/editor': 0.4.0-20230210031655-264744e
-      '@blocksuite/icons': ^2.0.2
+      '@blocksuite/icons': ^2.0.14
      '@blocksuite/store': 0.4.0-20230210031655-264744e
      '@emotion/css': ^11.10.5
      '@emotion/react': ^11.10.5
@ -203,7 +203,7 @@ importers:
      '@affine/i18n': link:../../packages/i18n
      '@blocksuite/blocks': 0.4.0-20230210031655-264744e_tryoyswiy2ympczjdv3b3agdeu
      '@blocksuite/editor': 0.4.0-20230210031655-264744e_j74rmblk7sdmtedyaf3ziv736m
-      '@blocksuite/icons': 2.0.4_w5j4k42lgipnm43s3brx6h3c34
+      '@blocksuite/icons': 2.0.14_w5j4k42lgipnm43s3brx6h3c34
      '@blocksuite/store': 0.4.0-20230210031655-264744e_lit@2.6.1+yjs@13.5.45
      '@emotion/css': 11.10.5
      '@emotion/react': 11.10.5_w5j4k42lgipnm43s3brx6h3c34
@ -2838,6 +2838,16 @@ packages:
      zod: 3.20.6
    dev: false

+  /@blocksuite/icons/2.0.14_w5j4k42lgipnm43s3brx6h3c34:
+    resolution: {integrity: sha512-1uStOtcn13ncC+/ne51Aywwo1er0a6IKFhC84B8mqUXxFdmJkYEQ1NLSxHW/HktwwWgMQYNE//ohKFnAPe5YGg==}
+    peerDependencies:
+      '@types/react': ^18.0.25
+      react: ^18.2.0
+    dependencies:
+      '@types/react': 18.0.20
+      react: 18.2.0
+    dev: false
+
  /@blocksuite/icons/2.0.4_3stiutgnnbnfnf3uowm5cip22i:
    resolution: {integrity: sha512-Ewx30d3W6MXJGPXYvv48UpvAVfDB+gIVu90sHZX5curnSn+e1DdpCVfL0DeZA7Iyq6aLbxnKVzOAewlfoP8kDQ==}
    peerDependencies:
@ -2848,16 +2858,6 @@ packages:
      react: 18.2.0
    dev: false

-  /@blocksuite/icons/2.0.4_w5j4k42lgipnm43s3brx6h3c34:
-    resolution: {integrity: sha512-Ewx30d3W6MXJGPXYvv48UpvAVfDB+gIVu90sHZX5curnSn+e1DdpCVfL0DeZA7Iyq6aLbxnKVzOAewlfoP8kDQ==}
-    peerDependencies:
-      '@types/react': ^18.0.25
-      react: ^18.2.0
-    dependencies:
-      '@types/react': 18.0.20
-      react: 18.2.0
-    dev: false
-
  /@blocksuite/phasor/0.4.0-20230209191848-0a912e3_lit@2.6.1:
    resolution: {integrity: sha512-7plV7v9F4KoqbGUZCyyI78HzxfZlP6jNZ9I8PEEap+JlUtsmryxHrEVC/oEta4FW6kBflmtQm46YOAlz3bBQFw==}
    peerDependencies:
--- a/tests/libs/page-logic.ts
+++ b/tests/libs/page-logic.ts
@ -8,6 +8,6 @@ export async function clickPageMoreActions(page: Page) {
  return page
    .getByTestId('editor-header-items')
    .getByRole('button')
-    .nth(2)
+    .nth(1)
    .click();
 }
--- a/tests/login.spec.ts
+++ b/tests/login.spec.ts
@ -14,16 +14,6 @@ test.describe('Login Flow', () => {
      .getByRole('heading', { name: 'Currently not logged in' })
      .click();
  });
-
-  test.skip('Open login modal by click cloud-unsync-icon', async ({ page }) => {
-    await page.getByTestId('cloud-unsync-icon').click();
-
-    await page.waitForTimeout(800);
-    await page
-      .getByRole('heading', { name: 'Currently not logged in' })
-      .click();
-  });
-
  // not stable
  // test.skip('Open google firebase page', async ({ page }) => {
  //   await page.getByTestId('current-workspace').click();