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

close PD-2330 PD-2331 AF-2238

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({

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 : (
+              <Tooltip
+                content={t['com.affine.settings.workspace.state.joined']()}
+              >
                 <CollaborationIcon className={styles.collaborationIcon} />
+              </Tooltip>
             )}
             {hideTeamWorkspaceIcon || !information?.isTeam ? null : (
+              <Tooltip
+                content={t['com.affine.settings.workspace.state.team']()}
+              >
                 <TeamWorkspaceIcon className={styles.collaborationIcon} />
+              </Tooltip>
             )}
             {onClickOpenSettings && (
               <div className={styles.settingButton} onClick={onOpenSettings}>

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>
+        <div className={styles.descriptions}>
-            {t['com.affine.payment.member.team.assign.confirm.description-1']()}
+          <div className={styles.description}>
-          </p>
+            <span className={styles.prefixDot} />
-          <p>
+            <span>
-            {t['com.affine.payment.member.team.assign.confirm.description-2']()}
+              {t[
-          </p>
+                'com.affine.payment.member.team.assign.confirm.description-1'
-          <p>
+              ]()}
-            {t['com.affine.payment.member.team.assign.confirm.description-3']()}
+            </span>
-          </p>
           </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(
+            placeholder={placeholder}
-              'com.affine.payment.member.team.assign.confirm.placeholder'
-            )}
           />
         </div>
       </div>

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}

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',

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>
   );

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',
+});

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,

packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/members-permission.tsx

@@ -97,8 +97,10 @@ export const MembersPermission = ({
       </div>
       {disabled ? (
         <div className={clsx(styles.menuTriggerStyle, 'disable')}>
+          <div className={styles.menuTriggerText}>
             {showTips ? <Tips disable={disabled} /> : null} {currentRoleName}
           </div>
+        </div>
       ) : (
         <Menu
           contentOptions={{
@@ -142,6 +144,7 @@ export const MembersPermission = ({
           <MenuTrigger
             className={styles.menuTriggerStyle}
             variant="plain"
+            suffixClassName={styles.suffixClassName}
             contentStyle={{
               width: '100%',
             }}

packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/public-page-button.tsx

@@ -89,10 +89,12 @@ export const PublicDoc = ({ disabled }: { disabled?: boolean }) => {
       </div>
       {disabled ? (
         <div className={clsx(styles.menuTriggerStyle, 'disable')}>
+          <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
           contentOptions={{
@@ -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%',
             }}

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',

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',
 });

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',

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}>
+        <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>
   );