feat: setting page with new design

packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx

@@ -89,7 +89,6 @@ const ContentTitle = styled('h1')({
   lineHeight: '28px',
   fontWeight: 600,
   textAlign: 'center',
-  paddingBottom: '16px',
 });
 
 const StyleTips = styled('div')(() => {
@@ -97,8 +96,8 @@ const StyleTips = styled('div')(() => {
     userSelect: 'none',
     width: '400px',
     margin: 'auto',
-    marginBottom: '24px',
-    marginTop: '16px',
+    marginBottom: '32px',
+    marginTop: '12px',
   };
 });
 

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

@@ -9,7 +9,7 @@ export const EnableWorkspaceButton = () => {
   return (
     <>
       <Button
-        type="primary"
+        type="light"
         shape="circle"
         onClick={async () => {
           setEnableModalOpen(true);

packages/app/src/components/header/styles.ts

@@ -103,7 +103,7 @@ export const StyledSearchArrowWrapper = styled.div(() => {
 
 export const StyledPageListTittleWrapper = styled(StyledTitle)(({ theme }) => {
   return {
-    fontSize: theme.font.sm,
+    fontSize: theme.font.base,
     color: theme.colors.textColor,
     '>svg': {
       fontSize: '20px',

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

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import type { WorkspaceUnit } from '@affine/datacenter';
 import { WorkspaceAvatar as Avatar } from './Avatar';
 
-const useAvatar = (workspaceUnit?: WorkspaceUnit) => {
+const useAvatar = (workspaceUnit: WorkspaceUnit | null) => {
   const [avatarUrl, setAvatarUrl] = useState('');
   const avatarId =
     workspaceUnit?.avatar || workspaceUnit?.blocksuiteWorkspace?.meta.avatar;
@@ -23,7 +23,7 @@ const useAvatar = (workspaceUnit?: WorkspaceUnit) => {
 export const WorkspaceUnitAvatar = ({
   size = 20,
   name,
-  workspaceUnit,
+  workspaceUnit = null,
   style,
 }: {
   size?: number;
@@ -31,7 +31,7 @@ export const WorkspaceUnitAvatar = ({
   workspaceUnit?: WorkspaceUnit | null;
   style?: React.CSSProperties;
 }) => {
-  const avatarUrl = useAvatar(workspaceUnit || undefined);
+  const avatarUrl = useAvatar(workspaceUnit);
   return (
     <Avatar
       size={size}

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

@@ -1,24 +1,16 @@
-import { styled } from '@/styles';
-import { WorkspaceUnit } from '@affine/datacenter';
-import { Trans } from '@affine/i18n';
-export const ExportPageTitleContainer = styled('div')(() => {
-  return {
-    display: 'flex',
+import { useTranslation } from '@affine/i18n';
+import { Wrapper } from '@/ui/layout';
+import { Button } from '@/ui/button';
+
+export const ExportPage = () => {
+  const { t } = useTranslation();
 
-    fontWeight: '500',
-    flex: 1,
-  };
-});
-export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   return (
-    <ExportPageTitleContainer>
-      <Trans i18nKey="Export Workspace">
-        Export Workspace
-        <code style={{ margin: '0 10px' }}>
-          {{ workspace: workspace.name }}
-        </code>
-        Is Comming
-      </Trans>
-    </ExportPageTitleContainer>
+    <>
+      <Wrapper marginBottom="32px"> {t('Export Description')}</Wrapper>
+      <Button type="light" shape="circle" disabled>
+        {t('Export AFFINE backup file (coming soon)')}
+      </Button>
+    </>
   );
 };

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

@@ -1,11 +1,3 @@
-import {
-  StyledButtonContainer,
-  StyledPublishContent,
-  StyledPublishCopyContainer,
-  StyledPublishExplanation,
-  StyledSettingH2,
-  StyledStopPublishContainer,
-} from './style';
 import { useState } from 'react';
 import { Button } from '@/ui/button';
 import Input from '@/ui/input';
@@ -14,6 +6,7 @@ import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
 import { EnableWorkspaceButton } from '../enable-workspace';
+import { Wrapper, Content, FlexWrapper } from '@/ui/layout';
 export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const shareUrl = window.location.host + '/public-workspace/' + workspace.id;
   const { publishWorkspace } = useWorkspaceHelper();
@@ -33,82 +26,64 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
     toast(t('Copied link to clipboard'));
   };
 
+  if (workspace.provider === 'affine') {
+    if (workspace.published) {
+      return (
+        <>
+          <Wrapper marginBottom="32px">{t('Published Description')}</Wrapper>
+
+          <Wrapper marginBottom="12px">
+            <Content weight="500">{t('Share with link')}</Content>
+          </Wrapper>
+          <FlexWrapper>
+            <Input width={582} value={shareUrl} disabled={true}></Input>
+            <Button
+              onClick={copyUrl}
+              type="light"
+              shape="circle"
+              style={{ marginLeft: '24px' }}
+            >
+              {t('Copy Link')}
+            </Button>
+          </FlexWrapper>
+          <Button
+            onClick={async () => {
+              setLoaded(true);
+              await togglePublic(false);
+            }}
+            loading={false}
+            type="danger"
+            shape="circle"
+            style={{ marginTop: '38px' }}
+          >
+            {t('Stop publishing')}
+          </Button>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <Wrapper marginBottom="32px">{t('Publishing Description')}</Wrapper>
+        <Button
+          onClick={async () => {
+            setLoaded(true);
+            await togglePublic(true);
+          }}
+          loading={loaded}
+          type="light"
+          shape="circle"
+        >
+          {t('Publish to web')}
+        </Button>
+      </>
+    );
+  }
+
   return (
     <>
-      {workspace.provider === 'affine' ? (
-        <div
-          style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-        >
-          <StyledPublishContent>
-            {workspace.published ? (
-              <>
-                <StyledPublishExplanation>
-                  {t('Published Description')}
-                </StyledPublishExplanation>
-
-                <StyledPublishCopyContainer>
-                  <StyledSettingH2 marginBottom={16}>
-                    {t('Share with link')}
-                  </StyledSettingH2>
-                  <Input width={500} value={shareUrl} disabled={true}></Input>
-                  <StyledButtonContainer>
-                    <Button onClick={copyUrl} type="primary" shape="circle">
-                      {t('Copy Link')}
-                    </Button>
-                  </StyledButtonContainer>
-                </StyledPublishCopyContainer>
-              </>
-            ) : (
-              <StyledPublishExplanation>
-                {t('Publishing Description')}
-                <div style={{ marginTop: '64px' }}>
-                  <Button
-                    onClick={async () => {
-                      setLoaded(true);
-                      await togglePublic(true);
-                    }}
-                    loading={loaded}
-                    type="primary"
-                    shape="circle"
-                  >
-                    {t('Publish to web')}
-                  </Button>
-                </div>
-              </StyledPublishExplanation>
-            )}
-          </StyledPublishContent>
-
-          {workspace.published ? (
-            <StyledStopPublishContainer>
-              <Button
-                onClick={async () => {
-                  setLoaded(true);
-                  await togglePublic(false);
-                }}
-                loading={false}
-                type="danger"
-                shape="circle"
-              >
-                {t('Stop publishing')}
-              </Button>
-            </StyledStopPublishContainer>
-          ) : (
-            <></>
-          )}
-        </div>
-      ) : (
-        <StyledPublishContent>
-          <>
-            <StyledPublishExplanation>
-              {t('Publishing')}
-            </StyledPublishExplanation>
-
-            <div style={{ marginTop: '72px' }}>
-              <EnableWorkspaceButton></EnableWorkspaceButton>
-            </div>
-          </>
-        </StyledPublishContent>
-      )}
+      <Wrapper marginBottom="32px">{t('Publishing')}</Wrapper>
+      <EnableWorkspaceButton />
     </>
   );
 };

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

@@ -1,97 +1,106 @@
 import {
-  StyledButtonContainer,
-  StyledPublishContent,
-  StyledPublishExplanation,
   StyledWorkspaceName,
   StyledEmail,
+  // StyledDownloadCard,
+  // StyledDownloadCardDes,
 } from './style';
-// import { DownloadIcon } from '@blocksuite/icons';
-// import { Button } from '@/ui/button';
-// import { Menu, MenuItem } from '@/ui/menu';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useTranslation, Trans } from '@affine/i18n';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { EnableWorkspaceButton } from '../enable-workspace';
 import { useAppState } from '@/providers/app-state-provider';
+import { FlexWrapper, Content, Wrapper } from '@/ui/layout';
+
+// // FIXME: Temporary solution, since the @blocksuite/icons is broken
+// const ActiveIcon = () => {
+//   return (
+//     <svg
+//       width="24"
+//       height="24"
+//       viewBox="0 0 24 24"
+//       fill="none"
+//       xmlns="http://www.w3.org/2000/svg"
+//     >
+//       <path
+//         fillRule="evenodd"
+//         clipRule="evenodd"
+//         d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12Z"
+//         fill="#6880FF"
+//       />
+//       <path
+//         fillRule="evenodd"
+//         clipRule="evenodd"
+//         d="M16.5068 8.44714C16.8121 8.72703 16.8328 9.20146 16.5529 9.5068L11.0529 15.5068C10.9146 15.6576 10.7208 15.7454 10.5163 15.7498C10.3118 15.7543 10.1143 15.675 9.96967 15.5303L7.46967 13.0303C7.17678 12.7374 7.17678 12.2626 7.46967 11.9697C7.76256 11.6768 8.23744 11.6768 8.53033 11.9697L10.4764 13.9158L15.4471 8.49321C15.727 8.18787 16.2015 8.16724 16.5068 8.44714Z"
+//         fill="white"
+//       />
+//     </svg>
+//   );
+// };
+
 export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const { t } = useTranslation();
   const { user } = useAppState();
+  if (workspace.provider === 'local') {
+    return (
+      <>
+        <FlexWrapper alignItems="center" style={{ marginBottom: '12px' }}>
+          <WorkspaceUnitAvatar
+            size={32}
+            name={workspace.name}
+            workspaceUnit={workspace}
+            style={{ marginRight: '12px' }}
+          />
+          <StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
+          <Content weight={500}>{t('is a Local Workspace')}</Content>
+        </FlexWrapper>
+        <p>{t('Local Workspace Description')}</p>
+        <Wrapper marginTop="32px">
+          <EnableWorkspaceButton />
+        </Wrapper>
+      </>
+    );
+  }
   return (
-    <div>
-      <StyledPublishContent>
-        {workspace.provider === 'local' ? (
-          <>
-            <StyledPublishExplanation>
-              <WorkspaceUnitAvatar
-                size={32}
-                name={workspace.name}
-                workspaceUnit={workspace}
-                style={{ marginRight: '12px' }}
-              />
-              <StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
-              <span>{t('is a Local Workspace')}</span>
-            </StyledPublishExplanation>
-            <div>{t('Local Workspace Description')}</div>
-            <StyledButtonContainer>
-              <EnableWorkspaceButton></EnableWorkspaceButton>
-            </StyledButtonContainer>
-          </>
-        ) : (
-          <>
-            <StyledPublishExplanation>
-              <WorkspaceUnitAvatar
-                size={32}
-                name={workspace.name}
-                workspaceUnit={workspace}
-                style={{ marginRight: '12px' }}
-              />
-              <StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
-              <span>{t('is a Cloud Workspace')}</span>
-            </StyledPublishExplanation>
-            <div>
-              <Trans i18nKey="Cloud Workspace Description">
-                All data will be synchronised and saved to the AFFiNE account
-                <StyledEmail>
-                  {{
-                    email: '{' + user?.email + '}.',
-                  }}
-                </StyledEmail>
-              </Trans>
-            </div>
-            {/* TODO: will finish the feature next version  */}
-            {/* <StyledButtonContainer>
-              <Menu
-                content={
-                  <>
-                    <MenuItem
-                      onClick={() => {
-                        // deleteMember(workspace.id, 0);
-                      }}
-                      icon={<DownloadIcon />}
-                    >
-                      {t('Download data', { CoreOrAll: t('core') })}
-                    </MenuItem>
-                    <MenuItem
-                      onClick={() => {
-                        // deleteMember(workspace.id, 0);
-                      }}
-                      icon={<DownloadIcon />}
-                    >
-                      {t('Download data', { CoreOrAll: t('all') })}
-                    </MenuItem>
-                  </>
-                }
-                placement="bottom-end"
-                disablePortal={true}
-              >
-                <Button type="primary">
-                  {t('Download data', { CoreOrAll: '' })}
-                </Button>
-              </Menu>
-            </StyledButtonContainer> */}
-          </>
-        )}
-      </StyledPublishContent>
-    </div>
+    <>
+      <FlexWrapper alignItems="center" style={{ marginBottom: '12px' }}>
+        <WorkspaceUnitAvatar
+          size={32}
+          name={workspace.name}
+          workspaceUnit={workspace}
+          style={{ marginRight: '12px' }}
+        />
+        <StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
+        <Content weight={500}>{t('is a Cloud Workspace')}</Content>
+      </FlexWrapper>
+      <Trans i18nKey="Cloud Workspace Description">
+        All data will be synchronised and saved to the AFFiNE account
+        <StyledEmail>
+          {{
+            email: '{' + user?.email + '}.',
+          }}
+        </StyledEmail>
+      </Trans>
+
+      {/*<Wrapper marginBottom="12px" marginTop="32px">*/}
+      {/*  <Content weight="500">{t('Data sync mode')}</Content>*/}
+      {/*</Wrapper>*/}
+      {/*<FlexWrapper>*/}
+      {/*  <StyledDownloadCard>*/}
+      {/*    <ActiveIcon />*/}
+      {/*    <Wrapper>{t('Download all data')}</Wrapper>*/}
+      {/*    <StyledDownloadCardDes>*/}
+      {/*      {t('It takes up more space on your device.')}*/}
+      {/*    </StyledDownloadCardDes>*/}
+      {/*  </StyledDownloadCard>*/}
+
+      {/*  <StyledDownloadCard active>*/}
+      {/*    <ActiveIcon />*/}
+      {/*    <Wrapper>{t('Download core data')}</Wrapper>*/}
+      {/*    <StyledDownloadCardDes>*/}
+      {/*      {t('It takes up little space on your device.')}*/}
+      {/*    </StyledDownloadCardDes>*/}
+      {/*  </StyledDownloadCard>*/}
+      {/*</FlexWrapper>*/}
+    </>
   );
 };

packages/app/src/components/workspace-setting/general/General.tsx

@@ -1,23 +1,13 @@
-import {
-  StyledDeleteButtonContainer,
-  // StyledSettingAvatar,
-  StyledSettingAvatarContent,
-  StyledSettingInputContainer,
-  StyledDoneButtonContainer,
-  StyledInput,
-  StyledProviderInfo,
-  StyleGeneral,
-  StyledAvatar,
-} from './style';
-import { StyledSettingH2 } from '../style';
+import { StyledInput, StyledProviderInfo, StyledAvatar } from './style';
+import { StyledSettingKey, StyledRow } from '../style';
+import { FlexWrapper, Content } from '@/ui/layout';
 
 import { useState } from 'react';
 import { Button } from '@/ui/button';
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
-import { DoneIcon, UsersIcon } from '@blocksuite/icons';
-// import { Upload } from '@/components/file-upload';
+import { UsersIcon } from '@blocksuite/icons';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
@@ -33,9 +23,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const { updateWorkspace } = useWorkspaceHelper();
   const { t } = useTranslation();
 
-  const handleChangeWorkSpaceName = (newName: string) => {
-    setWorkspaceName(newName);
-  };
   const handleUpdateWorkspaceName = () => {
     currentWorkspace &&
       updateWorkspace({ name: workspaceName }, currentWorkspace);
@@ -47,72 +34,93 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
       (await updateWorkspace({ avatarBlob: blob }, currentWorkspace));
   };
 
-  return workspace ? (
-    <StyleGeneral>
-      <div style={{ flex: 1, overflow: 'auto' }}>
-        <StyledSettingH2>{t('Workspace Avatar')}</StyledSettingH2>
-        <StyledSettingAvatarContent>
-          <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"
-          fileChange={fileChange}
-        >
-          <Button loading={uploading}>{t('Upload')}</Button>
-        </Upload> */}
-          {/* TODO: add upload logic */}
-        </StyledSettingAvatarContent>
-        <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
-        <StyledSettingInputContainer>
+  if (!workspace) {
+    return null;
+  }
+
+  return (
+    <>
+      <StyledRow>
+        <StyledSettingKey>{t('Workspace Avatar')}</StyledSettingKey>
+        <StyledAvatar>
+          <Upload
+            accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
+            fileChange={fileChange}
+          >
+            <>
+              <div className="camera-icon">
+                <CameraIcon></CameraIcon>
+              </div>
+              <WorkspaceUnitAvatar
+                size={72}
+                name={workspace.name}
+                workspaceUnit={workspace}
+              />
+            </>
+          </Upload>
+        </StyledAvatar>
+      </StyledRow>
+
+      <StyledRow>
+        <StyledSettingKey>{t('Workspace Name')}</StyledSettingKey>
+        <FlexWrapper>
           <StyledInput
             width={284}
-            height={32}
+            height={38}
             value={workspaceName}
             placeholder={t('Workspace Name')}
             maxLength={15}
             minLength={0}
             disabled={!isOwner}
-            onChange={handleChangeWorkSpaceName}
+            onChange={newName => {
+              setWorkspaceName(newName);
+            }}
           ></StyledInput>
-          {isOwner ? (
-            <StyledDoneButtonContainer
-              onClick={() => {
-                handleUpdateWorkspaceName();
-              }}
-            >
-              <DoneIcon />
-            </StyledDoneButtonContainer>
-          ) : null}
-        </StyledSettingInputContainer>
-        <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
-        <StyledSettingInputContainer>
+          {isOwner && (
+            <>
+              <Button
+                type="default"
+                shape="circle"
+                style={{ marginLeft: '24px' }}
+                onClick={() => {
+                  setWorkspaceName(workspace.name);
+                }}
+              >
+                {t('Cancel')}
+              </Button>
+              <Button
+                type="light"
+                shape="circle"
+                style={{ marginLeft: '24px' }}
+                onClick={() => {
+                  handleUpdateWorkspaceName();
+                }}
+              >
+                {t('Confirm')}
+              </Button>
+            </>
+          )}
+        </FlexWrapper>
+      </StyledRow>
+
+      <StyledRow>
+        <StyledSettingKey>{t('Workspace Type')}</StyledSettingKey>
+        <FlexWrapper>
           {isOwner ? (
             currentWorkspace?.provider === 'local' ? (
-              <StyledProviderInfo>
+              <FlexWrapper alignItems="center">
                 <LocalIcon />
-                {t('Local Workspace')}
-              </StyledProviderInfo>
+                <Content style={{ marginLeft: '15px' }}>
+                  {t('Local Workspace')}
+                </Content>
+              </FlexWrapper>
             ) : (
-              <StyledProviderInfo>
+              <FlexWrapper alignItems="center">
                 <CloudIcon />
-                {t('Available Offline')}
-              </StyledProviderInfo>
+                <Content style={{ marginLeft: '15px' }}>
+                  {t('Available Offline')}
+                </Content>
+              </FlexWrapper>
             )
           ) : (
             <StyledProviderInfo>
@@ -120,10 +128,11 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
               {t('Joined Workspace')}
             </StyledProviderInfo>
           )}
-        </StyledSettingInputContainer>
-      </div>
+        </FlexWrapper>
+      </StyledRow>
 
-      <StyledDeleteButtonContainer>
+      <StyledRow>
+        <StyledSettingKey> {t('Delete Workspace')}</StyledSettingKey>
         {isOwner ? (
           <>
             <Button
@@ -163,7 +172,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             />
           </>
         )}
-      </StyledDeleteButtonContainer>
-    </StyleGeneral>
-  ) : null;
+      </StyledRow>
+    </>
+  );
 };

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

@@ -1,40 +1,6 @@
-import { displayFlex, styled } from '@/styles';
-import { MuiAvatar } from '@/ui/mui';
-import IconButton from '@/ui/button/IconButton';
+import { styled } from '@/styles';
 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 {
-    textAlign: 'center',
-  };
-});
-export const StyleGeneral = styled('div')(() => {
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-  };
-});
-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}`,
@@ -43,24 +9,9 @@ export const StyledInput = styled(Input)(({ theme }) => {
   };
 });
 
-export const StyledSettingAvatarContent = styled('div')(() => {
-  return {
-    marginTop: '12px',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: '72px',
-  };
-});
-
-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',
@@ -71,7 +22,6 @@ export const StyledProviderInfo = styled('p')(({ theme }) => {
 export const StyledAvatar = styled('div')(() => {
   return {
     position: 'relative',
-    marginRight: '20px',
     cursor: 'pointer',
     ':hover': {
       '.camera-icon': {

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

@@ -10,10 +10,9 @@ import {
   StyledMemberRoleContainer,
   StyledMemberTitleContainer,
   StyledMoreVerticalButton,
-  StyledPublishExplanation,
-  StyledMemberWarp,
   StyledMemberContainer,
 } from './style';
+import { Wrapper } from '@/ui/layout';
 import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
 import { useState } from 'react';
 import { Button, IconButton } from '@/ui/button';
@@ -166,11 +165,14 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   }
 
   return (
-    <StyledMemberWarp>
-      {t('Collaboration Description')}
-      <StyledPublishExplanation>
-        <EnableWorkspaceButton></EnableWorkspaceButton>
-      </StyledPublishExplanation>
-    </StyledMemberWarp>
+    <Wrapper
+      style={{
+        fontWeight: '500',
+        fontSize: '18px',
+      }}
+    >
+      <Wrapper marginBottom="32px">{t('Collaboration Description')}</Wrapper>
+      <EnableWorkspaceButton />
+    </Wrapper>
   );
 };

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

@@ -97,24 +97,3 @@ export const StyledMoreVerticalButton = styled('button')(() => {
     paddingRight: '48px',
   };
 });
-
-export const StyledPublishExplanation = styled('div')(() => {
-  return {
-    paddingRight: '48px',
-    fontWeight: '500',
-    fontSize: '18px',
-    lineHeight: '26px',
-    flex: 1,
-    marginTop: '64px',
-  };
-});
-
-export const StyledMemberWarp = styled('div')(() => {
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '0 0 48px 0',
-    fontWeight: '500',
-    fontSize: '18px',
-  };
-});

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

@@ -1,5 +1,5 @@
 import { styled } from '@/styles';
-
+import { FlexWrapper } from '@/ui/layout';
 export const StyledSettingContainer = styled('div')(() => {
   return {
     display: 'flex',
@@ -13,41 +13,19 @@ export const StyledSettingContainer = styled('div')(() => {
 export const StyledSettingSidebar = styled('div')(() => {
   {
     return {
-      // height: '48px',
-      marginTop: '50px',
+      marginTop: '48px',
     };
   }
 });
 
 export const StyledSettingContent = styled('div')(() => {
   return {
-    overflow: 'hidden',
+    overflow: 'auto',
     flex: 1,
     paddingTop: '48px',
   };
 });
 
-export const StyledSetting = styled('div')(({ theme }) => {
-  {
-    return {
-      width: '236px',
-      background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
-    };
-  }
-});
-
-export const StyledSettingSidebarHeader = styled('div')(() => {
-  {
-    return {
-      fontWeight: '500',
-      fontSize: '18px',
-      lineHeight: '26px',
-      textAlign: 'left',
-      marginTop: '37px',
-    };
-  }
-});
-
 export const StyledSettingTabContainer = styled('ul')(() => {
   {
     return {
@@ -65,7 +43,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
         height: '34px',
         color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
         fontWeight: '500',
-        fontSize: theme.font.base,
+        fontSize: theme.font.h6,
         lineHeight: theme.font.lineHeight,
         cursor: 'pointer',
         transition: 'all 0.15s ease',
@@ -78,76 +56,60 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
   }
 );
 
-export const StyledSettingTagIconContainer = styled('div')(() => {
+export const StyledSettingKey = styled.div(({ theme }) => {
   return {
-    display: 'flex',
-    alignItems: 'center',
-  };
-});
-
-export const StyledSettingH2 = styled('h2')<{
-  marginTop?: number;
-  marginBottom?: number;
-}>(({ marginTop, marginBottom, theme }) => {
-  return {
-    // fontWeight: '500',
+    width: '140px',
+    textAlign: 'right',
     fontSize: theme.font.base,
-    lineHeight: theme.font.lineHeight,
-    marginTop: marginTop ? `${marginTop}px` : '0px',
-    marginBottom: marginBottom ? `${marginBottom}px` : '0px',
+    fontWeight: 500,
+    marginRight: '56px',
+    flexShrink: 0,
+  };
+});
+export const StyledRow = styled(FlexWrapper)(() => {
+  return {
+    marginBottom: '32px',
   };
 });
 
-export const StyledPublishExplanation = styled('div')(() => {
-  return {
-    paddingRight: '48px',
-    // fontWeight: '500',
-    marginBottom: '22px',
-  };
-});
-export const StyledWorkspaceName = styled('span')(() => {
+export const StyledWorkspaceName = styled('span')(({ theme }) => {
   return {
     fontWeight: '400',
-  };
-});
-export const StyledWorkspaceType = styled('span')(() => {
-  return {
-    // fontWeight: '500',
+    fontSize: theme.font.h6,
   };
 });
 
-export const StyledPublishCopyContainer = styled('div')(() => {
-  return {
-    marginTop: '12px',
-    marginBottom: '20px',
-    paddingTop: '20px',
-    flex: 1,
-  };
-});
-export const StyledStopPublishContainer = styled('div')(() => {
-  return {
-    textAlign: 'center',
-  };
-});
-
-export const StyledButtonContainer = styled('div')(() => {
-  return {
-    marginTop: '64px',
-  };
-});
 export const StyledEmail = styled('span')(() => {
   return {
     color: '#E8178A',
   };
 });
 
-export const StyledPublishContent = styled('div')(({ theme }) => {
-  return {
-    display: 'flex',
-    fontWeight: '500',
-    flexDirection: 'column',
-    fontSize: theme.font.base,
-    lineHeight: theme.font.lineHeight,
-    flex: 1,
-  };
-});
+// export const StyledDownloadCard = styled.div<{ active?: boolean }>(
+//   ({ theme, active }) => {
+//     return {
+//       width: '240px',
+//       height: '86px',
+//       border: '1px solid',
+//       borderColor: active
+//         ? theme.colors.primaryColor
+//         : theme.colors.borderColor,
+//       borderRadius: '10px',
+//       padding: '8px 12px',
+//       position: 'relative',
+//       ':not(:last-of-type)': {
+//         marginRight: '24px',
+//       },
+//       svg: {
+//         display: active ? 'block' : 'none',
+//         ...positionAbsolute({ top: '-12px', right: '-12px' }),
+//       },
+//     };
+//   }
+// );
+// export const StyledDownloadCardDes = styled.div(({ theme }) => {
+//   return {
+//     fontSize: theme.font.sm,
+//     color: theme.colors.iconColor,
+//   };
+// });

packages/app/src/pages/affine.tsx

@@ -36,7 +36,6 @@ const Affine = () => {
         <div>hi</div>
       </Modal>
       <Loading />
-
       <Button
         icon={<FavouritedIcon />}
         onClick={() => {
@@ -48,13 +47,15 @@ const Affine = () => {
       <Button icon={<FavouritedIcon />} type={'primary'}>
         click me!
       </Button>
+      <Button icon={<FavouritedIcon />} type={'light'}>
+        click me!
+      </Button>
       <Button icon={<FavouritedIcon />} type={'warning'}>
         click me!
       </Button>
       <Button icon={<FavouritedIcon />} type={'danger'}>
         click me!
       </Button>
-
       <Button icon={<FavouritedIcon />}></Button>
       <Button icon={<FavouritedIcon />} shape="round"></Button>
       <Button loading={true}></Button>

packages/app/src/pages/workspace/[workspaceId]/setting.tsx

@@ -11,6 +11,7 @@ import {
   MembersPage,
   PublishPage,
   SyncPage,
+  ExportPage,
 } from '@/components/workspace-setting';
 import { SettingsIcon } from '@blocksuite/icons';
 import { useAppState } from '@/providers/app-state-provider';
@@ -43,10 +44,10 @@ const useTabMap = () => {
       panelRender: workspace => <PublishPage workspace={workspace} />,
     },
     // TODO: next version will finish this feature
-    // {
-    //   name: t('Export'),
-    //   panelRender: workspace => <ExportPage workspace={workspace} />,
-    // },
+    {
+      name: t('Export'),
+      panelRender: workspace => <ExportPage workspace={workspace} />,
+    },
   ];
   const [activeTab, setActiveTab] = useState<string>(tabMap[0].name);
   const handleTabChange = (tab: string) => {

packages/app/src/styles/theme.ts

@@ -15,7 +15,7 @@ export const getLightTheme = (
       primaryColor: '#6880FF',
 
       pageBackground: '#fff',
-      hoverBackground: '#F1F1F4',
+      hoverBackground: '#F1F3FF',
       innerHoverBackground: '#E9E9EC',
       popoverBackground: '#fff',
       tooltipBackground: '#6880FF',
@@ -38,9 +38,9 @@ export const getLightTheme = (
       tooltipColor: '#fff',
       codeColor: '#517ea6',
       quoteColor: '#4C6275',
-      placeHolderColor: '#555770',
+      placeHolderColor: '#888A9E',
       selectedColor: 'rgba(104, 128, 255, 0.1)',
-      borderColor: '#555770',
+      borderColor: '#E3E2E4',
       disableColor: '#555770',
       warningColor: '#906616',
       errorColor: '#EB4335',
@@ -56,7 +56,7 @@ export const getLightTheme = (
       h6: '18px',
       base: '16px',
       xs: '14px',
-      sm: '14px',
+      sm: '12px',
 
       family: `Avenir Next, Poppins, ${basicFontFamily}`,
       numberFamily: `Roboto Mono, ${basicFontFamily}`,

packages/app/src/ui/button/interface.ts

@@ -19,7 +19,7 @@ export type ButtonProps = PropsWithChildren &
     icon?: ReactElement;
     iconPosition?: 'start' | 'end';
     shape?: 'default' | 'round' | 'circle';
-    type?: 'primary' | 'warning' | 'danger' | 'default';
+    type?: 'primary' | 'light' | 'warning' | 'danger' | 'default';
     bold?: boolean;
     loading?: boolean;
     noBorder?: boolean;

packages/app/src/ui/button/styles.ts

@@ -213,7 +213,7 @@ export const StyledButton = styled('button', {
       },
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      ...getButtonColors(theme, type, {
+      ...getButtonColors(theme, type, disabled, {
         hoverBackground,
         hoverColor,
         hoverStyle,

packages/app/src/ui/button/utils.ts

@@ -40,6 +40,7 @@ export const getSize = (
 export const getButtonColors = (
   theme: AffineTheme,
   type: ButtonProps['type'],
+  disabled: boolean,
   extend?: {
     hoverBackground: ButtonProps['hoverBackground'];
     hoverColor: ButtonProps['hoverColor'];
@@ -56,6 +57,18 @@ export const getButtonColors = (
           color: '#fff',
         },
       };
+    case 'light':
+      return {
+        background: theme.colors.hoverBackground,
+        color: disabled ? theme.colors.disableColor : theme.colors.primaryColor,
+        borderColor: theme.colors.hoverBackground,
+        '.affine-button-icon': {
+          borderColor: theme.colors.primaryColor,
+        },
+        ':hover': {
+          borderColor: theme.colors.primaryColor,
+        },
+      };
     case 'warning':
       return {
         background: theme.colors.warningBackground,

packages/app/src/ui/layout/Wrapper.tsx

@@ -6,7 +6,15 @@ export type WrapperProps = {
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
   padding?: CSSProperties['padding'];
+  paddingTop?: CSSProperties['paddingTop'];
+  paddingRight?: CSSProperties['paddingRight'];
+  paddingLeft?: CSSProperties['paddingLeft'];
+  paddingBottom?: CSSProperties['paddingBottom'];
   margin?: CSSProperties['margin'];
+  marginTop?: CSSProperties['marginTop'];
+  marginLeft?: CSSProperties['marginLeft'];
+  marginRight?: CSSProperties['marginRight'];
+  marginBottom?: CSSProperties['marginBottom'];
 };
 
 export type FlexWrapperProps = {
@@ -22,17 +30,55 @@ export type FlexWrapperProps = {
 // Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it.
 export const Wrapper = styled('div', {
   shouldForwardProp: prop => {
-    return !['display', 'width', 'height', 'padding', 'margin'].includes(prop);
+    return ![
+      'display',
+      'width',
+      'height',
+      'padding',
+      'margin',
+      'paddingTop',
+      'paddingRight',
+      'paddingLeft',
+      'paddingBottom',
+      'marginTop',
+      'marginLeft',
+      'marginRight',
+      'marginBottom',
+    ].includes(prop);
   },
-})<WrapperProps>(({ display, width, height, padding, margin }) => {
-  return {
+})<WrapperProps>(
+  ({
     display,
     width,
     height,
     padding,
     margin,
-  };
-});
+    paddingTop,
+    paddingRight,
+    paddingLeft,
+    paddingBottom,
+    marginTop,
+    marginLeft,
+    marginRight,
+    marginBottom,
+  }) => {
+    return {
+      display,
+      width,
+      height,
+      padding,
+      margin,
+      paddingTop,
+      paddingRight,
+      paddingLeft,
+      paddingBottom,
+      marginTop,
+      marginLeft,
+      marginRight,
+      marginBottom,
+    };
+  }
+);
 
 export const FlexWrapper = styled(Wrapper, {
   shouldForwardProp: prop => {