fix(core): adjust share menu and upgrade-to-team page style (#10299)

close PD-2330 PD-2331 AF-2238
2026-02-24 09:52:49 +08:00 · 2025-02-20 04:10:52 +00:00
parent b38abcb59c
commit 1d339c682b
14 changed files with 142 additions and 34 deletions
--- a/packages/frontend/component/src/components/member-components/invite-team-modal/styles.css.ts
+++ b/packages/frontend/component/src/components/member-components/invite-team-modal/styles.css.ts
@@ -100,6 +100,7 @@ export const errorHint = style({
 export const contentStyle = style({
  paddingLeft: '0',
  paddingRight: '0',
+  overflowY: 'visible',
 });

 export const invitationLinkContent = style({
--- a/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
+++ b/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
@@ -8,6 +8,7 @@ import type {
  WorkspaceProfileInfo,
 } from '@affine/core/modules/workspace';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
+import { useI18n } from '@affine/i18n';
 import {
  ArrowDownSmallIcon,
  CloudWorkspaceIcon,
@@ -269,6 +270,7 @@ export const WorkspaceCard = forwardRef<
    },
    ref
  ) => {
+    const t = useI18n();
    const information = useWorkspaceInfo(workspaceMetadata);

    const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
@@ -331,10 +333,18 @@ export const WorkspaceCard = forwardRef<
              </Button>
            ) : null}
            {hideCollaborationIcon || information?.isOwner ? null : (
-              <CollaborationIcon className={styles.collaborationIcon} />
+              <Tooltip
+                content={t['com.affine.settings.workspace.state.joined']()}
+              >
+                <CollaborationIcon className={styles.collaborationIcon} />
+              </Tooltip>
            )}
            {hideTeamWorkspaceIcon || !information?.isTeam ? null : (
-              <TeamWorkspaceIcon className={styles.collaborationIcon} />
+              <Tooltip
+                content={t['com.affine.settings.workspace.state.team']()}
+              >
+                <TeamWorkspaceIcon className={styles.collaborationIcon} />
+              </Tooltip>
            )}
            {onClickOpenSettings && (
              <div className={styles.settingButton} onClick={onOpenSettings}>
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/confirm-assign-modal.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/confirm-assign-modal.tsx
@@ -10,6 +10,7 @@ export const ConfirmAssignModal = ({
  setOpen,
  member,
  inputValue,
+  placeholder,
  setInputValue,
  isEquals,
  onConfirm,
@@ -19,6 +20,7 @@ export const ConfirmAssignModal = ({
  isEquals: boolean;
  member: Member;
  inputValue: string;
+  placeholder?: string;
  onConfirm: () => void;
  setInputValue: (value: string) => void;
 }) => {
@@ -35,31 +37,45 @@ export const ConfirmAssignModal = ({
      confirmButtonOptions={{ disabled: !isEquals, variant: 'error' }}
    >
      <div className={styles.confirmAssignModalContent}>
-        <div>
-          <p>
-            {t['com.affine.payment.member.team.assign.confirm.description']({
-              name: member.name || member.email || member.id,
-            })}
-          </p>
-          <p>
-            {t['com.affine.payment.member.team.assign.confirm.description-1']()}
-          </p>
-          <p>
-            {t['com.affine.payment.member.team.assign.confirm.description-2']()}
-          </p>
-          <p>
-            {t['com.affine.payment.member.team.assign.confirm.description-3']()}
-          </p>
+        <p>
+          {t['com.affine.payment.member.team.assign.confirm.description']({
+            name: member.name || member.email || member.id,
+          })}
+        </p>
+        <div className={styles.descriptions}>
+          <div className={styles.description}>
+            <span className={styles.prefixDot} />
+            <span>
+              {t[
+                'com.affine.payment.member.team.assign.confirm.description-1'
+              ]()}
+            </span>
+          </div>
+          <div className={styles.description}>
+            <span className={styles.prefixDot} />
+            <span>
+              {t[
+                'com.affine.payment.member.team.assign.confirm.description-2'
+              ]()}
+            </span>
+          </div>
+          <div className={styles.description}>
+            <span className={styles.prefixDot} />
+            <span>
+              {t[
+                'com.affine.payment.member.team.assign.confirm.description-3'
+              ]()}
+            </span>
+          </div>
        </div>
+
        <div className={styles.confirmInputContainer}>
          {t['com.affine.payment.member.team.assign.confirm.description-4']()}
          <Input
            value={inputValue}
            inputStyle={{ fontSize: cssVar('fontSm') }}
            onChange={setInputValue}
-            placeholder={t.t(
-              'com.affine.payment.member.team.assign.confirm.placeholder'
-            )}
+            placeholder={placeholder}
          />
        </div>
      </div>
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx
@@ -247,6 +247,7 @@ const MemberItem = ({
        setOpen={setOpen}
        member={member}
        inputValue={inputValue}
+        placeholder={workspaceName}
        setInputValue={setInputValue}
        isEquals={isEquals}
        onConfirm={confirmAssign}
--- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts
+++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts
@@ -128,6 +128,25 @@ export const confirmAssignModalContent = style({
  padding: '0',
 });

+export const descriptions = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+});
+
+export const description = style({
+  display: 'flex',
+});
+
+export const prefixDot = style({
+  background: cssVarV2('icon/activated'),
+  width: '5px',
+  height: '5px',
+  borderRadius: '50%',
+  marginRight: '12px',
+  marginTop: '10px',
+});
+
 export const confirmInputContainer = style({
  display: 'flex',
  flexDirection: 'column',
--- a/packages/frontend/core/src/desktop/pages/upgrade-to-team/index.tsx
+++ b/packages/frontend/core/src/desktop/pages/upgrade-to-team/index.tsx
@@ -1,6 +1,8 @@
 import {
+  Avatar,
  Button,
  Divider,
+  IconButton,
  Input,
  Menu,
  MenuItem,
@@ -10,6 +12,7 @@ import {
  Scrollable,
 } from '@affine/component';
 import { AuthPageContainer } from '@affine/component/auth-components';
+import { useSignOut } from '@affine/core/components/hooks/affine/use-sign-out';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { useWorkspaceInfo } from '@affine/core/components/hooks/use-workspace-info';
 import { PureWorkspaceCard } from '@affine/core/components/workspace-selector/workspace-card';
@@ -22,7 +25,7 @@ import { buildShowcaseWorkspace } from '@affine/core/utils/first-app-data';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { SubscriptionPlan, SubscriptionRecurring } from '@affine/graphql';
 import { type I18nString, Trans, useI18n } from '@affine/i18n';
-import { DoneIcon, NewPageIcon } from '@blocksuite/icons/rc';
+import { DoneIcon, NewPageIcon, SignOutIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -54,11 +57,16 @@ export const Component = () => {

 export const UpgradeToTeam = ({ recurring }: { recurring: string | null }) => {
  const t = useI18n();
+
  const workspacesList = useService(WorkspacesService).list;
  const workspaces = useLiveData(workspacesList.workspaces$);
  const [openUpgrade, setOpenUpgrade] = useState(false);
  const [openCreate, setOpenCreate] = useState(false);

+  const authService = useService(AuthService);
+  const user = useLiveData(authService.session.account$);
+  const onSignOut = useSignOut();
+
  const [selectedWorkspace, setSelectedWorkspace] =
    useState<WorkspaceMetadata | null>(null);

@@ -102,7 +110,6 @@ export const UpgradeToTeam = ({ recurring }: { recurring: string | null }) => {
        >
          <MenuTrigger
            className={styles.menuTrigger}
-            tooltip={menuTriggerText}
            data-selected={!!selectedWorkspace}
          >
            {menuTriggerText}
@@ -144,6 +151,19 @@ export const UpgradeToTeam = ({ recurring }: { recurring: string | null }) => {
            onSelect={setSelectedWorkspace}
          />
        </div>
+        {user ? (
+          <div className={styles.userContainer}>
+            <Avatar url={user.avatar} name={user.label} />
+            <span className={styles.email}>{user.email}</span>
+            <IconButton
+              onClick={onSignOut}
+              size="20"
+              tooltip={t['404.signOut']()}
+            >
+              <SignOutIcon />
+            </IconButton>
+          </div>
+        ) : null}
      </div>
    </AuthPageContainer>
  );
--- a/packages/frontend/core/src/desktop/pages/upgrade-to-team/styles.css.ts
+++ b/packages/frontend/core/src/desktop/pages/upgrade-to-team/styles.css.ts
@@ -118,3 +118,14 @@ export const dialogFooter = style({
 export const upgradeButtonInDialog = style({
  width: 'unset',
 });
+
+export const userContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: '28px',
+});
+
+export const email = style({
+  marginLeft: '4px',
+  marginRight: '8px',
+});
--- a/packages/frontend/core/src/modules/share-menu/view/share-menu/copy-link-button.css.ts
+++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/copy-link-button.css.ts
@@ -6,6 +6,7 @@ export const copyLinkContainerStyle = style({
  alignItems: 'center',
  width: '100%',
  position: 'relative',
+  border: `1px solid ${cssVarV2('layer/insideBorder/blackBorder')}`,
  selectors: {
    '&.secondary': {
      padding: 0,
--- a/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/members-permission.tsx
+++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/members-permission.tsx
@@ -97,7 +97,9 @@ export const MembersPermission = ({
      </div>
      {disabled ? (
        <div className={clsx(styles.menuTriggerStyle, 'disable')}>
-          {showTips ? <Tips disable={disabled} /> : null} {currentRoleName}
+          <div className={styles.menuTriggerText}>
+            {showTips ? <Tips disable={disabled} /> : null} {currentRoleName}
+          </div>
        </div>
      ) : (
        <Menu
@@ -142,6 +144,7 @@ export const MembersPermission = ({
          <MenuTrigger
            className={styles.menuTriggerStyle}
            variant="plain"
+            suffixClassName={styles.suffixClassName}
            contentStyle={{
              width: '100%',
            }}
--- a/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/public-page-button.tsx
+++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/public-page-button.tsx
@@ -89,9 +89,11 @@ export const PublicDoc = ({ disabled }: { disabled?: boolean }) => {
      </div>
      {disabled ? (
        <div className={clsx(styles.menuTriggerStyle, 'disable')}>
-          {isSharedPage
-            ? t['com.affine.share-menu.option.link.readonly']()
-            : t['com.affine.share-menu.option.link.no-access']()}
+          <div className={styles.menuTriggerText}>
+            {isSharedPage
+              ? t['com.affine.share-menu.option.link.readonly']()
+              : t['com.affine.share-menu.option.link.no-access']()}
+          </div>
        </div>
      ) : (
        <Menu
@@ -128,6 +130,7 @@ export const PublicDoc = ({ disabled }: { disabled?: boolean }) => {
            className={styles.menuTriggerStyle}
            data-testid="share-link-menu-trigger"
            variant="plain"
+            suffixClassName={styles.suffixClassName}
            contentStyle={{
              width: '100%',
            }}
--- a/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/styles.css.ts
+++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/styles.css.ts
@@ -3,27 +3,36 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';

 export const menuTriggerStyle = style({
-  padding: '4px 10px',
+  padding: '4px 0px 4px 4px',
  borderRadius: '4px',
  justifyContent: 'space-between',
  display: 'flex',
  fontSize: cssVar('fontSm'),
  fontWeight: 400,
+  height: '30px',
  selectors: {
    '&.disable': {
      alignItems: 'center',
      gap: '4px',
+      marginRight: '4px',
      color: cssVarV2('text/disable'),
    },
  },
 });
+export const menuTriggerText = style({
+  margin: '0px 4px',
+});
+export const suffixClassName = style({
+  width: '20px',
+  height: '20px',
+});

 export const rowContainerStyle = style({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
-  padding: '4px',
+  marginLeft: '4px',
 });
 export const exportContainerStyle = style({
  display: 'flex',
@@ -32,7 +41,6 @@ export const exportContainerStyle = style({
 });
 export const labelStyle = style({
  fontSize: cssVar('fontSm'),
-  fontWeight: 500,
 });
 export const publicItemRowStyle = style({
  display: 'flex',
--- a/packages/frontend/core/src/modules/share-menu/view/share-menu/index.css.ts
+++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/index.css.ts
@@ -15,6 +15,10 @@ export const content = style({
  flexDirection: 'column',
  gap: '8px',
 });
+export const divider = style({
+  borderColor: cssVarV2('tab/divider/divider'),
+  margin: '4px 0px',
+});
 export const menuStyle = style({
  width: '390px',
  maxHeight: '562px',
@@ -66,6 +70,13 @@ export const columnContainerStyle = style({
  width: '100%',
  gap: '8px',
 });
+export const memberRowsStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  gap: '8px',
+  margin: '6px 0px',
+});
 export const exportContainerStyle = style({
  display: 'flex',
  flexDirection: 'column',
@@ -127,8 +138,9 @@ export const shortcutStyle = style({
 });

 export const generalAccessStyle = style({
-  padding: '4px',
+  padding: '3px 4px',
  fontSize: cssVar('fontSm'),
  color: cssVarV2('text/secondary'),
  fontWeight: 500,
+  height: '30px',
 });
--- a/packages/frontend/core/src/modules/share-menu/view/share-menu/invite-member-editor/styles.css.ts
+++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/invite-member-editor/styles.css.ts
@@ -2,7 +2,6 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';

 export const inputStyle = style({
-  marginTop: '6px',
  padding: '4px',
  gap: '4px',
  borderRadius: '4px',
--- a/packages/frontend/core/src/modules/share-menu/view/share-menu/share-page.tsx
+++ b/packages/frontend/core/src/modules/share-menu/view/share-menu/share-page.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from '@affine/component';
+import { Divider, Skeleton } from '@affine/component';
 import { Button } from '@affine/component/ui/button';
 import { ServerService } from '@affine/core/modules/cloud';
 import { DocService } from '@affine/core/modules/doc';
@@ -97,8 +97,11 @@ export const AFFiNESharePage = (
  return (
    <div className={styles.content}>
      <div className={styles.columnContainerStyle}>
-        {canManageUsers && <InviteInput onFocus={props.onClickInvite} />}
-        <MembersRow onClick={props.onClickMembers} />
+        <div className={styles.memberRowsStyle}>
+          {canManageUsers && <InviteInput onFocus={props.onClickInvite} />}
+          <MembersRow onClick={props.onClickMembers} />
+        </div>
+
        <div className={styles.generalAccessStyle}>
          {t['com.affine.share-menu.generalAccess']()}
        </div>
@@ -109,6 +112,7 @@ export const AFFiNESharePage = (
        />
        <PublicDoc disabled={!canPublish} />
      </div>
+      <Divider className={styles.divider} />
      <CopyLinkButton workspaceId={workspaceId} />
    </div>
  );