From cc00f2cb2dc52c490b04f4000c7be5b4a6688027 Mon Sep 17 00:00:00 2001
From: MingLiang Wang <mingliangwang0o0@gmail.com>
Date: Mon, 16 Jan 2023 18:23:09 +0800
Subject: [PATCH 01/27] fix: fix logout

---
 packages/data-center/src/provider/affine/affine.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts
index d806ed2f4..025ef96d3 100644
--- a/packages/data-center/src/provider/affine/affine.ts
+++ b/packages/data-center/src/provider/affine/affine.ts
@@ -407,6 +407,7 @@ export class AffineProvider extends BaseProvider {
     token.clear();
     this._channel?.disconnect();
     this._wsMap.forEach(ws => ws.disconnect());
+    this._workspaces.clear();
     storage.removeItem('token');
   }
 

From 84dd82aa968b4733fd7f836864190a2520466393 Mon Sep 17 00:00:00 2001
From: MingLiang Wang <mingliangwang0o0@gmail.com>
Date: Tue, 17 Jan 2023 10:26:50 +0800
Subject: [PATCH 02/27] feat: improve clear logic

---
 packages/data-center/src/workspace-unit-collection.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/data-center/src/workspace-unit-collection.ts b/packages/data-center/src/workspace-unit-collection.ts
