fix: menu style (#4287)

packages/component/src/components/share-menu/index.css.ts

@@ -1,9 +1,8 @@
 import { style } from '@vanilla-extract/css';
 
 export const menuItemStyle = style({
-  padding: '4px 18px',
-  paddingBottom: '16px',
-  width: '100%',
+  padding: '4px',
+  transition: 'all 0.3s',
 });
 
 export const descriptionStyle = style({
@@ -12,6 +11,7 @@ export const descriptionStyle = style({
   fontSize: 'var(--affine-font-xs)',
   lineHeight: '20px',
   color: 'var(--affine-text-secondary-color)',
+  textAlign: 'left',
 });
 
 export const buttonStyle = style({

packages/component/src/components/share-menu/share-export.tsx

@@ -7,7 +7,6 @@ import {
   ExportToPngMenuItem,
 } from '../page-list/operation-menu-items/export';
 import * as styles from './index.css';
-// import type { ShareMenuProps } from './share-menu';
 
 export const ShareExport = () => {
   const t = useAFFiNEI18N();
@@ -17,10 +16,10 @@ export const ShareExport = () => {
         {t['com.affine.share-menu.ShareViaExport']()}
       </div>
       <div>
-        <ExportToPdfMenuItem />
-        <ExportToHtmlMenuItem />
-        <ExportToPngMenuItem />
-        <ExportToMarkdownMenuItem />
+        <ExportToPdfMenuItem className={styles.menuItemStyle} />
+        <ExportToHtmlMenuItem className={styles.menuItemStyle} />
+        <ExportToPngMenuItem className={styles.menuItemStyle} />
+        <ExportToMarkdownMenuItem className={styles.menuItemStyle} />
       </div>
       <div className={styles.columnContainerStyle}>
         <div className={styles.descriptionStyle}>

packages/component/src/components/share-menu/share-menu.tsx

@@ -9,7 +9,6 @@ import type { Page } from '@blocksuite/store';
 import { Button } from '@toeverything/components/button';
 import { Divider } from '@toeverything/components/divider';
 import { Menu } from '@toeverything/components/menu';
-import { useRef } from 'react';
 
 import * as styles from './index.css';
 import { ShareExport } from './share-export';
@@ -33,7 +32,6 @@ export interface ShareMenuProps<
 
 export const ShareMenu = (props: ShareMenuProps) => {
   const { useIsSharedPage } = props;
-  const ref = useRef(null);
   const isSharedPage = useIsSharedPage(
     props.workspace.id,
     props.currentPage.id
@@ -43,7 +41,7 @@ export const ShareMenu = (props: ShareMenuProps) => {
     <div className={styles.containerStyle}>
       <SharePage {...props} />
       <div className={styles.columnContainerStyle}>
-        <Divider dividerColor="var(--affine-border-color)" size="thinner" />
+        <Divider size="thinner" />
       </div>
       <ShareExport />
     </div>
@@ -51,11 +49,19 @@ export const ShareMenu = (props: ShareMenuProps) => {
   return (
     <Menu
       items={content}
-      portalOptions={{
-        container: ref.current,
+      contentOptions={{
+        style: {
+          width: '410px',
+          height: 'auto',
+          padding: '12px',
+          transform: 'translateX(-10px)',
+        },
+      }}
+      rootOptions={{
+        modal: false,
       }}
     >
-      <Button data-testid="share-menu-button" type="plain" ref={ref}>
+      <Button data-testid="share-menu-button" type="plain">
         <div
           style={{
             color: isSharedPage

packages/component/src/components/share-menu/share-page.tsx

@@ -129,7 +129,7 @@ export const AffineSharePage = (props: ShareMenuProps) => {
           <Button
             onClick={onClickCopyLink}
             data-testid="share-menu-copy-link-button"
-            style={{ padding: '4px 12px' }}
+            style={{ padding: '4px 12px', whiteSpace: 'nowrap' }}
           >
             {t.Copy()}
           </Button>
@@ -138,7 +138,7 @@ export const AffineSharePage = (props: ShareMenuProps) => {
             onClick={onClickCreateLink}
             type="primary"
             data-testid="share-menu-create-link-button"
-            style={{ padding: '4px 12px' }}
+            style={{ padding: '4px 12px', whiteSpace: 'nowrap' }}
           >
             {t.Create()}
           </Button>
@@ -203,16 +203,17 @@ export const AffineSharePage = (props: ShareMenuProps) => {
               </div>
             </>
           )}
-          <div
-            className={styles.rowContainerStyle}
+          <MenuItem
+            endFix={<ArrowRightSmallIcon />}
+            block
+            type="danger"
+            className={styles.menuItemStyle}
             onClick={() => setShowDisable(true)}
-            style={{ cursor: 'pointer' }}
           >
             <div className={styles.disableSharePage}>
               {t['Disable Public Link']()}
             </div>
-            <ArrowRightSmallIcon />
-          </div>
+          </MenuItem>
           <PublicLinkDisableModal
             open={showDisable}
             onConfirmDisable={onDisablePublic}