chore: update menu background color (#2170)

apps/web/src/components/affine/operation-menu-items/Export.tsx

@@ -20,7 +20,7 @@ export const Export = ({
   return (
     <Menu
       width={248}
-      placement="left-start"
+      // placement="left-start"
       trigger="click"
       content={
         <>

apps/web/src/components/affine/operation-menu-items/MoveTo.tsx

@@ -49,7 +49,7 @@ export const MoveTo = ({
       <PinboardMenu
         anchorEl={anchorEl}
         open={open}
-        placement="left-start"
+        // placement="left-start"
         metas={metas}
         currentMeta={currentMeta}
         blockSuiteWorkspace={blockSuiteWorkspace}

apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx

@@ -88,7 +88,7 @@ export const OperationButton = ({
           width={256}
           anchorEl={anchorEl}
           open={operationMenuOpen}
-          placement="bottom-start"
+          // placement="bottom-start"
           zIndex={menuIndex}
         >
           <MenuItem
@@ -143,7 +143,7 @@ export const OperationButton = ({
         <PinboardMenu
           anchorEl={anchorEl}
           open={pinboardMenuOpen}
-          placement="bottom-start"
+          // placement="bottom-start"
           zIndex={menuIndex}
           metas={metas}
           currentMeta={currentMeta}

apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/index.tsx

@@ -120,7 +120,7 @@ const AffineRemoteCollaborationPanel: React.FC<
                                 </MenuItem>
                               </>
                             }
-                            placement="bottom-end"
+                            // placement="bottom-end"
                             disablePortal={true}
                             trigger="click"
                           >

apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx

@@ -69,7 +69,13 @@ export const OperationCell: React.FC<OperationCellProps> = ({
             favorite ? t('Removed from Favorites') : t('Added to Favorites')
           );
         }}
-        icon={favorite ? <FavoritedIcon /> : <FavoriteIcon />}
+        icon={
+          favorite ? (
+            <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
+          ) : (
+            <FavoriteIcon />
+          )
+        }
       >
         {favorite ? t('Remove from favorites') : t('Add to Favorites')}
       </MenuItem>
@@ -98,7 +104,7 @@ export const OperationCell: React.FC<OperationCellProps> = ({
       <FlexWrapper alignItems="center" justifyContent="center">
         <Menu
           content={OperationMenu}
-          placement="bottom-end"
+          // placement="bottom-end"
           disablePortal={true}
           trigger="click"
         >

apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx

@@ -93,7 +93,7 @@ export const EditorOptionMenu = () => {
         <Menu
           width={276}
           content={EditMenu}
-          placement="bottom-end"
+          // placement="bottom-end"
           disablePortal={true}
           trigger="click"
         >

apps/web/src/components/blocksuite/workspace-header/header-right-items/UserAvatar.tsx

@@ -16,7 +16,7 @@ export const UserAvatar = () => {
     <Menu
       width={276}
       content={EditMenu}
-      placement="bottom-end"
+      // placement="bottom-end"
       disablePortal={true}
       trigger="click"
     >

apps/web/src/components/pure/help-island/index.tsx

@@ -108,7 +108,7 @@ export const HelpIsland = ({
           </MuiFade>
         </Tooltip>
         <MuiFade in={spread}>
-          <StyledTriggerWrapper>
+          <StyledTriggerWrapper spread>
             <CloseIcon />
           </StyledTriggerWrapper>
         </MuiFade>

apps/web/src/components/pure/help-island/style.ts

@@ -7,17 +7,14 @@ export const StyledIsland = styled('div')<{
     transition: 'box-shadow 0.2s',
     width: '44px',
     position: 'relative',
-    boxShadow: spread
-      ? '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)'
-      : 'unset',
+    boxShadow: spread ? 'var(--affine-menu-shadow)' : 'unset',
     padding: '0 4px 44px',
     borderRadius: '10px',
     background: spread
       ? 'var(--affine-background-overlay-panel-color)'
-      : 'transparent',
+      : 'var(--affine-background-primary-color)',
     ':hover': {
-      boxShadow:
-        '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)',
+      background: spread ? null : 'var(--affine-white)',
     },
     '::after': {
       content: '""',
@@ -58,7 +55,9 @@ export const StyledAnimateWrapper = styled('div')(() => ({
   overflow: 'hidden',
 }));
 
-export const StyledTriggerWrapper = styled('div')(({ theme }) => {
+export const StyledTriggerWrapper = styled('div')<{
+  spread?: boolean;
+}>(({ theme, spread }) => {
   return {
     width: '36px',
     height: '36px',
@@ -70,6 +69,7 @@ export const StyledTriggerWrapper = styled('div')(({ theme }) => {
     ...positionAbsolute({ left: '4px', bottom: '4px' }),
     ':hover': {
       color: 'var(--affine-primary-color)',
+      backgroundColor: spread ? 'var(--affine-hover-color)' : null,
     },
   };
 });

apps/web/src/components/pure/shortcuts-modal/style.ts

@@ -6,7 +6,7 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
   paddingBottom: '28px',
   backgroundColor: 'var(--affine-white)',
   boxShadow: 'var(--affine-popover-shadow)',
-  borderRadius: `var(--affine-popover-radius) 0 var(--affine-popover-radius) var(--affine-popover-radius)`,
+  borderRadius: `var(--affine-popover-radius)`,
   overflow: 'auto',
   boxRadius: '10px',
   position: 'fixed',