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

close PD-2330 PD-2331 AF-2238

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

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

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