fix: menu style (#4287)

apps/core/src/components/affine/language-menu/index.tsx

@@ -56,6 +56,12 @@ export const LanguageMenu = () => {
       portalOptions={{
         container: ref.current,
       }}
+      contentOptions={{
+        style: {
+          background: 'var(--affine-white)',
+        },
+        align: 'end',
+      }}
     >
       <MenuTrigger
         ref={ref}

apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx

@@ -83,6 +83,7 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
   }, [pageId, removeToTrash, t]);
   const menuItemStyle = {
     padding: '4px 12px',
+    transition: 'all 0.3s',
   };
   const { openPage } = useNavigateHelper();
   const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
@@ -214,11 +215,9 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
           portalOptions={{
             container: ref.current,
           }}
-          // menuStyles={{
-          //   borderRadius: '8px',
-          //   padding: '8px',
-          //   background: 'var(--affine-background-overlay-panel-color)',
-          // }}
+          contentOptions={{
+            align: 'center',
+          }}
         >
           <HeaderDropDownButton />
         </Menu>

apps/core/src/components/pure/workspace-list-modal/index.tsx

@@ -8,8 +8,8 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import {
   AccountIcon,
-  CloudWorkspaceIcon,
   ImportIcon,
+  Logo1Icon,
   MoreHorizontalIcon,
   PlusIcon,
   SignOutIcon,
@@ -214,7 +214,7 @@ export const WorkspaceListModal = ({
             >
               <StyledCreateWorkspaceCardPillContent>
                 <StyledCreateWorkspaceCardPillIcon>
-                  <CloudWorkspaceIcon />
+                  <Logo1Icon />
                 </StyledCreateWorkspaceCardPillIcon>
                 <StyledSignInCardPillTextCotainer>
                   <StyledSignInCardPillTextPrimary>
@@ -227,14 +227,24 @@ export const WorkspaceListModal = ({
               </StyledCreateWorkspaceCardPillContent>
             </StyledItem>
           </StyledSignInCardPill>
-          <Divider style={{ margin: '12px 0px' }} />
+          <Divider
+            style={{
+              margin: '12px 0px',
+            }}
+          />
         </StyledModalHeaderContent>
       ) : (
         <StyledModalHeaderContent>
           <StyledModalHeader>
             <StyledModalTitle>{session?.user.email}</StyledModalTitle>
             <StyledOperationWrapper>
-              <Menu items={<AccountMenu />}>
+              <Menu
+                items={<AccountMenu />}
+                contentOptions={{
+                  side: 'right',
+                  sideOffset: 30,
+                }}
+              >
                 <IconButton
                   data-testid="more-button"
                   icon={<MoreHorizontalIcon />}
@@ -261,7 +271,11 @@ export const WorkspaceListModal = ({
               currentWorkspaceId={currentWorkspaceId}
               onMoveWorkspace={onMoveWorkspace}
             />
-            <Divider style={{ margin: '12px 0px', minHeight: '1px' }} />
+            <Divider
+              style={{
+                margin: '12px 0px',
+              }}
+            />
           </>
         ) : null}
         <StyledModalHeader>
@@ -290,8 +304,10 @@ export const WorkspaceListModal = ({
         {runtimeConfig.enableSQLiteProvider && environment.isDesktop ? (
           <StyledImportWorkspaceCardPill>
             <StyledItem onClick={onAddWorkspace} data-testid="add-workspace">
-              <StyledCreateWorkspaceCardPillContent>
-                <StyledCreateWorkspaceCardPillIcon>
+              <StyledCreateWorkspaceCardPillContent
+                style={{ gap: '14px', paddingLeft: '2px' }}
+              >
+                <StyledCreateWorkspaceCardPillIcon style={{ fontSize: '24px' }}>
                   <ImportIcon />
                 </StyledCreateWorkspaceCardPillIcon>
                 <div>

apps/core/src/components/pure/workspace-list-modal/styles.ts

@@ -116,7 +116,7 @@ export const StyledCreateWorkspaceCardPillContent = styled('div')(() => {
 
 export const StyledCreateWorkspaceCardPillIcon = styled('div')(() => {
   return {
-    fontSize: '20px',
+    fontSize: '28px',
     width: '1em',
     height: '1em',
   };
@@ -142,6 +142,7 @@ export const StyledSignInCardPillTextPrimary = styled('div')(() => {
     fontWeight: 600,
     lineHeight: '24px',
     maxWidth: '200px',
+    textAlign: 'left',
     ...textEllipsis(1),
   };
 });