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

close PD-2330 PD-2331 AF-2238

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>

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