From b6a93666848dc743b7617e0694fb22d03323404e Mon Sep 17 00:00:00 2001
From: Qi <474021214@qq.com>
Date: Fri, 10 Mar 2023 16:26:54 +0800
Subject: [PATCH] feat: modify option menu style (#1506)

---
 .../header/header-right-items/EditorOptionMenu.tsx |  2 ++
 packages/component/src/ui/menu/Menu.tsx            | 14 +++++++++++---
 packages/component/src/ui/menu/styles.ts           | 11 ++++++++---
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/blocksuite/header/header-right-items/EditorOptionMenu.tsx b/apps/web/src/components/blocksuite/header/header-right-items/EditorOptionMenu.tsx
index 833823a697..afdc70e2fc 100644
--- a/apps/web/src/components/blocksuite/header/header-right-items/EditorOptionMenu.tsx
+++ b/apps/web/src/components/blocksuite/header/header-right-items/EditorOptionMenu.tsx
@@ -77,6 +77,7 @@ export const EditorOptionMenu = () => {
         {mode === 'page' ? t('Edgeless') : t('Page')}
       </MenuItem>
       <Menu
+        width={248}
         placement="left-start"
         content={
           <>
@@ -124,6 +125,7 @@ export const EditorOptionMenu = () => {
     <>
       <FlexWrapper alignItems="center" justifyContent="center">
         <Menu
+          width={276}
           content={EditMenu}
           placement="bottom-end"
           disablePortal={true}
diff --git a/packages/component/src/ui/menu/Menu.tsx b/packages/component/src/ui/menu/Menu.tsx
index a6493c797d..dbf1d25750 100644
--- a/packages/component/src/ui/menu/Menu.tsx
+++ b/packages/component/src/ui/menu/Menu.tsx
@@ -1,15 +1,23 @@
 import { TooltipProps } from '@mui/material';
+import { CSSProperties } from 'react';
 
 import { Popper, type PopperProps } from '../popper';
 import { StyledMenuWrapper } from './styles';
-export const Menu = (props: PopperProps & Omit<TooltipProps, 'title'>) => {
-  const { content, placement = 'bottom-start', children } = props;
+
+export type MenuProps = {
+  width?: CSSProperties['width'];
+} & PopperProps &
+  Omit<TooltipProps, 'title'>;
+export const Menu = (props: MenuProps) => {
+  const { width, content, placement = 'bottom-start', children } = props;
   return content ? (
     <Popper
       {...props}
       showArrow={false}
       content={
-        <StyledMenuWrapper placement={placement}>{content}</StyledMenuWrapper>
+        <StyledMenuWrapper width={width} placement={placement}>
+          {content}
+        </StyledMenuWrapper>
       }
     >
       {children}
diff --git a/packages/component/src/ui/menu/styles.ts b/packages/component/src/ui/menu/styles.ts
index a6b1d86e8d..9d754edfae 100644
--- a/packages/component/src/ui/menu/styles.ts
+++ b/packages/component/src/ui/menu/styles.ts
@@ -1,10 +1,14 @@
 import { ArrowRightSmallIcon } from '@blocksuite/icons';
+import { CSSProperties } from 'react';
 
 import { displayFlex, styled } from '../../styles';
 import StyledPopperContainer from '../shared/Container';
 
-export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
+export const StyledMenuWrapper = styled(StyledPopperContainer)<{
+  width?: CSSProperties['width'];
+}>(({ theme, width }) => {
   return {
+    width,
     background: theme.colors.popoverBackground,
     padding: '8px 4px',
     fontSize: '14px',
@@ -16,10 +20,11 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
 
 export const StyledArrow = styled(ArrowRightSmallIcon)({
   position: 'absolute',
-  right: 0,
+  right: '12px',
   top: 0,
   bottom: 0,
   margin: 'auto',
+  fontSize: '20px',
 });
 
 export const StyledMenuItem = styled('button')<{
@@ -29,7 +34,7 @@ export const StyledMenuItem = styled('button')<{
     width: '100%',
     borderRadius: '5px',
     padding: '0 14px',
-    fontSize: '14px',
+    fontSize: theme.font.base,
     height: '32px',
     ...displayFlex('flex-start', 'center'),
     cursor: isDir ? 'pointer' : '',