diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx index 7b473afbfb..9a26b56863 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 (
- +
- {t('New Workspace')} { />
-

{t('Workspace description')}

+ {t('New Workspace')} +

+ Workspace is your virtual space to capture, create and plan as + just one person or together as a team. +

{ setWorkspaceName(value); }} > + ); +}; diff --git a/packages/app/src/components/header/PageListHeader.tsx b/packages/app/src/components/header/PageListHeader.tsx index 43a1c976b9..99efff25de 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) => { {icon} {children} - + {/* */} ); diff --git a/packages/app/src/components/header/styles.ts b/packages/app/src/components/header/styles.ts index 1deb826faa..146164eebd 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/login-modal/Icons.tsx b/packages/app/src/components/login-modal/Icons.tsx index a6c694c876..12356f60d3 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 dd1d51cc66..f104efc58b 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 ( - { - // getDataCenter() - // .then(dc => dc.apis.signInWithGoogle?.()) - // .then(() => { - // triggerLoginModal(); - // }) - // .catch(error => { - // console.log('sign google error', error); - // }); - }} - > + - - {t('Continue with Google')} - - {t('Set up an AFFiNE account to sync data')} - - + {t('Continue with Google')} ); @@ -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 a754c76191..d572190ee9 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 ( - +
{ />
- {t('NotLoggedIn')} - - + {'Sign in'} + Set up an AFFINE account to sync data + { + await login(); + onClose(); + }} + > + + -
- }>{t('ClearData')} -
); @@ -56,14 +58,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/logout-modal/icon.tsx b/packages/app/src/components/logout-modal/icon.tsx new file mode 100644 index 0000000000..df23248b78 --- /dev/null +++ b/packages/app/src/components/logout-modal/icon.tsx @@ -0,0 +1,48 @@ +export const Check = () => { + return ( + + + + + + + + + + + + + ); +}; + +export const UnCheck = () => { + return ( + + + + + + ); +}; 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 0000000000..91a5641d5b --- /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 ( + + +
+ { + onClose(true); + }} + /> +
+ + {'Sign out?'} + Set up an AFFINE account to sync data + + {localCache ? ( + { + setLocalCache(false); + }} + > + + + ) : ( + { + setLocalCache(true); + }} + > + + + )} + Retain local cached data + +
+ + +
+ + + + ); +}; + +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-avatar/Avatar.tsx b/packages/app/src/components/workspace-avatar/Avatar.tsx index c01808e68f..e9bea0aadd 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 ? (
@@ -33,6 +37,7 @@ 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 4144d9645d..bdb8431e2c 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-modal/icons/index.tsx b/packages/app/src/components/workspace-modal/icons/index.tsx new file mode 100644 index 0000000000..773a8383f3 --- /dev/null +++ b/packages/app/src/components/workspace-modal/icons/index.tsx @@ -0,0 +1,99 @@ +export const LocalIcon = () => { + return ( + + + + ); +}; + +export const OfflineIcon = () => { + return ( + + + + ); +}; +export const PublishedIcon = () => { + return ( + + + + + ); +}; + +export const CloudIcon = () => { + return ( + + + + + ); +}; + +export const LineIcon = () => { + return ( + + + + ); +}; diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 5c0424b772..c0dd2a8bd3 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -1,23 +1,28 @@ import { styled } from '@/styles'; -import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; -import { Button } 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, - CloudInsyncIcon, UsersIcon, AddIcon, + LogOutIcon, + CloudInsyncIcon, + PublishIcon, + CloseIcon, } 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'; 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'; +import { LogoutModal } from '../logout-modal'; interface WorkspaceModalProps { open: boolean; onClose: () => void; @@ -25,29 +30,49 @@ 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, user, logout, isOwner } = useAppState(); const router = useRouter(); const { t } = useTranslation(); - const [loaded, setLoaded] = useState(true); + const [loginOpen, setLoginOpen] = useState(false); + const [logoutOpen, setLogoutOpen] = useState(false); return (
{t('My Workspaces')} - - { - onClose(); - }} - /> + + +
+ +
+ + +
@@ -61,143 +86,142 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { active={item.id === currentWorkspace?.id} key={index} > - -
- -
+
+ +
- + + {item.name || 'AFFiNE'} - - - - {(item.provider === 'local' || !item.provider) && ( - + + {isOwner ? ( + item.provider === 'local' ? ( +

+ + Local Workspace +

+ ) : ( +

+ + Cloud Workspace +

+ ) + ) : ( +

+ + Joined Workspace +

)} - {item.provider === 'affine' && ( - + {item.provider === 'local' && ( +

+ + All data can be accessed offline +

)} - {item.published && } - - {/* {item.isLocal ? 'isLocal' : ''}/ */} + {item.published && ( +

+ Published to Web +

+ )} + ); })} -
  • - -
    • + { + setCreateWorkspaceOpen(true); + }} + > +
    + + + +
    + + + New workspace +

    Crete or import

    +     +     -

    + {/*

    {t('Tips')} {t('Workspace description')} -

    +

    */}     + { + setLoginOpen(false); + }} + >
    {!user ? ( - + + + + Sign in to sync with AFFINE Cloud + ) : ( - - )} - {!loaded && ( - - - +
    +
    + +
    + +

    {user.name}

    +

    {user.email}

    +     +
    + { + 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'); + // // } + // // } + // }); + }} + > + + +
    +
    )}
    { 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 }); - // } - // } - // }); }} > + { + if (!wait) { + await logout(); + router.replace(`/workspace`); + } + setLogoutOpen(false); + }} + >
    @@ -205,52 +229,138 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { }; const Header = styled('div')({ - position: 'relative', - height: '44px', + display: 'flex', }); const Content = styled('div')({ - padding: '0 20px', flexDirection: 'column', alignItems: 'center', 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', -}); - -const Footer = styled('div')({ - height: '70px', - paddingLeft: '24px', - marginTop: '32px', - textAlign: 'center', + flex: 1, }); const WorkspaceList = styled('div')({ + maxHeight: '500px', + 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: 'text-bottom', + marginRight: '8px', + }, + }; +}); + +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', + 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, + color: theme.colors.iconColor, + 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, + }, }, }; }); diff --git a/packages/app/src/components/workspace-modal/languageMenu.tsx b/packages/app/src/components/workspace-modal/languageMenu.tsx index 58bedcb47a..d8f907663d 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 ( { @@ -40,14 +42,14 @@ export const LanguageMenu = () => { open={show} > { setShow(!show); }} > {languageName} - + @@ -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/components/workspace-setting/ExportPage.tsx b/packages/app/src/components/workspace-setting/ExportPage.tsx index 83830f1777..e3cf6117f6 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/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx index 4ff35d776d..a30b72bdf7 100644 --- a/packages/app/src/components/workspace-setting/PublishPage.tsx +++ b/packages/app/src/components/workspace-setting/PublishPage.tsx @@ -14,15 +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, enableWorkspace } = useWorkspaceHelper(); + 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 = () => { @@ -30,23 +33,24 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { toast('Copied url to clipboard'); }; - const enableAffineCloud = async () => { - await enableWorkspace(); - }; return ( <> {workspace.provider === 'affine' ? ( -
    +
    {workspace.published ? ( <> - {t('Publishing')} + The current workspace has been published to the web, everyone + can view the contents of this workspace through the link. - - {t('Share with link')} - + + + {t('Share with link')} + +
    )} @@ -66,10 +84,11 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { ) : ( - - - + <> )}
    ) : ( <> - {t('Publishing')} + Publishing to web requires AFFiNE Cloud service. - - - +
    + +
    )} - {!loaded && ( - - - - )} ); }; diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx index f65a24ab7b..6969461a38 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, @@ -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 (
    @@ -25,28 +24,18 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { size={32} name={workspace.name} workspaceUnit={workspace} + style={{ marginRight: '12px' }} /> - -  {workspace.name}  - + {workspace.name}; is a Local Workspace. All data is stored on the current device. You can enable AFFiNE Cloud for this workspace to keep data in sync with the cloud. - - - + + + ) : ( <> @@ -57,7 +46,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { the AFFiNE - + @@ -86,7 +75,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {t('Download data to device', { CoreOrAll: 'all' })} - + )} diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx index 2ac37c53c3..0207cb6a95 100644 --- a/packages/app/src/components/workspace-setting/general/General.tsx +++ b/packages/app/src/components/workspace-setting/general/General.tsx @@ -5,6 +5,9 @@ import { StyledSettingInputContainer, StyledDoneButtonContainer, StyledInput, + StyledProviderInfo, + StyleGeneral, + StyledAvatar, } from './style'; import { StyledSettingH2 } from '../style'; @@ -13,16 +16,18 @@ 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'; +import { CameraIcon } from './icons'; +import { Upload } from '@/components/file-upload'; export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { const [showDelete, setShowDelete] = useState(false); const [showLeave, setShowLeave] = useState(false); - // const [uploading, setUploading] = useState(false); const [workspaceName, setWorkspaceName] = useState(workspace.name); const { currentWorkspace, isOwner } = useAppState(); const { updateWorkspace } = useWorkspaceHelper(); @@ -36,66 +41,88 @@ 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 ? ( -
    - Workspace Avatar - -
    - -
    - {/* TODO: Wait for image sync to complete */} - {/* +
    + Workspace Avatar + + + + <> +
    + +
    + + +     +     + {/* TODO: Wait for image sync to complete */} + {/* */} - {/* TODO: add upload logic */} -     - {t('Workspace Name')} - - - {isOwner ? ( - { - handleUpdateWorkspaceName(); - }} - > - - - ) : null} - - {t('Workspace Type')} - - - Local workspace - + {/* TODO: add upload logic */} + + {t('Workspace Name')} + + + {isOwner ? ( + { + handleUpdateWorkspaceName(); + }} + > + + + ) : null} + + {t('Workspace Type')} + + {isOwner ? ( + currentWorkspace?.provider === 'local' ? ( + + + Local Workspace + + ) : ( + + + All data can be accessed offline + + ) + ) : ( + + + Joined Workspace + + )} + +
    + {isOwner ? ( <> @@ -137,6 +164,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { )} -
    + ) : null; }; 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 0000000000..a126cafc0f --- /dev/null +++ b/packages/app/src/components/workspace-setting/general/icons.tsx @@ -0,0 +1,20 @@ +export const CameraIcon = () => { + return ( + + + + + + ); +}; diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts index c46f9706c9..d2e8d7b4d2 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,39 @@ 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', + }, + }; +}); + +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', + }, + }; +}); diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx index e4b787854c..b1b64ffa0e 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'; @@ -26,19 +27,18 @@ 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(); - // FIXME: DELETE THIS - const { enableWorkspace } = useWorkspaceHelper(); const { confirm } = useConfirm(); if (workspace.provider === 'affine') { return ( - <> + {!loaded && ( @@ -57,6 +57,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {t('Access level')} +
    {members.map((member, index) => { const user = Object.assign( @@ -153,7 +154,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { open={isInviteModalShow} > - +     ); } @@ -161,15 +162,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {t('Collaboration Description')} - + ); diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts index 2b259828c9..ce18dcb0ad 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, }; }); @@ -101,7 +105,7 @@ export const StyledPublishExplanation = styled('div')(() => { fontSize: '18px', lineHeight: '26px', flex: 1, - marginTop: '60px', + marginTop: '64px', }; }); @@ -109,7 +113,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 430c6780ef..dcde665f31 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -1,26 +1,30 @@ -import { displayFlex, styled } from '@/styles'; +import { styled } from '@/styles'; 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,43 +82,39 @@ export const StyledSettingTagIconContainer = styled('div')(() => { return { display: 'flex', alignItems: 'center', - marginRight: '14.64px', - width: '14.47px', - fontSize: '14.47px', }; }); -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, - marginTop: '60px', 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', @@ -134,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', }; }); @@ -164,3 +148,9 @@ export const StyledPublishContent = styled('div')(() => { flexDirection: 'column', }; }); + +export const StyleAsync = styled('div')(() => { + return { + marginTop: '64px', + }; +}); diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts index 8cbf57f685..aceb22fddd 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 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e3871e7978..c3ea50ad04 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==} diff --git a/tests/local-first-workspace.spec.ts b/tests/local-first-workspace.spec.ts index 39b10c6aea..014b839fc9 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( - '' + '' ); }); });