diff --git a/packages/frontend/component/src/components/auth-components/share.css.ts b/packages/frontend/component/src/components/auth-components/share.css.ts index f9601f581..d3b482720 100644 --- a/packages/frontend/component/src/components/auth-components/share.css.ts +++ b/packages/frontend/component/src/components/auth-components/share.css.ts @@ -4,7 +4,7 @@ export const modalHeaderWrapper = style({}); globalStyle(`${modalHeaderWrapper} .logo`, { fontSize: cssVar('fontH3'), fontWeight: 600, - color: cssVar('blue'), + color: cssVar('black'), marginRight: '6px', verticalAlign: 'middle', }); @@ -32,7 +32,7 @@ export const authInputWrapper = style({ }); globalStyle(`${authInputWrapper} label`, { display: 'block', - color: 'var(--light-text-color-text-secondary-color, #8E8D91)', + color: cssVar('textSecondaryColor'), marginBottom: '4px', fontSize: cssVar('fontSm'), fontWeight: 600, diff --git a/packages/frontend/component/src/theme/global.css b/packages/frontend/component/src/theme/global.css index dcd9f41f9..a111fb7d3 100644 --- a/packages/frontend/component/src/theme/global.css +++ b/packages/frontend/component/src/theme/global.css @@ -222,30 +222,6 @@ input[type='number']::-webkit-outer-spin-button { height: 0; } -.affine-doc-viewport::-webkit-scrollbar { - width: 20px; - /* Chrome Safari */ - height: 20px; -} - -.affine-doc-viewport::-webkit-scrollbar-thumb { - border-radius: 12px; - background-clip: padding-box; - border-style: solid; - border-width: 7px; - border-color: transparent; - transition: all 0.2s; -} - -.affine-doc-viewport:hover::-webkit-scrollbar-thumb { - background-color: var(--affine-divider-color); -} - -.affine-doc-viewport:hover::-webkit-scrollbar-thumb:hover { - background-color: var(--affine-icon-color); - border-width: 5px; -} - .editor-wrapper { position: relative; padding-right: 0; @@ -282,7 +258,6 @@ affine-block-hub { .editor-wrapper { width: 100%; - height: 100%; } /* issue: https://github.com/toeverything/AFFiNE/issues/2004 */ diff --git a/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx b/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx index 3372fd8f8..deaec3054 100644 --- a/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx +++ b/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx @@ -139,11 +139,16 @@ const HistoryEditorPreview = ({ {snapshotPage ? ( - + + + + + + ) : (
diff --git a/packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts b/packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts index c9bfa80ae..3bf4770ec 100644 --- a/packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts +++ b/packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts @@ -95,7 +95,6 @@ export const previewHeaderTimestamp = style({ export const editor = style({ height: '100%', flexGrow: 1, - overflow: 'hidden', }); export const rowWrapper = style({ display: 'flex', diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx index 57d77021b..507bb5fe1 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx @@ -104,7 +104,10 @@ export const BlocksuiteDocEditor = forwardRef< return (
-
+
{!isJournal ? ( ) : ( diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts index 137973bb3..97289d4e3 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts @@ -2,8 +2,6 @@ import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; export const docEditorRoot = style({ display: 'block', - height: '100%', - overflow: 'hidden', background: cssVar('backgroundPrimaryColor'), }); @@ -11,9 +9,6 @@ export const docEditorRoot = style({ export const affineDocViewport = style({ display: 'flex', flexDirection: 'column', - height: '100%', - overflowX: 'hidden', - overflowY: 'auto', userSelect: 'none', containerName: 'viewport', // todo: find out what this does in bs @@ -25,6 +20,13 @@ export const affineDocViewport = style({ zIndex: -1, }, }, + selectors: { + '&[data-doc-viewport="true"]': { + overflowX: 'visible', + overflowY: 'visible', + height: 'auto', + }, + }, }); export const docContainer = style({ diff --git a/packages/frontend/core/src/components/cloud/share-header-left-item/index.tsx b/packages/frontend/core/src/components/cloud/share-header-left-item/index.tsx deleted file mode 100644 index 7a674c2ff..000000000 --- a/packages/frontend/core/src/components/cloud/share-header-left-item/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Logo1Icon } from '@blocksuite/icons'; - -import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status'; -import * as styles from './styles.css'; -import { PublishPageUserAvatar } from './user-avatar'; - -const ShareHeaderLeftItem = () => { - const loginStatus = useCurrentLoginStatus(); - if (loginStatus === 'authenticated') { - return ; - } - - return ( - - - - ); -}; - -export default ShareHeaderLeftItem; diff --git a/packages/frontend/core/src/components/cloud/share-header-left-item/styles.css.ts b/packages/frontend/core/src/components/cloud/share-header-left-item/styles.css.ts deleted file mode 100644 index 8ee4c1a64..000000000 --- a/packages/frontend/core/src/components/cloud/share-header-left-item/styles.css.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { cssVar } from '@toeverything/theme'; -import { style } from '@vanilla-extract/css'; -export const iconWrapper = style({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - fontSize: '24px', - cursor: 'pointer', - color: cssVar('textPrimaryColor'), - selectors: { - '&:visited': { - color: cssVar('textPrimaryColor'), - }, - }, -}); diff --git a/packages/frontend/core/src/components/cloud/share-header-left-item/user-avatar.tsx b/packages/frontend/core/src/components/cloud/share-header-left-item/user-avatar.tsx deleted file mode 100644 index 7b6716aae..000000000 --- a/packages/frontend/core/src/components/cloud/share-header-left-item/user-avatar.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Avatar } from '@affine/component/ui/avatar'; -import { Menu, MenuIcon, MenuItem } from '@affine/component/ui/menu'; -import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks'; -import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { SignOutIcon } from '@blocksuite/icons'; -import { useMemo } from 'react'; -import { useLocation } from 'react-router-dom'; - -import { useCurrentUser } from '../../../hooks/affine/use-current-user'; -import { signOutCloud } from '../../../utils/cloud-utils'; -import * as styles from './styles.css'; - -export const PublishPageUserAvatar = () => { - const user = useCurrentUser(); - const t = useAFFiNEI18N(); - const location = useLocation(); - - const handleSignOut = useAsyncCallback(async () => { - await signOutCloud({ callbackUrl: location.pathname }); - }, [location.pathname]); - - const menuItem = useMemo(() => { - return ( - - - - } - data-testid="share-page-sign-out-option" - onClick={handleSignOut} - > - {t['com.affine.workspace.cloud.account.logout']()} - - ); - }, [handleSignOut, t]); - - return ( - -
- -
- - ); -}; diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx index 0ec6d87d8..bd777ce81 100644 --- a/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx +++ b/packages/frontend/core/src/components/cloud/share-header-right-item/authenticated-item.tsx @@ -1,12 +1,17 @@ import { Button } from '@affine/component/ui/button'; +import { useCurrentUser } from '@affine/core/hooks/affine/use-current-user'; +import { useMembers } from '@affine/core/hooks/affine/use-members'; +import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; +import { useCallback, useEffect } from 'react'; -import { useCurrentUser } from '../../../hooks/affine/use-current-user'; -import { useMembers } from '../../../hooks/affine/use-members'; -import { useNavigateHelper } from '../../../hooks/use-navigate-helper'; import type { ShareHeaderRightItemProps } from './index'; +import * as styles from './styles.css'; -export const AuthenticatedItem = ({ ...props }: ShareHeaderRightItemProps) => { +export const AuthenticatedItem = ({ + setIsMember, + ...props +}: { setIsMember: (value: boolean) => void } & ShareHeaderRightItemProps) => { const { workspaceId, pageId } = props; const user = useCurrentUser(); const members = useMembers(workspaceId, 0); @@ -14,11 +19,21 @@ export const AuthenticatedItem = ({ ...props }: ShareHeaderRightItemProps) => { const t = useAFFiNEI18N(); const { jumpToPage } = useNavigateHelper(); + const handleEdit = useCallback(() => { + jumpToPage(workspaceId, pageId); + }, [workspaceId, pageId, jumpToPage]); + + useEffect(() => { + if (isMember) { + setIsMember(true); + } + }, [isMember, setIsMember]); + if (isMember) { return ( diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts b/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts index b359def28..bd5526111 100644 --- a/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts +++ b/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts @@ -1,5 +1,6 @@ import { cssVar } from '@toeverything/theme'; -import { style } from '@vanilla-extract/css'; +import { globalStyle, style } from '@vanilla-extract/css'; + export const iconWrapper = style({ display: 'flex', justifyContent: 'center', @@ -16,9 +17,117 @@ export const iconWrapper = style({ export const rightItemContainer = style({ display: 'flex', alignItems: 'center', - gap: '8px', + gap: '16px', padding: '0 8px', }); + +export const headerDivider = style({ + width: '1px', + height: '20px', + background: cssVar('borderColor'), + display: 'none', + selectors: { + '&[data-is-member="true"]': { + display: 'block', + }, + '&[data-is-edgeless="true"]': { + display: 'block', + }, + }, + '@media': { + 'screen and (max-width: 640px)': { + selectors: { + '&[data-is-member="false"][data-is-edgeless="true"]': { + display: 'none', + }, + }, + }, + }, +}); + export const presentButton = style({ gap: '4px', + background: cssVar('black'), + color: cssVar('white'), + borderColor: cssVar('pureBlack10'), + boxShadow: cssVar('buttonInnerShadow'), + + '@media': { + 'screen and (max-width: 640px)': { + display: 'none', + }, + }, +}); + +globalStyle(`${presentButton} svg`, { + color: cssVar('white'), +}); + +export const editButton = style({ + padding: '4px 8px', +}); + +export const userPlanButton = style({ + display: 'flex', + fontSize: cssVar('fontXs'), + height: 20, + fontWeight: 500, + color: cssVar('pureWhite'), + backgroundColor: cssVar('brandColor'), + padding: '0 4px', + borderRadius: 4, + justifyContent: 'center', + alignItems: 'center', +}); + +export const accountCard = style({ + padding: '4px 8px', + borderRadius: '8px', + userSelect: 'none', + display: 'flex', + columnGap: '10px', + justifyContent: 'space-between', + alignItems: 'center', +}); +export const avatar = style({ + width: '28px', + height: '28px', + borderRadius: '50%', + fontSize: '20px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexShrink: 0, +}); + +export const content = style({ + flexGrow: '1', + minWidth: 0, +}); + +export const nameContainer = style({ + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + width: '100%', + gap: '4px', + height: '22px', +}); +export const userName = style({ + fontSize: cssVar('fontSm'), + fontWeight: 600, + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + height: '22px', +}); + +export const userEmail = style({ + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + flexGrow: 1, + height: '20px', }); diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/user-avatar.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/user-avatar.tsx new file mode 100644 index 000000000..b9ad39090 --- /dev/null +++ b/packages/frontend/core/src/components/cloud/share-header-right-item/user-avatar.tsx @@ -0,0 +1,91 @@ +import { Avatar } from '@affine/component/ui/avatar'; +import { + Menu, + MenuIcon, + MenuItem, + MenuSeparator, +} from '@affine/component/ui/menu'; +import { useCurrentUser } from '@affine/core/hooks/affine/use-current-user'; +import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks'; +import { useUserSubscription } from '@affine/core/hooks/use-subscription'; +import { signOutCloud } from '@affine/core/utils/cloud-utils'; +import { SubscriptionPlan } from '@affine/graphql'; +import { useAFFiNEI18N } from '@affine/i18n/hooks'; +import { SignOutIcon } from '@blocksuite/icons'; +import { useMemo } from 'react'; +import { useLocation } from 'react-router-dom'; + +import * as styles from './styles.css'; + +const UserInfo = () => { + const user = useCurrentUser(); + const [subscription] = useUserSubscription(); + const plan = subscription?.plan ?? SubscriptionPlan.Free; + return ( +
+ + +
+
+
+ {user.name} +
+
{plan}
+
+
+ {user.email} +
+
+
+ ); +}; + +export const PublishPageUserAvatar = () => { + const user = useCurrentUser(); + const t = useAFFiNEI18N(); + const location = useLocation(); + + const handleSignOut = useAsyncCallback(async () => { + await signOutCloud({ callbackUrl: location.pathname }); + }, [location.pathname]); + + const menuItem = useMemo(() => { + return ( + <> + + + + + + } + data-testid="share-page-sign-out-option" + onClick={handleSignOut} + > + {t['com.affine.workspace.cloud.account.logout']()} + + + ); + }, [handleSignOut, t]); + + return ( + +
+ +
+ + ); +}; diff --git a/packages/frontend/core/src/components/page-detail-editor.css.ts b/packages/frontend/core/src/components/page-detail-editor.css.ts index 97ef90e52..664319998 100644 --- a/packages/frontend/core/src/components/page-detail-editor.css.ts +++ b/packages/frontend/core/src/components/page-detail-editor.css.ts @@ -1,7 +1,6 @@ import { globalStyle, style } from '@vanilla-extract/css'; export const editor = style({ flex: 1, - overflow: 'auto', selectors: { '&.full-screen': { vars: { @@ -9,16 +8,11 @@ export const editor = style({ '--affine-editor-side-padding': '15px', }, }, - '&.is-public-page': { - height: '100%', - }, }, }); globalStyle( `${editor} .affine-doc-viewport:not(.affine-embed-synced-doc-editor)`, { paddingBottom: '150px', - paddingLeft: '20px', - scrollbarGutter: 'stable', } ); diff --git a/packages/frontend/core/src/components/page-detail-editor.tsx b/packages/frontend/core/src/components/page-detail-editor.tsx index 1217e36bf..af9a7ebba 100644 --- a/packages/frontend/core/src/components/page-detail-editor.tsx +++ b/packages/frontend/core/src/components/page-detail-editor.tsx @@ -108,7 +108,6 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({ { const workspaceManager = useService(WorkspaceManager); const currentWorkspace = useService(CurrentWorkspaceService); + const t = useAFFiNEI18N(); useEffect(() => { // create a workspace for share page @@ -181,7 +188,7 @@ export const Component = () => { const page = useServiceOptional(Page); usePageDocumentTitle(page?.meta); - + const loginStatus = useCurrentLoginStatus(); if (!page) { return; } @@ -189,18 +196,41 @@ export const Component = () => { return ( - - noop} - /> +
+
+ + + + noop} + /> + {publishMode === 'page' ? : null} + + + + {loginStatus !== 'authenticated' ? ( + + + {t['com.affine.share-page.footer.built-with']()} + + + + ) : null} +
+
); diff --git a/packages/frontend/core/src/pages/share/share-footer.css.ts b/packages/frontend/core/src/pages/share/share-footer.css.ts new file mode 100644 index 000000000..f8b5248c9 --- /dev/null +++ b/packages/frontend/core/src/pages/share/share-footer.css.ts @@ -0,0 +1,47 @@ +import { cssVar } from '@toeverything/theme'; +import { style } from '@vanilla-extract/css'; + +export const footerContainer = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + zIndex: 1, + width: '100%', + maxWidth: cssVar('editorWidth'), + marginLeft: 'auto', + marginRight: 'auto', + paddingLeft: cssVar('editorSidePadding'), + paddingRight: cssVar('editorSidePadding'), + marginBottom: '200px', +}); +export const footer = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + gap: '8px', + width: '100%', + padding: '12px', + background: cssVar('backgroundOverlayPanelColor'), +}); + +export const description = style({ + fontSize: cssVar('fontSm'), + color: cssVar('textSecondaryColor'), + textAlign: 'center', +}); + +export const getStartLink = style({ + display: 'flex', + padding: '0px 4px', + justifyContent: 'center', + alignItems: 'center', + gap: '4px', + color: cssVar('black'), + selectors: { + '&:visited': { + color: cssVar('black'), + }, + }, +}); diff --git a/packages/frontend/core/src/pages/share/share-footer.tsx b/packages/frontend/core/src/pages/share/share-footer.tsx new file mode 100644 index 000000000..39a0a86ec --- /dev/null +++ b/packages/frontend/core/src/pages/share/share-footer.tsx @@ -0,0 +1,26 @@ +import { useAFFiNEI18N } from '@affine/i18n/hooks'; +import { ArrowRightBigIcon } from '@blocksuite/icons'; + +import * as styles from './share-footer.css'; + +export const ShareFooter = () => { + const t = useAFFiNEI18N(); + return ( +
+
+
+ {t['com.affine.share-page.footer.description']()} +
+ + {t['com.affine.share-page.footer.get-started']()} + + +
+
+ ); +}; diff --git a/packages/frontend/core/src/pages/share/share-header.css.ts b/packages/frontend/core/src/pages/share/share-header.css.ts new file mode 100644 index 000000000..ef8edbdf5 --- /dev/null +++ b/packages/frontend/core/src/pages/share/share-header.css.ts @@ -0,0 +1,18 @@ +import { cssVar } from '@toeverything/theme'; +import { style } from '@vanilla-extract/css'; + +export const header = style({ + display: 'flex', + height: '52px', + width: '100%', + alignItems: 'center', + flexShrink: 0, + background: cssVar('backgroundPrimaryColor'), + borderBottom: `1px solid ${cssVar('borderColor')}`, + padding: '0 16px', +}); + +export const spacer = style({ + flexGrow: 1, + minWidth: 12, +}); diff --git a/packages/frontend/core/src/pages/share/share-header.tsx b/packages/frontend/core/src/pages/share/share-header.tsx index 9ca199f1a..e69768624 100644 --- a/packages/frontend/core/src/pages/share/share-header.tsx +++ b/packages/frontend/core/src/pages/share/share-header.tsx @@ -1,11 +1,10 @@ import { EditorModeSwitch } from '@affine/core/components/blocksuite/block-suite-mode-switch'; +import ShareHeaderRightItem from '@affine/core/components/cloud/share-header-right-item'; import type { Workspace as BlockSuiteWorkspace } from '@blocksuite/store'; import type { PageMode } from '../../atoms'; import { BlocksuiteHeaderTitle } from '../../components/blocksuite/block-suite-header/title/index'; -import ShareHeaderLeftItem from '../../components/cloud/share-header-left-item'; -import ShareHeaderRightItem from '../../components/cloud/share-header-right-item'; -import { Header } from '../../components/pure/header'; +import * as styles from './share-header.css'; export function ShareHeader({ pageId, @@ -17,32 +16,24 @@ export function ShareHeader({ blockSuiteWorkspace: BlockSuiteWorkspace; }) { return ( -
} - center={ - <> - - - - } - right={ - - } - bottomBorder - /> +
+ + +
+ +
); } diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts index fa7377f99..1d085e0df 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts +++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts @@ -26,7 +26,6 @@ export const editorContainer = style({ display: 'flex', flexDirection: 'column', flex: 1, - overflow: 'hidden', zIndex: 0, }); export const sidebarContainer = style({ diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx index eb15a1021..70320f003 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx +++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx @@ -1,3 +1,4 @@ +import { Scrollable } from '@affine/component'; import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton'; import { ResizePanel } from '@affine/component/resize-panel'; import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta'; @@ -230,14 +231,17 @@ const DetailPageImpl = memo(function DetailPageImpl() { main={ // Add a key to force rerender when page changed, to avoid error boundary persisting. -
- - -
+ + + + + + + } footer={isInTrash ? : null} diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index 3ef4402a2..ccdfe239c 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -1138,5 +1138,9 @@ "unnamed": "unnamed", "upgradeBrowser": "Please upgrade to the latest version of Chrome for the best experience.", "will be moved to Trash": "{{title}} will be moved to Trash", - "will delete member": "will delete member" + "will delete member": "will delete member", + "com.affine.share-page.footer.create-with": "Create with", + "com.affine.share-page.footer.built-with": "Built with", + "com.affine.share-page.footer.description": "Empower your sharing with AffiNE Cloud: One-click doc sharing", + "com.affine.share-page.footer.get-started": "Get started for free" } diff --git a/tests/affine-cloud/e2e/collaboration.spec.ts b/tests/affine-cloud/e2e/collaboration.spec.ts index d8ceb8966..99a426cec 100644 --- a/tests/affine-cloud/e2e/collaboration.spec.ts +++ b/tests/affine-cloud/e2e/collaboration.spec.ts @@ -112,10 +112,8 @@ test('share page with default edgeless', async ({ page, browser }) => { expect(await page2.textContent('affine-paragraph')).toContain( 'TEST CONTENT' ); - const logo = page2.getByTestId('share-page-logo'); const editButton = page2.getByTestId('share-page-edit-button'); await expect(editButton).not.toBeVisible(); - await expect(logo).toBeVisible(); } });