diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx index 7b473afbf..9a26b5686 100644 --- a/packages/app/src/components/create-workspace/index.tsx +++ b/packages/app/src/components/create-workspace/index.tsx @@ -16,11 +16,15 @@ interface ModalProps { export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => { const [workspaceName, setWorkspaceName] = useState(''); + const [loading, setLoading] = useState(false); const { createWorkspace } = useWorkspaceHelper(); const router = useRouter(); const handleCreateWorkspace = async () => { + setLoading(true); const workspace = await createWorkspace(workspaceName); + if (workspace && workspace.id) { + setLoading(false); router.replace(`/workspace/${workspace.id}`); onClose(); } else { @@ -37,9 +41,8 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => { return (
- +
- {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/Header.tsx b/packages/app/src/components/header/Header.tsx index 41fced590..a8a50bfef 100644 --- a/packages/app/src/components/header/Header.tsx +++ b/packages/app/src/components/header/Header.tsx @@ -44,7 +44,7 @@ const HeaderRightItems: Record = { }; export const Header = ({ - rightItems = ['syncUser'], + rightItems = ['syncUser', 'themeModeSwitch'], children, }: PropsWithChildren<{ rightItems?: HeaderRightItemNames[] }>) => { const [showWarning, setShowWarning] = useState(shouldShowWarning()); diff --git a/packages/app/src/components/header/PageListHeader.tsx b/packages/app/src/components/header/PageListHeader.tsx index 43a1c976b..99efff25d 100644 --- a/packages/app/src/components/header/PageListHeader.tsx +++ b/packages/app/src/components/header/PageListHeader.tsx @@ -1,7 +1,7 @@ import { PropsWithChildren, ReactNode } from 'react'; import Header from './Header'; import { StyledPageListTittleWrapper } from './styles'; -import QuickSearchButton from './QuickSearchButton'; +// import QuickSearchButton from './QuickSearchButton'; export type PageListHeaderProps = PropsWithChildren<{ icon?: ReactNode; @@ -12,7 +12,7 @@ export const PageListHeader = ({ icon, children }: PageListHeaderProps) => { {icon} {children} - + {/* */} ); diff --git a/packages/app/src/components/header/styles.ts b/packages/app/src/components/header/styles.ts index 1deb826fa..146164eeb 100644 --- a/packages/app/src/components/header/styles.ts +++ b/packages/app/src/components/header/styles.ts @@ -3,35 +3,25 @@ import { displayFlex, styled } from '@/styles'; export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>( ({ hasWarning }) => { return { - position: 'relative', height: hasWarning ? '96px' : '60px', }; } ); -export const StyledHeader = styled.div<{ hasWarning: boolean }>( - ({ hasWarning }) => { - return { - height: '60px', - width: '100%', - ...displayFlex('flex-end', 'center'), - background: 'var(--affine-page-background)', - transition: 'background-color 0.5s', - position: 'absolute', - left: '0', - top: hasWarning ? '36px' : '0', - padding: '0 22px', - zIndex: 99, - }; - } -); +export const StyledHeader = styled.div<{ hasWarning: boolean }>(() => { + return { + height: '60px', + width: '100%', + ...displayFlex('flex-end', 'center'), + background: 'var(--affine-page-background)', + transition: 'background-color 0.5s', + zIndex: 99, + }; +}); export const StyledTitle = styled('div')(({ theme }) => ({ width: '720px', height: '100%', - position: 'absolute', - left: 0, - right: 0, - top: 0, + margin: 'auto', ...displayFlex('center', 'center'), diff --git a/packages/app/src/components/login-modal/Icons.tsx b/packages/app/src/components/login-modal/Icons.tsx index a6c694c87..12356f60d 100644 --- a/packages/app/src/components/login-modal/Icons.tsx +++ b/packages/app/src/components/login-modal/Icons.tsx @@ -13,8 +13,6 @@ export const GoogleIcon = () => { }; const GoogleIconWrapper = styled('div')(({ theme }) => ({ - width: '48px', - height: '48px', background: theme.colors.pageBackground, display: 'flex', alignItems: 'center', diff --git a/packages/app/src/components/login-modal/LoginOptionButton.tsx b/packages/app/src/components/login-modal/LoginOptionButton.tsx index dd1d51cc6..f104efc58 100644 --- a/packages/app/src/components/login-modal/LoginOptionButton.tsx +++ b/packages/app/src/components/login-modal/LoginOptionButton.tsx @@ -1,35 +1,17 @@ -// import { getDataCenter } from '@affine/datacenter'; import { styled } from '@/styles'; import { Button } from '@/ui/button'; -// import { useModal } from '@/providers/GlobalModalProvider'; import { GoogleIcon, StayLogOutIcon } from './Icons'; import { useTranslation } from '@affine/i18n'; export const GoogleLoginButton = () => { - // const { triggerLoginModal } = useModal(); const { t } = useTranslation(); + return ( - { - // 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 a754c7619..d572190ee 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 000000000..df23248b7 --- /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 000000000..91a5641d5 --- /dev/null +++ b/packages/app/src/components/logout-modal/index.tsx @@ -0,0 +1,118 @@ +import { styled } from '@/styles'; +import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; +import { Button } from '@/ui/button'; +import { Check, UnCheck } from './icon'; +import { useState } from 'react'; +interface LoginModalProps { + open: boolean; + onClose: (wait: boolean) => void; +} + +export const LogoutModal = ({ open, onClose }: LoginModalProps) => { + const [localCache, setLocalCache] = useState(false); + return ( + + +
+ { + 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 c01808e68..e9bea0aad 100644 --- a/packages/app/src/components/workspace-avatar/Avatar.tsx +++ b/packages/app/src/components/workspace-avatar/Avatar.tsx @@ -3,6 +3,7 @@ interface IWorkspaceAvatar { size: number; name: string; avatar: string; + style?: React.CSSProperties; } export const WorkspaceAvatar = (props: IWorkspaceAvatar) => { @@ -14,12 +15,15 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => { {props.avatar ? (
@@ -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 4144d9645..bdb8431e2 100644 --- a/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx +++ b/packages/app/src/components/workspace-avatar/WorkspaceUnitAvatar.tsx @@ -24,10 +24,12 @@ export const WorkspaceUnitAvatar = ({ size = 20, name, workspaceUnit, + style, }: { size?: number; name?: string; workspaceUnit?: WorkspaceUnit | null; + style?: React.CSSProperties; }) => { const avatarUrl = useAvatar(workspaceUnit || undefined); return ( @@ -35,6 +37,7 @@ export const WorkspaceUnitAvatar = ({ size={size} name={name || workspaceUnit?.name || ''} avatar={avatarUrl} + style={style} /> ); }; diff --git a/packages/app/src/components/workspace-modal/icons/index.tsx b/packages/app/src/components/workspace-modal/icons/index.tsx new file mode 100644 index 000000000..773a8383f --- /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 5c0424b77..c0dd2a8bd 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 58bedcb47..d8f907663 100644 --- a/packages/app/src/components/workspace-modal/languageMenu.tsx +++ b/packages/app/src/components/workspace-modal/languageMenu.tsx @@ -1,10 +1,11 @@ import { LOCALES } from '@affine/i18n'; -import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore'; -import type { TooltipProps } from '@mui/material'; +import { TooltipProps } from '@mui/material'; import { styled } from '@/styles'; -import { Button, Tooltip } from '@mui/material'; +import { Tooltip } from '@mui/material'; import { useState } from 'react'; import { useTranslation } from '@affine/i18n'; +import { ArrowDownIcon } from '@blocksuite/icons'; +import { Button } from '@/ui/button'; export const LanguageMenu = () => { const { i18n } = useTranslation(); @@ -23,6 +24,7 @@ export const LanguageMenu = () => { {LOCALES.map(option => { return ( { @@ -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 83830f177..e3cf6117f 100644 --- a/packages/app/src/components/workspace-setting/ExportPage.tsx +++ b/packages/app/src/components/workspace-setting/ExportPage.tsx @@ -4,7 +4,7 @@ import { Trans } from '@affine/i18n'; export const ExportPageTitleContainer = styled('div')(() => { return { display: 'flex', - marginTop: '60px', + fontWeight: '500', flex: 1, }; diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx index d8692acbb..a30b72bdf 100644 --- a/packages/app/src/components/workspace-setting/PublishPage.tsx +++ b/packages/app/src/components/workspace-setting/PublishPage.tsx @@ -4,6 +4,7 @@ import { StyledPublishCopyContainer, StyledPublishExplanation, StyledSettingH2, + StyledStopPublishContainer, } from './style'; import { useState } from 'react'; import { Button } from '@/ui/button'; @@ -13,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 = () => { @@ -29,21 +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')} + +
    )} - - {workspace.published ? ( + + {workspace.published ? ( + - ) : ( - - )} - + + ) : ( + <> + )}
    ) : ( <> - {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 72f1d08fd..6969461a3 100644 --- a/packages/app/src/components/workspace-setting/SyncPage.tsx +++ b/packages/app/src/components/workspace-setting/SyncPage.tsx @@ -1,16 +1,18 @@ import { + StyleAsync, StyledPublishContent, - StyledPublishCopyContainer, StyledPublishExplanation, + StyledWorkspaceName, + StyledWorkspaceType, } from './style'; 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 (
    @@ -18,22 +20,22 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {workspace.provider === 'local' ? ( <> - {t('Sync Description', { - workspaceName: workspace.name ?? 'Affine', - })} + + {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. + + + + ) : ( <> @@ -44,7 +46,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => { the AFFiNE - + @@ -73,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 7d9294f27..0207cb6a9 100644 --- a/packages/app/src/components/workspace-setting/general/General.tsx +++ b/packages/app/src/components/workspace-setting/general/General.tsx @@ -3,24 +3,31 @@ import { // StyledSettingAvatar, StyledSettingAvatarContent, StyledSettingInputContainer, + StyledDoneButtonContainer, + StyledInput, + StyledProviderInfo, + StyleGeneral, + StyledAvatar, } from './style'; import { StyledSettingH2 } from '../style'; import { useState } from 'react'; -import { Button, TextButton } from '@/ui/button'; -import Input from '@/ui/input'; +import { Button } from '@/ui/button'; import { useAppState } from '@/providers/app-state-provider'; import { WorkspaceDelete } from './delete'; import { WorkspaceLeave } from './leave'; +import { DoneIcon, 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(); @@ -34,71 +41,95 @@ 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 ? ( -
    - {t('Workspace Icon')} - -
    - -
    - {/* 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(); - }} - style={{ marginLeft: '0px' }} - > - ✔️ - - ) : null} - - {t('Workspace Type')} - - {workspace.provider} - + {/* 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 ? ( <>
    + ) : null; }; diff --git a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx index c6db311e2..3fcab8c15 100644 --- a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx +++ b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx @@ -46,7 +46,7 @@ export const WorkspaceDelete = ({ - {t('Delete Workspace')} + {t('Delete Workspace')}? {workspace.provider === 'local' ? ( @@ -75,6 +75,8 @@ export const WorkspaceDelete = ({ onChange={handlerInputChange} placeholder={t('Delete Workspace placeholder')} value={deleteStr} + width={284} + height={42} > diff --git a/packages/app/src/components/workspace-setting/general/delete/style.ts b/packages/app/src/components/workspace-setting/general/delete/style.ts index 939ba638b..d029d54fe 100644 --- a/packages/app/src/components/workspace-setting/general/delete/style.ts +++ b/packages/app/src/components/workspace-setting/general/delete/style.ts @@ -4,20 +4,20 @@ export const StyledModalWrapper = styled('div')(({ theme }) => { return { position: 'relative', padding: '0px', - width: '460px', + width: '560px', background: theme.colors.popoverBackground, borderRadius: '12px', + height: '312px', }; }); export const StyledModalHeader = styled('div')(({ theme }) => { return { margin: '44px 0px 12px 0px', - width: '460px', + width: '560px', fontWeight: '600', fontSize: '20px;', - textAlign: 'left', - paddingLeft: '20px', + textAlign: 'center', color: theme.colors.popoverColor, }; }); @@ -37,21 +37,25 @@ export const StyledTextContent = styled('div')(() => { }; }); -export const StyledInputContent = styled('div')(() => { +export const StyledInputContent = styled('div')(({ theme }) => { return { display: 'flex', flexDirection: 'row', justifyContent: 'center', - margin: '20px 0 24px 0', + margin: '32px 0', + fontSize: theme.font.base, }; }); export const StyledButtonContent = styled('div')(() => { return { + position: 'absolute', + left: '50%', + transform: 'translateX(-50%)', + bottom: '32px', display: 'flex', flexDirection: 'row', justifyContent: 'center', - margin: '0px 0 32px 0', }; }); diff --git a/packages/app/src/components/workspace-setting/general/icons.tsx b/packages/app/src/components/workspace-setting/general/icons.tsx new file mode 100644 index 000000000..a126cafc0 --- /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 739ec24ae..d2e8d7b4d 100644 --- a/packages/app/src/components/workspace-setting/general/style.ts +++ b/packages/app/src/components/workspace-setting/general/style.ts @@ -1,15 +1,45 @@ -import { styled } from '@/styles'; +import { displayFlex, styled } from '@/styles'; import MuiAvatar from '@mui/material/Avatar'; +import IconButton from '@/ui/button/IconButton'; +import Input from '@/ui/input'; export const StyledSettingInputContainer = styled('div')(() => { return { marginTop: '12px', + width: '100%', + ...displayFlex('flex-start', 'center'), }; }); export const StyledDeleteButtonContainer = styled('div')(() => { return { - marginTop: '30px', + 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}`, + borderRadius: '10px', + fontSize: theme.font.sm, }; }); @@ -26,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/InviteMemberModal.tsx b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx index c965e6c0b..7bd542efb 100644 --- a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx +++ b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx @@ -122,6 +122,7 @@ export const InviteMemberModal = ({ + ); diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts index eeea67d6d..ce18dcb0a 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,7 +25,7 @@ export const StyledMemberNameContainer = styled('div')(() => { return { display: 'flex', alignItems: 'center', - width: '402px', + flex: '2 0 402px', }; }); @@ -26,14 +33,15 @@ export const StyledMemberRoleContainer = styled('div')(() => { return { display: 'flex', alignItems: 'center', - width: '222px', + flex: '1 0 222px', }; }); export const StyledMemberListContainer = styled('ul')(() => { return { - marginTop: '15px', overflowY: 'scroll', + width: '100%', + flex: 1, }; }); @@ -42,6 +50,7 @@ export const StyledMemberListItem = styled('li')(() => { display: 'flex', alignItems: 'center', height: '72px', + width: '100%', }; }); @@ -55,7 +64,7 @@ export const StyledMemberName = styled('div')(({ theme }) => { return { fontWeight: '400', fontSize: '18px', - lineHeight: '16px', + lineHeight: '26px', color: theme.colors.textColor, }; }); @@ -71,7 +80,9 @@ export const StyledMemberEmail = styled('div')(({ theme }) => { export const StyledMemberButtonContainer = styled('div')(() => { return { - marginTop: '14px', + position: 'absolute', + bottom: '0', + marginBottom: '20px', }; }); @@ -83,6 +94,7 @@ export const StyledMoreVerticalButton = styled('button')(() => { width: '24px', height: '24px', cursor: 'pointer', + paddingRight: '48px', }; }); @@ -93,7 +105,7 @@ export const StyledPublishExplanation = styled('div')(() => { fontSize: '18px', lineHeight: '26px', flex: 1, - marginTop: '60px', + marginTop: '64px', }; }); @@ -101,6 +113,8 @@ export const StyledMemberWarp = styled('div')(() => { return { display: 'flex', flexDirection: 'column', - padding: '40px 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 f3177fe4d..dcde665f3 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -3,25 +3,27 @@ import { styled } from '@/styles'; export const StyledSettingContainer = styled('div')(() => { return { display: 'flex', - padding: '50px', flexDirection: 'column', + + padding: '0 34px 20px 48px', height: '100vh', - overflow: 'auto', }; }); export const StyledSettingSidebar = styled('div')(() => { { return { - flexShrink: 0, - flexGrow: 0, + // height: '48px', + marginTop: '50px', }; } }); export const StyledSettingContent = styled('div')(() => { return { - paddingLeft: '48px', + overflow: 'hidden', + flex: 1, + paddingTop: '48px', }; }); @@ -50,7 +52,6 @@ export const StyledSettingTabContainer = styled('ul')(() => { { return { display: 'flex', - marginTop: '25px', }; } }); @@ -60,14 +61,18 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>( { return { display: 'flex', - marginBottom: '12px', - padding: '0 24px', - height: '32px', + margin: '0 48px 0 0', + height: '34px', color: isActive ? theme.colors.primaryColor : theme.colors.textColor, - fontWeight: '400', - fontSize: '16px', - lineHeight: '32px', + fontWeight: '500', + fontSize: theme.font.base, + lineHeight: theme.font.lineHeightBase, cursor: 'pointer', + transition: 'all 0.15s ease', + borderBottom: `2px solid ${ + isActive ? theme.colors.primaryColor : 'none' + }`, + ':hover': { color: theme.colors.primaryColor }, }; } } @@ -77,22 +82,21 @@ 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 }) => { - return { - fontWeight: '500', - fontSize: '18px', - lineHeight: '26px', - 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 { @@ -100,25 +104,41 @@ export const StyledPublishExplanation = styled('div')(() => { fontWeight: '500', fontSize: '18px', lineHeight: '26px', - flex: 1, - marginTop: '60px', + marginBottom: '22px', + }; +}); +export const StyledWorkspaceName = styled('span')(() => { + return { + fontWeight: '400', + fontSize: '18px', + lineHeight: '26px', + }; +}); +export const StyledWorkspaceType = styled('span')(() => { + return { + fontWeight: '500', + fontSize: '18px', + lineHeight: '26px', }; }); export const StyledPublishCopyContainer = styled('div')(() => { return { marginTop: '12px', - display: 'flex', - flexDirection: 'row', - alignItems: 'center', marginBottom: '20px', paddingTop: '20px', + flex: 1, + }; +}); +export const StyledStopPublishContainer = styled('div')(() => { + return { + textAlign: 'center', }; }); export const StyledCopyButtonContainer = styled('div')(() => { return { - marginLeft: '12px', + marginTop: '64px', }; }); @@ -128,3 +148,9 @@ export const StyledPublishContent = styled('div')(() => { flexDirection: 'column', }; }); + +export const StyleAsync = styled('div')(() => { + return { + marginTop: '64px', + }; +}); diff --git a/packages/app/src/hooks/use-workspace-helper.ts b/packages/app/src/hooks/use-workspace-helper.ts index 64387a984..2a1977f96 100644 --- a/packages/app/src/hooks/use-workspace-helper.ts +++ b/packages/app/src/hooks/use-workspace-helper.ts @@ -42,6 +42,8 @@ export const useWorkspaceHelper = () => { content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`, confirmText: user ? 'Enable' : 'Sign in and Enable', cancelText: 'Skip', + confirmType: 'primary', + buttonDirection: 'column', }).then(async confirm => { if (confirm && currentWorkspace) { if (!user) { diff --git a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx index 2a78641d6..11de4aa59 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx @@ -2,17 +2,9 @@ import { StyledSettingContainer, StyledSettingContent, StyledSettingSidebar, - StyledSettingSidebarHeader, StyledSettingTabContainer, - StyledSettingTagIconContainer, WorkspaceSettingTagItem, } from '@/components/workspace-setting/style'; -import { - EditIcon, - UsersIcon, - PublishIcon, - CloudInsyncIcon, -} from '@blocksuite/icons'; import { ReactElement, ReactNode, useState } from 'react'; import { GeneralPage, @@ -21,41 +13,38 @@ import { ExportPage, SyncPage, } from '@/components/workspace-setting'; +import { SettingsIcon } from '@blocksuite/icons'; import { useAppState } from '@/providers/app-state-provider'; import WorkspaceLayout from '@/components/workspace-layout'; import { WorkspaceUnit } from '@affine/datacenter'; import { useTranslation } from '@affine/i18n'; +import { PageListHeader } from '@/components/header'; -type TabNames = 'general' | 'members' | 'publish' | 'sync' | 'export'; +type TabNames = 'General' | 'Sync' | 'Collaboration' | 'Publish' | 'Export'; const tabMap: { name: TabNames; - icon: ReactNode; panelRender: (workspace: WorkspaceUnit) => ReactNode; }[] = [ { - name: 'general', - icon: , + name: 'General', panelRender: workspace => , }, { - name: 'members', - icon: , - panelRender: workspace => , - }, - { - name: 'publish', - icon: , - panelRender: workspace => , - }, - { - name: 'sync', - icon: , + name: 'Sync', panelRender: workspace => , }, { - name: 'export', - icon: , + name: 'Collaboration', + panelRender: workspace => , + }, + { + name: 'Publish', + panelRender: workspace => , + }, + + { + name: 'Export', panelRender: workspace => , }, ]; @@ -74,48 +63,43 @@ const WorkspaceSetting = () => { )?.panelRender; let tableArr: { name: TabNames; - icon: ReactNode; panelRender: (workspace: WorkspaceUnit) => ReactNode; }[] = tabMap; if (!isOwner) { tableArr = [ { - name: 'general', - icon: , + name: 'General', panelRender: workspace => , }, ]; } return ( - - - - {t('Workspace Settings')} - - - {tableArr.map(({ icon, name }) => { - return ( - { - handleTabChange(name); - }} - > - - {icon} - - {name} - - ); - })} - - + <> + + }>{t('Settings')} + + + {tableArr.map(({ name }) => { + return ( + { + handleTabChange(name); + }} + > + {name} + + ); + })} + + - - {currentWorkspace && activeTabPanelRender?.(currentWorkspace)} - - + + {currentWorkspace && activeTabPanelRender?.(currentWorkspace)} + + + ); }; WorkspaceSetting.getLayout = function getLayout(page: ReactElement) { diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts index 54cda81dc..aceb22fdd 100644 --- a/packages/app/src/ui/button/styles.ts +++ b/packages/app/src/ui/button/styles.ts @@ -182,7 +182,7 @@ export const StyledButton = styled('button', { paddingLeft: padding, paddingRight: padding, border: '1px solid', - ...displayInlineFlex('flex-start', 'center'), + ...displayInlineFlex('center', 'center'), position: 'relative', // TODO: disabled color is not decided ...(disabled @@ -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/packages/app/src/ui/confirm/Confirm.tsx b/packages/app/src/ui/confirm/Confirm.tsx index 1c22e1602..27bf8579e 100644 --- a/packages/app/src/ui/confirm/Confirm.tsx +++ b/packages/app/src/ui/confirm/Confirm.tsx @@ -1,7 +1,8 @@ import { useState } from 'react'; import { Modal, ModalCloseButton, ModalProps } from '../modal'; import { - StyledButtonWrapper, + StyledRowButtonWrapper, + StyledColumnButtonWrapper, StyledConfirmContent, StyledConfirmTitle, StyledModalWrapper, @@ -15,6 +16,7 @@ export type ConfirmProps = { cancelText?: string; // TODO: Confirm button's color should depend on confirm type confirmType?: 'primary' | 'warning' | 'danger'; + buttonDirection?: 'row' | 'column'; onConfirm?: () => void; onCancel?: () => void; } & Omit; @@ -26,6 +28,7 @@ export const Confirm = ({ confirmType, onConfirm, onCancel, + buttonDirection = 'row', cancelText = 'Cancel', }: ConfirmProps) => { const [open, setOpen] = useState(true); @@ -41,31 +44,63 @@ export const Confirm = ({ /> {title} {content} - - - - - + {buttonDirection === 'row' ? ( + + + + + ) : ( + + + + + )} ); diff --git a/packages/app/src/ui/confirm/styles.ts b/packages/app/src/ui/confirm/styles.ts index ef2c86155..3646cdcc3 100644 --- a/packages/app/src/ui/confirm/styles.ts +++ b/packages/app/src/ui/confirm/styles.ts @@ -3,8 +3,10 @@ import { ModalWrapper } from '@/ui/modal'; export const StyledModalWrapper = styled(ModalWrapper)(() => { return { - width: '460px', - padding: '46px 60px 32px', + minWidth: '460px', + maxWidth: '560px', + maxHeight: '292px', + padding: '44px 84px 32px 84px', }; }); @@ -14,6 +16,7 @@ export const StyledConfirmTitle = styled.div(({ theme }) => { fontWeight: 600, textAlign: 'center', color: theme.colors.popoverColor, + lineHeight: '28px', }; }); @@ -23,12 +26,21 @@ export const StyledConfirmContent = styled.div(({ theme }) => { textAlign: 'center', marginTop: '12px', color: theme.colors.textColor, + lineHeight: '26px', }; }); -export const StyledButtonWrapper = styled.div(() => { +export const StyledColumnButtonWrapper = styled.div(() => { return { ...displayFlex('center', 'center'), + flexDirection: 'column', + marginTop: '32px', + }; +}); +export const StyledRowButtonWrapper = styled.div(() => { + return { + ...displayFlex('center', 'center'), + flexDirection: 'row', marginTop: '32px', }; }); diff --git a/packages/app/src/ui/input/Input.tsx b/packages/app/src/ui/input/Input.tsx index c4fe7600c..1ca8b8684 100644 --- a/packages/app/src/ui/input/Input.tsx +++ b/packages/app/src/ui/input/Input.tsx @@ -12,6 +12,7 @@ type inputProps = { placeholder?: string; disabled?: boolean; width?: number; + height?: number; maxLength?: number; minLength?: number; onChange?: (value: string) => void; @@ -26,6 +27,7 @@ export const Input = (props: inputProps) => { placeholder, maxLength, minLength, + height, width = 260, onChange, onBlur, @@ -62,6 +64,7 @@ export const Input = (props: inputProps) => { onChange={handleChange} onBlur={handleBlur} onKeyDown={handleKeyDown} + height={height} > ); }; diff --git a/packages/app/src/ui/input/style.ts b/packages/app/src/ui/input/style.ts index fd0e4d21f..b8cb51c3d 100644 --- a/packages/app/src/ui/input/style.ts +++ b/packages/app/src/ui/input/style.ts @@ -4,7 +4,8 @@ export const StyledInput = styled('input')<{ disabled?: boolean; value?: string; width: number; -}>(({ theme, width, disabled }) => { + height?: number; +}>(({ theme, width, disabled, height }) => { const fontWeight = 400; const fontSize = '16px'; return { @@ -13,6 +14,7 @@ export const StyledInput = styled('input')<{ padding: '8px 12px', fontWeight, fontSize, + height: height ? `${height}px` : 'auto', color: disabled ? theme.colors.disableColor : theme.colors.inputColor, border: `1px solid`, borderColor: theme.colors.borderColor, // TODO: check out disableColor, diff --git a/packages/data-center/src/provider/affine/affine.ts b/packages/data-center/src/provider/affine/affine.ts index d806ed2f4..025ef96d3 100644 --- a/packages/data-center/src/provider/affine/affine.ts +++ b/packages/data-center/src/provider/affine/affine.ts @@ -407,6 +407,7 @@ export class AffineProvider extends BaseProvider { token.clear(); this._channel?.disconnect(); this._wsMap.forEach(ws => ws.disconnect()); + this._workspaces.clear(); storage.removeItem('token'); } diff --git a/packages/data-center/src/workspace-unit-collection.ts b/packages/data-center/src/workspace-unit-collection.ts index b51f5d160..c44ef3feb 100644 --- a/packages/data-center/src/workspace-unit-collection.ts +++ b/packages/data-center/src/workspace-unit-collection.ts @@ -122,9 +122,7 @@ export class WorkspaceUnitCollection { }; const clear = () => { - scopedWorkspaceIds.forEach(id => { - remove(id); - }); + remove(Array.from(scopedWorkspaceIds)); }; const update = (workspaceId: string, meta: UpdateWorkspaceUnitParams) => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e3871e797..65da888ea 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1596,7 +1596,7 @@ packages: fs-extra: 7.0.1 lodash.startcase: 4.4.0 outdent: 0.5.0 - prettier: 2.7.1 + prettier: 2.8.1 resolve-from: 5.0.0 semver: 5.7.1 dev: true @@ -1764,7 +1764,7 @@ packages: '@changesets/types': 5.2.1 fs-extra: 7.0.1 human-id: 1.0.2 - prettier: 2.7.1 + prettier: 2.8.1 dev: true /@cspotcode/source-map-support/0.8.1: @@ -1803,6 +1803,16 @@ packages: stylis: 4.0.13 dev: false + /@emotion/cache/11.10.5: + resolution: {integrity: sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==} + dependencies: + '@emotion/memoize': 0.8.0 + '@emotion/sheet': 1.2.1 + '@emotion/utils': 1.2.0 + '@emotion/weak-memoize': 0.3.0 + stylis: 4.1.3 + dev: false + /@emotion/css/11.10.0: resolution: {integrity: sha512-dH9f+kSCucc8ilMg0MUA1AemabcyzYpe5EKX24F528PJjD7HyIY/VBNJHxfUdc8l400h2ncAjR6yEDu+DBj2cg==} peerDependencies: @@ -1885,6 +1895,10 @@ packages: resolution: {integrity: sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==} dev: false + /@emotion/sheet/1.2.1: + resolution: {integrity: sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==} + dev: false + /@emotion/styled/11.10.4_yiaqs725o7pcd7rteavrnhgj4y: resolution: {integrity: sha512-pRl4R8Ez3UXvOPfc2bzIoV8u9P97UedgHS4FPX594ntwEuAMA114wlaHvOK24HB48uqfXiGlYIZYCxVJ1R1ttQ==} peerDependencies: @@ -2930,7 +2944,7 @@ packages: optional: true dependencies: '@babel/runtime': 7.20.7 - '@emotion/cache': 11.10.3 + '@emotion/cache': 11.10.5 '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34 '@emotion/styled': 11.10.4_yiaqs725o7pcd7rteavrnhgj4y csstype: 3.1.1 @@ -3574,7 +3588,7 @@ packages: ejs: 3.1.8 json5: 2.2.1 magic-string: 0.25.9 - string.prototype.matchall: 4.0.7 + string.prototype.matchall: 4.0.8 dev: true /@swc/helpers/0.4.11: @@ -3675,7 +3689,7 @@ packages: resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==} dependencies: '@types/minimatch': 5.1.2 - '@types/node': 18.7.18 + '@types/node': 18.11.18 dev: true /@types/graceful-fs/4.1.6: @@ -3769,19 +3783,19 @@ packages: /@types/react-dom/18.0.6: resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==} dependencies: - '@types/react': 18.0.20 + '@types/react': 18.0.26 dev: true /@types/react-is/17.0.3: resolution: {integrity: sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==} dependencies: - '@types/react': 18.0.20 + '@types/react': 18.0.26 dev: false /@types/react-transition-group/4.4.5: resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==} dependencies: - '@types/react': 18.0.20 + '@types/react': 18.0.26 dev: false /@types/react/18.0.20: @@ -3799,10 +3813,17 @@ packages: csstype: 3.1.1 dev: true + /@types/react/18.0.26: + resolution: {integrity: sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==} + dependencies: + '@types/prop-types': 15.7.5 + '@types/scheduler': 0.16.2 + csstype: 3.1.1 + /@types/resolve/1.17.1: resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==} dependencies: - '@types/node': 18.7.18 + '@types/node': 18.11.18 dev: true /@types/scheduler/0.16.2: @@ -4030,7 +4051,6 @@ packages: /acorn/8.8.0: resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==} engines: {node: '>=0.4.0'} - hasBin: true dev: true /aggregate-error/3.1.0: @@ -4166,6 +4186,17 @@ packages: is-string: 1.0.7 dev: true + /array-includes/3.1.6: + resolution: {integrity: sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==} + engines: {node: '>= 0.4'} + dependencies: + call-bind: 1.0.2 + define-properties: 1.1.4 + es-abstract: 1.21.1 + get-intrinsic: 1.1.3 + is-string: 1.0.7 + dev: true + /array-union/1.0.2: resolution: {integrity: sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==} engines: {node: '>=0.10.0'} @@ -4230,6 +4261,11 @@ packages: resolution: {integrity: sha512-FPVt5ynkqUAA9gcMZnJHka1XfQgr1WNd/yRfIjmj5WGmjua+u5Hl9hn8M2nU5CNy2bEIcj1ZUwXq7IOHsfZG9w==} dev: false + /available-typed-arrays/1.0.5: + resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==} + engines: {node: '>= 0.4'} + dev: true + /axe-core/4.4.3: resolution: {integrity: sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==} engines: {node: '>=4'} @@ -5053,6 +5089,54 @@ packages: unbox-primitive: 1.0.2 dev: true + /es-abstract/1.21.1: + resolution: {integrity: sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==} + engines: {node: '>= 0.4'} + dependencies: + available-typed-arrays: 1.0.5 + call-bind: 1.0.2 + es-set-tostringtag: 2.0.1 + es-to-primitive: 1.2.1 + function-bind: 1.1.1 + function.prototype.name: 1.1.5 + get-intrinsic: 1.1.3 + get-symbol-description: 1.0.0 + globalthis: 1.0.3 + gopd: 1.0.1 + has: 1.0.3 + has-property-descriptors: 1.0.0 + has-proto: 1.0.1 + has-symbols: 1.0.3 + internal-slot: 1.0.4 + is-array-buffer: 3.0.1 + is-callable: 1.2.7 + is-negative-zero: 2.0.2 + is-regex: 1.1.4 + is-shared-array-buffer: 1.0.2 + is-string: 1.0.7 + is-typed-array: 1.1.10 + is-weakref: 1.0.2 + object-inspect: 1.12.2 + object-keys: 1.1.1 + object.assign: 4.1.4 + regexp.prototype.flags: 1.4.3 + safe-regex-test: 1.0.0 + string.prototype.trimend: 1.0.6 + string.prototype.trimstart: 1.0.6 + typed-array-length: 1.0.4 + unbox-primitive: 1.0.2 + which-typed-array: 1.1.9 + dev: true + + /es-set-tostringtag/2.0.1: + resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==} + engines: {node: '>= 0.4'} + dependencies: + get-intrinsic: 1.1.3 + has: 1.0.3 + has-tostringtag: 1.0.0 + dev: true + /es-shim-unscopables/1.0.0: resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==} dependencies: @@ -5063,7 +5147,7 @@ packages: resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==} engines: {node: '>= 0.4'} dependencies: - is-callable: 1.2.6 + is-callable: 1.2.7 is-date-object: 1.0.5 is-symbol: 1.0.4 dev: true @@ -5892,6 +5976,12 @@ packages: resolution: {integrity: sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==} dev: false + /for-each/0.3.3: + resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} + dependencies: + is-callable: 1.2.7 + dev: true + /form-data-encoder/2.1.4: resolution: {integrity: sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==} engines: {node: '>= 14.17'} @@ -5953,7 +6043,7 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.1.4 - es-abstract: 1.20.2 + es-abstract: 1.21.1 functions-have-names: 1.2.3 dev: true @@ -6066,6 +6156,13 @@ packages: type-fest: 0.20.2 dev: true + /globalthis/1.0.3: + resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==} + engines: {node: '>= 0.4'} + dependencies: + define-properties: 1.1.4 + dev: true + /globby/11.1.0: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} @@ -6089,6 +6186,12 @@ packages: pinkie-promise: 2.0.1 dev: true + /gopd/1.0.1: + resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} + dependencies: + get-intrinsic: 1.1.3 + dev: true + /got/12.5.3: resolution: {integrity: sha512-8wKnb9MGU8IPGRIo+/ukTy9XLJBwDiCpIf5TVzQ9Cpol50eMTpBq2GAuDsuDIz7hTYmZgMgC1e9ydr6kSDWs3w==} engines: {node: '>=14.16'} @@ -6137,6 +6240,11 @@ packages: dependencies: get-intrinsic: 1.1.3 + /has-proto/1.0.1: + resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==} + engines: {node: '>= 0.4'} + dev: true + /has-symbols/1.0.3: resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==} engines: {node: '>= 0.4'} @@ -6316,6 +6424,15 @@ packages: side-channel: 1.0.4 dev: true + /internal-slot/1.0.4: + resolution: {integrity: sha512-tA8URYccNzMo94s5MQZgH8NB/XTa6HsOo0MLfXTKKEnHVVdegzaQoFZ7Jp44bdvLvY2waT5dc+j5ICEswhi7UQ==} + engines: {node: '>= 0.4'} + dependencies: + get-intrinsic: 1.1.3 + has: 1.0.3 + side-channel: 1.0.4 + dev: true + /invariant/2.2.4: resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} dependencies: @@ -6330,6 +6447,14 @@ packages: has-tostringtag: 1.0.0 dev: false + /is-array-buffer/3.0.1: + resolution: {integrity: sha512-ASfLknmY8Xa2XtB4wmbz13Wu202baeA18cJBCeCy0wXUHZF0IPyVEXqKEcd+t2fNSLLL1vC6k7lxZEojNbISXQ==} + dependencies: + call-bind: 1.0.2 + get-intrinsic: 1.1.3 + is-typed-array: 1.1.10 + dev: true + /is-arrayish/0.2.1: resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} @@ -6352,6 +6477,11 @@ packages: engines: {node: '>= 0.4'} dev: true + /is-callable/1.2.7: + resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==} + engines: {node: '>= 0.4'} + dev: true + /is-ci/3.0.1: resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==} hasBin: true @@ -6363,6 +6493,12 @@ packages: resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==} dependencies: has: 1.0.3 + dev: true + + /is-core-module/2.11.0: + resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==} + dependencies: + has: 1.0.3 /is-date-object/1.0.5: resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==} @@ -6500,6 +6636,17 @@ packages: has-symbols: 1.0.3 dev: true + /is-typed-array/1.1.10: + resolution: {integrity: sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==} + engines: {node: '>= 0.4'} + dependencies: + available-typed-arrays: 1.0.5 + call-bind: 1.0.2 + for-each: 0.3.3 + gopd: 1.0.1 + has-tostringtag: 1.0.0 + dev: true + /is-weakref/1.0.2: resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==} dependencies: @@ -6919,7 +7066,7 @@ packages: jest-util: 29.3.1 natural-compare: 1.4.0 pretty-format: 29.3.1 - semver: 7.3.7 + semver: 7.3.8 transitivePeerDependencies: - supports-color dev: true @@ -6966,7 +7113,7 @@ packages: resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.7.18 + '@types/node': 18.11.18 merge-stream: 2.0.0 supports-color: 7.2.0 dev: true @@ -6975,7 +7122,7 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.7.18 + '@types/node': 18.11.18 merge-stream: 2.0.0 supports-color: 8.1.1 dev: true @@ -7101,7 +7248,7 @@ packages: resolution: {integrity: sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==} engines: {node: '>=4.0'} dependencies: - array-includes: 3.1.5 + array-includes: 3.1.6 object.assign: 4.1.4 dev: true @@ -8020,6 +8167,12 @@ packages: engines: {node: '>=10.13.0'} hasBin: true + /prettier/2.8.1: + resolution: {integrity: sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==} + engines: {node: '>=10.13.0'} + hasBin: true + dev: true + /pretty-bytes/5.6.0: resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==} engines: {node: '>=6'} @@ -8434,14 +8587,15 @@ packages: resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==} hasBin: true dependencies: - is-core-module: 2.10.0 + is-core-module: 2.11.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 /resolve/2.0.0-next.4: resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==} + hasBin: true dependencies: - is-core-module: 2.10.0 + is-core-module: 2.11.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 dev: true @@ -8479,6 +8633,7 @@ packages: /rimraf/3.0.2: resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} + hasBin: true dependencies: glob: 7.2.3 dev: true @@ -8527,6 +8682,14 @@ packages: /safe-buffer/5.2.1: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} + /safe-regex-test/1.0.0: + resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==} + dependencies: + call-bind: 1.0.2 + get-intrinsic: 1.1.3 + is-regex: 1.1.4 + dev: true + /safer-buffer/2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} @@ -8571,6 +8734,14 @@ packages: lru-cache: 6.0.0 dev: true + /semver/7.3.8: + resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==} + engines: {node: '>=10'} + hasBin: true + dependencies: + lru-cache: 6.0.0 + dev: true + /serialize-javascript/4.0.0: resolution: {integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==} dependencies: @@ -8818,12 +8989,33 @@ packages: side-channel: 1.0.4 dev: true + /string.prototype.matchall/4.0.8: + resolution: {integrity: sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==} + dependencies: + call-bind: 1.0.2 + define-properties: 1.1.4 + es-abstract: 1.21.1 + get-intrinsic: 1.1.3 + has-symbols: 1.0.3 + internal-slot: 1.0.3 + regexp.prototype.flags: 1.4.3 + side-channel: 1.0.4 + dev: true + /string.prototype.trimend/1.0.5: resolution: {integrity: sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==} dependencies: call-bind: 1.0.2 define-properties: 1.1.4 - es-abstract: 1.20.2 + es-abstract: 1.21.1 + dev: true + + /string.prototype.trimend/1.0.6: + resolution: {integrity: sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==} + dependencies: + call-bind: 1.0.2 + define-properties: 1.1.4 + es-abstract: 1.21.1 dev: true /string.prototype.trimstart/1.0.5: @@ -8831,7 +9023,15 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.1.4 - es-abstract: 1.20.2 + es-abstract: 1.21.1 + dev: true + + /string.prototype.trimstart/1.0.6: + resolution: {integrity: sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==} + dependencies: + call-bind: 1.0.2 + define-properties: 1.1.4 + es-abstract: 1.21.1 dev: true /string_decoder/0.10.31: @@ -8945,6 +9145,10 @@ packages: resolution: {integrity: sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==} dev: false + /stylis/4.1.3: + resolution: {integrity: sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==} + dev: false + /supports-color/5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -9227,6 +9431,14 @@ packages: engines: {node: '>=8'} dev: true + /typed-array-length/1.0.4: + resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==} + dependencies: + call-bind: 1.0.2 + for-each: 0.3.3 + is-typed-array: 1.1.10 + dev: true + /typescript/4.8.3: resolution: {integrity: sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==} engines: {node: '>=4.2.0'} @@ -9505,6 +9717,18 @@ packages: path-exists: 4.0.0 dev: true + /which-typed-array/1.1.9: + resolution: {integrity: sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==} + engines: {node: '>= 0.4'} + dependencies: + available-typed-arrays: 1.0.5 + call-bind: 1.0.2 + for-each: 0.3.3 + gopd: 1.0.1 + has-tostringtag: 1.0.0 + is-typed-array: 1.1.10 + dev: true + /which/1.3.1: resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==} hasBin: true @@ -9515,6 +9739,7 @@ packages: /which/2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} engines: {node: '>= 8'} + hasBin: true dependencies: isexe: 2.0.0 dev: true diff --git a/tests/local-first-workspace.spec.ts b/tests/local-first-workspace.spec.ts index 39b10c6ae..014b839fc 100644 --- a/tests/local-first-workspace.spec.ts +++ b/tests/local-first-workspace.spec.ts @@ -12,7 +12,7 @@ test.describe('Local first default workspace', () => { test.skip('Default workspace avatar', async ({ page }) => { const workspaceAvatar = page.getByTestId('workspace-avatar'); expect(await workspaceAvatar.innerHTML()).toBe( - '' + '' ); }); });