refactor: header options menu (#3615)

packages/component/package.json

@@ -36,7 +36,7 @@
     "@radix-ui/react-scroll-area": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.4",
     "@toeverything/hooks": "workspace:*",
-    "@toeverything/theme": "^0.7.9",
+    "@toeverything/theme": "^0.7.11",
     "@vanilla-extract/dynamic": "^2.0.3",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.9",
@@ -54,7 +54,7 @@
     "@blocksuite/blocks": "0.0.0-20230807164933-9f6fb698-nightly",
     "@blocksuite/editor": "0.0.0-20230807164933-9f6fb698-nightly",
     "@blocksuite/global": "0.0.0-20230807164933-9f6fb698-nightly",
-    "@blocksuite/icons": "^2.1.29",
+    "@blocksuite/icons": "^2.1.30",
     "@blocksuite/lit": "0.0.0-20230807164933-9f6fb698-nightly",
     "@blocksuite/store": "0.0.0-20230807164933-9f6fb698-nightly",
     "@types/react": "^18.2.17",

packages/component/src/components/page-list/operation-menu-items/export.tsx

@@ -17,6 +17,10 @@ import { Menu, MenuItem } from '../../..';
 import { getContentParser } from './get-content-parser';
 import type { CommonMenuItemProps } from './types';
 
+const MenuItemStyle = {
+  padding: '4px 12px',
+};
+
 export const ExportToPdfMenuItem = ({
   onSelect,
 }: CommonMenuItemProps<{ type: 'pdf' }>) => {
@@ -83,6 +87,7 @@ export const ExportToPdfMenuItem = ({
       data-testid="export-to-pdf"
       onClick={onClickDownloadPDF}
       icon={<ExportToPdfIcon />}
+      style={MenuItemStyle}
     >
       {t['Export to PDF']()}
     </MenuItem>
@@ -128,6 +133,7 @@ export const ExportToHtmlMenuItem = ({
         data-testid="export-to-html"
         onClick={onClickExportHtml}
         icon={<ExportToHtmlIcon />}
+        style={MenuItemStyle}
       >
         {t['Export to HTML']()}
       </MenuItem>
@@ -176,6 +182,7 @@ export const ExportToPngMenuItem = ({
         data-testid="export-to-png"
         onClick={onClickDownloadPNG}
         icon={<ExportToPngIcon />}
+        style={MenuItemStyle}
       >
         {t['Export to PNG']()}
       </MenuItem>
@@ -222,6 +229,7 @@ export const ExportToMarkdownMenuItem = ({
         data-testid="export-to-markdown"
         onClick={onClickExportMarkdown}
         icon={<ExportToMarkdownIcon />}
+        style={MenuItemStyle}
       >
         {t['Export to Markdown']()}
       </MenuItem>
@@ -236,8 +244,8 @@ export const Export = ({
   return (
     <Menu
       width={248}
-      placement="left"
       trigger="click"
+      placement="right-start"
       content={
         <>
           <ExportToPdfMenuItem></ExportToPdfMenuItem>
@@ -246,11 +254,17 @@ export const Export = ({
           <ExportToMarkdownMenuItem></ExportToMarkdownMenuItem>
         </>
       }
+      menuStyles={{
+        borderRadius: '8px',
+        padding: '8px',
+        background: 'var(--affine-background-overlay-panel-color)',
+      }}
     >
       <MenuItem
         data-testid="export-menu"
         icon={<ExportIcon />}
         endIcon={<ArrowRightSmallIcon />}
+        style={{ padding: '4px 12px' }}
         onClick={e => {
           e.stopPropagation();
           onItemClick?.();

packages/component/src/components/page-list/operation-menu-items/index.css.ts

@@ -1,6 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 
 export const moveToTrashStyle = style({
+  padding: '4px 12px',
   ':hover': {
     backgroundColor: 'var(--affine-background-error-color)',
     color: 'var(--affine-error-color)',