diff --git a/apps/web/public/imgs/invite-error.svg b/apps/web/public/imgs/invite-error.svg new file mode 100644 index 000000000..8fb22e4ae --- /dev/null +++ b/apps/web/public/imgs/invite-error.svg @@ -0,0 +1,123 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/public/imgs/invite-success.svg b/apps/web/public/imgs/invite-success.svg new file mode 100644 index 000000000..93c3f8f27 --- /dev/null +++ b/apps/web/public/imgs/invite-success.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/public/variable.css b/apps/web/public/variable.css deleted file mode 100644 index bba6bedc4..000000000 --- a/apps/web/public/variable.css +++ /dev/null @@ -1,22 +0,0 @@ -/*:root {*/ -/* --affine-primary-color: #3a4c5c;*/ -/* --affine-muted-color: #a6abb7;*/ -/* --affine-highlight-color: #6880ff;*/ -/* --affine-placeholder-color: #c7c7c7;*/ -/* --affine-selected-color: rgba(104, 128, 255, 0.1);*/ - -/* --affine-font-family: Avenir Next, apple-system, BlinkMacSystemFont,*/ -/* Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,*/ -/* Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,*/ -/* Segoe UI Symbol, Noto Color Emoji;*/ - -/* --affine-font-family2: Roboto Mono, apple-system, BlinkMacSystemFont,*/ -/* Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,*/ -/* Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,*/ -/* Segoe UI Symbol, Noto Color Emoji;*/ -/*}*/ - -/*:root {*/ -/* --page-background-color: #fff;*/ -/* --page-text-color: #3a4c5c;*/ -/*}*/ diff --git a/apps/web/src/components/404/index.tsx b/apps/web/src/components/404/index.tsx index 270c7ed78..c4b0aa31e 100644 --- a/apps/web/src/components/404/index.tsx +++ b/apps/web/src/components/404/index.tsx @@ -1,26 +1,28 @@ import { Button } from '@affine/component'; import { useTranslation } from '@affine/i18n'; +import Image from 'next/image'; import { useRouter } from 'next/router'; -import { NotFoundTitle, PageContainer } from './styles'; +import ErrorImg from '../../../public/imgs/invite-error.svg'; +import { StyledContainer } from './styles'; + export const NotfoundPage = () => { const { t } = useTranslation(); const router = useRouter(); return ( - - - {t('404 - Page Not Found')} -

- -

- - + + 404 + +

{t('404 - Page Not Found')}

+ + ); }; diff --git a/apps/web/src/components/404/styles.ts b/apps/web/src/components/404/styles.ts index 4e0bd9b64..c69fe45e7 100644 --- a/apps/web/src/components/404/styles.ts +++ b/apps/web/src/components/404/styles.ts @@ -1,21 +1,19 @@ -import { styled } from '@affine/component'; +import { displayFlex, styled } from '@affine/component'; -export const PageContainer = styled('div')(({ theme }) => { +export const StyledContainer = styled.div(() => { return { - width: '100%', - height: 'calc(100vh)', - backgroundColor: theme.colors.pageBackground, - }; -}); - -export const NotFoundTitle = styled('h1')(({ theme }) => { - return { - position: 'relative', - top: 'calc(50% - 100px)', - height: '100px', - fontSize: '60px', - lineHeight: '100px', - color: theme.colors.textColor, - textAlign: 'center', + ...displayFlex('center', 'center'), + flexDirection: 'column', + height: '100vh', + + img: { + width: '360px', + height: '270px', + }, + p: { + fontSize: '22px', + fontWeight: 600, + margin: '24px 0', + }, }; }); diff --git a/apps/web/src/components/page-list/Empty.tsx b/apps/web/src/components/page-list/Empty.tsx index 2cea45390..16008e54d 100644 --- a/apps/web/src/components/page-list/Empty.tsx +++ b/apps/web/src/components/page-list/Empty.tsx @@ -4,16 +4,22 @@ import React from 'react'; export const PageListEmpty = (props: { listType?: string }) => { const { listType } = props; const { t } = useTranslation(); + + const getEmptyDescription = () => { + if (listType === 'all') { + return t('emptyAllPages'); + } + if (listType === 'favorite') { + return t('emptyFavorite'); + } + if (listType === 'trash') { + return t('emptyTrash'); + } + }; + return ( -
- - {listType === 'all' &&

{t('emptyAllPages')}

} - {listType === 'favorite' &&

{t('emptyFavorite')}

} - {listType === 'trash' &&

{t('emptyTrash')}

} +
+
); }; diff --git a/apps/web/src/components/quick-search/NoResultSVG.tsx b/apps/web/src/components/quick-search/NoResultSVG.tsx index 16aabb73d..aa546549a 100644 --- a/apps/web/src/components/quick-search/NoResultSVG.tsx +++ b/apps/web/src/components/quick-search/NoResultSVG.tsx @@ -1,95 +1,72 @@ export const NoResultSVG = () => { return ( - + - - - - - - - - + + + + + ); }; diff --git a/apps/web/src/components/quick-search/style.ts b/apps/web/src/components/quick-search/style.ts index 86870c5b3..6e39cd0fa 100644 --- a/apps/web/src/components/quick-search/style.ts +++ b/apps/web/src/components/quick-search/style.ts @@ -49,7 +49,7 @@ export const StyledNotFound = styled('div')(({ theme }) => { '>svg': { marginTop: '10px', - fontSize: '150px', + height: '200px', }, }; }); diff --git a/apps/web/src/components/workspace-setting/ExportPage.tsx b/apps/web/src/components/workspace-setting/ExportPage.tsx index 0df5a9bad..a9f18c013 100644 --- a/apps/web/src/components/workspace-setting/ExportPage.tsx +++ b/apps/web/src/components/workspace-setting/ExportPage.tsx @@ -7,7 +7,7 @@ export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => { console.log(workspace); return ( <> - {t('Export Description')} + {t('Export Description')} diff --git a/apps/web/src/components/workspace-setting/PublishPage.tsx b/apps/web/src/components/workspace-setting/PublishPage.tsx index 88c8975e5..982ad5ade 100644 --- a/apps/web/src/components/workspace-setting/PublishPage.tsx +++ b/apps/web/src/components/workspace-setting/PublishPage.tsx @@ -32,7 +32,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { if (workspace.published) { return ( <> - {t('Published Description')} + {t('Published Description')} {t('Share with link')} @@ -66,7 +66,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { return ( <> - {t('Publishing Description')} + {t('Publishing Description')} - { - setIsInviteModalShow(false); - }} - onInviteSuccess={() => { - setIsInviteModalShow(false); - // refreshMembers(); - }} - workspaceId={workspace.id} - open={isInviteModalShow} - > - - + + + + + {user.name} + + {member.user.email} + + + + + {member.accepted + ? member.type !== 99 + ? t('Member') + : t('Owner') + : t('Pending')} + + + {member.type === 99 ? ( + <> + ) : ( + + { + // FIXME: remove ignore + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + await removeMember(member.id); + toast( + t('Member has been removed', { + name: user.name, + }) + ); + }} + icon={} + > + {t('Remove from workspace')} + + + } + placement="bottom-end" + disablePortal={true} + > + + + + + )} + + + ); + })} + + )} + + + + + + { + setIsInviteModalShow(false); + }} + onInviteSuccess={() => { + setIsInviteModalShow(false); + // refreshMembers(); + }} + workspaceId={workspace.id} + open={isInviteModalShow} + > + ); } diff --git a/apps/web/src/components/workspace-setting/member/style.ts b/apps/web/src/components/workspace-setting/member/style.ts index b1d350205..7f31e2ffa 100644 --- a/apps/web/src/components/workspace-setting/member/style.ts +++ b/apps/web/src/components/workspace-setting/member/style.ts @@ -5,7 +5,7 @@ export const StyledMemberTitleContainer = styled('li')(() => { return { display: 'flex', fontWeight: '500', - marginBottom: '32px', + marginBottom: '42px', flex: 1, }; }); @@ -14,6 +14,7 @@ export const StyledMemberContainer = styled('div')(() => { display: 'flex', height: '100%', flexDirection: 'column', + overflow: 'hidden', }; }); @@ -40,8 +41,8 @@ export const StyledMemberRoleContainer = styled('div')(() => { export const StyledMemberListContainer = styled('ul')(() => { return { overflowY: 'scroll', - width: '100%', - flex: 1, + flexGrow: 1, + paddingBottom: '58px', }; }); @@ -80,9 +81,8 @@ export const StyledMemberEmail = styled('div')(({ theme }) => { export const StyledMemberButtonContainer = styled('div')(() => { return { - position: 'absolute', - bottom: '0', - marginBottom: '20px', + position: 'fixed', + bottom: '20px', }; }); diff --git a/apps/web/src/components/workspace-setting/style.ts b/apps/web/src/components/workspace-setting/style.ts index 275ec491f..d6ed7e7f6 100644 --- a/apps/web/src/components/workspace-setting/style.ts +++ b/apps/web/src/components/workspace-setting/style.ts @@ -4,9 +4,8 @@ export const StyledSettingContainer = styled('div')(() => { return { display: 'flex', flexDirection: 'column', - padding: '0 0 20px 48px', - height: '100vh', - marginTop: '48px', + padding: '48px 0 20px 48px', + height: 'calc(100vh - 60px)', }; }); @@ -55,7 +54,7 @@ export const StyledSettingKey = styled.div(({ theme }) => { }); export const StyledRow = styled(FlexWrapper)(() => { return { - marginBottom: '32px', + marginBottom: '42px', }; }); diff --git a/apps/web/src/components/workspace-slider-bar/style.ts b/apps/web/src/components/workspace-slider-bar/style.ts index 93a4f8547..1cf29b15c 100644 --- a/apps/web/src/components/workspace-slider-bar/style.ts +++ b/apps/web/src/components/workspace-slider-bar/style.ts @@ -56,10 +56,9 @@ export const StyledListItem = styled.div<{ disabled?: boolean; }>(({ theme, active, disabled }) => { return { - width: '296px', height: '32px', marginTop: '12px', - color: active ? theme.colors.primaryColor : theme.colors.popoverColor, + color: active ? theme.colors.primaryColor : theme.colors.textColor, paddingLeft: '12px', borderRadius: '5px', cursor: 'pointer', diff --git a/apps/web/src/hooks/use-workspace-helper.ts b/apps/web/src/hooks/use-workspace-helper.ts index 9b0565640..360ba06dc 100644 --- a/apps/web/src/hooks/use-workspace-helper.ts +++ b/apps/web/src/hooks/use-workspace-helper.ts @@ -46,11 +46,7 @@ export const useWorkspaceHelper = () => { }; const acceptInvite = async (inviteCode: string) => { - let inviteInfo; - if (inviteCode) { - inviteInfo = await dataCenter.acceptInvitation(inviteCode); - } - return inviteInfo; + return dataCenter.acceptInvitation(inviteCode); }; return { diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx index 9db2ced00..b9814150a 100644 --- a/apps/web/src/pages/_app.tsx +++ b/apps/web/src/pages/_app.tsx @@ -1,5 +1,4 @@ import '../../public/globals.css'; -import '../../public/variable.css'; import './temporary.css'; import '@fontsource/space-mono'; import '@fontsource/poppins'; diff --git a/apps/web/src/pages/invite/[invite_code].tsx b/apps/web/src/pages/invite/[invite_code].tsx index 9719259d1..9812f1e41 100644 --- a/apps/web/src/pages/invite/[invite_code].tsx +++ b/apps/web/src/pages/invite/[invite_code].tsx @@ -1,145 +1,104 @@ -import { styled } from '@affine/component'; -import { Empty } from '@affine/component'; +import { displayFlex, styled } from '@affine/component'; +import { Button } from '@affine/component'; +import { Permission } from '@affine/datacenter'; +import { + SucessfulDuotoneIcon, + UnsucessfulDuotoneIcon, +} from '@blocksuite/icons'; +import Image from 'next/image'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; import { PageLoading } from '@/components/loading'; import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; +import { useGlobalState } from '@/store/app'; -// const User = ({ name, avatar }: { name: string; avatar?: string }) => { -// return ( -// -// {avatar ? ( -// -// ) : ( -// {name.slice(0, 1)} -// )} -// {name} -// -// ); -// }; +import inviteError from '../../../public/imgs/invite-error.svg'; +import inviteSuccess from '../../../public/imgs/invite-success.svg'; export default function DevPage() { const [loading, setLoading] = useState(true); const router = useRouter(); - const [successInvited, setSuccessInvited] = useState(false); + const [inviteData, setInviteData] = useState(null); const { acceptInvite } = useWorkspaceHelper(); + const dataCenter = useGlobalState(store => store.dataCenter); + useEffect(() => { - if (router.query.invite_code) { - acceptInvite(router.query.invite_code as string) - .then(data => { - if (data && data.accepted) { - setSuccessInvited(true); - } - }) - .finally(() => { - setLoading(false); - }); - } else { + const init = async () => { + const data = await dataCenter.acceptInvitation( + router.query.invite_code as string + ); + + setInviteData(data as Permission); setLoading(false); - } - }, [router, acceptInvite]); + }; + init(); + }, [router, acceptInvite, dataCenter]); - return loading ? ( - - ) : ( - -
- + if (loading) { + return ; + } - - {/* TODO add inviteInfo*/} - {/* invited */} - {/* you to join */} - {/* */} - {successInvited ? ( - - - - - - Successfully joined - - ) : ( - - - - - - The link has expired - - )} - -
- - ); + if (inviteData?.accepted) { + return ( + + + +

+ + Successfully joined +

+ + ); + } + + if (inviteData?.accepted === false) { + return ( + + + +

+ + The link has expired +

+ + ); + } } -// const UserIcon = styled('div')({ -// display: 'inline-block', -// width: '28px', -// height: '28px', -// borderRadius: '50%', -// backgroundColor: '#FFF5AB', -// textAlign: 'center', -// color: '#896406', -// lineHeight: '28px', -// }); -const Invited = styled('div')(({ theme }) => { +const StyledContainer = styled('div')(({ theme }) => { return { height: '100vh', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - textAlign: 'center', - color: theme.colors.textColor, + ...displayFlex('center', 'center'), + flexDirection: 'column', backgroundColor: theme.colors.pageBackground, - }; -}); - -const Content = styled('div')({ - fontSize: '16px', - marginTop: '35px', -}); - -const Status = styled('div')(() => { - return { - marginTop: '16px', - svg: { - verticalAlign: 'middle', - marginRight: '12px', + img: { + width: '300px', + height: '300px', + }, + p: { + ...displayFlex('center', 'center'), + marginTop: '24px', + svg: { + color: theme.colors.primaryColor, + fontSize: '24px', + marginRight: '12px', + }, }, }; }); diff --git a/packages/component/src/styles/theme.ts b/packages/component/src/styles/theme.ts index fd7a73124..b68532b56 100644 --- a/packages/component/src/styles/theme.ts +++ b/packages/component/src/styles/theme.ts @@ -71,9 +71,9 @@ export const getLightTheme = ( }, shadow: { popover: - '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);', + '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)', modal: - '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);', + '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)', tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)', }, space: { @@ -99,7 +99,7 @@ export const getDarkTheme = ( hoverBackground: '#3C3C42', innerHoverBackground: '#5A5A5A', popoverBackground: '#1F2021', - tooltipBackground: '#1F2021', + tooltipBackground: '#0C0A15', codeBackground: editorMode === 'edgeless' ? lightTheme.colors.codeBackground @@ -135,8 +135,8 @@ export const getDarkTheme = ( shadow: { popover: '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)', - modal: - '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)', + modal: '0px 4px 24px #161616', + tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)', }, }; diff --git a/packages/component/src/ui/empty/Empty.tsx b/packages/component/src/ui/empty/Empty.tsx index f4cfb75ca..7309b2559 100644 --- a/packages/component/src/ui/empty/Empty.tsx +++ b/packages/component/src/ui/empty/Empty.tsx @@ -1,21 +1,25 @@ import { CSSProperties } from 'react'; -import { styled } from '../../styles'; import { EmptySVG } from './EmptySVG'; +import { StyledEmptyContainer } from './style'; export type EmptyContentProps = { - width?: CSSProperties['width']; - height?: CSSProperties['height']; - fontSize?: CSSProperties['fontSize']; + imageStyle?: CSSProperties; + description?: string; + descriptionStyle?: CSSProperties; +}; + +export const Empty = ({ + imageStyle, + description, + descriptionStyle, +}: EmptyContentProps) => { + return ( + + +

{description}

+ + ); }; -export const Empty = styled(EmptySVG)( - ({ fontSize, width, height }) => { - return { - width, - height, - fontSize, - }; - } -); export default Empty; diff --git a/packages/component/src/ui/empty/EmptySVG.tsx b/packages/component/src/ui/empty/EmptySVG.tsx index 3db455a13..a6a0fce58 100644 --- a/packages/component/src/ui/empty/EmptySVG.tsx +++ b/packages/component/src/ui/empty/EmptySVG.tsx @@ -3,85 +3,412 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; export const EmptySVG = (props: SvgIconProps) => { return ( - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/packages/component/src/ui/empty/emptyPage.svg b/packages/component/src/ui/empty/emptyPage.svg deleted file mode 100644 index e5a4f4b32..000000000 --- a/packages/component/src/ui/empty/emptyPage.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/packages/component/src/ui/empty/style.ts b/packages/component/src/ui/empty/style.ts new file mode 100644 index 000000000..6a9b2b696 --- /dev/null +++ b/packages/component/src/ui/empty/style.ts @@ -0,0 +1,14 @@ +import { displayFlex, styled } from '../../styles'; + +export const StyledEmptyContainer = styled.div(() => { + return { + height: '100%', + ...displayFlex('center', 'center'), + flexDirection: 'column', + + '.empty-img': { + width: '320px', + height: '280px', + }, + }; +}); diff --git a/packages/data-center/src/provider/affine/apis/index.ts b/packages/data-center/src/provider/affine/apis/index.ts index 83c162d0b..cfdea1c7b 100644 --- a/packages/data-center/src/provider/affine/apis/index.ts +++ b/packages/data-center/src/provider/affine/apis/index.ts @@ -37,4 +37,4 @@ export const getApis = (): Apis => { export type { AccessTokenMessage } from './auth'; export type { Member, Workspace, WorkspaceDetail } from './workspace'; -export { WorkspaceType } from './workspace'; +export * from './workspace'; diff --git a/packages/data-center/src/provider/affine/apis/workspace.ts b/packages/data-center/src/provider/affine/apis/workspace.ts index 89905e208..1a74bcfa4 100644 --- a/packages/data-center/src/provider/affine/apis/workspace.ts +++ b/packages/data-center/src/provider/affine/apis/workspace.ts @@ -71,9 +71,11 @@ export async function getWorkspaceDetail( } export interface Permission { - id: number; + id: string; type: PermissionType; workspace_id: string; + user_id: string; + user_email: string; accepted: boolean; create_at: number; }