index b51f5d160..c44ef3feb 100644
--- a/packages/data-center/src/workspace-unit-collection.ts
+++ b/packages/data-center/src/workspace-unit-collection.ts
@@ -122,9 +122,7 @@ export class WorkspaceUnitCollection {
     };
 
     const clear = () => {
-      scopedWorkspaceIds.forEach(id => {
-        remove(id);
-      });
+      remove(Array.from(scopedWorkspaceIds));
     };
 
     const update = (workspaceId: string, meta: UpdateWorkspaceUnitParams) => {

From d64ae51c94a9feafe3a6bba3cb23fa6879e8324e Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 17 Jan 2023 17:46:34 +0800
Subject: [PATCH 03/27] chore: remove setting tabs icon

---
 .../pages/workspace/[workspaceId]/setting.tsx | 20 +------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
index 2a78641d6..ce45fb0f3 100644
--- a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
@@ -4,15 +4,8 @@ import {
   StyledSettingSidebar,
   StyledSettingSidebarHeader,
   StyledSettingTabContainer,
-  StyledSettingTagIconContainer,
   WorkspaceSettingTagItem,
 } from '@/components/workspace-setting/style';
-import {
-  EditIcon,
-  UsersIcon,
-  PublishIcon,
-  CloudInsyncIcon,
-} from '@blocksuite/icons';
 import { ReactElement, ReactNode, useState } from 'react';
 import {
   GeneralPage,
@@ -30,32 +23,26 @@ type TabNames = 'general' | 'members' | 'publish' | 'sync' | 'export';
 
 const tabMap: {
   name: TabNames;
-  icon: ReactNode;
   panelRender: (workspace: WorkspaceUnit) => ReactNode;
 }[] = [
   {
     name: 'general',
-    icon: <EditIcon />,
     panelRender: workspace => <GeneralPage workspace={workspace} />,
   },
   {
     name: 'members',
-    icon: <CloudInsyncIcon />,
     panelRender: workspace => <MembersPage workspace={workspace} />,
   },
   {
     name: 'publish',
-    icon: <UsersIcon />,
     panelRender: workspace => <PublishPage workspace={workspace} />,
   },
   {
     name: 'sync',
-    icon: <PublishIcon />,
     panelRender: workspace => <SyncPage workspace={workspace} />,
   },
   {
     name: 'export',
-    icon: <PublishIcon />,
     panelRender: workspace => <ExportPage workspace={workspace} />,
   },
 ];
@@ -74,14 +61,12 @@ const WorkspaceSetting = () => {
   )?.panelRender;
   let tableArr: {
     name: TabNames;
-    icon: ReactNode;
     panelRender: (workspace: WorkspaceUnit) => ReactNode;
   }[] = tabMap;
   if (!isOwner) {
     tableArr = [
       {
         name: 'general',
-        icon: <EditIcon />,
         panelRender: workspace => <GeneralPage workspace={workspace} />,
       },
     ];
@@ -93,7 +78,7 @@ const WorkspaceSetting = () => {
           {t('Workspace Settings')}
         </StyledSettingSidebarHeader>
         <StyledSettingTabContainer>
-          {tableArr.map(({ icon, name }) => {
+          {tableArr.map(({ name }) => {
             return (
               <WorkspaceSettingTagItem
                 key={name}
@@ -102,9 +87,6 @@ const WorkspaceSetting = () => {
                   handleTabChange(name);
                 }}
               >
-                <StyledSettingTagIconContainer>
-                  {icon}
-                </StyledSettingTagIconContainer>
                 {name}
               </WorkspaceSettingTagItem>
             );

From de9248b78462ba2d0c6752e833f12d4ae45cca30 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Wed, 18 Jan 2023 01:27:31 +0800
Subject: [PATCH 04/27] feat:workspaces list style

---
 .../src/components/workspace-modal/index.tsx  | 210 ++++++++++--------
 pnpm-lock.yaml                                |  24 ++
 2 files changed, 138 insertions(+), 96 deletions(-)

diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx
index 5c0424b77..24ceefc28 100644
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -3,12 +3,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useState } from 'react';
 import { CreateWorkspaceModal } from '../create-workspace';
-import {
-  CloudUnsyncedIcon,
-  CloudInsyncIcon,
-  UsersIcon,
-  AddIcon,
-} from '@blocksuite/icons';
+import { CloudUnsyncedIcon, UsersIcon, AddIcon } from '@blocksuite/icons';
 import { toast } from '@/ui/toast';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
@@ -26,7 +21,7 @@ interface WorkspaceModalProps {
 export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
   const { confirm } = useConfirm();
-  const { workspaceList, currentWorkspace, login, user, logout } =
+  const { workspaceList, currentWorkspace, login, user, logout, isOwner } =
     useAppState();
   const router = useRouter();
   const { t } = useTranslation();
@@ -35,8 +30,12 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
     <div>
       <Modal open={open} onClose={onClose}>
         <ModalWrapper
-          width={820}
-          style={{ padding: '10px', display: 'flex', flexDirection: 'column' }}
+          width={720}
+          style={{
+            padding: '24px 40px',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
         >
           <Header>
             <ContentTitle>{t('My Workspaces')}</ContentTitle>
@@ -61,77 +60,68 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                     active={item.id === currentWorkspace?.id}
                     key={index}
                   >
-                    <span style={{ width: '100px' }}>
-                      <div
-                        style={{
-                          float: 'left',
-                          marginTop: '6px',
-                          marginLeft: '10px',
-                          marginRight: '10px',
-                        }}
-                      >
-                        <WorkspaceUnitAvatar size={50} workspaceUnit={item} />
-                      </div>
+                    <div>
+                      <WorkspaceUnitAvatar size={58} workspaceUnit={item} />
+                    </div>
 
-                      <span
-                        style={{
-                          width: '235px',
-                          fontSize: '16px',
-                          display: 'inline-block',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                          overflow: 'hidden',
-                          position: 'relative',
-                          top: '20px',
-                        }}
-                      >
+                    <StyleWorkspaceInfo>
+                      <StyleWorkspaceTitle>
                         {item.name || 'AFFiNE'}
-                      </span>
-                    </span>
-                    <span
-                      style={{
-                        position: 'relative',
-                        top: '20px',
-                      }}
-                    >
-                      {(item.provider === 'local' || !item.provider) && (
-                        <CloudUnsyncedIcon fontSize={24} />
+                      </StyleWorkspaceTitle>
+                      {isOwner ? (
+                        item.provider === 'local' ? (
+                          <p>
+                            <CloudUnsyncedIcon fontSize={16} />
+                            Local Workspace
+                          </p>
+                        ) : (
+                          <p>
+                            <CloudUnsyncedIcon fontSize={16} />
+                            Cloud Workspace
+                          </p>
+                        )
+                      ) : (
+                        <p>
+                          <CloudUnsyncedIcon fontSize={16} />
+                          Joined Workspace
+                        </p>
                       )}
-                      {item.provider === 'affine' && (
-                        <CloudInsyncIcon fontSize={24} />
+                      {item.provider === 'local' && (
+                        <p>
+                          <UsersIcon fontSize={16} />
+                          All data can be accessed offline
+                        </p>
                       )}
-                      {item.published && <UsersIcon fontSize={24} />}
-                    </span>
-                    {/* {item.isLocal ? 'isLocal' : ''}/ */}
+                      {item.published && (
+                        <p>
+                          <UsersIcon fontSize={16} /> Published to Web
+                        </p>
+                      )}
+                    </StyleWorkspaceInfo>
                   </WorkspaceItem>
                 );
               })}
-              <li>
-                <Button
-                  style={{
-                    marginTop: '20px',
-                  }}
-                  type="primary"
-                  onClick={() => {
-                    setCreateWorkspaceOpen(true);
-                  }}
-                >
-                  <AddIcon
-                    style={{
-                      fontSize: '20px',
-                      top: '5px',
-                      position: 'relative',
-                      marginRight: '10px',
-                    }}
-                  />
-                  {t('Create Or Import')}
-                </Button>
-              </li>
+              <WorkspaceItem
+                onClick={() => {
+                  setCreateWorkspaceOpen(true);
+                }}
+              >
+                <div>
+                  <StyleWorkspaceAdd className="add-icon">
+                    <AddIcon fontSize={18} />
+                  </StyleWorkspaceAdd>
+                </div>
+
+                <StyleWorkspaceInfo>
+                  <StyleWorkspaceTitle>New workspace</StyleWorkspaceTitle>
+                  <p>Crete or import</p>
+                </StyleWorkspaceInfo>
+              </WorkspaceItem>
             </WorkspaceList>
-            <p style={{ fontSize: '14px', color: '#ccc', margin: '12px 0' }}>
+            {/* <p style={{ fontSize: '14px', color: '#ccc', margin: '12px 0' }}>
               {t('Tips')}
               {t('Workspace description')}
-            </p>
+            </p> */}
           </Content>
           <Footer>
             {!user ? (
@@ -178,24 +168,6 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
             open={createWorkspaceOpen}
             onClose={() => {
               setCreateWorkspaceOpen(false);
-              onClose();
-              // confirm({
-              //   title: 'Enable AFFiNE Cloud?',
-              //   content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
-              //   confirmText: user ? 'Enable' : 'Sign in and Enable',
-              //   cancelText: 'Skip',
-              // }).then(confirm => {
-              //   if (confirm) {
-              //     if (user) {
-              //       // workspaceId &&
-              //       //   updateWorkspaceMeta(workspaceId, { isPublish: true });
-              //     } else {
-              //       // login();
-              //       // workspaceId &&
-              //       //   updateWorkspaceMeta(workspaceId, { isPublish: true });
-              //     }
-              //   }
-              // });
             }}
           ></CreateWorkspaceModal>
         </ModalWrapper>
@@ -210,7 +182,6 @@ const Header = styled('div')({
 });
 
 const Content = styled('div')({
-  padding: '0 20px',
   flexDirection: 'column',
   alignItems: 'center',
   gap: '16px',
@@ -233,24 +204,71 @@ const Footer = styled('div')({
 });
 
 const WorkspaceList = styled('div')({
+  maxHeight: '514px',
+  overflow: 'auto',
   display: 'grid',
-  gridRowGap: '10px',
-  gridColumnGap: '10px',
+  gridRowGap: '24px',
+  gridColumnGap: '24px',
   fontSize: '16px',
+  marginTop: '36px',
   gridTemplateColumns: 'repeat(2, 1fr)',
 });
 
 export const WorkspaceItem = styled.div<{
-  active: boolean;
+  active?: boolean;
 }>(({ theme, active }) => {
-  const backgroundColor = active ? theme.colors.hoverBackground : 'transparent';
+  const borderColor = active ? theme.colors.primaryColor : 'transparent';
   return {
     cursor: 'pointer',
-    padding: '8px',
-    border: '1px solid #eee',
-    backgroundColor: backgroundColor,
+    padding: '16px',
+    height: '124px',
+    boxShadow: theme.shadow.modal,
+    display: 'flex',
+    borderRadius: '12px',
+    border: `1px solid ${borderColor}`,
     ':hover': {
       background: theme.colors.hoverBackground,
+      '.add-icon': {
+        border: `1.5px dashed ${theme.colors.primaryColor}`,
+        svg: {
+          fill: theme.colors.primaryColor,
+        },
+      },
     },
   };
 });
+
+const StyleWorkspaceInfo = styled.div(({ theme }) => {
+  return {
+    marginLeft: '16px',
+    p: {
+      fontSize: theme.font.xs,
+      lineHeight: '16px',
+    },
+    svg: {
+      verticalAlign: 'sub',
+      marginRight: '10px',
+    },
+  };
+});
+
+const StyleWorkspaceTitle = styled.div(({ theme }) => {
+  return {
+    fontSize: theme.font.base,
+    fontWeight: 600,
+    lineHeight: '24px',
+    marginBottom: '8px',
+  };
+});
+
+const StyleWorkspaceAdd = styled.div(() => {
+  return {
+    width: '58px',
+    height: '58px',
+    borderRadius: '100%',
+    textAlign: 'center',
+    background: '#f4f5fa',
+    border: '1.5px dashed #f4f5fa',
+    lineHeight: '58px',
+  };
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e3871e797..c3ea50ad0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2999,6 +2999,7 @@ packages:
 
   /@next/env/13.1.0:
     resolution: {integrity: sha512-6iNixFzCndH+Bl4FetQzOMjxCJqg8fs0LAlZviig1K6mIjOWH2m2oPcHcOg1Ta5VCe7Bx5KG1Hs+NrWDUkBt9A==}
+    dev: false
 
   /@next/eslint-plugin-next/12.3.1:
     resolution: {integrity: sha512-sw+lTf6r6P0j+g/n9y4qdWWI2syPqZx+uc0+B/fRENqfR3KpSid6MIKqc9gNwGhJASazEQ5b3w8h4cAET213jw==}
@@ -3021,6 +3022,7 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-android-arm64/12.3.1:
@@ -3038,6 +3040,7 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-darwin-arm64/12.3.1:
@@ -3055,6 +3058,7 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-darwin-x64/12.3.1:
@@ -3072,6 +3076,7 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-freebsd-x64/12.3.1:
@@ -3089,6 +3094,7 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-linux-arm-gnueabihf/12.3.1:
@@ -3106,6 +3112,7 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-linux-arm64-gnu/12.3.1:
@@ -3123,6 +3130,7 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-linux-arm64-musl/12.3.1:
@@ -3140,6 +3148,7 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-linux-x64-gnu/12.3.1:
@@ -3157,6 +3166,7 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-linux-x64-musl/12.3.1:
@@ -3174,6 +3184,7 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-win32-arm64-msvc/12.3.1:
@@ -3191,6 +3202,7 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-win32-ia32-msvc/12.3.1:
@@ -3208,6 +3220,7 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@next/swc-win32-x64-msvc/12.3.1:
@@ -3225,6 +3238,7 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
+    dev: false
     optional: true
 
   /@nodelib/fs.scandir/2.1.5:
@@ -3587,6 +3601,7 @@ packages:
     resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==}
     dependencies:
       tslib: 2.4.0
+    dev: false
 
   /@szmarczak/http-timer/5.0.1:
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
@@ -4579,6 +4594,7 @@ packages:
 
   /client-only/0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+    dev: false
 
   /cliui/6.0.0:
     resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
@@ -7520,6 +7536,7 @@ packages:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
+    dev: false
 
   /natural-compare-lite/1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -7642,6 +7659,7 @@ packages:
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
+    dev: false
 
   /node-domexception/1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
@@ -7992,6 +8010,7 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
+    dev: false
 
   /preferred-pm/3.0.3:
     resolution: {integrity: sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ==}
@@ -8161,6 +8180,7 @@ packages:
       loose-envify: 1.4.0
       react: 18.2.0
       scheduler: 0.23.0
+    dev: false
 
   /react-i18next/11.18.6_i18next@21.10.0:
     resolution: {integrity: sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==}
@@ -8257,6 +8277,7 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       loose-envify: 1.4.0
+    dev: false
 
   /read-pkg-up/7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
@@ -8534,6 +8555,7 @@ packages:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:
       loose-envify: 1.4.0
+    dev: false
 
   /schema-utils/2.7.1:
     resolution: {integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==}
@@ -8692,6 +8714,7 @@ packages:
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /source-map-support/0.5.13:
     resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
@@ -8940,6 +8963,7 @@ packages:
     dependencies:
       client-only: 0.0.1
       react: 18.2.0
+    dev: false
 
   /stylis/4.0.13:
     resolution: {integrity: sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==}

From e8a5d9b784f5c802db82390e0fbbc96e1bad2e91 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Wed, 18 Jan 2023 02:12:51 +0800
Subject: [PATCH 05/27] feat: login style

---
 .../src/components/workspace-modal/index.tsx  | 135 +++++++++++++-----
 1 file changed, 99 insertions(+), 36 deletions(-)

diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx
index 24ceefc28..e944e00d2 100644
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -1,11 +1,20 @@
 import { styled } from '@/styles';
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { Button } from '@/ui/button';
+import { IconButton } from '@/ui/button';
 import { useState } from 'react';
 import { CreateWorkspaceModal } from '../create-workspace';
-import { CloudUnsyncedIcon, UsersIcon, AddIcon } from '@blocksuite/icons';
+import {
+  CloudUnsyncedIcon,
+  UsersIcon,
+  AddIcon,
+  LogOutIcon,
+  CloudInsyncIcon,
+} from '@blocksuite/icons';
 import { toast } from '@/ui/toast';
-import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import {
+  WorkspaceAvatar,
+  WorkspaceUnitAvatar,
+} from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
 import { useConfirm } from '@/providers/ConfirmProvider';
@@ -82,7 +91,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                         )
                       ) : (
                         <p>
-                          <CloudUnsyncedIcon fontSize={16} />
+                          <UsersIcon fontSize={16} color={'#FF646B'} />
                           Joined Workspace
                         </p>
                       )}
@@ -125,7 +134,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
           </Content>
           <Footer>
             {!user ? (
-              <Button
+              <StyleSignIn
                 onClick={async () => {
                   setLoaded(false);
                   await login();
@@ -133,30 +142,48 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                   setLoaded(true);
                 }}
               >
-                {t('Sign in')}
-              </Button>
+                <span>
+                  <CloudInsyncIcon fontSize={16} />
+                </span>
+                Sign in to sync with AFFINE Cloud
+              </StyleSignIn>
             ) : (
-              <Button
-                type="danger"
-                onClick={() => {
-                  confirm({
-                    title: 'Sign out?',
-                    content: `All data has been stored in the cloud. `,
-                    confirmText: 'Sign out',
-                    cancelText: 'Cancel',
-                  }).then(async confirm => {
-                    if (confirm) {
-                      if (user) {
-                        await logout();
-                        router.replace(`/workspace`);
-                        toast('Enabled success');
-                      }
-                    }
-                  });
-                }}
-              >
-                {t('Sign out')}
-              </Button>
+              <div style={{ display: 'flex' }}>
+                <div>
+                  <WorkspaceAvatar
+                    size={40}
+                    name={user.name}
+                    avatar={user.avatar}
+                  ></WorkspaceAvatar>
+                </div>
+                <StyleUserInfo style={{}}>
+                  <p>{user.name}</p>
+                  <p>{user.email}</p>
+                </StyleUserInfo>
+                <div>
+                  <IconButton
+                    onClick={() => {
+                      confirm({
+                        title: 'Sign out?',
+
+                        content: `All data has been stored in the cloud. `,
+                        confirmText: 'Sign out',
+                        cancelText: 'Cancel',
+                      }).then(async confirm => {
+                        if (confirm) {
+                          if (user) {
+                            await logout();
+                            router.replace(`/workspace`);
+                            toast('Enabled success');
+                          }
+                        }
+                      });
+                    }}
+                  >
+                    <LogOutIcon></LogOutIcon>
+                  </IconButton>
+                </div>
+              </div>
             )}
             {!loaded && (
               <Wrapper justifyContent="center">
@@ -196,15 +223,8 @@ const ContentTitle = styled('span')({
   paddingBottom: '16px',
 });
 
-const Footer = styled('div')({
-  height: '70px',
-  paddingLeft: '24px',
-  marginTop: '32px',
-  textAlign: 'center',
-});
-
 const WorkspaceList = styled('div')({
-  maxHeight: '514px',
+  height: '500px',
   overflow: 'auto',
   display: 'grid',
   gridRowGap: '24px',
@@ -270,5 +290,48 @@ const StyleWorkspaceAdd = styled.div(() => {
     background: '#f4f5fa',
     border: '1.5px dashed #f4f5fa',
     lineHeight: '58px',
+    marginTop: '2px',
+  };
+});
+
+const Footer = styled('div')({
+  paddingTop: '16px',
+});
+
+const StyleUserInfo = styled.div(({ theme }) => {
+  return {
+    textAlign: 'left',
+    marginLeft: '16px',
+    marginTop: '16px',
+    flex: 1,
+    p: {
+      lineHeight: '24px',
+      color: theme.colors.iconColor,
+    },
+    'p:nth-child(1)': {
+      color: theme.colors.textColor,
+      fontWeight: 600,
+    },
+  };
+});
+
+const StyleSignIn = styled.div(({ theme }) => {
+  return {
+    cursor: 'pointer',
+    fontSize: '16px',
+    fontWeight: 700,
+    span: {
+      display: 'inline-block',
+      width: '40px',
+      height: '40px',
+      borderRadius: '40px',
+      backgroundColor: theme.colors.innerHoverBackground,
+      textAlign: 'center',
+      lineHeight: '44px',
+      marginRight: '16px',
+      svg: {
+        fill: theme.colors.primaryColor,
+      },
+    },
   };
 });

From 68dc20cd2e88561c821f121d8acb4e747cb4703e Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 15:27:54 +0800
Subject: [PATCH 06/27] chore: add themeModeSwitch to default Item

---
 packages/app/src/components/header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/components/header/Header.tsx b/packages/app/src/components/header/Header.tsx
index 41fced590..a8a50bfef 100644
--- a/packages/app/src/components/header/Header.tsx
+++ b/packages/app/src/components/header/Header.tsx
@@ -44,7 +44,7 @@ const HeaderRightItems: Record<HeaderRightItemNames, ReactNode> = {
 };
 
 export const Header = ({
-  rightItems = ['syncUser'],
+  rightItems = ['syncUser', 'themeModeSwitch'],
   children,
 }: PropsWithChildren<{ rightItems?: HeaderRightItemNames[] }>) => {
   const [showWarning, setShowWarning] = useState(shouldShowWarning());

From 32babd80269d31bee261e6c060f8b391d87ad34d Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 15:30:03 +0800
Subject: [PATCH 07/27] chore: update General style

---
 .../workspace-setting/general/General.tsx     | 26 ++++---
 .../src/components/workspace-setting/style.ts | 72 ++++++++++++++-----
 2 files changed, 69 insertions(+), 29 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx
index 7d9294f27..2ac37c53c 100644
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -3,15 +3,17 @@ import {
   // StyledSettingAvatar,
   StyledSettingAvatarContent,
   StyledSettingInputContainer,
+  StyledDoneButtonContainer,
+  StyledInput,
 } from './style';
 import { StyledSettingH2 } from '../style';
 
 import { useState } from 'react';
-import { Button, TextButton } from '@/ui/button';
-import Input from '@/ui/input';
+import { Button } from '@/ui/button';
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
+import { DoneIcon, CloudUnsyncedIcon } from '@blocksuite/icons';
 // import { Upload } from '@/components/file-upload';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { WorkspaceUnit } from '@affine/datacenter';
@@ -44,7 +46,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
 
   return workspace ? (
     <div>
-      <StyledSettingH2 marginTop={56}>{t('Workspace Icon')}</StyledSettingH2>
+      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
       <StyledSettingAvatarContent>
         <div
           style={{
@@ -69,29 +71,30 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
       </StyledSettingAvatarContent>
       <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
       <StyledSettingInputContainer>
-        <Input
-          width={327}
+        <StyledInput
+          width={284}
+          height={32}
           value={workspaceName}
           placeholder={t('Workspace Name')}
           maxLength={14}
           minLength={1}
           disabled={!isOwner}
           onChange={handleChangeWorkSpaceName}
-        ></Input>
+        ></StyledInput>
         {isOwner ? (
-          <TextButton
+          <StyledDoneButtonContainer
             onClick={() => {
               handleUpdateWorkspaceName();
             }}
-            style={{ marginLeft: '0px' }}
           >
-            ✔️
-          </TextButton>
+            <DoneIcon />
+          </StyledDoneButtonContainer>
         ) : null}
       </StyledSettingInputContainer>
       <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
       <StyledSettingInputContainer>
-        <code>{workspace.provider} </code>
+        <CloudUnsyncedIcon style={{ marginRight: '15px' }} />
+        Local workspace
       </StyledSettingInputContainer>
       <StyledDeleteButtonContainer>
         {isOwner ? (
@@ -99,6 +102,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             <Button
               type="danger"
               shape="circle"
+              style={{ borderRadius: '40px' }}
               onClick={() => {
                 setShowDelete(true);
               }}
diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts
index f3177fe4d..430c6780e 100644
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/packages/app/src/components/workspace-setting/style.ts
@@ -1,11 +1,11 @@
-import { styled } from '@/styles';
+import { displayFlex, styled } from '@/styles';
 
 export const StyledSettingContainer = styled('div')(() => {
   return {
     display: 'flex',
-    padding: '50px',
     flexDirection: 'column',
-    height: '100vh',
+    marginTop: '24px',
+    marginLeft: '48px',
     overflow: 'auto',
   };
 });
@@ -20,9 +20,7 @@ export const StyledSettingSidebar = styled('div')(() => {
 });
 
 export const StyledSettingContent = styled('div')(() => {
-  return {
-    paddingLeft: '48px',
-  };
+  return {};
 });
 
 export const StyledSetting = styled('div')(({ theme }) => {
@@ -60,14 +58,26 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
     {
       return {
         display: 'flex',
-        marginBottom: '12px',
-        padding: '0 24px',
-        height: '32px',
+        position: 'relative',
+        margin: '0 48px 8px 0',
+        height: '34px',
         color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
-        fontWeight: '400',
-        fontSize: '16px',
-        lineHeight: '32px',
+        fontWeight: '500',
+        fontSize: theme.font.base,
+        lineHeight: theme.font.lineHeightBase,
         cursor: 'pointer',
+        transition: 'all 0.15s ease',
+        '::after': {
+          content: '""',
+          width: '100%',
+          height: '2px',
+          background: isActive ? theme.colors.primaryColor : 'transparent',
+          transition: 'all 0.15s ease',
+          position: 'absolute',
+          left: '0',
+          bottom: '0',
+        },
+        ':hover': { color: theme.colors.primaryColor },
       };
     }
   }
@@ -84,11 +94,11 @@ export const StyledSettingTagIconContainer = styled('div')(() => {
 });
 
 export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
-  ({ marginTop }) => {
+  ({ marginTop, theme }) => {
     return {
       fontWeight: '500',
-      fontSize: '18px',
-      lineHeight: '26px',
+      fontSize: theme.font.base,
+      lineHeight: theme.font.lineHeightBase,
       marginTop: marginTop ? `${marginTop}px` : '0px',
     };
   }
@@ -96,12 +106,28 @@ export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
 
 export const StyledPublishExplanation = styled('div')(() => {
   return {
+    ...displayFlex('row', 'center', 'center'),
     paddingRight: '48px',
     fontWeight: '500',
     fontSize: '18px',
     lineHeight: '26px',
     flex: 1,
     marginTop: '60px',
+    marginBottom: '22px',
+  };
+});
+export const StyledWorkspaceName = styled('div')(() => {
+  return {
+    fontWeight: '400',
+    fontSize: '18px',
+    lineHeight: '26px',
+  };
+});
+export const StyledWorkspaceType = styled('div')(() => {
+  return {
+    fontWeight: '500',
+    fontSize: '18px',
+    lineHeight: '26px',
   };
 });
 
@@ -109,16 +135,26 @@ export const StyledPublishCopyContainer = styled('div')(() => {
   return {
     marginTop: '12px',
     display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: 'column',
+    alignItems: 'start',
+    justifyContent: 'center',
     marginBottom: '20px',
     paddingTop: '20px',
   };
 });
+export const StyledStopPublishContainer = styled('div')(() => {
+  return {
+    position: 'absolute',
+    bottom: '0',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginBottom: '20px',
+  };
+});
 
 export const StyledCopyButtonContainer = styled('div')(() => {
   return {
-    marginLeft: '12px',
+    marginTop: '64px',
   };
 });
 

From 4401f083f21e1d11da85b0acfd912d856a21fe50 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 15:31:34 +0800
Subject: [PATCH 08/27] chore: update input ui component

---
 packages/app/src/ui/input/Input.tsx | 3 +++
 packages/app/src/ui/input/style.ts  | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/ui/input/Input.tsx b/packages/app/src/ui/input/Input.tsx
index c4fe7600c..1ca8b8684 100644
--- a/packages/app/src/ui/input/Input.tsx
+++ b/packages/app/src/ui/input/Input.tsx
@@ -12,6 +12,7 @@ type inputProps = {
   placeholder?: string;
   disabled?: boolean;
   width?: number;
+  height?: number;
   maxLength?: number;
   minLength?: number;
   onChange?: (value: string) => void;
@@ -26,6 +27,7 @@ export const Input = (props: inputProps) => {
     placeholder,
     maxLength,
     minLength,
+    height,
     width = 260,
     onChange,
     onBlur,
@@ -62,6 +64,7 @@ export const Input = (props: inputProps) => {
       onChange={handleChange}
       onBlur={handleBlur}
       onKeyDown={handleKeyDown}
+      height={height}
     ></StyledInput>
   );
 };
diff --git a/packages/app/src/ui/input/style.ts b/packages/app/src/ui/input/style.ts
index fd0e4d21f..b8cb51c3d 100644
--- a/packages/app/src/ui/input/style.ts
+++ b/packages/app/src/ui/input/style.ts
@@ -4,7 +4,8 @@ export const StyledInput = styled('input')<{
   disabled?: boolean;
   value?: string;
   width: number;
-}>(({ theme, width, disabled }) => {
+  height?: number;
+}>(({ theme, width, disabled, height }) => {
   const fontWeight = 400;
   const fontSize = '16px';
   return {
@@ -13,6 +14,7 @@ export const StyledInput = styled('input')<{
     padding: '8px 12px',
     fontWeight,
     fontSize,
+    height: height ? `${height}px` : 'auto',
     color: disabled ? theme.colors.disableColor : theme.colors.inputColor,
     border: `1px solid`,
     borderColor: theme.colors.borderColor, // TODO: check out disableColor,

From 69b396b9d4e88e35316bdad00f9f09a662245df0 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 15:54:56 +0800
Subject: [PATCH 09/27] chore: update confirm ui component

---
 packages/app/src/ui/confirm/Confirm.tsx | 87 +++++++++++++++++--------
 packages/app/src/ui/confirm/styles.ts   | 18 ++++-
 2 files changed, 76 insertions(+), 29 deletions(-)

diff --git a/packages/app/src/ui/confirm/Confirm.tsx b/packages/app/src/ui/confirm/Confirm.tsx
index 1c22e1602..27bf8579e 100644
--- a/packages/app/src/ui/confirm/Confirm.tsx
+++ b/packages/app/src/ui/confirm/Confirm.tsx
@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { Modal, ModalCloseButton, ModalProps } from '../modal';
 import {
-  StyledButtonWrapper,
+  StyledRowButtonWrapper,
+  StyledColumnButtonWrapper,
   StyledConfirmContent,
   StyledConfirmTitle,
   StyledModalWrapper,
@@ -15,6 +16,7 @@ export type ConfirmProps = {
   cancelText?: string;
   // TODO: Confirm button's color should depend on confirm type
   confirmType?: 'primary' | 'warning' | 'danger';
+  buttonDirection?: 'row' | 'column';
   onConfirm?: () => void;
   onCancel?: () => void;
 } & Omit<ModalProps, 'open' | 'children'>;
@@ -26,6 +28,7 @@ export const Confirm = ({
   confirmType,
   onConfirm,
   onCancel,
+  buttonDirection = 'row',
   cancelText = 'Cancel',
 }: ConfirmProps) => {
   const [open, setOpen] = useState(true);
@@ -41,31 +44,63 @@ export const Confirm = ({
         />
         <StyledConfirmTitle>{title}</StyledConfirmTitle>
         <StyledConfirmContent>{content}</StyledConfirmContent>
-
-        <StyledButtonWrapper>
-          <Button
-            shape="round"
-            bold={true}
-            onClick={() => {
-              setOpen(false);
-              onCancel?.();
-            }}
-            style={{ marginRight: '24px' }}
-          >
-            {cancelText === 'Cancel' ? t('Cancel') : cancelText}
-          </Button>
-          <Button
-            type={confirmType}
-            shape="round"
-            bold={true}
-            onClick={() => {
-              setOpen(false);
-              onConfirm?.();
-            }}
-          >
-            {confirmText}
-          </Button>
-        </StyledButtonWrapper>
+        {buttonDirection === 'row' ? (
+          <StyledRowButtonWrapper>
+            <Button
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onCancel?.();
+              }}
+              style={{ marginRight: '24px' }}
+            >
+              {cancelText === 'Cancel' ? t('Cancel') : cancelText}
+            </Button>
+            <Button
+              type={confirmType}
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onConfirm?.();
+              }}
+            >
+              {confirmText}
+            </Button>
+          </StyledRowButtonWrapper>
+        ) : (
+          <StyledColumnButtonWrapper>
+            <Button
+              type={confirmType}
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onConfirm?.();
+              }}
+              style={{ width: '284px', height: '38px', textAlign: 'center' }}
+            >
+              {confirmText}
+            </Button>
+            <Button
+              shape="round"
+              bold={true}
+              onClick={() => {
+                setOpen(false);
+                onCancel?.();
+              }}
+              style={{
+                marginTop: '16px',
+                width: '284px',
+                height: '38px',
+                textAlign: 'center',
+              }}
+            >
+              {cancelText === 'Cancel' ? t('Cancel') : cancelText}
+            </Button>
+          </StyledColumnButtonWrapper>
+        )}
       </StyledModalWrapper>
     </Modal>
   );
diff --git a/packages/app/src/ui/confirm/styles.ts b/packages/app/src/ui/confirm/styles.ts
index ef2c86155..3646cdcc3 100644
--- a/packages/app/src/ui/confirm/styles.ts
+++ b/packages/app/src/ui/confirm/styles.ts
@@ -3,8 +3,10 @@ import { ModalWrapper } from '@/ui/modal';
 
 export const StyledModalWrapper = styled(ModalWrapper)(() => {
   return {
-    width: '460px',
-    padding: '46px 60px 32px',
+    minWidth: '460px',
+    maxWidth: '560px',
+    maxHeight: '292px',
+    padding: '44px 84px 32px 84px',
   };
 });
 
@@ -14,6 +16,7 @@ export const StyledConfirmTitle = styled.div(({ theme }) => {
     fontWeight: 600,
     textAlign: 'center',
     color: theme.colors.popoverColor,
+    lineHeight: '28px',
   };
 });
 
@@ -23,12 +26,21 @@ export const StyledConfirmContent = styled.div(({ theme }) => {
     textAlign: 'center',
     marginTop: '12px',
     color: theme.colors.textColor,
+    lineHeight: '26px',
   };
 });
 
-export const StyledButtonWrapper = styled.div(() => {
+export const StyledColumnButtonWrapper = styled.div(() => {
   return {
     ...displayFlex('center', 'center'),
+    flexDirection: 'column',
+    marginTop: '32px',
+  };
+});
+export const StyledRowButtonWrapper = styled.div(() => {
+  return {
+    ...displayFlex('center', 'center'),
+    flexDirection: 'row',
     marginTop: '32px',
   };
 });

From 74d7b7ab9da466f23efb99547cb2bb952279d3e1 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 15:58:24 +0800
Subject: [PATCH 10/27] chore: update button ui component

---
 packages/app/src/ui/button/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts
index 54cda81dc..8cbf57f68 100644
--- a/packages/app/src/ui/button/styles.ts
+++ b/packages/app/src/ui/button/styles.ts
@@ -182,7 +182,7 @@ export const StyledButton = styled('button', {
       paddingLeft: padding,
       paddingRight: padding,
       border: '1px solid',
-      ...displayInlineFlex('flex-start', 'center'),
+      ...displayInlineFlex('center', 'center'),
       position: 'relative',
       // TODO: disabled color is not decided
       ...(disabled

From 48ac7aad60dca4dfafef98b15a78d709e3888289 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 16:00:00 +0800
Subject: [PATCH 11/27] chore: update General delete button style

---
 .../general/delete/Delete.tsx                 |  4 ++-
 .../workspace-setting/general/delete/style.ts | 18 ++++++-----
 .../workspace-setting/general/style.ts        | 31 +++++++++++++++++--
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
index c6db311e2..3fcab8c15 100644
--- a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
+++ b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx
@@ -46,7 +46,7 @@ export const WorkspaceDelete = ({
     <Modal open={open} onClose={onClose}>
       <StyledModalWrapper>
         <ModalCloseButton onClick={onClose} />
-        <StyledModalHeader>{t('Delete Workspace')}</StyledModalHeader>
+        <StyledModalHeader>{t('Delete Workspace')}?</StyledModalHeader>
         {workspace.provider === 'local' ? (
           <StyledTextContent>
             <Trans i18nKey="Delete Workspace Description">
@@ -75,6 +75,8 @@ export const WorkspaceDelete = ({
             onChange={handlerInputChange}
             placeholder={t('Delete Workspace placeholder')}
             value={deleteStr}
+            width={284}
+            height={42}
           ></Input>
         </StyledInputContent>
         <StyledButtonContent>
diff --git a/packages/app/src/components/workspace-setting/general/delete/style.ts b/packages/app/src/components/workspace-setting/general/delete/style.ts
index 939ba638b..d029d54fe 100644
--- a/packages/app/src/components/workspace-setting/general/delete/style.ts
+++ b/packages/app/src/components/workspace-setting/general/delete/style.ts
@@ -4,20 +4,20 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
   return {
     position: 'relative',
     padding: '0px',
-    width: '460px',
+    width: '560px',
     background: theme.colors.popoverBackground,
     borderRadius: '12px',
+    height: '312px',
   };
 });
 
 export const StyledModalHeader = styled('div')(({ theme }) => {
   return {
     margin: '44px 0px 12px 0px',
-    width: '460px',
+    width: '560px',
     fontWeight: '600',
     fontSize: '20px;',
-    textAlign: 'left',
-    paddingLeft: '20px',
+    textAlign: 'center',
     color: theme.colors.popoverColor,
   };
 });
@@ -37,21 +37,25 @@ export const StyledTextContent = styled('div')(() => {
   };
 });
 
-export const StyledInputContent = styled('div')(() => {
+export const StyledInputContent = styled('div')(({ theme }) => {
   return {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
-    margin: '20px 0 24px 0',
+    margin: '32px 0',
+    fontSize: theme.font.base,
   };
 });
 
 export const StyledButtonContent = styled('div')(() => {
   return {
+    position: 'absolute',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    bottom: '32px',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
-    margin: '0px 0 32px 0',
   };
 });
 
diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts
index 739ec24ae..c46f9706c 100644
--- a/packages/app/src/components/workspace-setting/general/style.ts
+++ b/packages/app/src/components/workspace-setting/general/style.ts
@@ -1,15 +1,42 @@
-import { styled } from '@/styles';
+import { displayFlex, styled } from '@/styles';
 import MuiAvatar from '@mui/material/Avatar';
+import IconButton from '@/ui/button/IconButton';
+import Input from '@/ui/input';
 
 export const StyledSettingInputContainer = styled('div')(() => {
   return {
     marginTop: '12px',
+    width: '100%',
+    ...displayFlex('flex-start', 'center'),
   };
 });
 
 export const StyledDeleteButtonContainer = styled('div')(() => {
   return {
-    marginTop: '30px',
+    position: 'absolute',
+    bottom: '0',
+    left: '50%',
+    marginBottom: '20px',
+    transform: 'translateX(-50%)',
+  };
+});
+export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => {
+  return {
+    border: `1px solid ${theme.colors.borderColor}`,
+    borderRadius: '10px',
+    height: '32px',
+    overflow: 'hidden',
+    marginLeft: '20px',
+    ':hover': {
+      borderColor: theme.colors.primaryColor,
+    },
+  };
+});
+export const StyledInput = styled(Input)(({ theme }) => {
+  return {
+    border: `1px solid ${theme.colors.borderColor}`,
+    borderRadius: '10px',
+    fontSize: theme.font.sm,
   };
 });
 

From 5006c2360aa8e6fee09195d51ee3c23f61c66df5 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 16:00:23 +0800
Subject: [PATCH 12/27] chore: update publishPage style

---
 .../workspace-setting/PublishPage.tsx         | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx
index d8692acbb..4ff35d776 100644
--- a/packages/app/src/components/workspace-setting/PublishPage.tsx
+++ b/packages/app/src/components/workspace-setting/PublishPage.tsx
@@ -4,6 +4,7 @@ import {
   StyledPublishCopyContainer,
   StyledPublishExplanation,
   StyledSettingH2,
+  StyledStopPublishContainer,
 } from './style';
 import { useState } from 'react';
 import { Button } from '@/ui/button';
@@ -42,7 +43,9 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                 <StyledPublishExplanation>
                   {t('Publishing')}
                 </StyledPublishExplanation>
-                <StyledSettingH2>{t('Share with link')}</StyledSettingH2>
+                <StyledSettingH2 marginTop={48}>
+                  {t('Share with link')}
+                </StyledSettingH2>
                 <StyledPublishCopyContainer>
                   <Input width={500} value={shareUrl} disabled={true}></Input>
                   <StyledCopyButtonContainer>
@@ -54,24 +57,27 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
               </>
             ) : (
               <StyledPublishExplanation>
-                {'Publishing Description'}
+                {t('Publishing Description')}
               </StyledPublishExplanation>
             )}
           </StyledPublishContent>
-          <StyledPublishCopyContainer>
-            {workspace.published ? (
+
+          {workspace.published ? (
+            <StyledStopPublishContainer>
               <Button
                 onClick={async () => {
                   setLoaded(false);
                   await togglePublic(false);
                   setLoaded(true);
                 }}
-                type="primary"
+                type="danger"
                 shape="circle"
               >
                 {t('Stop publishing')}
               </Button>
-            ) : (
+            </StyledStopPublishContainer>
+          ) : (
+            <StyledPublishCopyContainer>
               <Button
                 onClick={async () => {
                   setLoaded(false);
@@ -83,8 +89,8 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
               >
                 {t('Publish to web')}
               </Button>
-            )}
-          </StyledPublishCopyContainer>
+            </StyledPublishCopyContainer>
+          )}
         </div>
       ) : (
         <StyledPublishContent>

From 09fb0f8dfcdcaaa08f16c42f1d5b2cab8d4978b1 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 16:00:41 +0800
Subject: [PATCH 13/27] chore: update syncPage style

---
 .../components/workspace-setting/SyncPage.tsx | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx
index 72f1d08fd..f65a24ab7 100644
--- a/packages/app/src/components/workspace-setting/SyncPage.tsx
+++ b/packages/app/src/components/workspace-setting/SyncPage.tsx
@@ -2,6 +2,8 @@ import {
   StyledPublishContent,
   StyledPublishCopyContainer,
   StyledPublishExplanation,
+  StyledWorkspaceName,
+  StyledWorkspaceType,
 } from './style';
 import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
@@ -9,6 +11,7 @@ import { Menu, MenuItem } from '@/ui/menu';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { Trans, useTranslation } from '@affine/i18n';
+import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const { enableWorkspace } = useWorkspaceHelper();
   const { t } = useTranslation();
@@ -18,11 +21,20 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
         {workspace.provider === 'local' ? (
           <>
             <StyledPublishExplanation>
-              {t('Sync Description', {
-                workspaceName: workspace.name ?? 'Affine',
-              })}
+              <WorkspaceUnitAvatar
+                size={32}
+                name={workspace.name}
+                workspaceUnit={workspace}
+              />
+              <StyledWorkspaceName>
+                &nbsp;{workspace.name}&nbsp;
+              </StyledWorkspaceName>
+              <StyledWorkspaceType>is a Local Workspace.</StyledWorkspaceType>
             </StyledPublishExplanation>
-
+            <StyledWorkspaceType>
+              All data is stored on the current device. You can enable AFFiNE
+              Cloud for this workspace to keep data in sync with the cloud.
+            </StyledWorkspaceType>
             <StyledPublishCopyContainer>
               <Button
                 onClick={async () => {
@@ -30,6 +42,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                 }}
                 type="primary"
                 shape="circle"
+                style={{ fontWeight: '500' }}
               >
                 {t('Enable AFFiNE Cloud')}
               </Button>

From 9702e9e38022528003395c4c309aa368aa025f9a Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 16:01:11 +0800
Subject: [PATCH 14/27] chore: update settings page style

---
 .../pages/workspace/[workspaceId]/setting.tsx | 80 ++++++++++---------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
index ce45fb0f3..11de4aa59 100644
--- a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx
@@ -2,7 +2,6 @@ import {
   StyledSettingContainer,
   StyledSettingContent,
   StyledSettingSidebar,
-  StyledSettingSidebarHeader,
   StyledSettingTabContainer,
   WorkspaceSettingTagItem,
 } from '@/components/workspace-setting/style';
@@ -14,35 +13,38 @@ import {
   ExportPage,
   SyncPage,
 } from '@/components/workspace-setting';
+import { SettingsIcon } from '@blocksuite/icons';
 import { useAppState } from '@/providers/app-state-provider';
 import WorkspaceLayout from '@/components/workspace-layout';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
+import { PageListHeader } from '@/components/header';
 
-type TabNames = 'general' | 'members' | 'publish' | 'sync' | 'export';
+type TabNames = 'General' | 'Sync' | 'Collaboration' | 'Publish' | 'Export';
 
 const tabMap: {
   name: TabNames;
   panelRender: (workspace: WorkspaceUnit) => ReactNode;
 }[] = [
   {
-    name: 'general',
+    name: 'General',
     panelRender: workspace => <GeneralPage workspace={workspace} />,
   },
   {
-    name: 'members',
-    panelRender: workspace => <MembersPage workspace={workspace} />,
-  },
-  {
-    name: 'publish',
-    panelRender: workspace => <PublishPage workspace={workspace} />,
-  },
-  {
-    name: 'sync',
+    name: 'Sync',
     panelRender: workspace => <SyncPage workspace={workspace} />,
   },
   {
-    name: 'export',
+    name: 'Collaboration',
+    panelRender: workspace => <MembersPage workspace={workspace} />,
+  },
+  {
+    name: 'Publish',
+    panelRender: workspace => <PublishPage workspace={workspace} />,
+  },
+
+  {
+    name: 'Export',
     panelRender: workspace => <ExportPage workspace={workspace} />,
   },
 ];
@@ -66,38 +68,38 @@ const WorkspaceSetting = () => {
   if (!isOwner) {
     tableArr = [
       {
-        name: 'general',
+        name: 'General',
         panelRender: workspace => <GeneralPage workspace={workspace} />,
       },
     ];
   }
   return (
-    <StyledSettingContainer>
-      <StyledSettingSidebar>
-        <StyledSettingSidebarHeader>
-          {t('Workspace Settings')}
-        </StyledSettingSidebarHeader>
-        <StyledSettingTabContainer>
-          {tableArr.map(({ name }) => {
-            return (
-              <WorkspaceSettingTagItem
-                key={name}
-                isActive={activeTab === name}
-                onClick={() => {
-                  handleTabChange(name);
-                }}
-              >
-                {name}
-              </WorkspaceSettingTagItem>
-            );
-          })}
-        </StyledSettingTabContainer>
-      </StyledSettingSidebar>
+    <>
+      <StyledSettingContainer>
+        <PageListHeader icon={<SettingsIcon />}>{t('Settings')}</PageListHeader>
+        <StyledSettingSidebar>
+          <StyledSettingTabContainer>
+            {tableArr.map(({ name }) => {
+              return (
+                <WorkspaceSettingTagItem
+                  key={name}
+                  isActive={activeTab === name}
+                  onClick={() => {
+                    handleTabChange(name);
+                  }}
+                >
+                  {name}
+                </WorkspaceSettingTagItem>
+              );
+            })}
+          </StyledSettingTabContainer>
+        </StyledSettingSidebar>
 
-      <StyledSettingContent>
-        {currentWorkspace && activeTabPanelRender?.(currentWorkspace)}
-      </StyledSettingContent>
-    </StyledSettingContainer>
+        <StyledSettingContent>
+          {currentWorkspace && activeTabPanelRender?.(currentWorkspace)}
+        </StyledSettingContent>
+      </StyledSettingContainer>
+    </>
   );
 };
 WorkspaceSetting.getLayout = function getLayout(page: ReactElement) {

From e352dc7f6187bd4e6382dd3e1281e37755b928c2 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 16:01:39 +0800
Subject: [PATCH 15/27] chore: update membersPage style

---
 .../member/InviteMemberModal.tsx              |   8 +-
 .../workspace-setting/member/MembersPage.tsx  | 112 +++++++++---------
 .../workspace-setting/member/style.ts         |  10 +-
 .../app/src/hooks/use-workspace-helper.ts     |   2 +
 4 files changed, 71 insertions(+), 61 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
index c965e6c0b..7bd542efb 100644
--- a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
+++ b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
@@ -122,6 +122,7 @@ export const InviteMemberModal = ({
             <Button
               shape="circle"
               type="primary"
+              style={{ width: '364px', height: '38px', borderRadius: '40px' }}
               onClick={async () => {
                 await inviteMember(email);
                 onInviteSuccess();
@@ -143,10 +144,8 @@ const Header = styled('div')({
 
 const Content = styled('div')({
   display: 'flex',
-  padding: '0 48px',
   flexDirection: 'column',
   alignItems: 'center',
-  gap: '16px',
 });
 
 const ContentTitle = styled('h1')({
@@ -158,9 +157,8 @@ const ContentTitle = styled('h1')({
 });
 
 const Footer = styled('div')({
-  height: '70px',
-  paddingLeft: '24px',
-  marginTop: '32px',
+  height: '102px',
+  margin: '32px 0',
   textAlign: 'center',
 });
 
diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
index dc6a7132f..25748cee3 100644
--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
@@ -69,63 +69,65 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                   member.user
                 );
                 return (
-                  <StyledMemberListItem key={index}>
-                    <StyledMemberNameContainer>
-                      <StyledMemberAvatar
-                        alt="member avatar"
-                        src={user.avatar_url}
-                      >
-                        <EmailIcon />
-                      </StyledMemberAvatar>
+                  <>
+                    <StyledMemberListItem key={index}>
+                      <StyledMemberNameContainer>
+                        <StyledMemberAvatar
+                          alt="member avatar"
+                          src={user.avatar_url}
+                        >
+                          <EmailIcon />
+                        </StyledMemberAvatar>
 
-                      <StyledMemberInfo>
-                        <StyledMemberName>{user.name}</StyledMemberName>
-                        <StyledMemberEmail>
-                          {member.user.email}
-                        </StyledMemberEmail>
-                      </StyledMemberInfo>
-                    </StyledMemberNameContainer>
-                    <StyledMemberRoleContainer>
-                      {member.accepted
-                        ? member.type !== 99
-                          ? 'Member'
-                          : 'Workspace Owner'
-                        : 'Pending'}
-                    </StyledMemberRoleContainer>
-                    <StyledMoreVerticalButton>
-                      <Menu
-                        content={
-                          <>
-                            <MenuItem
-                              onClick={async () => {
-                                const confirmRemove = await confirm({
-                                  title: 'Delete Member?',
-                                  content: `will delete member`,
-                                  confirmText: 'Delete',
-                                  confirmType: 'danger',
-                                });
+                        <StyledMemberInfo>
+                          <StyledMemberName>{user.name}</StyledMemberName>
+                          <StyledMemberEmail>
+                            {member.user.email}
+                          </StyledMemberEmail>
+                        </StyledMemberInfo>
+                      </StyledMemberNameContainer>
+                      <StyledMemberRoleContainer>
+                        {member.accepted
+                          ? member.type !== 99
+                            ? 'Member'
+                            : 'Workspace Owner'
+                          : 'Pending'}
+                      </StyledMemberRoleContainer>
+                      <StyledMoreVerticalButton>
+                        <Menu
+                          content={
+                            <>
+                              <MenuItem
+                                onClick={async () => {
+                                  const confirmRemove = await confirm({
+                                    title: 'Delete Member?',
+                                    content: `will delete member`,
+                                    confirmText: 'Delete',
+                                    confirmType: 'danger',
+                                  });
 
-                                if (!confirmRemove) {
-                                  return;
-                                }
-                                await removeMember(member.id);
-                                toast(`${user.name} has been removed`);
-                              }}
-                              icon={<TrashIcon />}
-                            >
-                              Delete
-                            </MenuItem>
-                          </>
-                        }
-                        placement="bottom-end"
-                        disablePortal={true}
-                      >
-                        <IconButton>
-                          <MoreVerticalIcon />
-                        </IconButton>
-                      </Menu>
-                    </StyledMoreVerticalButton>
-                  </StyledMemberListItem>
+                                  if (!confirmRemove) {
+                                    return;
+                                  }
+                                  await removeMember(member.id);
+                                  toast(`${user.name} has been removed`);
+                                }}
+                                icon={<TrashIcon />}
+                              >
+                                Delete
+                              </MenuItem>
+                            </>
+                          }
+                          placement="bottom-end"
+                          disablePortal={true}
+                        >
+                          <IconButton>
+                            <MoreVerticalIcon />
+                          </IconButton>
+                        </Menu>
+                      </StyledMoreVerticalButton>
+                    </StyledMemberListItem>
+                  </>
                 );
               })}
             </>
diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts
index eeea67d6d..df99d2d94 100644
--- a/packages/app/src/components/workspace-setting/member/style.ts
+++ b/packages/app/src/components/workspace-setting/member/style.ts
@@ -19,6 +19,7 @@ export const StyledMemberNameContainer = styled('div')(() => {
     display: 'flex',
     alignItems: 'center',
     width: '402px',
+    flex: 2,
   };
 });
 
@@ -27,6 +28,7 @@ export const StyledMemberRoleContainer = styled('div')(() => {
     display: 'flex',
     alignItems: 'center',
     width: '222px',
+    flex: 1,
   };
 });
 
@@ -34,6 +36,8 @@ export const StyledMemberListContainer = styled('ul')(() => {
   return {
     marginTop: '15px',
     overflowY: 'scroll',
+    width: '100%',
+    maxHeight: 'calc(100vh - 300px)',
   };
 });
 
@@ -42,6 +46,7 @@ export const StyledMemberListItem = styled('li')(() => {
     display: 'flex',
     alignItems: 'center',
     height: '72px',
+    width: '100%',
   };
 });
 
@@ -71,7 +76,9 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
 
 export const StyledMemberButtonContainer = styled('div')(() => {
   return {
-    marginTop: '14px',
+    position: 'absolute',
+    bottom: '0',
+    marginBottom: '20px',
   };
 });
 
@@ -83,6 +90,7 @@ export const StyledMoreVerticalButton = styled('button')(() => {
     width: '24px',
     height: '24px',
     cursor: 'pointer',
+    paddingRight: '48px',
   };
 });
 
diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts
index 64387a984..2a1977f96 100644
--- a/packages/app/src/hooks/use-workspace-helper.ts
+++ b/packages/app/src/hooks/use-workspace-helper.ts
@@ -42,6 +42,8 @@ export const useWorkspaceHelper = () => {
       content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
       confirmText: user ? 'Enable' : 'Sign in and Enable',
       cancelText: 'Skip',
+      confirmType: 'primary',
+      buttonDirection: 'column',
     }).then(async confirm => {
       if (confirm && currentWorkspace) {
         if (!user) {

From 72b5dcb9304313c4d379ad391cf8e3f37990a4d7 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 16:04:19 +0800
Subject: [PATCH 16/27] chore: remove empty tag

---
 .../workspace-setting/member/MembersPage.tsx  | 112 +++++++++---------
 1 file changed, 55 insertions(+), 57 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
index 25748cee3..dc6a7132f 100644
--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
@@ -69,65 +69,63 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                   member.user
                 );
                 return (
-                  <>
-                    <StyledMemberListItem key={index}>
-                      <StyledMemberNameContainer>
-                        <StyledMemberAvatar
-                          alt="member avatar"
-                          src={user.avatar_url}
-                        >
-                          <EmailIcon />
-                        </StyledMemberAvatar>
+                  <StyledMemberListItem key={index}>
+                    <StyledMemberNameContainer>
+                      <StyledMemberAvatar
+                        alt="member avatar"
+                        src={user.avatar_url}
+                      >
+                        <EmailIcon />
+                      </StyledMemberAvatar>
 
-                        <StyledMemberInfo>
-                          <StyledMemberName>{user.name}</StyledMemberName>
-                          <StyledMemberEmail>
-                            {member.user.email}
-                          </StyledMemberEmail>
-                        </StyledMemberInfo>
-                      </StyledMemberNameContainer>
-                      <StyledMemberRoleContainer>
-                        {member.accepted
-                          ? member.type !== 99
-                            ? 'Member'
-                            : 'Workspace Owner'
-                          : 'Pending'}
-                      </StyledMemberRoleContainer>
-                      <StyledMoreVerticalButton>
-                        <Menu
-                          content={
-                            <>
-                              <MenuItem
-                                onClick={async () => {
-                                  const confirmRemove = await confirm({
-                                    title: 'Delete Member?',
-                                    content: `will delete member`,
-                                    confirmText: 'Delete',
-                                    confirmType: 'danger',
-                                  });
+                      <StyledMemberInfo>
+                        <StyledMemberName>{user.name}</StyledMemberName>
+                        <StyledMemberEmail>
+                          {member.user.email}
+                        </StyledMemberEmail>
+                      </StyledMemberInfo>
+                    </StyledMemberNameContainer>
+                    <StyledMemberRoleContainer>
+                      {member.accepted
+                        ? member.type !== 99
+                          ? 'Member'
+                          : 'Workspace Owner'
+                        : 'Pending'}
+                    </StyledMemberRoleContainer>
+                    <StyledMoreVerticalButton>
+                      <Menu
+                        content={
+                          <>
+                            <MenuItem
+                              onClick={async () => {
+                                const confirmRemove = await confirm({
+                                  title: 'Delete Member?',
+                                  content: `will delete member`,
+                                  confirmText: 'Delete',
+                                  confirmType: 'danger',
+                                });
 
-                                  if (!confirmRemove) {
-                                    return;
-                                  }
-                                  await removeMember(member.id);
-                                  toast(`${user.name} has been removed`);
-                                }}
-                                icon={<TrashIcon />}
-                              >
-                                Delete
-                              </MenuItem>
-                            </>
-                          }
-                          placement="bottom-end"
-                          disablePortal={true}
-                        >
-                          <IconButton>
-                            <MoreVerticalIcon />
-                          </IconButton>
-                        </Menu>
-                      </StyledMoreVerticalButton>
-                    </StyledMemberListItem>
-                  </>
+                                if (!confirmRemove) {
+                                  return;
+                                }
+                                await removeMember(member.id);
+                                toast(`${user.name} has been removed`);
+                              }}
+                              icon={<TrashIcon />}
+                            >
+                              Delete
+                            </MenuItem>
+                          </>
+                        }
+                        placement="bottom-end"
+                        disablePortal={true}
+                      >
+                        <IconButton>
+                          <MoreVerticalIcon />
+                        </IconButton>
+                      </Menu>
+                    </StyledMoreVerticalButton>
+                  </StyledMemberListItem>
                 );
               })}
             </>

From b39acf42e65669a04375f4bd42b8ac900ab3bcdb Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Wed, 18 Jan 2023 16:11:51 +0800
Subject: [PATCH 17/27] feat: create workspace

---
 .../src/components/create-workspace/index.tsx |  55 +++++++---
 .../app/src/components/login-modal/Icons.tsx  |   2 -
 .../login-modal/LoginOptionButton.tsx         |  58 +++-------
 .../app/src/components/login-modal/index.tsx  |  41 ++++---
 .../workspace-modal/icons/index.tsx           |  99 +++++++++++++++++
 .../src/components/workspace-modal/index.tsx  | 101 +++++++++++-------
 .../workspace-modal/languageMenu.tsx          |  16 ++-
 packages/app/src/ui/button/styles.ts          |   1 +
 8 files changed, 243 insertions(+), 130 deletions(-)
 create mode 100644 packages/app/src/components/workspace-modal/icons/index.tsx

diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx
index 7b473afbf..9a26b5686 100644
--- a/packages/app/src/components/create-workspace/index.tsx
+++ b/packages/app/src/components/create-workspace/index.tsx
@@ -16,11 +16,15 @@ interface ModalProps {
 
 export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
   const [workspaceName, setWorkspaceName] = useState('');
+  const [loading, setLoading] = useState(false);
   const { createWorkspace } = useWorkspaceHelper();
   const router = useRouter();
   const handleCreateWorkspace = async () => {
+    setLoading(true);
     const workspace = await createWorkspace(workspaceName);
+
     if (workspace && workspace.id) {
+      setLoading(false);
       router.replace(`/workspace/${workspace.id}`);
       onClose();
     } else {
@@ -37,9 +41,8 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
   return (
     <div>
       <Modal open={open} onClose={onClose}>
-        <ModalWrapper width={620} height={334} style={{ padding: '10px' }}>
+        <ModalWrapper width={560} height={342} style={{ padding: '10px' }}>
           <Header>
-            <ContentTitle>{t('New Workspace')}</ContentTitle>
             <ModalCloseButton
               top={6}
               right={6}
@@ -49,14 +52,28 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
             />
           </Header>
           <Content>
-            <p>{t('Workspace description')}</p>
+            <ContentTitle>{t('New Workspace')}</ContentTitle>
+            <p>
+              Workspace is your virtual space to capture, create and plan as
+              just one person or together as a team.
+            </p>
             <Input
               onKeyDown={handleKeyDown}
+              placeholder={'Set a Workspace name'}
               onChange={value => {
                 setWorkspaceName(value);
               }}
             ></Input>
             <Button
+              disabled={!workspaceName}
+              style={{
+                width: '260px',
+                textAlign: 'center',
+                marginTop: '16px',
+                opacity: !workspaceName ? 0.5 : 1,
+              }}
+              loading={loading}
+              type="primary"
               onClick={() => {
                 handleCreateWorkspace();
               }}
@@ -75,20 +92,28 @@ const Header = styled('div')({
   height: '44px',
 });
 
-const Content = styled('div')({
-  display: 'flex',
-  padding: '0 48px',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: '16px',
+const Content = styled('div')(({ theme }) => {
+  return {
+    padding: '0 84px',
+    textAlign: 'center',
+    fontSize: '18px',
+    lineHeight: '26px',
+    color: theme.colors.inputColor,
+    p: {
+      marginTop: '12px',
+      marginBottom: '16px',
+    },
+  };
 });
 
-const ContentTitle = styled('span')({
-  fontSize: '20px',
-  lineHeight: '28px',
-  fontWeight: 600,
-  textAlign: 'left',
-  paddingBottom: '16px',
+const ContentTitle = styled('div')(() => {
+  return {
+    fontSize: '20px',
+    lineHeight: '28px',
+    fontWeight: 600,
+    textAlign: 'center',
+    paddingBottom: '16px',
+  };
 });
 
 // const Footer = styled('div')({
diff --git a/packages/app/src/components/login-modal/Icons.tsx b/packages/app/src/components/login-modal/Icons.tsx
index a6c694c87..12356f60d 100644
--- a/packages/app/src/components/login-modal/Icons.tsx
+++ b/packages/app/src/components/login-modal/Icons.tsx
@@ -13,8 +13,6 @@ export const GoogleIcon = () => {
 };
 
 const GoogleIconWrapper = styled('div')(({ theme }) => ({
-  width: '48px',
-  height: '48px',
   background: theme.colors.pageBackground,
   display: 'flex',
   alignItems: 'center',
diff --git a/packages/app/src/components/login-modal/LoginOptionButton.tsx b/packages/app/src/components/login-modal/LoginOptionButton.tsx
index dd1d51cc6..f104efc58 100644
--- a/packages/app/src/components/login-modal/LoginOptionButton.tsx
+++ b/packages/app/src/components/login-modal/LoginOptionButton.tsx
@@ -1,35 +1,17 @@
-// import { getDataCenter } from '@affine/datacenter';
 import { styled } from '@/styles';
 import { Button } from '@/ui/button';
-// import { useModal } from '@/providers/GlobalModalProvider';
 import { GoogleIcon, StayLogOutIcon } from './Icons';
 import { useTranslation } from '@affine/i18n';
 export const GoogleLoginButton = () => {
-  // const { triggerLoginModal } = useModal();
   const { t } = useTranslation();
+
   return (
-    <StyledGoogleButton
-      onClick={() => {
-        // getDataCenter()
-        //   .then(dc => dc.apis.signInWithGoogle?.())
-        //   .then(() => {
-        //     triggerLoginModal();
-        //   })
-        //   .catch(error => {
-        //     console.log('sign google error', error);
-        //   });
-      }}
-    >
+    <StyledGoogleButton>
       <ButtonWrapper>
         <IconWrapper>
           <GoogleIcon />
         </IconWrapper>
-        <TextWrapper>
-          <Title>{t('Continue with Google')}</Title>
-          <Description>
-            {t('Set up an AFFiNE account to sync data')}
-          </Description>
-        </TextWrapper>
+        <TextWrapper>{t('Continue with Google')}</TextWrapper>
       </ButtonWrapper>
     </StyledGoogleButton>
   );
@@ -52,21 +34,18 @@ export const StayLogOutButton = () => {
   );
 };
 
-const StyledGoogleButton = styled(Button)(() => {
+const StyledGoogleButton = styled('div')(({ theme }) => {
   return {
-    width: '361px',
-    height: '56px',
-    padding: '4px',
-    background: '#6880FF',
-    color: '#fff',
-
-    '& > span': {
-      marginLeft: 0,
-    },
-
+    width: '284px',
+    height: '40px',
+    marginTop: '30px',
+    fontSize: '16px',
+    cursor: 'pointer',
+    borderRadius: '40px',
+    border: `1px solid ${theme.colors.iconColor}`,
+    overflow: 'hidden',
     ':hover': {
-      background: '#516BF4',
-      color: '#fff',
+      border: `1px solid ${theme.colors.primaryColor}`,
     },
   };
 });
@@ -76,11 +55,6 @@ const StyledStayLogOutButton = styled(Button)(() => {
     width: '361px',
     height: '56px',
     padding: '4px',
-
-    '& > span': {
-      marginLeft: 0,
-    },
-
     ':hover': {
       borderColor: '#6880FF',
     },
@@ -90,20 +64,22 @@ const StyledStayLogOutButton = styled(Button)(() => {
 const ButtonWrapper = styled('div')({
   display: 'flex',
   flexDirection: 'row',
+  width: '100%',
 });
 
 const IconWrapper = styled('div')({
-  width: '48px',
-  height: '48px',
   flex: '0 48px',
   borderRadius: '5px',
   overflow: 'hidden',
   marginRight: '12px',
+  marginTop: '8px',
 });
 
 const TextWrapper = styled('div')({
   flex: 1,
   textAlign: 'left',
+  height: '40px',
+  lineHeight: '40px',
 });
 
 const Title = styled('h1')(() => {
diff --git a/packages/app/src/components/login-modal/index.tsx b/packages/app/src/components/login-modal/index.tsx
index a754c7619..306935056 100644
--- a/packages/app/src/components/login-modal/index.tsx
+++ b/packages/app/src/components/login-modal/index.tsx
@@ -1,19 +1,17 @@
-import { ResetIcon } from '@blocksuite/icons';
 import { styled } from '@/styles';
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { TextButton } from '@/ui/button';
-import { GoogleLoginButton, StayLogOutButton } from './LoginOptionButton';
-import { useTranslation } from '@affine/i18n';
+import { GoogleLoginButton } from './LoginOptionButton';
+import { useAppState } from '@/providers/app-state-provider';
 interface LoginModalProps {
   open: boolean;
   onClose: () => void;
 }
 
 export const LoginModal = ({ open, onClose }: LoginModalProps) => {
-  const { t } = useTranslation();
+  const { login } = useAppState();
   return (
     <Modal open={open} onClose={onClose} data-testid="login-modal">
-      <ModalWrapper width={620} height={334}>
+      <ModalWrapper width={560} height={292}>
         <Header>
           <ModalCloseButton
             top={6}
@@ -24,13 +22,16 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => {
           />
         </Header>
         <Content>
-          <ContentTitle>{t('NotLoggedIn')}</ContentTitle>
-          <GoogleLoginButton />
-          <StayLogOutButton />
+          <ContentTitle>{'Sign in'}</ContentTitle>
+          <SignDes>Set up an AFFINE account to sync data</SignDes>
+          <span
+            onClick={async () => {
+              await login();
+            }}
+          >
+            <GoogleLoginButton />
+          </span>
         </Content>
-        <Footer>
-          <TextButton icon={<StyledResetIcon />}>{t('ClearData')}</TextButton>
-        </Footer>
       </ModalWrapper>
     </Modal>
   );
@@ -56,14 +57,10 @@ const ContentTitle = styled('h1')({
   paddingBottom: '16px',
 });
 
-const Footer = styled('div')({
-  height: '70px',
-  paddingLeft: '24px',
-  marginTop: '32px',
-});
-
-const StyledResetIcon = styled(ResetIcon)({
-  marginRight: '12px',
-  width: '20px',
-  height: '20px',
+const SignDes = styled('div')(({ theme }) => {
+  return {
+    fontWeight: 400,
+    color: theme.colors.textColor,
+    fontSize: '16px',
+  };
 });
diff --git a/packages/app/src/components/workspace-modal/icons/index.tsx b/packages/app/src/components/workspace-modal/icons/index.tsx
new file mode 100644
index 000000000..3697e6f6f
--- /dev/null
+++ b/packages/app/src/components/workspace-modal/icons/index.tsx
@@ -0,0 +1,99 @@
+export const LocalIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="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
+        fill-rule="evenodd"
+        clip-rule="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
+        fill-rule="evenodd"
+        clip-rule="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"
+        stroke-width="1.25"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="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" stroke-opacity="0.15" />
+    </svg>
+  );
+};
diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx
index e944e00d2..104cf5719 100644
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -1,14 +1,15 @@
 import { styled } from '@/styles';
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { IconButton } from '@/ui/button';
+import { Modal, ModalWrapper } from '@/ui/modal';
+import { Button, IconButton } from '@/ui/button';
 import { useState } from 'react';
 import { CreateWorkspaceModal } from '../create-workspace';
 import {
-  CloudUnsyncedIcon,
   UsersIcon,
   AddIcon,
   LogOutIcon,
   CloudInsyncIcon,
+  PublishIcon,
+  CloseIcon,
 } from '@blocksuite/icons';
 import { toast } from '@/ui/toast';
 import {
@@ -20,8 +21,9 @@ import { useRouter } from 'next/router';
 import { useConfirm } from '@/providers/ConfirmProvider';
 import { useTranslation } from '@affine/i18n';
 import { LanguageMenu } from './languageMenu';
-import Loading from '@/components/loading';
-import { Wrapper } from '@/ui/layout';
+
+import { CloudIcon, LineIcon, LocalIcon, OfflineIcon } from './icons';
+import { LoginModal } from '../login-modal';
 interface WorkspaceModalProps {
   open: boolean;
   onClose: () => void;
@@ -30,11 +32,11 @@ interface WorkspaceModalProps {
 export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
   const { confirm } = useConfirm();
-  const { workspaceList, currentWorkspace, login, user, logout, isOwner } =
+  const { workspaceList, currentWorkspace, user, logout, isOwner } =
     useAppState();
   const router = useRouter();
   const { t } = useTranslation();
-  const [loaded, setLoaded] = useState(true);
+  const [loginOpen, setLoginOpen] = useState(false);
   return (
     <div>
       <Modal open={open} onClose={onClose}>
@@ -48,14 +50,30 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
         >
           <Header>
             <ContentTitle>{t('My Workspaces')}</ContentTitle>
-            <LanguageMenu />
-            <ModalCloseButton
-              top={6}
-              right={6}
-              onClick={() => {
-                onClose();
-              }}
-            />
+            <HeaderOption>
+              <LanguageMenu />
+              <div
+                style={{
+                  display: 'inline-block',
+                  border: 'none',
+                  margin: '2px 16px',
+                  height: '24px',
+                  position: 'relative',
+                  top: '4px',
+                }}
+              >
+                <LineIcon></LineIcon>
+              </div>
+
+              <Button
+                style={{ border: 'none', padding: 0 }}
+                onClick={() => {
+                  onClose();
+                }}
+              >
+                <CloseIcon></CloseIcon>
+              </Button>
+            </HeaderOption>
           </Header>
           <Content>
             <WorkspaceList>
@@ -80,30 +98,30 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                       {isOwner ? (
                         item.provider === 'local' ? (
                           <p>
-                            <CloudUnsyncedIcon fontSize={16} />
+                            <LocalIcon />
                             Local Workspace
                           </p>
                         ) : (
                           <p>
-                            <CloudUnsyncedIcon fontSize={16} />
+                            <CloudIcon />
                             Cloud Workspace
                           </p>
                         )
                       ) : (
                         <p>
-                          <UsersIcon fontSize={16} color={'#FF646B'} />
+                          <UsersIcon fontSize={20} color={'#FF646B'} />
                           Joined Workspace
                         </p>
                       )}
                       {item.provider === 'local' && (
                         <p>
-                          <UsersIcon fontSize={16} />
+                          <OfflineIcon />
                           All data can be accessed offline
                         </p>
                       )}
                       {item.published && (
                         <p>
-                          <UsersIcon fontSize={16} /> Published to Web
+                          <PublishIcon fontSize={16} /> Published to Web
                         </p>
                       )}
                     </StyleWorkspaceInfo>
@@ -132,14 +150,17 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
               {t('Workspace description')}
             </p> */}
           </Content>
+          <LoginModal
+            open={loginOpen}
+            onClose={() => {
+              setLoginOpen(false);
+            }}
+          ></LoginModal>
           <Footer>
             {!user ? (
               <StyleSignIn
                 onClick={async () => {
-                  setLoaded(false);
-                  await login();
-                  toast(t('login success'));
-                  setLoaded(true);
+                  setLoginOpen(true);
                 }}
               >
                 <span>
@@ -149,7 +170,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
               </StyleSignIn>
             ) : (
               <div style={{ display: 'flex' }}>
-                <div>
+                <div style={{ paddingTop: '20px' }}>
                   <WorkspaceAvatar
                     size={40}
                     name={user.name}
@@ -160,12 +181,11 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                   <p>{user.name}</p>
                   <p>{user.email}</p>
                 </StyleUserInfo>
-                <div>
+                <div style={{ paddingTop: '25px' }}>
                   <IconButton
                     onClick={() => {
                       confirm({
                         title: 'Sign out?',
-
                         content: `All data has been stored in the cloud. `,
                         confirmText: 'Sign out',
                         cancelText: 'Cancel',
@@ -185,11 +205,6 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                 </div>
               </div>
             )}
-            {!loaded && (
-              <Wrapper justifyContent="center">
-                <Loading size={25} />
-              </Wrapper>
-            )}
           </Footer>
           <CreateWorkspaceModal
             open={createWorkspaceOpen}
@@ -204,8 +219,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
 };
 
 const Header = styled('div')({
-  position: 'relative',
-  height: '44px',
+  display: 'flex',
 });
 
 const Content = styled('div')({
@@ -214,17 +228,21 @@ const Content = styled('div')({
   gap: '16px',
   flex: 1,
 });
-
-const ContentTitle = styled('span')({
+const HeaderOption = styled.div(() => {
+  return {
+    marginLeft: '16px',
+  };
+});
+const ContentTitle = styled('div')({
   fontSize: '20px',
-  lineHeight: '28px',
+  lineHeight: '24px',
   fontWeight: 600,
   textAlign: 'left',
-  paddingBottom: '16px',
+  flex: 1,
 });
 
 const WorkspaceList = styled('div')({
-  height: '500px',
+  maxHeight: '500px',
   overflow: 'auto',
   display: 'grid',
   gridRowGap: '24px',
@@ -266,8 +284,8 @@ const StyleWorkspaceInfo = styled.div(({ theme }) => {
       lineHeight: '16px',
     },
     svg: {
-      verticalAlign: 'sub',
-      marginRight: '10px',
+      verticalAlign: 'text-bottom',
+      marginRight: '8px',
     },
   };
 });
@@ -320,6 +338,7 @@ const StyleSignIn = styled.div(({ theme }) => {
     cursor: 'pointer',
     fontSize: '16px',
     fontWeight: 700,
+    color: theme.colors.iconColor,
     span: {
       display: 'inline-block',
       width: '40px',
diff --git a/packages/app/src/components/workspace-modal/languageMenu.tsx b/packages/app/src/components/workspace-modal/languageMenu.tsx
index 58bedcb47..d8f907663 100644
--- a/packages/app/src/components/workspace-modal/languageMenu.tsx
+++ b/packages/app/src/components/workspace-modal/languageMenu.tsx
@@ -1,10 +1,11 @@
 import { LOCALES } from '@affine/i18n';
-import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
-import type { TooltipProps } from '@mui/material';
+import { TooltipProps } from '@mui/material';
 import { styled } from '@/styles';
-import { Button, Tooltip } from '@mui/material';
+import { Tooltip } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from '@affine/i18n';
+import { ArrowDownIcon } from '@blocksuite/icons';
+import { Button } from '@/ui/button';
 
 export const LanguageMenu = () => {
   const { i18n } = useTranslation();
@@ -23,6 +24,7 @@ export const LanguageMenu = () => {
           {LOCALES.map(option => {
             return (
               <ListItem
+                style={{ border: 'none' }}
                 key={option.name}
                 title={option.name}
                 onClick={() => {
@@ -40,14 +42,14 @@ export const LanguageMenu = () => {
       open={show}
     >
       <StyledTitleButton
-        variant="text"
+        style={{ border: 'none', padding: '0px' }}
         onClick={() => {
           setShow(!show);
         }}
       >
         <StyledContainer>
           <StyledText>{languageName}</StyledText>
-          <UnfoldMoreIcon />
+          <ArrowDownIcon fontSize={18} />
         </StyledContainer>
       </StyledTitleButton>
     </StyledTooltip>
@@ -56,8 +58,6 @@ export const LanguageMenu = () => {
 
 const StyledContainer = styled('div')(() => ({
   display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
   alignItems: 'center',
 }));
 
@@ -88,8 +88,6 @@ const ListItem = styled(Button)(({ theme }) => ({
 }));
 
 const StyledTitleButton = styled(Button)(({ theme }) => ({
-  position: 'absolute',
-  right: '50px',
   color: theme.colors.popoverColor,
   fontSize: theme.font.sm,
 }));
diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts
index 54cda81dc..3e021c23d 100644
--- a/packages/app/src/ui/button/styles.ts
+++ b/packages/app/src/ui/button/styles.ts
@@ -202,6 +202,7 @@ export const StyledButton = styled('button', {
       },
       '>span': {
         marginLeft: '5px',
+        width: '100%',
       },
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore

From e8a472a1fe6884931f4f947a250ec8e3faa6ba6a Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 18 Jan 2023 16:18:10 +0800
Subject: [PATCH 18/27] chore: update membersPage font-size

---
 .../src/components/workspace-setting/member/MembersPage.tsx   | 2 +-
 packages/app/src/components/workspace-setting/member/style.ts | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
index dc6a7132f..e4b787854 100644
--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
@@ -159,7 +159,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
 
   return (
     <StyledMemberWarp>
-      <>{t('Collaboration Description')}</>
+      {t('Collaboration Description')}
       <StyledPublishExplanation>
         <Button
           type="primary"
diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts
index df99d2d94..2b259828c 100644
--- a/packages/app/src/components/workspace-setting/member/style.ts
+++ b/packages/app/src/components/workspace-setting/member/style.ts
@@ -109,6 +109,8 @@ export const StyledMemberWarp = styled('div')(() => {
   return {
     display: 'flex',
     flexDirection: 'column',
-    padding: '40px 0',
+    padding: '48px 0',
+    fontWeight: '500',
+    fontSize: '18px',
   };
 });

From e53119fc20b2856b87245e4187db439fc18459cb Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Sun, 22 Jan 2023 17:41:51 +0800
Subject: [PATCH 19/27] feat: logout style and finish logout process

---
 .../app/src/components/login-modal/index.tsx  |   1 +
 .../app/src/components/logout-modal/icon.tsx  |  48 +++++++
 .../app/src/components/logout-modal/index.tsx | 118 ++++++++++++++++++
 .../src/components/workspace-modal/index.tsx  |  44 ++++---
 4 files changed, 194 insertions(+), 17 deletions(-)
 create mode 100644 packages/app/src/components/logout-modal/icon.tsx
 create mode 100644 packages/app/src/components/logout-modal/index.tsx

diff --git a/packages/app/src/components/login-modal/index.tsx b/packages/app/src/components/login-modal/index.tsx
index 306935056..d572190ee 100644
--- a/packages/app/src/components/login-modal/index.tsx
+++ b/packages/app/src/components/login-modal/index.tsx
@@ -27,6 +27,7 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => {
           <span
             onClick={async () => {
               await login();
+              onClose();
             }}
           >
             <GoogleLoginButton />
diff --git a/packages/app/src/components/logout-modal/icon.tsx b/packages/app/src/components/logout-modal/icon.tsx
new file mode 100644
index 000000000..4fb10d74d
--- /dev/null
+++ b/packages/app/src/components/logout-modal/icon.tsx
@@ -0,0 +1,48 @@
+export const Check = () => {
+  return (
+    <span>
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_9266_16831)">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M5.83301 3.33331C4.4523 3.33331 3.33301 4.4526 3.33301 5.83331V14.1666C3.33301 15.5474 4.4523 16.6666 5.83301 16.6666H14.1663C15.5471 16.6666 16.6663 15.5474 16.6663 14.1666V5.83331C16.6663 4.4526 15.5471 3.33331 14.1663 3.33331H5.83301ZM14.6385 7.97059C14.8984 7.70982 14.8977 7.28771 14.6369 7.02778C14.3762 6.76785 13.9541 6.76852 13.6941 7.02929L8.62861 12.1111L6.30522 9.77929C6.04534 9.51847 5.62323 9.51771 5.36241 9.77759C5.10159 10.0375 5.10083 10.4596 5.36071 10.7204L8.03822 13.4076C8.36386 13.7344 8.89304 13.7344 9.21874 13.4077L14.6385 7.97059Z"
+            fill="#888A9E"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_9266_16831">
+            <rect width="20" height="20" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </span>
+  );
+};
+
+export const UnCheck = () => {
+  return (
+    <span>
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M14.1673 4.66665H5.83398C5.18965 4.66665 4.66732 5.18898 4.66732 5.83331V14.1666C4.66732 14.811 5.18965 15.3333 5.83398 15.3333H14.1673C14.8116 15.3333 15.334 14.811 15.334 14.1666V5.83331C15.334 5.18898 14.8116 4.66665 14.1673 4.66665ZM5.83398 3.33331C4.45327 3.33331 3.33398 4.4526 3.33398 5.83331V14.1666C3.33398 15.5474 4.45327 16.6666 5.83398 16.6666H14.1673C15.548 16.6666 16.6673 15.5474 16.6673 14.1666V5.83331C16.6673 4.4526 15.548 3.33331 14.1673 3.33331H5.83398Z"
+          fill="#888A9E"
+        />
+      </svg>
+    </span>
+  );
+};
diff --git a/packages/app/src/components/logout-modal/index.tsx b/packages/app/src/components/logout-modal/index.tsx
new file mode 100644
index 000000000..91a5641d5
--- /dev/null
+++ b/packages/app/src/components/logout-modal/index.tsx
@@ -0,0 +1,118 @@
+import { styled } from '@/styles';
+import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Button } from '@/ui/button';
+import { Check, UnCheck } from './icon';
+import { useState } from 'react';
+interface LoginModalProps {
+  open: boolean;
+  onClose: (wait: boolean) => void;
+}
+
+export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
+  const [localCache, setLocalCache] = useState(false);
+  return (
+    <Modal open={open} onClose={onClose} data-testid="logout-modal">
+      <ModalWrapper width={560} height={292}>
+        <Header>
+          <ModalCloseButton
+            top={6}
+            right={6}
+            onClick={() => {
+              onClose(true);
+            }}
+          />
+        </Header>
+        <Content>
+          <ContentTitle>{'Sign out?'}</ContentTitle>
+          <SignDes>Set up an AFFINE account to sync data</SignDes>
+          <StyleTips>
+            {localCache ? (
+              <StyleCheck
+                onClick={() => {
+                  setLocalCache(false);
+                }}
+              >
+                <Check></Check>
+              </StyleCheck>
+            ) : (
+              <StyleCheck
+                onClick={() => {
+                  setLocalCache(true);
+                }}
+              >
+                <UnCheck></UnCheck>
+              </StyleCheck>
+            )}
+            Retain local cached data
+          </StyleTips>
+          <div>
+            <Button
+              style={{ marginRight: '16px' }}
+              shape="round"
+              onClick={() => {
+                onClose(true);
+              }}
+            >
+              Wait for Sync
+            </Button>
+            <Button
+              type="danger"
+              shape="round"
+              onClick={() => {
+                onClose(false);
+              }}
+            >
+              Force Sign Out
+            </Button>
+          </div>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};
+
+const Header = styled('div')({
+  position: 'relative',
+  height: '44px',
+});
+
+const Content = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '16px',
+});
+
+const ContentTitle = styled('h1')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'center',
+  paddingBottom: '16px',
+});
+
+const SignDes = styled('div')(({ theme }) => {
+  return {
+    fontWeight: 400,
+    color: theme.colors.textColor,
+    fontSize: '16px',
+  };
+});
+
+const StyleCheck = styled('span')(() => {
+  return {
+    display: 'inline-block',
+    cursor: 'pointer',
+
+    svg: {
+      verticalAlign: 'sub',
+      marginRight: '8px',
+    },
+  };
+});
+
+const StyleTips = styled('span')(() => {
+  return {
+    userSelect: 'none',
+  };
+});
diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx
index 104cf5719..c0dd2a8bd 100644
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -11,19 +11,18 @@ import {
   PublishIcon,
   CloseIcon,
 } from '@blocksuite/icons';
-import { toast } from '@/ui/toast';
 import {
   WorkspaceAvatar,
   WorkspaceUnitAvatar,
 } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
-import { useConfirm } from '@/providers/ConfirmProvider';
 import { useTranslation } from '@affine/i18n';
 import { LanguageMenu } from './languageMenu';
 
 import { CloudIcon, LineIcon, LocalIcon, OfflineIcon } from './icons';
 import { LoginModal } from '../login-modal';
+import { LogoutModal } from '../logout-modal';
 interface WorkspaceModalProps {
   open: boolean;
   onClose: () => void;
@@ -31,12 +30,12 @@ interface WorkspaceModalProps {
 
 export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
-  const { confirm } = useConfirm();
   const { workspaceList, currentWorkspace, user, logout, isOwner } =
     useAppState();
   const router = useRouter();
   const { t } = useTranslation();
   const [loginOpen, setLoginOpen] = useState(false);
+  const [logoutOpen, setLogoutOpen] = useState(false);
   return (
     <div>
       <Modal open={open} onClose={onClose}>
@@ -184,20 +183,21 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                 <div style={{ paddingTop: '25px' }}>
                   <IconButton
                     onClick={() => {
-                      confirm({
-                        title: 'Sign out?',
-                        content: `All data has been stored in the cloud. `,
-                        confirmText: 'Sign out',
-                        cancelText: 'Cancel',
-                      }).then(async confirm => {
-                        if (confirm) {
-                          if (user) {
-                            await logout();
-                            router.replace(`/workspace`);
-                            toast('Enabled success');
-                          }
-                        }
-                      });
+                      setLogoutOpen(true);
+                      // confirm({
+                      //   title: 'Sign out?',
+                      //   content: `All data has been stored in the cloud. `,
+                      //   confirmText: 'Sign out',
+                      //   cancelText: 'Cancel',
+                      // }).then(async confirm => {
+                      //   // if (confirm) {
+                      //   //   if (user) {
+                      //   //     await logout();
+                      //   //     router.replace(`/workspace`);
+                      //   //     toast('Enabled success');
+                      //   //   }
+                      //   // }
+                      // });
                     }}
                   >
                     <LogOutIcon></LogOutIcon>
@@ -212,6 +212,16 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
               setCreateWorkspaceOpen(false);
             }}
           ></CreateWorkspaceModal>
+          <LogoutModal
+            open={logoutOpen}
+            onClose={async wait => {
+              if (!wait) {
+                await logout();
+                router.replace(`/workspace`);
+              }
+              setLogoutOpen(false);
+            }}
+          ></LogoutModal>
         </ModalWrapper>
       </Modal>
     </div>

From 7e23aa4618ca5364c36e5f761b6d6a0c52a4ca40 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Mon, 23 Jan 2023 09:46:12 +0800
Subject: [PATCH 20/27] fix: rewrite workspacesetting layout

---
 .../src/components/header/PageListHeader.tsx  |   4 +-
 packages/app/src/components/header/styles.ts  |  32 ++---
 .../workspace-setting/ExportPage.tsx          |   2 +-
 .../workspace-setting/general/General.tsx     | 118 +++++++++++-------
 .../workspace-setting/general/style.ts        |  24 +++-
 .../workspace-setting/member/style.ts         |   2 +-
 .../src/components/workspace-setting/style.ts |  38 +++---
 7 files changed, 119 insertions(+), 101 deletions(-)

diff --git a/packages/app/src/components/header/PageListHeader.tsx b/packages/app/src/components/header/PageListHeader.tsx
index 43a1c976b..99efff25d 100644
--- a/packages/app/src/components/header/PageListHeader.tsx
+++ b/packages/app/src/components/header/PageListHeader.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import Header from './Header';
 import { StyledPageListTittleWrapper } from './styles';
-import QuickSearchButton from './QuickSearchButton';
+// import QuickSearchButton from './QuickSearchButton';
 
 export type PageListHeaderProps = PropsWithChildren<{
   icon?: ReactNode;
@@ -12,7 +12,7 @@ export const PageListHeader = ({ icon, children }: PageListHeaderProps) => {
       <StyledPageListTittleWrapper>
         {icon}
         {children}
-        <QuickSearchButton style={{ marginLeft: '5px' }} />
+        {/* <QuickSearchButton style={{ marginLeft: '5px' }} /> */}
       </StyledPageListTittleWrapper>
     </Header>
   );
diff --git a/packages/app/src/components/header/styles.ts b/packages/app/src/components/header/styles.ts
index 1deb826fa..146164eeb 100644
--- a/packages/app/src/components/header/styles.ts
+++ b/packages/app/src/components/header/styles.ts
@@ -3,35 +3,25 @@ import { displayFlex, styled } from '@/styles';
 export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
   ({ hasWarning }) => {
     return {
-      position: 'relative',
       height: hasWarning ? '96px' : '60px',
     };
   }
 );
-export const StyledHeader = styled.div<{ hasWarning: boolean }>(
-  ({ hasWarning }) => {
-    return {
-      height: '60px',
-      width: '100%',
-      ...displayFlex('flex-end', 'center'),
-      background: 'var(--affine-page-background)',
-      transition: 'background-color 0.5s',
-      position: 'absolute',
-      left: '0',
-      top: hasWarning ? '36px' : '0',
-      padding: '0 22px',
-      zIndex: 99,
-    };
-  }
-);
+export const StyledHeader = styled.div<{ hasWarning: boolean }>(() => {
+  return {
+    height: '60px',
+    width: '100%',
+    ...displayFlex('flex-end', 'center'),
+    background: 'var(--affine-page-background)',
+    transition: 'background-color 0.5s',
+    zIndex: 99,
+  };
+});
 
 export const StyledTitle = styled('div')(({ theme }) => ({
   width: '720px',
   height: '100%',
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
+
   margin: 'auto',
 
   ...displayFlex('center', 'center'),
diff --git a/packages/app/src/components/workspace-setting/ExportPage.tsx b/packages/app/src/components/workspace-setting/ExportPage.tsx
index 83830f177..e3cf6117f 100644
--- a/packages/app/src/components/workspace-setting/ExportPage.tsx
+++ b/packages/app/src/components/workspace-setting/ExportPage.tsx
@@ -4,7 +4,7 @@ import { Trans } from '@affine/i18n';
 export const ExportPageTitleContainer = styled('div')(() => {
   return {
     display: 'flex',
-    marginTop: '60px',
+
     fontWeight: '500',
     flex: 1,
   };
diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx
index 2ac37c53c..c8919b30c 100644
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -5,6 +5,8 @@ import {
   StyledSettingInputContainer,
   StyledDoneButtonContainer,
   StyledInput,
+  StyledProviderInfo,
+  StyleGeneral,
 } from './style';
 import { StyledSettingH2 } from '../style';
 
@@ -13,12 +15,13 @@ import { Button } from '@/ui/button';
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
-import { DoneIcon, CloudUnsyncedIcon } from '@blocksuite/icons';
+import { DoneIcon, UsersIcon } from '@blocksuite/icons';
 // import { Upload } from '@/components/file-upload';
 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';
 export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [showLeave, setShowLeave] = useState<boolean>(false);
@@ -45,57 +48,76 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   // };
 
   return workspace ? (
-    <div>
-      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
-      <StyledSettingAvatarContent>
-        <div
-          style={{
-            float: 'left',
-            marginRight: '20px',
-          }}
-        >
-          <WorkspaceUnitAvatar
-            size={60}
-            name={workspace.name}
-            workspaceUnit={workspace}
-          />
-        </div>
-        {/* TODO: Wait for image sync to complete  */}
-        {/* <Upload
+    <StyleGeneral>
+      <div style={{ flex: 1, overflow: 'auto' }}>
+        <StyledSettingH2>Workspace Avatar</StyledSettingH2>
+        <StyledSettingAvatarContent>
+          <div
+            style={{
+              float: 'left',
+              marginRight: '20px',
+            }}
+          >
+            <WorkspaceUnitAvatar
+              size={60}
+              name={workspace.name}
+              workspaceUnit={workspace}
+            />
+          </div>
+          {/* TODO: Wait for image sync to complete  */}
+          {/* <Upload
           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
           fileChange={fileChange}
         >
           <Button loading={uploading}>{t('Upload')}</Button>
         </Upload> */}
-        {/* TODO: add upload logic */}
-      </StyledSettingAvatarContent>
-      <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
-      <StyledSettingInputContainer>
-        <StyledInput
-          width={284}
-          height={32}
-          value={workspaceName}
-          placeholder={t('Workspace Name')}
-          maxLength={14}
-          minLength={1}
-          disabled={!isOwner}
-          onChange={handleChangeWorkSpaceName}
-        ></StyledInput>
-        {isOwner ? (
-          <StyledDoneButtonContainer
-            onClick={() => {
-              handleUpdateWorkspaceName();
-            }}
-          >
-            <DoneIcon />
-          </StyledDoneButtonContainer>
-        ) : null}
-      </StyledSettingInputContainer>
-      <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
-      <StyledSettingInputContainer>
-        <CloudUnsyncedIcon style={{ marginRight: '15px' }} />
-        Local workspace
-      </StyledSettingInputContainer>
+          {/* TODO: add upload logic */}
+        </StyledSettingAvatarContent>
+        <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
+        <StyledSettingInputContainer>
+          <StyledInput
+            width={284}
+            height={32}
+            value={workspaceName}
+            placeholder={t('Workspace Name')}
+            maxLength={14}
+            minLength={1}
+            disabled={!isOwner}
+            onChange={handleChangeWorkSpaceName}
+          ></StyledInput>
+          {isOwner ? (
+            <StyledDoneButtonContainer
+              onClick={() => {
+                handleUpdateWorkspaceName();
+              }}
+            >
+              <DoneIcon />
+            </StyledDoneButtonContainer>
+          ) : null}
+        </StyledSettingInputContainer>
+        <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
+        <StyledSettingInputContainer>
+          {isOwner ? (
+            currentWorkspace?.provider === 'local' ? (
+              <StyledProviderInfo>
+                <LocalIcon />
+                Local Workspace
+              </StyledProviderInfo>
+            ) : (
+              <StyledProviderInfo>
+                <CloudIcon />
+                All data can be accessed offline
+              </StyledProviderInfo>
+            )
+          ) : (
+            <StyledProviderInfo>
+              <UsersIcon fontSize={20} color={'#FF646B'} />
+              Joined Workspace
+            </StyledProviderInfo>
+          )}
+        </StyledSettingInputContainer>
+      </div>
+
       <StyledDeleteButtonContainer>
         {isOwner ? (
           <>
@@ -137,6 +159,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
           </>
         )}
       </StyledDeleteButtonContainer>
-    </div>
+    </StyleGeneral>
   ) : null;
 };
diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts
index c46f9706c..9e76f13e0 100644
--- a/packages/app/src/components/workspace-setting/general/style.ts
+++ b/packages/app/src/components/workspace-setting/general/style.ts
@@ -13,11 +13,14 @@ export const StyledSettingInputContainer = styled('div')(() => {
 
 export const StyledDeleteButtonContainer = styled('div')(() => {
   return {
-    position: 'absolute',
-    bottom: '0',
-    left: '50%',
-    marginBottom: '20px',
-    transform: 'translateX(-50%)',
+    textAlign: 'center',
+  };
+});
+export const StyleGeneral = styled('div')(() => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
   };
 });
 export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => {
@@ -53,3 +56,14 @@ export const StyledSettingAvatarContent = styled('div')(() => {
 export const StyledSettingAvatar = styled(MuiAvatar)(() => {
   return { height: '72px', width: '72px', marginRight: '24px' };
 });
+
+export const StyledProviderInfo = styled('p')(({ theme }) => {
+  return {
+    color: theme.colors.iconColor,
+    fontSize: theme.font.sm,
+    svg: {
+      verticalAlign: 'sub',
+      marginRight: '10px',
+    },
+  };
+});
diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts
index 2b259828c..d861b192a 100644
--- a/packages/app/src/components/workspace-setting/member/style.ts
+++ b/packages/app/src/components/workspace-setting/member/style.ts
@@ -109,7 +109,7 @@ export const StyledMemberWarp = styled('div')(() => {
   return {
     display: 'flex',
     flexDirection: 'column',
-    padding: '48px 0',
+    padding: '0 0 48px 0',
     fontWeight: '500',
     fontSize: '18px',
   };
diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts
index 430c6780e..c855b767d 100644
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/packages/app/src/components/workspace-setting/style.ts
@@ -4,23 +4,27 @@ export const StyledSettingContainer = styled('div')(() => {
   return {
     display: 'flex',
     flexDirection: 'column',
-    marginTop: '24px',
-    marginLeft: '48px',
-    overflow: 'auto',
+
+    padding: '0 34px 20px 48px',
+    height: '100vh',
   };
 });
 
 export const StyledSettingSidebar = styled('div')(() => {
   {
     return {
-      flexShrink: 0,
-      flexGrow: 0,
+      // height: '48px',
+      marginTop: '50px',
     };
   }
 });
 
 export const StyledSettingContent = styled('div')(() => {
-  return {};
+  return {
+    overflow: 'hidden',
+    flex: 1,
+    paddingTop: '48px',
+  };
 });
 
 export const StyledSetting = styled('div')(({ theme }) => {
@@ -48,7 +52,6 @@ export const StyledSettingTabContainer = styled('ul')(() => {
   {
     return {
       display: 'flex',
-      marginTop: '25px',
     };
   }
 });
@@ -58,8 +61,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
     {
       return {
         display: 'flex',
-        position: 'relative',
-        margin: '0 48px 8px 0',
+        margin: '0 48px 0 0',
         height: '34px',
         color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
         fontWeight: '500',
@@ -67,16 +69,9 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
         lineHeight: theme.font.lineHeightBase,
         cursor: 'pointer',
         transition: 'all 0.15s ease',
-        '::after': {
-          content: '""',
-          width: '100%',
-          height: '2px',
-          background: isActive ? theme.colors.primaryColor : 'transparent',
-          transition: 'all 0.15s ease',
-          position: 'absolute',
-          left: '0',
-          bottom: '0',
-        },
+        borderBottom: `2px solid ${
+          isActive ? theme.colors.primaryColor : 'none'
+        }`,
         ':hover': { color: theme.colors.primaryColor },
       };
     }
@@ -87,9 +82,6 @@ export const StyledSettingTagIconContainer = styled('div')(() => {
   return {
     display: 'flex',
     alignItems: 'center',
-    marginRight: '14.64px',
-    width: '14.47px',
-    fontSize: '14.47px',
   };
 });
 
@@ -112,7 +104,7 @@ export const StyledPublishExplanation = styled('div')(() => {
     fontSize: '18px',
     lineHeight: '26px',
     flex: 1,
-    marginTop: '60px',
+
     marginBottom: '22px',
   };
 });

From ba7a4378ad357c758b741f7bccf658638830009b Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Mon, 23 Jan 2023 10:26:51 +0800
Subject: [PATCH 21/27] fix: rewrite member style

---
 .../workspace-setting/member/MembersPage.tsx  |  8 ++++---
 .../workspace-setting/member/style.ts         | 22 +++++++++++--------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
index e4b787854..b72d60723 100644
--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
@@ -12,6 +12,7 @@ import {
   StyledMoreVerticalButton,
   StyledPublishExplanation,
   StyledMemberWarp,
+  StyledMemberContainer,
 } from './style';
 import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
 import { useState } from 'react';
@@ -31,14 +32,14 @@ import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);
   const { members, removeMember, loaded } = useMembers();
+
   const { t } = useTranslation();
-  // FIXME: DELETE THIS
   const { enableWorkspace } = useWorkspaceHelper();
   const { confirm } = useConfirm();
 
   if (workspace.provider === 'affine') {
     return (
-      <>
+      <StyledMemberContainer>
         <StyledMemberListContainer>
           {!loaded && (
             <Wrapper justifyContent="center">
@@ -57,6 +58,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                 <StyledMemberRoleContainer>
                   {t('Access level')}
                 </StyledMemberRoleContainer>
+                <div style={{ width: '24px', paddingRight: '48px' }}></div>
               </StyledMemberTitleContainer>
               {members.map((member, index) => {
                 const user = Object.assign(
@@ -153,7 +155,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             open={isInviteModalShow}
           ></InviteMemberModal>
         </StyledMemberButtonContainer>
-      </>
+      </StyledMemberContainer>
     );
   }
 
diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts
index d861b192a..46eeaa9be 100644
--- a/packages/app/src/components/workspace-setting/member/style.ts
+++ b/packages/app/src/components/workspace-setting/member/style.ts
@@ -1,14 +1,21 @@
 import { styled } from '@/styles';
 import MuiAvatar from '@mui/material/Avatar';
 
-export const StyledMemberTitleContainer = styled('div')(() => {
+export const StyledMemberTitleContainer = styled('li')(() => {
   return {
     display: 'flex',
-    marginTop: '60px',
     fontWeight: '500',
+    marginBottom: '32px',
     flex: 1,
   };
 });
+export const StyledMemberContainer = styled('div')(() => {
+  return {
+    display: 'flex',
+    height: '100%',
+    flexDirection: 'column',
+  };
+});
 
 export const StyledMemberAvatar = styled(MuiAvatar)(() => {
   return { height: '40px', width: '40px' };
@@ -18,8 +25,7 @@ export const StyledMemberNameContainer = styled('div')(() => {
   return {
     display: 'flex',
     alignItems: 'center',
-    width: '402px',
-    flex: 2,
+    flex: '2 0 402px',
   };
 });
 
@@ -27,17 +33,15 @@ export const StyledMemberRoleContainer = styled('div')(() => {
   return {
     display: 'flex',
     alignItems: 'center',
-    width: '222px',
-    flex: 1,
+    flex: '1 0 222px',
   };
 });
 
 export const StyledMemberListContainer = styled('ul')(() => {
   return {
-    marginTop: '15px',
     overflowY: 'scroll',
     width: '100%',
-    maxHeight: 'calc(100vh - 300px)',
+    flex: 1,
   };
 });
 
@@ -60,7 +64,7 @@ export const StyledMemberName = styled('div')(({ theme }) => {
   return {
     fontWeight: '400',
     fontSize: '18px',
-    lineHeight: '16px',
+    lineHeight: '26px',
     color: theme.colors.textColor,
   };
 });

From 6d41090e2784b781e2e4c250057f955a5237e7bb Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Mon, 23 Jan 2023 10:38:05 +0800
Subject: [PATCH 22/27] feat: rewrite enable affile cloud

---
 .../src/components/enable-workspace/index.tsx | 24 +++++++++++++++++++
 .../workspace-setting/PublishPage.tsx         | 18 +++-----------
 .../components/workspace-setting/SyncPage.tsx | 14 ++---------
 .../workspace-setting/member/MembersPage.tsx  | 13 ++--------
 4 files changed, 31 insertions(+), 38 deletions(-)
 create mode 100644 packages/app/src/components/enable-workspace/index.tsx

diff --git a/packages/app/src/components/enable-workspace/index.tsx b/packages/app/src/components/enable-workspace/index.tsx
new file mode 100644
index 000000000..3cc28b25d
--- /dev/null
+++ b/packages/app/src/components/enable-workspace/index.tsx
@@ -0,0 +1,24 @@
+import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+import { Button } from '@/ui/button';
+import { useTranslation } from '@affine/i18n';
+import { useState } from 'react';
+
+export const EnableWorkspaceButton = () => {
+  const { t } = useTranslation();
+  const { enableWorkspace } = useWorkspaceHelper();
+  const [loading, setLoading] = useState(false);
+  return (
+    <Button
+      type="primary"
+      shape="circle"
+      loading={loading}
+      onClick={async () => {
+        setLoading(true);
+        await enableWorkspace();
+        setLoading(false);
+      }}
+    >
+      {t('Enable AFFiNE Cloud')}
+    </Button>
+  );
+};
diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx
index 4ff35d776..3d65ac867 100644
--- a/packages/app/src/components/workspace-setting/PublishPage.tsx
+++ b/packages/app/src/components/workspace-setting/PublishPage.tsx
@@ -16,9 +16,10 @@ import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
 import Loading from '@/components/loading';
 import { Wrapper } from '@/ui/layout';
+import { EnableWorkspaceButton } from '../enable-workspace';
 export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const shareUrl = window.location.host + '/public-workspace/' + workspace.id;
-  const { publishWorkspace, enableWorkspace } = useWorkspaceHelper();
+  const { publishWorkspace } = useWorkspaceHelper();
   const { t } = useTranslation();
   const [loaded, setLoaded] = useState(true);
   const togglePublic = async (flag: boolean) => {
@@ -30,9 +31,6 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
     toast('Copied url to clipboard');
   };
 
-  const enableAffineCloud = async () => {
-    await enableWorkspace();
-  };
   return (
     <>
       {workspace.provider === 'affine' ? (
@@ -100,17 +98,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             </StyledPublishExplanation>
 
             <StyledPublishCopyContainer>
-              <Button
-                onClick={async () => {
-                  setLoaded(false);
-                  await enableAffineCloud();
-                  setLoaded(true);
-                }}
-                type="primary"
-                shape="circle"
-              >
-                {t('Enable AFFiNE Cloud')}
-              </Button>
+              <EnableWorkspaceButton></EnableWorkspaceButton>
             </StyledPublishCopyContainer>
           </>
         </StyledPublishContent>
diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx
index f65a24ab7..c9d0523f6 100644
--- a/packages/app/src/components/workspace-setting/SyncPage.tsx
+++ b/packages/app/src/components/workspace-setting/SyncPage.tsx
@@ -9,11 +9,10 @@ import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
 import { Menu, MenuItem } from '@/ui/menu';
 import { WorkspaceUnit } from '@affine/datacenter';
-import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { Trans, useTranslation } from '@affine/i18n';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { EnableWorkspaceButton } from '../enable-workspace';
 export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
-  const { enableWorkspace } = useWorkspaceHelper();
   const { t } = useTranslation();
   return (
     <div>
@@ -36,16 +35,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
               Cloud for this workspace to keep data in sync with the cloud.
             </StyledWorkspaceType>
             <StyledPublishCopyContainer>
-              <Button
-                onClick={async () => {
-                  await enableWorkspace();
-                }}
-                type="primary"
-                shape="circle"
-                style={{ fontWeight: '500' }}
-              >
-                {t('Enable AFFiNE Cloud')}
-              </Button>
+              <EnableWorkspaceButton></EnableWorkspaceButton>
             </StyledPublishCopyContainer>
           </>
         ) : (
diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
index b72d60723..b1b64ffa0 100644
--- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx
+++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx
@@ -27,14 +27,13 @@ import useMembers from '@/hooks/use-members';
 import Loading from '@/components/loading';
 import { Wrapper } from '@/ui/layout';
 import { useTranslation } from '@affine/i18n';
-import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
+import { EnableWorkspaceButton } from '@/components/enable-workspace';
 
 export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [isInviteModalShow, setIsInviteModalShow] = useState(false);
   const { members, removeMember, loaded } = useMembers();
 
   const { t } = useTranslation();
-  const { enableWorkspace } = useWorkspaceHelper();
   const { confirm } = useConfirm();
 
   if (workspace.provider === 'affine') {
@@ -163,15 +162,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
     <StyledMemberWarp>
       {t('Collaboration Description')}
       <StyledPublishExplanation>
-        <Button
-          type="primary"
-          shape="circle"
-          onClick={async () => {
-            await enableWorkspace();
-          }}
-        >
-          {t('Enable AFFiNE Cloud')}
-        </Button>
+        <EnableWorkspaceButton></EnableWorkspaceButton>
       </StyledPublishExplanation>
     </StyledMemberWarp>
   );

From 0fa44f82dd7671c26e67ffca5aebdfea6aaf2c9b Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Mon, 23 Jan 2023 11:23:41 +0800
Subject: [PATCH 23/27] feat: rewrite publish style

---
 .../workspace-setting/PublishPage.tsx         | 66 ++++++++++---------
 .../src/components/workspace-setting/style.ts | 38 +++++------
 2 files changed, 50 insertions(+), 54 deletions(-)

diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx
index 3d65ac867..a30b72bdf 100644
--- a/packages/app/src/components/workspace-setting/PublishPage.tsx
+++ b/packages/app/src/components/workspace-setting/PublishPage.tsx
@@ -14,16 +14,18 @@ import { toast } from '@/ui/toast';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
-import Loading from '@/components/loading';
-import { Wrapper } from '@/ui/layout';
 import { EnableWorkspaceButton } from '../enable-workspace';
 export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const shareUrl = window.location.host + '/public-workspace/' + workspace.id;
   const { publishWorkspace } = useWorkspaceHelper();
   const { t } = useTranslation();
-  const [loaded, setLoaded] = useState(true);
+  const [loaded, setLoaded] = useState(false);
   const togglePublic = async (flag: boolean) => {
-    await publishWorkspace(workspace.id.toString(), flag);
+    try {
+      await publishWorkspace(workspace.id.toString(), flag);
+    } catch (e) {
+      toast('Failed to publish workspace');
+    }
   };
 
   const copyUrl = () => {
@@ -34,17 +36,21 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   return (
     <>
       {workspace.provider === 'affine' ? (
-        <div>
+        <div
+          style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+        >
           <StyledPublishContent>
             {workspace.published ? (
               <>
                 <StyledPublishExplanation>
-                  {t('Publishing')}
+                  The current workspace has been published to the web, everyone
+                  can view the contents of this workspace through the link.
                 </StyledPublishExplanation>
-                <StyledSettingH2 marginTop={48}>
-                  {t('Share with link')}
-                </StyledSettingH2>
+
                 <StyledPublishCopyContainer>
+                  <StyledSettingH2 marginBottom={16}>
+                    {t('Share with link')}
+                  </StyledSettingH2>
                   <Input width={500} value={shareUrl} disabled={true}></Input>
                   <StyledCopyButtonContainer>
                     <Button onClick={copyUrl} type="primary" shape="circle">
@@ -56,6 +62,20 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             ) : (
               <StyledPublishExplanation>
                 {t('Publishing Description')}
+                <div style={{ marginTop: '64px' }}>
+                  <Button
+                    onClick={async () => {
+                      setLoaded(true);
+                      await togglePublic(true);
+                      setLoaded(false);
+                    }}
+                    loading={loaded}
+                    type="primary"
+                    shape="circle"
+                  >
+                    {t('Publish to web')}
+                  </Button>
+                </div>
               </StyledPublishExplanation>
             )}
           </StyledPublishContent>
@@ -64,10 +84,11 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             <StyledStopPublishContainer>
               <Button
                 onClick={async () => {
-                  setLoaded(false);
+                  setLoaded(true);
                   await togglePublic(false);
                   setLoaded(true);
                 }}
+                loading={false}
                 type="danger"
                 shape="circle"
               >
@@ -75,39 +96,22 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
               </Button>
             </StyledStopPublishContainer>
           ) : (
-            <StyledPublishCopyContainer>
-              <Button
-                onClick={async () => {
-                  setLoaded(false);
-                  await togglePublic(true);
-                  setLoaded(true);
-                }}
-                type="primary"
-                shape="circle"
-              >
-                {t('Publish to web')}
-              </Button>
-            </StyledPublishCopyContainer>
+            <></>
           )}
         </div>
       ) : (
         <StyledPublishContent>
           <>
             <StyledPublishExplanation>
-              {t('Publishing')}
+              Publishing to web requires AFFiNE Cloud service.
             </StyledPublishExplanation>
 
-            <StyledPublishCopyContainer>
+            <div style={{ marginTop: '72px' }}>
               <EnableWorkspaceButton></EnableWorkspaceButton>
-            </StyledPublishCopyContainer>
+            </div>
           </>
         </StyledPublishContent>
       )}
-      {!loaded && (
-        <Wrapper>
-          <Loading size={25} />
-        </Wrapper>
-      )}
     </>
   );
 };
diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts
index c855b767d..2f95a29b8 100644
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/packages/app/src/components/workspace-setting/style.ts
@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@/styles';
+import { styled } from '@/styles';
 
 export const StyledSettingContainer = styled('div')(() => {
   return {
@@ -85,26 +85,25 @@ export const StyledSettingTagIconContainer = styled('div')(() => {
   };
 });
 
-export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>(
-  ({ marginTop, theme }) => {
-    return {
-      fontWeight: '500',
-      fontSize: theme.font.base,
-      lineHeight: theme.font.lineHeightBase,
-      marginTop: marginTop ? `${marginTop}px` : '0px',
-    };
-  }
-);
+export const StyledSettingH2 = styled('h2')<{
+  marginTop?: number;
+  marginBottom?: number;
+}>(({ marginTop, marginBottom, theme }) => {
+  return {
+    fontWeight: '500',
+    fontSize: theme.font.base,
+    lineHeight: theme.font.lineHeightBase,
+    marginTop: marginTop ? `${marginTop}px` : '0px',
+    marginBottom: marginBottom ? `${marginBottom}px` : '0px',
+  };
+});
 
 export const StyledPublishExplanation = styled('div')(() => {
   return {
-    ...displayFlex('row', 'center', 'center'),
     paddingRight: '48px',
     fontWeight: '500',
     fontSize: '18px',
     lineHeight: '26px',
-    flex: 1,
-
     marginBottom: '22px',
   };
 });
@@ -126,21 +125,14 @@ export const StyledWorkspaceType = styled('div')(() => {
 export const StyledPublishCopyContainer = styled('div')(() => {
   return {
     marginTop: '12px',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'start',
-    justifyContent: 'center',
     marginBottom: '20px',
     paddingTop: '20px',
+    flex: 1,
   };
 });
 export const StyledStopPublishContainer = styled('div')(() => {
   return {
-    position: 'absolute',
-    bottom: '0',
-    left: '50%',
-    transform: 'translateX(-50%)',
-    marginBottom: '20px',
+    textAlign: 'center',
   };
 });
 

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

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

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

From 77b1dff68b6099a5c8f963a46eb537f334225d5c Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Mon, 23 Jan 2023 11:50:04 +0800
Subject: [PATCH 25/27] feat: avatar upload

---
 .../workspace-setting/general/General.tsx     | 45 ++++++++++---------
 .../workspace-setting/general/icons.tsx       | 20 +++++++++
 .../workspace-setting/general/style.ts        | 25 +++++++++++
 3 files changed, 70 insertions(+), 20 deletions(-)
 create mode 100644 packages/app/src/components/workspace-setting/general/icons.tsx

diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx
index c8919b30c..0207cb6a9 100644
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -7,6 +7,7 @@ import {
   StyledInput,
   StyledProviderInfo,
   StyleGeneral,
+  StyledAvatar,
 } from './style';
 import { StyledSettingH2 } from '../style';
 
@@ -22,10 +23,11 @@ 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';
 export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [showLeave, setShowLeave] = useState<boolean>(false);
-  // const [uploading, setUploading] = useState<boolean>(false);
   const [workspaceName, setWorkspaceName] = useState<string>(workspace.name);
   const { currentWorkspace, isOwner } = useAppState();
   const { updateWorkspace } = useWorkspaceHelper();
@@ -39,31 +41,34 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
       updateWorkspace({ name: workspaceName }, currentWorkspace);
   };
 
-  // const fileChange = async (file: File) => {
-  //   setUploading(true);
-  //   const blob = new Blob([file], { type: file.type });
-  //   currentWorkspace &&
-  //     (await updateWorkspace({ avatarBlob: blob }, currentWorkspace));
-  //   setUploading(false);
-  // };
+  const fileChange = async (file: File) => {
+    const blob = new Blob([file], { type: file.type });
+    currentWorkspace &&
+      (await updateWorkspace({ avatarBlob: blob }, currentWorkspace));
+  };
 
   return workspace ? (
     <StyleGeneral>
       <div style={{ flex: 1, overflow: 'auto' }}>
         <StyledSettingH2>Workspace Avatar</StyledSettingH2>
         <StyledSettingAvatarContent>
-          <div
-            style={{
-              float: 'left',
-              marginRight: '20px',
-            }}
-          >
-            <WorkspaceUnitAvatar
-              size={60}
-              name={workspace.name}
-              workspaceUnit={workspace}
-            />
-          </div>
+          <StyledAvatar>
+            <Upload
+              accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
+              fileChange={fileChange}
+            >
+              <>
+                <div className="camera-icon">
+                  <CameraIcon></CameraIcon>
+                </div>
+                <WorkspaceUnitAvatar
+                  size={60}
+                  name={workspace.name}
+                  workspaceUnit={workspace}
+                />
+              </>
+            </Upload>
+          </StyledAvatar>
           {/* TODO: Wait for image sync to complete  */}
           {/* <Upload
           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
diff --git a/packages/app/src/components/workspace-setting/general/icons.tsx b/packages/app/src/components/workspace-setting/general/icons.tsx
new file mode 100644
index 000000000..9487d8dc6
--- /dev/null
+++ b/packages/app/src/components/workspace-setting/general/icons.tsx
@@ -0,0 +1,20 @@
+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
+          fill-rule="evenodd"
+          clip-rule="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>
+  );
+};
diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts
index 9e76f13e0..d2e8d7b4d 100644
--- a/packages/app/src/components/workspace-setting/general/style.ts
+++ b/packages/app/src/components/workspace-setting/general/style.ts
@@ -67,3 +67,28 @@ export const StyledProviderInfo = styled('p')(({ theme }) => {
     },
   };
 });
+
+export const StyledAvatar = styled('div')(() => {
+  return {
+    position: 'relative',
+    marginRight: '20px',
+    cursor: 'pointer',
+    ':hover': {
+      '.camera-icon': {
+        display: 'block',
+      },
+    },
+    '.camera-icon': {
+      position: 'absolute',
+      display: 'none',
+      width: '100%',
+      height: '100%',
+      borderRadius: '50%',
+      backgroundColor: 'rgba(60, 61, 63, 0.5)',
+      top: 0,
+      left: 0,
+      textAlign: 'center',
+      lineHeight: '72px',
+    },
+  };
+});

From bccb0cc5ffa404a131d8d9f567a21237bb877b8a Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Mon, 23 Jan 2023 11:58:51 +0800
Subject: [PATCH 26/27] feat: svg lint

---
 .../src/components/edgeless-toolbar/reply.svg |  2 +-
 .../app/src/components/logout-modal/icon.tsx  |  8 +++----
 .../workspace-modal/icons/index.tsx           | 22 +++++++++----------
 .../workspace-setting/general/icons.tsx       |  4 ++--
 tests/local-first-workspace.spec.ts           |  2 +-
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/app/src/components/edgeless-toolbar/reply.svg b/packages/app/src/components/edgeless-toolbar/reply.svg
index bfe127a19..7b9f8f2a2 100644
--- a/packages/app/src/components/edgeless-toolbar/reply.svg
+++ b/packages/app/src/components/edgeless-toolbar/reply.svg
@@ -1,3 +1,3 @@
 <svg width="36" height="35" viewBox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8277 12.2008C15.0955 12.4686 15.0955 12.9028 14.8277 13.1706L12.3412 15.6571H20.9551C21.6982 15.6571 22.2977 15.6571 22.7831 15.6968C23.2828 15.7376 23.7218 15.8239 24.128 16.0308C24.7731 16.3595 25.2976 16.884 25.6263 17.5292C25.8332 17.9353 25.9195 18.3743 25.9604 18.8741C26 19.3595 26 19.9589 26 20.7021V21.8286C26 22.2073 25.693 22.5143 25.3143 22.5143C24.9356 22.5143 24.6286 22.2073 24.6286 21.8286V20.7314C24.6286 19.952 24.628 19.4087 24.5935 18.9858C24.5596 18.5708 24.4964 18.3324 24.4044 18.1518C24.2071 17.7647 23.8924 17.45 23.5054 17.2528C23.3248 17.1608 23.0864 17.0976 22.6714 17.0637C22.2484 17.0291 21.7051 17.0286 20.9257 17.0286H12.3412L14.8277 19.5151C15.0955 19.7829 15.0955 20.2171 14.8277 20.4849C14.5599 20.7527 14.1258 20.7527 13.858 20.4849L10.2008 16.8277C9.93305 16.5599 9.93305 16.1258 10.2008 15.858L13.858 12.2008C14.1258 11.9331 14.5599 11.9331 14.8277 12.2008Z" fill="#9096A5"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M14.8277 12.2008C15.0955 12.4686 15.0955 12.9028 14.8277 13.1706L12.3412 15.6571H20.9551C21.6982 15.6571 22.2977 15.6571 22.7831 15.6968C23.2828 15.7376 23.7218 15.8239 24.128 16.0308C24.7731 16.3595 25.2976 16.884 25.6263 17.5292C25.8332 17.9353 25.9195 18.3743 25.9604 18.8741C26 19.3595 26 19.9589 26 20.7021V21.8286C26 22.2073 25.693 22.5143 25.3143 22.5143C24.9356 22.5143 24.6286 22.2073 24.6286 21.8286V20.7314C24.6286 19.952 24.628 19.4087 24.5935 18.9858C24.5596 18.5708 24.4964 18.3324 24.4044 18.1518C24.2071 17.7647 23.8924 17.45 23.5054 17.2528C23.3248 17.1608 23.0864 17.0976 22.6714 17.0637C22.2484 17.0291 21.7051 17.0286 20.9257 17.0286H12.3412L14.8277 19.5151C15.0955 19.7829 15.0955 20.2171 14.8277 20.4849C14.5599 20.7527 14.1258 20.7527 13.858 20.4849L10.2008 16.8277C9.93305 16.5599 9.93305 16.1258 10.2008 15.858L13.858 12.2008C14.1258 11.9331 14.5599 11.9331 14.8277 12.2008Z" fill="#9096A5"/>
 </svg>
diff --git a/packages/app/src/components/logout-modal/icon.tsx b/packages/app/src/components/logout-modal/icon.tsx
index 4fb10d74d..df23248b7 100644
--- a/packages/app/src/components/logout-modal/icon.tsx
+++ b/packages/app/src/components/logout-modal/icon.tsx
@@ -10,8 +10,8 @@ export const Check = () => {
       >
         <g clip-path="url(#clip0_9266_16831)">
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M5.83301 3.33331C4.4523 3.33331 3.33301 4.4526 3.33301 5.83331V14.1666C3.33301 15.5474 4.4523 16.6666 5.83301 16.6666H14.1663C15.5471 16.6666 16.6663 15.5474 16.6663 14.1666V5.83331C16.6663 4.4526 15.5471 3.33331 14.1663 3.33331H5.83301ZM14.6385 7.97059C14.8984 7.70982 14.8977 7.28771 14.6369 7.02778C14.3762 6.76785 13.9541 6.76852 13.6941 7.02929L8.62861 12.1111L6.30522 9.77929C6.04534 9.51847 5.62323 9.51771 5.36241 9.77759C5.10159 10.0375 5.10083 10.4596 5.36071 10.7204L8.03822 13.4076C8.36386 13.7344 8.89304 13.7344 9.21874 13.4077L14.6385 7.97059Z"
             fill="#888A9E"
           />
@@ -37,8 +37,8 @@ export const UnCheck = () => {
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M14.1673 4.66665H5.83398C5.18965 4.66665 4.66732 5.18898 4.66732 5.83331V14.1666C4.66732 14.811 5.18965 15.3333 5.83398 15.3333H14.1673C14.8116 15.3333 15.334 14.811 15.334 14.1666V5.83331C15.334 5.18898 14.8116 4.66665 14.1673 4.66665ZM5.83398 3.33331C4.45327 3.33331 3.33398 4.4526 3.33398 5.83331V14.1666C3.33398 15.5474 4.45327 16.6666 5.83398 16.6666H14.1673C15.548 16.6666 16.6673 15.5474 16.6673 14.1666V5.83331C16.6673 4.4526 15.548 3.33331 14.1673 3.33331H5.83398Z"
           fill="#888A9E"
         />
diff --git a/packages/app/src/components/workspace-modal/icons/index.tsx b/packages/app/src/components/workspace-modal/icons/index.tsx
index 3697e6f6f..773a8383f 100644
--- a/packages/app/src/components/workspace-modal/icons/index.tsx
+++ b/packages/app/src/components/workspace-modal/icons/index.tsx
@@ -8,8 +8,8 @@ export const LocalIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        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"
       />
@@ -27,8 +27,8 @@ export const OfflineIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        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"
       />
@@ -45,8 +45,8 @@ export const PublishedIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        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"
       />
@@ -71,12 +71,12 @@ export const CloudIcon = () => {
         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"
         stroke-width="1.25"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        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"
       />
@@ -93,7 +93,7 @@ export const LineIcon = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M1 0V20" stroke="black" stroke-opacity="0.15" />
+      <path d="M1 0V20" stroke="black" strokeOpacity="0.15" />
     </svg>
   );
 };
diff --git a/packages/app/src/components/workspace-setting/general/icons.tsx b/packages/app/src/components/workspace-setting/general/icons.tsx
index 9487d8dc6..a126cafc0 100644
--- a/packages/app/src/components/workspace-setting/general/icons.tsx
+++ b/packages/app/src/components/workspace-setting/general/icons.tsx
@@ -9,8 +9,8 @@ export const CameraIcon = () => {
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          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"
         />
diff --git a/tests/local-first-workspace.spec.ts b/tests/local-first-workspace.spec.ts
index 39b10c6ae..014b839fc 100644
--- a/tests/local-first-workspace.spec.ts
+++ b/tests/local-first-workspace.spec.ts
@@ -12,7 +12,7 @@ test.describe('Local first default workspace', () => {
   test.skip('Default workspace avatar', async ({ page }) => {
     const workspaceAvatar = page.getByTestId('workspace-avatar');
     expect(await workspaceAvatar.innerHTML()).toBe(
-      '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#6880FF" fill="#FFF"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M18.6303 8.79688L11.2559 29.8393H15.5752L20.2661 15.2858L24.959 29.8393H29.2637L21.8881 8.79688H18.6303Z" fill="#6880FF"></path></svg>'
+      '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#6880FF" fill="#FFF"></rect><path fillRule="evenodd" clipRule="evenodd" d="M18.6303 8.79688L11.2559 29.8393H15.5752L20.2661 15.2858L24.959 29.8393H29.2637L21.8881 8.79688H18.6303Z" fill="#6880FF"></path></svg>'
     );
   });
 });

From 23b9ff1ce61517a08cae352b432ef4fe89ea73b8 Mon Sep 17 00:00:00 2001
From: DarkSky <darksky2048@gmail.com>
Date: Mon, 30 Jan 2023 11:59:15 +0800
Subject: [PATCH 27/27] fix: lock file corruption

---
 pnpm-lock.yaml | 289 +++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 245 insertions(+), 44 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3ea50ad0..65da888ea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1596,7 +1596,7 @@ packages:
       fs-extra: 7.0.1
       lodash.startcase: 4.4.0
       outdent: 0.5.0
-      prettier: 2.7.1
+      prettier: 2.8.1
       resolve-from: 5.0.0
       semver: 5.7.1
     dev: true
@@ -1764,7 +1764,7 @@ packages:
       '@changesets/types': 5.2.1
       fs-extra: 7.0.1
       human-id: 1.0.2
-      prettier: 2.7.1
+      prettier: 2.8.1
     dev: true
 
   /@cspotcode/source-map-support/0.8.1:
@@ -1803,6 +1803,16 @@ packages:
       stylis: 4.0.13
     dev: false
 
+  /@emotion/cache/11.10.5:
+    resolution: {integrity: sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==}
+    dependencies:
+      '@emotion/memoize': 0.8.0
+      '@emotion/sheet': 1.2.1
+      '@emotion/utils': 1.2.0
+      '@emotion/weak-memoize': 0.3.0
+      stylis: 4.1.3
+    dev: false
+
   /@emotion/css/11.10.0:
     resolution: {integrity: sha512-dH9f+kSCucc8ilMg0MUA1AemabcyzYpe5EKX24F528PJjD7HyIY/VBNJHxfUdc8l400h2ncAjR6yEDu+DBj2cg==}
     peerDependencies:
@@ -1885,6 +1895,10 @@ packages:
     resolution: {integrity: sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==}
     dev: false
 
+  /@emotion/sheet/1.2.1:
+    resolution: {integrity: sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==}
+    dev: false
+
   /@emotion/styled/11.10.4_yiaqs725o7pcd7rteavrnhgj4y:
     resolution: {integrity: sha512-pRl4R8Ez3UXvOPfc2bzIoV8u9P97UedgHS4FPX594ntwEuAMA114wlaHvOK24HB48uqfXiGlYIZYCxVJ1R1ttQ==}
     peerDependencies:
@@ -2930,7 +2944,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.20.7
-      '@emotion/cache': 11.10.3
+      '@emotion/cache': 11.10.5
       '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
       '@emotion/styled': 11.10.4_yiaqs725o7pcd7rteavrnhgj4y
       csstype: 3.1.1
@@ -2999,7 +3013,6 @@ packages:
 
   /@next/env/13.1.0:
     resolution: {integrity: sha512-6iNixFzCndH+Bl4FetQzOMjxCJqg8fs0LAlZviig1K6mIjOWH2m2oPcHcOg1Ta5VCe7Bx5KG1Hs+NrWDUkBt9A==}
-    dev: false
 
   /@next/eslint-plugin-next/12.3.1:
     resolution: {integrity: sha512-sw+lTf6r6P0j+g/n9y4qdWWI2syPqZx+uc0+B/fRENqfR3KpSid6MIKqc9gNwGhJASazEQ5b3w8h4cAET213jw==}
@@ -3022,7 +3035,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-android-arm64/12.3.1:
@@ -3040,7 +3052,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-darwin-arm64/12.3.1:
@@ -3058,7 +3069,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-darwin-x64/12.3.1:
@@ -3076,7 +3086,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-freebsd-x64/12.3.1:
@@ -3094,7 +3103,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm-gnueabihf/12.3.1:
@@ -3112,7 +3120,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm64-gnu/12.3.1:
@@ -3130,7 +3137,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm64-musl/12.3.1:
@@ -3148,7 +3154,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-x64-gnu/12.3.1:
@@ -3166,7 +3171,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-x64-musl/12.3.1:
@@ -3184,7 +3188,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-arm64-msvc/12.3.1:
@@ -3202,7 +3205,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-ia32-msvc/12.3.1:
@@ -3220,7 +3222,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-x64-msvc/12.3.1:
@@ -3238,7 +3239,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@nodelib/fs.scandir/2.1.5:
@@ -3588,7 +3588,7 @@ packages:
       ejs: 3.1.8
       json5: 2.2.1
       magic-string: 0.25.9
-      string.prototype.matchall: 4.0.7
+      string.prototype.matchall: 4.0.8
     dev: true
 
   /@swc/helpers/0.4.11:
@@ -3601,7 +3601,6 @@ packages:
     resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==}
     dependencies:
       tslib: 2.4.0
-    dev: false
 
   /@szmarczak/http-timer/5.0.1:
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
@@ -3690,7 +3689,7 @@ packages:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 18.7.18
+      '@types/node': 18.11.18
     dev: true
 
   /@types/graceful-fs/4.1.6:
@@ -3784,19 +3783,19 @@ packages:
   /@types/react-dom/18.0.6:
     resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==}
     dependencies:
-      '@types/react': 18.0.20
+      '@types/react': 18.0.26
     dev: true
 
   /@types/react-is/17.0.3:
     resolution: {integrity: sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==}
     dependencies:
-      '@types/react': 18.0.20
+      '@types/react': 18.0.26
     dev: false
 
   /@types/react-transition-group/4.4.5:
     resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==}
     dependencies:
-      '@types/react': 18.0.20
+      '@types/react': 18.0.26
     dev: false
 
   /@types/react/18.0.20:
@@ -3814,10 +3813,17 @@ packages:
       csstype: 3.1.1
     dev: true
 
+  /@types/react/18.0.26:
+    resolution: {integrity: sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.2
+      csstype: 3.1.1
+
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/node': 18.7.18
+      '@types/node': 18.11.18
     dev: true
 
   /@types/scheduler/0.16.2:
@@ -4045,7 +4051,6 @@ packages:
   /acorn/8.8.0:
     resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==}
     engines: {node: '>=0.4.0'}
-    hasBin: true
     dev: true
 
   /aggregate-error/3.1.0:
@@ -4181,6 +4186,17 @@ packages:
       is-string: 1.0.7
     dev: true
 
+  /array-includes/3.1.6:
+    resolution: {integrity: sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.21.1
+      get-intrinsic: 1.1.3
+      is-string: 1.0.7
+    dev: true
+
   /array-union/1.0.2:
     resolution: {integrity: sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==}
     engines: {node: '>=0.10.0'}
@@ -4245,6 +4261,11 @@ packages:
     resolution: {integrity: sha512-FPVt5ynkqUAA9gcMZnJHka1XfQgr1WNd/yRfIjmj5WGmjua+u5Hl9hn8M2nU5CNy2bEIcj1ZUwXq7IOHsfZG9w==}
     dev: false
 
+  /available-typed-arrays/1.0.5:
+    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
   /axe-core/4.4.3:
     resolution: {integrity: sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==}
     engines: {node: '>=4'}
@@ -4594,7 +4615,6 @@ packages:
 
   /client-only/0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
 
   /cliui/6.0.0:
     resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
@@ -5069,6 +5089,54 @@ packages:
       unbox-primitive: 1.0.2
     dev: true
 
+  /es-abstract/1.21.1:
+    resolution: {integrity: sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      es-set-tostringtag: 2.0.1
+      es-to-primitive: 1.2.1
+      function-bind: 1.1.1
+      function.prototype.name: 1.1.5
+      get-intrinsic: 1.1.3
+      get-symbol-description: 1.0.0
+      globalthis: 1.0.3
+      gopd: 1.0.1
+      has: 1.0.3
+      has-property-descriptors: 1.0.0
+      has-proto: 1.0.1
+      has-symbols: 1.0.3
+      internal-slot: 1.0.4
+      is-array-buffer: 3.0.1
+      is-callable: 1.2.7
+      is-negative-zero: 2.0.2
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.2
+      is-string: 1.0.7
+      is-typed-array: 1.1.10
+      is-weakref: 1.0.2
+      object-inspect: 1.12.2
+      object-keys: 1.1.1
+      object.assign: 4.1.4
+      regexp.prototype.flags: 1.4.3
+      safe-regex-test: 1.0.0
+      string.prototype.trimend: 1.0.6
+      string.prototype.trimstart: 1.0.6
+      typed-array-length: 1.0.4
+      unbox-primitive: 1.0.2
+      which-typed-array: 1.1.9
+    dev: true
+
+  /es-set-tostringtag/2.0.1:
+    resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.1.3
+      has: 1.0.3
+      has-tostringtag: 1.0.0
+    dev: true
+
   /es-shim-unscopables/1.0.0:
     resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==}
     dependencies:
@@ -5079,7 +5147,7 @@ packages:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      is-callable: 1.2.6
+      is-callable: 1.2.7
       is-date-object: 1.0.5
       is-symbol: 1.0.4
     dev: true
@@ -5908,6 +5976,12 @@ packages:
     resolution: {integrity: sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==}
     dev: false
 
+  /for-each/0.3.3:
+    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+    dependencies:
+      is-callable: 1.2.7
+    dev: true
+
   /form-data-encoder/2.1.4:
     resolution: {integrity: sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==}
     engines: {node: '>= 14.17'}
@@ -5969,7 +6043,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.2
+      es-abstract: 1.21.1
       functions-have-names: 1.2.3
     dev: true
 
@@ -6082,6 +6156,13 @@ packages:
       type-fest: 0.20.2
     dev: true
 
+  /globalthis/1.0.3:
+    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-properties: 1.1.4
+    dev: true
+
   /globby/11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -6105,6 +6186,12 @@ packages:
       pinkie-promise: 2.0.1
     dev: true
 
+  /gopd/1.0.1:
+    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+    dependencies:
+      get-intrinsic: 1.1.3
+    dev: true
+
   /got/12.5.3:
     resolution: {integrity: sha512-8wKnb9MGU8IPGRIo+/ukTy9XLJBwDiCpIf5TVzQ9Cpol50eMTpBq2GAuDsuDIz7hTYmZgMgC1e9ydr6kSDWs3w==}
     engines: {node: '>=14.16'}
@@ -6153,6 +6240,11 @@ packages:
     dependencies:
       get-intrinsic: 1.1.3
 
+  /has-proto/1.0.1:
+    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
   /has-symbols/1.0.3:
     resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
     engines: {node: '>= 0.4'}
@@ -6332,6 +6424,15 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /internal-slot/1.0.4:
+    resolution: {integrity: sha512-tA8URYccNzMo94s5MQZgH8NB/XTa6HsOo0MLfXTKKEnHVVdegzaQoFZ7Jp44bdvLvY2waT5dc+j5ICEswhi7UQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.1.3
+      has: 1.0.3
+      side-channel: 1.0.4
+    dev: true
+
   /invariant/2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
     dependencies:
@@ -6346,6 +6447,14 @@ packages:
       has-tostringtag: 1.0.0
     dev: false
 
+  /is-array-buffer/3.0.1:
+    resolution: {integrity: sha512-ASfLknmY8Xa2XtB4wmbz13Wu202baeA18cJBCeCy0wXUHZF0IPyVEXqKEcd+t2fNSLLL1vC6k7lxZEojNbISXQ==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.1.3
+      is-typed-array: 1.1.10
+    dev: true
+
   /is-arrayish/0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
@@ -6368,6 +6477,11 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /is-callable/1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
   /is-ci/3.0.1:
     resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
     hasBin: true
@@ -6379,6 +6493,12 @@ packages:
     resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==}
     dependencies:
       has: 1.0.3
+    dev: true
+
+  /is-core-module/2.11.0:
+    resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
+    dependencies:
+      has: 1.0.3
 
   /is-date-object/1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -6516,6 +6636,17 @@ packages:
       has-symbols: 1.0.3
     dev: true
 
+  /is-typed-array/1.1.10:
+    resolution: {integrity: sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.0
+    dev: true
+
   /is-weakref/1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
     dependencies:
@@ -6935,7 +7066,7 @@ packages:
       jest-util: 29.3.1
       natural-compare: 1.4.0
       pretty-format: 29.3.1
-      semver: 7.3.7
+      semver: 7.3.8
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6982,7 +7113,7 @@ packages:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 18.7.18
+      '@types/node': 18.11.18
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: true
@@ -6991,7 +7122,7 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 18.7.18
+      '@types/node': 18.11.18
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
@@ -7117,7 +7248,7 @@ packages:
     resolution: {integrity: sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==}
     engines: {node: '>=4.0'}
     dependencies:
-      array-includes: 3.1.5
+      array-includes: 3.1.6
       object.assign: 4.1.4
     dev: true
 
@@ -7536,7 +7667,6 @@ packages:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: false
 
   /natural-compare-lite/1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -7659,7 +7789,6 @@ packages:
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
-    dev: false
 
   /node-domexception/1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
@@ -8010,7 +8139,6 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: false
 
   /preferred-pm/3.0.3:
     resolution: {integrity: sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ==}
@@ -8039,6 +8167,12 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
+  /prettier/2.8.1:
+    resolution: {integrity: sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   /pretty-bytes/5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}
@@ -8180,7 +8314,6 @@ packages:
       loose-envify: 1.4.0
       react: 18.2.0
       scheduler: 0.23.0
-    dev: false
 
   /react-i18next/11.18.6_i18next@21.10.0:
     resolution: {integrity: sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==}
@@ -8277,7 +8410,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       loose-envify: 1.4.0
-    dev: false
 
   /read-pkg-up/7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
@@ -8455,14 +8587,15 @@ packages:
     resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
     hasBin: true
     dependencies:
-      is-core-module: 2.10.0
+      is-core-module: 2.11.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
   /resolve/2.0.0-next.4:
     resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
+    hasBin: true
     dependencies:
-      is-core-module: 2.10.0
+      is-core-module: 2.11.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
     dev: true
@@ -8500,6 +8633,7 @@ packages:
 
   /rimraf/3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    hasBin: true
     dependencies:
       glob: 7.2.3
     dev: true
@@ -8548,6 +8682,14 @@ packages:
   /safe-buffer/5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
+  /safe-regex-test/1.0.0:
+    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.1.3
+      is-regex: 1.1.4
+    dev: true
+
   /safer-buffer/2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -8555,7 +8697,6 @@ packages:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:
       loose-envify: 1.4.0
-    dev: false
 
   /schema-utils/2.7.1:
     resolution: {integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==}
@@ -8593,6 +8734,14 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
+  /semver/7.3.8:
+    resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
   /serialize-javascript/4.0.0:
     resolution: {integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==}
     dependencies:
@@ -8714,7 +8863,6 @@ packages:
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /source-map-support/0.5.13:
     resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
@@ -8841,12 +8989,33 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /string.prototype.matchall/4.0.8:
+    resolution: {integrity: sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.21.1
+      get-intrinsic: 1.1.3
+      has-symbols: 1.0.3
+      internal-slot: 1.0.3
+      regexp.prototype.flags: 1.4.3
+      side-channel: 1.0.4
+    dev: true
+
   /string.prototype.trimend/1.0.5:
     resolution: {integrity: sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==}
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.2
+      es-abstract: 1.21.1
+    dev: true
+
+  /string.prototype.trimend/1.0.6:
+    resolution: {integrity: sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.21.1
     dev: true
 
   /string.prototype.trimstart/1.0.5:
@@ -8854,7 +9023,15 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.2
+      es-abstract: 1.21.1
+    dev: true
+
+  /string.prototype.trimstart/1.0.6:
+    resolution: {integrity: sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.4
+      es-abstract: 1.21.1
     dev: true
 
   /string_decoder/0.10.31:
@@ -8963,12 +9140,15 @@ packages:
     dependencies:
       client-only: 0.0.1
       react: 18.2.0
-    dev: false
 
   /stylis/4.0.13:
     resolution: {integrity: sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==}
     dev: false
 
+  /stylis/4.1.3:
+    resolution: {integrity: sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==}
+    dev: false
+
   /supports-color/5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -9251,6 +9431,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /typed-array-length/1.0.4:
+    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
+    dependencies:
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      is-typed-array: 1.1.10
+    dev: true
+
   /typescript/4.8.3:
     resolution: {integrity: sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==}
     engines: {node: '>=4.2.0'}
@@ -9529,6 +9717,18 @@ packages:
       path-exists: 4.0.0
     dev: true
 
+  /which-typed-array/1.1.9:
+    resolution: {integrity: sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.0
+      is-typed-array: 1.1.10
+    dev: true
+
   /which/1.3.1:
     resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
     hasBin: true
@@ -9539,6 +9739,7 @@ packages:
   /which/2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
+    hasBin: true
     dependencies:
       isexe: 2.0.0
     dev: true