feat: modify workspace modal style & add workspace setting entry to worksapce card (#1498)

apps/web/package.json

@@ -16,7 +16,7 @@
     "@affine/i18n": "workspace:*",
     "@blocksuite/blocks": "0.5.0-20230310062711-a86b71f",
     "@blocksuite/editor": "0.5.0-20230310062711-a86b71f",
-    "@blocksuite/icons": "2.0.17",
+    "@blocksuite/icons": "2.0.22",
     "@blocksuite/react": "0.5.0-20230310062711-a86b71f",
     "@blocksuite/store": "0.5.0-20230310062711-a86b71f",
     "@emotion/cache": "^11.10.5",

apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx

@@ -7,9 +7,8 @@ import { assertExists } from '@blocksuite/store';
 import { render, renderHook } from '@testing-library/react';
 import { createStore, getDefaultStore, Provider } from 'jotai';
 import { useRouter } from 'next/router';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
-import createFetchMock from 'vitest-fetch-mock';
 
 import { workspacesAtom } from '../../atoms';
 import { useCurrentPageId } from '../../hooks/current/use-current-page-id';
@@ -26,8 +25,6 @@ vi.mock('react-lottie', () => ({
   default: (props: React.PropsWithChildren) => <>{props.children}</>,
 }));
 
-const fetchMocker = createFetchMock(vi);
-
 // fetchMocker.enableMocks();
 let store = getDefaultStore();
 beforeEach(async () => {
@@ -58,7 +55,6 @@ describe('WorkSpaceSliderBar', () => {
     });
     let i = 0;
     const Component = () => {
-      const [show, setShow] = useState(false);
       const [currentWorkspace] = useCurrentWorkspace();
       const [currentPageId] = useCurrentPageId();
       assertExists(currentWorkspace);
@@ -76,8 +72,6 @@ describe('WorkSpaceSliderBar', () => {
             i++;
             return helper.createPage('page-test-' + i);
           }}
-          show={show}
-          setShow={setShow}
           currentPath={useRouter().asPath}
           paths={pathGenerator}
           isPublicWorkspace={false}

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

@@ -199,10 +199,9 @@ const MemberIcon = styled('div')(({ theme }) => {
   };
 });
 
-const Email = styled('div')(({ theme }) => {
+const Email = styled('div')(() => {
   return {
     flex: '1',
-    color: theme.colors.popoverColor,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',

apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts

@@ -11,14 +11,13 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledModalHeader = styled('div')(({ theme }) => {
+export const StyledModalHeader = styled('div')(() => {
   return {
     margin: '44px 0px 12px 0px',
     width: '560px',
     fontWeight: '600',
     fontSize: '20px;',
     textAlign: 'center',
-    color: theme.colors.popoverColor,
   };
 });
 

apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts

@@ -10,14 +10,13 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledModalHeader = styled('div')(({ theme }) => {
+export const StyledModalHeader = styled('div')(() => {
   return {
     margin: '44px 0px 12px 0px',
     width: '460px',
     fontWeight: '600',
     fontSize: '20px;',
     textAlign: 'center',
-    color: theme.colors.popoverColor,
   };
 });
 

apps/web/src/components/pure/create-workspace-modal/index.tsx

@@ -91,13 +91,12 @@ const Header = styled('div')({
   height: '44px',
 });
 
-const Content = styled('div')(({ theme }) => {
+const Content = styled('div')(() => {
   return {
     padding: '0 84px',
     textAlign: 'center',
     fontSize: '18px',
     lineHeight: '26px',
-    color: theme.colors.inputColor,
     p: {
       marginTop: '12px',
       marginBottom: '16px',

apps/web/src/components/pure/footer/index.tsx

@@ -51,7 +51,7 @@ export const Footer: React.FC<FooterProps> = ({ user, onLogin, onLogout }) => {
           bold
           icon={
             <div className="circle">
-              <CloudWorkspaceIcon fontSize={16} />
+              <CloudWorkspaceIcon />
             </div>
           }
           onClick={async () => {

apps/web/src/components/pure/footer/styles.ts

@@ -20,7 +20,6 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
     marginLeft: '15px',
     width: '202px',
     p: {
-      color: theme.colors.popoverColor,
       height: '20px',
       fontSize: theme.font.sm,
       ...displayFlex('flex-start', 'center'),
@@ -157,13 +156,15 @@ export const StyledModalHeader = styled('div')(() => {
 
 export const StyledSignInButton = styled(Button)(({ theme }) => {
   return {
-    fontWeight: 700,
+    fontWeight: 600,
     paddingLeft: 0,
     '.circle': {
       width: '40px',
       height: '40px',
       borderRadius: '20px',
-      backgroundColor: theme.colors.innerHoverBackground,
+      backgroundColor: theme.colors.hoverBackground,
+      color: theme.colors.primaryColor,
+      fontSize: '24px',
       flexShrink: 0,
       marginRight: '16px',
       ...displayInlineFlex('center', 'center'),

apps/web/src/components/pure/quick-search-modal/style.ts

@@ -67,7 +67,6 @@ export const StyledInputContent = styled('div')(({ theme }) => {
       fontSize: theme.font.base,
       ...displayFlex('space-between', 'center'),
       letterSpacing: '0.06em',
-      color: theme.colors.popoverColor,
 
       '::placeholder': {
         color: theme.colors.placeHolderColor,
@@ -91,12 +90,11 @@ export const StyledLabel = styled('label')(({ theme }) => {
   };
 });
 
-export const StyledModalHeader = styled('div')(({ theme }) => {
+export const StyledModalHeader = styled('div')(() => {
   return {
     height: '48px',
     margin: '12px 24px 0px 24px',
     ...displayFlex('space-between', 'center'),
-    color: theme.colors.popoverColor,
   };
 });
 export const StyledModalDivider = styled('div')(({ theme }) => {
@@ -117,7 +115,6 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
     marginBottom: '8px',
     textAlign: 'center',
     ...displayFlex('center', 'center'),
-    color: theme.colors.popoverColor,
     '[aria-selected="true"]': {
       transition: 'background .15s, color .15s',
       borderRadius: '5px',

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

@@ -7,7 +7,6 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
   backgroundColor: theme.colors.popoverBackground,
   boxShadow: theme.shadow.popover,
   borderRadius: `${theme.radius.popover} 0 ${theme.radius.popover} ${theme.radius.popover}`,
-  color: theme.colors.popoverColor,
   overflow: 'auto',
   boxRadius: '10px',
   position: 'fixed',
@@ -30,7 +29,6 @@ export const StyledTitle = styled('div')(({ theme }) => ({
   },
 }));
 export const StyledSubTitle = styled('div')(({ theme }) => ({
-  color: theme.colors.popoverColor,
   fontWeight: '500',
   fontSize: theme.font.sm,
   height: '34px',

apps/web/src/components/pure/workspace-card/index.tsx

@@ -1,5 +1,6 @@
 import { PermissionType } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
+import { SettingsIcon } from '@blocksuite/icons';
 import React, { useCallback } from 'react';
 
 import { useBlockSuiteWorkspaceName } from '../../../hooks/use-blocksuite-workspace-name';
@@ -12,8 +13,12 @@ import {
   PublishIcon,
 } from '../icons';
 import { WorkspaceAvatar } from '../workspace-avatar';
-import { StyledCard, StyleWorkspaceInfo, StyleWorkspaceTitle } from './styles';
+import {
-
+  StyledCard,
+  StyledSettingLink,
+  StyleWorkspaceInfo,
+  StyleWorkspaceTitle,
+} from './styles';
 export type WorkspaceTypeProps = {
   workspace: RemWorkspace;
 };
@@ -53,11 +58,13 @@ export type WorkspaceCardProps = {
   currentWorkspaceId: string | null;
   workspace: RemWorkspace;
   onClick: (workspace: RemWorkspace) => void;
+  onSettingClick: (workspace: RemWorkspace) => void;
 };
 
 export const WorkspaceCard: React.FC<WorkspaceCardProps> = ({
   workspace,
   onClick,
+  onSettingClick,
   currentWorkspaceId,
 }) => {
   const { t } = useTranslation();
@@ -90,6 +97,15 @@ export const WorkspaceCard: React.FC<WorkspaceCardProps> = ({
             </p>
           )}
       </StyleWorkspaceInfo>
+      <StyledSettingLink
+        hoverBackground="#fff"
+        onClick={e => {
+          e.stopPropagation();
+          onSettingClick(workspace);
+        }}
+      >
+        <SettingsIcon />
+      </StyledSettingLink>
     </StyledCard>
   );
 };

apps/web/src/components/pure/workspace-card/styles.ts

@@ -1,26 +1,11 @@
-import {
+import { displayFlex, styled, textEllipsis } from '@affine/component';
-  displayFlex,
+import { IconButton } from '@affine/component';
-  displayInlineFlex,
-  styled,
-  textEllipsis,
-} from '@affine/component';
-import { Button } from '@affine/component';
-
-export const StyledSplitLine = styled('div')(({ theme }) => {
-  return {
-    width: '1px',
-    height: '20px',
-    background: theme.colors.borderColor,
-    marginRight: '24px',
-  };
-});
 
 export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
   return {
     marginLeft: '15px',
     width: '202px',
     p: {
-      color: theme.colors.popoverColor,
       height: '20px',
       fontSize: theme.font.sm,
       ...displayFlex('flex-start', 'center'),
@@ -64,6 +49,7 @@ export const StyledCard = styled('div')<{
     marginBottom: '24px',
     transition: 'background .2s',
     background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
+    position: 'relative',
     ':hover': {
       background: theme.colors.cardHoverBackground,
       '.add-icon': {
@@ -74,74 +60,6 @@ export const StyledCard = styled('div')<{
   };
 });
 
-export const StyledFooter = styled('div')({
-  height: '84px',
-  padding: '0 40px',
-  flexShrink: 0,
-  ...displayFlex('space-between', 'center'),
-});
-
-export const StyleUserInfo = styled('div')(({ theme }) => {
-  return {
-    textAlign: 'left',
-    marginLeft: '16px',
-    flex: 1,
-    p: {
-      lineHeight: '24px',
-      color: theme.colors.iconColor,
-    },
-    'p:first-of-type': {
-      color: theme.colors.textColor,
-      fontWeight: 600,
-    },
-  };
-});
-
-export const StyledModalHeaderLeft = styled('div')(() => {
-  return { ...displayFlex('flex-start', 'center') };
-});
-export const StyledModalTitle = styled('div')(({ theme }) => {
-  return {
-    fontWeight: 600,
-    fontSize: theme.font.h6,
-  };
-});
-
-export const StyledHelperContainer = styled('div')(({ theme }) => {
-  return {
-    color: theme.colors.iconColor,
-    marginLeft: '15px',
-    fontWeight: 400,
-    fontSize: theme.font.h6,
-    ...displayFlex('center', 'center'),
-  };
-});
-
-export const StyledModalContent = styled('div')({
-  height: '534px',
-  padding: '8px 40px',
-  marginTop: '72px',
-  overflow: 'auto',
-  ...displayFlex('space-between', 'flex-start', 'flex-start'),
-  flexWrap: 'wrap',
-});
-export const StyledOperationWrapper = styled('div')(() => {
-  return {
-    ...displayFlex('flex-end', 'center'),
-  };
-});
-
-export const StyleWorkspaceAdd = styled('div')(() => {
-  return {
-    width: '58px',
-    height: '58px',
-    borderRadius: '100%',
-    background: '#f4f5fa',
-    border: '1.5px dashed #f4f5fa',
-    transition: 'background .2s',
-    ...displayFlex('center', 'center'),
-  };
-});
 export const StyledModalHeader = styled('div')(() => {
   return {
     width: '100%',
@@ -155,18 +73,13 @@ export const StyledModalHeader = styled('div')(() => {
   };
 });
 
-export const StyledSignInButton = styled(Button)(({ theme }) => {
+export const StyledSettingLink = styled(IconButton)(({ theme }) => {
   return {
-    fontWeight: 700,
+    position: 'absolute',
-    paddingLeft: 0,
+    right: '6px',
-    '.circle': {
+    bottom: '6px',
-      width: '40px',
+    ':hover': {
-      height: '40px',
+      background: theme.colors.pageBackground,
-      borderRadius: '20px',
-      backgroundColor: theme.colors.innerHoverBackground,
-      flexShrink: 0,
-      marginRight: '16px',
-      ...displayInlineFlex('center', 'center'),
     },
   };
 });

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

@@ -13,7 +13,7 @@ import { Footer } from '../footer';
 import { WorkspaceCard } from '../workspace-card';
 import { LanguageMenu } from './language-menu';
 import {
-  StyledCard,
+  StyledCreateWorkspaceCard,
   StyledHelperContainer,
   StyledModalContent,
   StyledModalHeader,
@@ -33,6 +33,7 @@ interface WorkspaceModalProps {
   open: boolean;
   onClose: () => void;
   onClickWorkspace: (workspace: RemWorkspace) => void;
+  onClickWorkspaceSetting: (workspace: RemWorkspace) => void;
   onClickLogin: () => void;
   onClickLogout: () => void;
   onCreateWorkspace: () => void;
@@ -46,6 +47,7 @@ export const WorkspaceListModal = ({
   onClickLogin,
   onClickLogout,
   onClickWorkspace,
+  onClickWorkspaceSetting,
   onCreateWorkspace,
   currentWorkspaceId,
 }: WorkspaceModalProps) => {
@@ -95,11 +97,16 @@ export const WorkspaceListModal = ({
                 workspace={workspace}
                 currentWorkspaceId={currentWorkspaceId}
                 onClick={onClickWorkspace}
+                onSettingClick={onClickWorkspaceSetting}
                 key={workspace.id}
               />
             );
           })}
-          <StyledCard data-testid="new-workspace" onClick={onCreateWorkspace}>
+
+          <StyledCreateWorkspaceCard
+            data-testid="new-workspace"
+            onClick={onCreateWorkspace}
+          >
             <StyleWorkspaceAdd className="add-icon">
               <PlusIcon />
             </StyleWorkspaceAdd>
@@ -108,7 +115,7 @@ export const WorkspaceListModal = ({
               <StyleWorkspaceTitle>{t('New Workspace')}</StyleWorkspaceTitle>
               <p>{t('Create Or Import')}</p>
             </StyleWorkspaceInfo>
-          </StyledCard>
+          </StyledCreateWorkspaceCard>
         </StyledModalContent>
 
         <Footer user={user} onLogin={onClickLogin} onLogout={onClickLogout} />

apps/web/src/components/pure/workspace-list-modal/language-menu.tsx

@@ -46,7 +46,7 @@ export const LanguageMenu: React.FC = () => {
         icon={<ArrowDownSmallIcon />}
         iconPosition="end"
         noBorder={true}
-        style={{ textTransform: 'capitalize' }}
+        style={{ textTransform: 'capitalize', padding: '0 12px' }}
         data-testid="language-menu-button"
       >
         {currentLanguage?.originalName}
@@ -57,7 +57,6 @@ export const LanguageMenu: React.FC = () => {
 
 const ListItem = styled(MenuItem)(({ theme }) => ({
   height: '38px',
-  color: theme.colors.popoverColor,
   fontSize: theme.font.base,
   textTransform: 'capitalize',
   padding: '0 24px',

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

@@ -5,7 +5,7 @@ export const StyledSplitLine = styled('div')(({ theme }) => {
     width: '1px',
     height: '20px',
     background: theme.colors.borderColor,
-    marginRight: '24px',
+    marginRight: '12px',
   };
 });
 
@@ -14,7 +14,6 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
     marginLeft: '15px',
     width: '202px',
     p: {
-      color: theme.colors.popoverColor,
       height: '20px',
       fontSize: theme.font.sm,
       ...displayFlex('flex-start', 'center'),
@@ -60,6 +59,25 @@ export const StyledCard = styled('div')<{
     background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
     ':hover': {
       background: theme.colors.cardHoverBackground,
+    },
+  };
+});
+
+export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => {
+  return {
+    width: '310px',
+    height: '124px',
+    cursor: 'pointer',
+    padding: '16px',
+    boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)',
+    borderRadius: '12px',
+    transition: 'all .1s',
+    ...displayFlex('flex-start', 'flex-start'),
+    color: theme.colors.secondaryTextColor,
+
+    ':hover': {
+      background: theme.colors.cardHoverBackground,
+      color: theme.colors.textColor,
       '.add-icon': {
         borderColor: theme.colors.primaryColor,
         color: theme.colors.primaryColor,
@@ -110,6 +128,7 @@ export const StyleWorkspaceAdd = styled('div')(() => {
     background: '#f4f5fa',
     border: '1.5px dashed #f4f5fa',
     transition: 'background .2s',
+    fontSize: '24px',
     ...displayFlex('center', 'center'),
   };
 });

apps/web/src/components/pure/workspace-slider-bar/style.ts

@@ -105,7 +105,7 @@ export const StyledSubListItem = styled('button')<{
       ? theme.colors.disableColor
       : active
       ? theme.colors.primaryColor
-      : theme.colors.popoverColor,
+      : theme.colors.textColor,
     backgroundColor: active ? theme.colors.hoverBackground : 'unset',
 
     cursor: disable ? 'not-allowed' : 'pointer',

apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx

@@ -47,7 +47,6 @@ export const StyledBreadcrumbs = styled(Link)(({ theme }) => {
     ':hover': { color: theme.colors.primaryColor },
     transition: 'all .15s',
     ':visited': {
-      color: theme.colors.popoverColor,
       ':hover': { color: theme.colors.primaryColor },
     },
   };

apps/web/src/providers/ModalProvider.tsx

@@ -62,6 +62,14 @@ export function Modals() {
           },
           [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal]
         )}
+        onClickWorkspaceSetting={useCallback(
+          workspace => {
+            setOpenWorkspacesModal(false);
+            setCurrentWorkspace(workspace.id);
+            jumpToSubPath(workspace.id, WorkspaceSubPath.SETTING);
+          },
+          [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal]
+        )}
         onClickLogin={useCallback(() => {
           apis.signInWithGoogle().then(() => {
             router.reload();

packages/component/src/index.ts

@@ -45,8 +45,6 @@ declare module '@mui/material/styles' {
       linkVisitedColor: string;
       iconColor: string;
       handleColor: string;
-      popoverColor: string;
-      inputColor: string;
       tooltipColor: string;
       codeColor: string;
       quoteColor: string;
@@ -120,8 +118,6 @@ declare module '@mui/material/styles' {
       linkVisitedColor: string;
       iconColor: string;
       handleColor: string;
-      popoverColor: string;
-      inputColor: string;
       tooltipColor: string;
       codeColor: string;
       quoteColor: string;

packages/component/src/styles/theme.ts

@@ -37,14 +37,12 @@ export const getLightTheme = (
       linkColor: '#5438FF',
       linkColor2: '#5438FF',
       linkVisitedColor: '#5438FF',
-      popoverColor: '#4C6275',
-      inputColor: '#4C6275',
       tooltipColor: '#fff',
       codeColor: '#77757D',
       quoteColor: '#645F82',
       placeHolderColor: '#C0BFC1',
       selectedColor: 'rgba(84, 56, 255, 0.04)',
-      borderColor: '#9787FF',
+      borderColor: '#E3E2E4',
       disableColor: '#A9A9AD',
       warningColor: '#906616',
       errorColor: '#EB4335',
@@ -121,8 +119,6 @@ export const getDarkTheme = (
       linkColor: '#7D91FF',
       linkColor2: '#0C0A15',
       linkVisitedColor: '#505FAB',
-      popoverColor: '#C6CBD9',
-      inputColor: '#C6CBD9',
       tooltipColor: '#fff',
       codeColor:
         editorMode === 'edgeless' ? lightTheme.colors.codeColor : '#BDDBFD',
@@ -172,8 +168,6 @@ export const globalThemeVariables: (
     '--affine-link-visited-color': theme.colors.linkVisitedColor,
     '--affine-icon-color': theme.colors.iconColor,
     '--affine-block-handle-color': theme.colors.handleColor,
-    '--affine-popover-color': theme.colors.popoverColor,
-    '--affine-input-color': theme.colors.inputColor,
     '--affine-code-color': theme.colors.codeColor,
     '--affine-code-block-background': theme.colors.codeBlockBackground,
     '--affine-quote-color': theme.colors.quoteColor,

packages/component/src/styles/types.ts

@@ -45,8 +45,6 @@ export interface AffineTheme {
     linkVisitedColor: string;
     iconColor: string;
     handleColor: string;
-    popoverColor: string;
-    inputColor: string;
     tooltipColor: string;
     codeColor: string;
     quoteColor: string;
@@ -116,7 +114,6 @@ export interface AffineThemeCSSVariables {
   '--affine-link-color2': AffineTheme['colors']['linkColor2'];
   '--affine-link-visited-color': AffineTheme['colors']['linkVisitedColor'];
   '--affine-icon-color': AffineTheme['colors']['iconColor'];
-  '--affine-popover-color': AffineTheme['colors']['popoverColor'];
   '--affine-code-color': AffineTheme['colors']['codeColor'];
   '--affine-quote-color': AffineTheme['colors']['quoteColor'];
   '--affine-placeholder-color': AffineTheme['colors']['placeHolderColor'];

packages/component/src/ui/breadcrumbs/index.ts

@@ -4,6 +4,6 @@ import { styled } from '../../styles';
 
 export const Breadcrumbs = styled(MuiBreadcrumbs)(({ theme }) => {
   return {
-    color: theme.colors.popoverColor,
+    color: theme.colors.textColor,
   };
 });

packages/component/src/ui/button/styles.ts

@@ -68,9 +68,10 @@ export const StyledIconButton = styled('button', {
         color: hoverColor ?? theme.colors.primaryColor,
         '::after': {
           background:
-            hoverBackground ?? darker
+            hoverBackground ||
+            (darker
               ? theme.colors.innerHoverBackground
-              : theme.colors.hoverBackground,
+              : theme.colors.hoverBackground),
         },
         ...(hoverStyle ?? {}),
       },
@@ -116,7 +117,7 @@ export const StyledTextButton = styled('button', {
     shape = 'default',
     // TODO: Implement type
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    type = 'default',
+    // type = 'default',
   }) => {
     const { fontSize, borderRadius, padding, height } = getSize(size);
     console.log('size', size, height);

packages/component/src/ui/button/utils.ts

@@ -104,7 +104,7 @@ export const getButtonColors = (
       };
     default:
       return {
-        color: theme.colors.popoverColor,
+        color: theme.colors.textColor,
         borderColor: theme.colors.borderColor,
         ':hover': {
           borderColor: theme.colors.primaryColor,

packages/component/src/ui/confirm/styles.ts

@@ -15,7 +15,6 @@ export const StyledConfirmTitle = styled('div')(({ theme }) => {
     fontSize: theme.font.h6,
     fontWeight: 600,
     textAlign: 'center',
-    color: theme.colors.popoverColor,
     lineHeight: '28px',
   };
 });

packages/component/src/ui/input/style.ts

@@ -15,7 +15,7 @@ export const StyledInput = styled('input')<{
     fontWeight,
     fontSize,
     height: height ? `${height}px` : 'auto',
-    color: disabled ? theme.colors.disableColor : theme.colors.inputColor,
+    color: disabled ? theme.colors.disableColor : theme.colors.textColor,
     border: `1px solid`,
     borderColor: theme.colors.borderColor, // TODO: check out disableColor,
     backgroundColor: theme.colors.popoverBackground,

packages/component/src/ui/menu/styles.ts

@@ -14,7 +14,6 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)<{
     fontSize: '14px',
     backgroundColor: theme.colors.popoverBackground,
     boxShadow: theme.shadow.popover,
-    color: theme.colors.popoverColor,
   };
 });
 
@@ -39,7 +38,6 @@ export const StyledMenuItem = styled('button')<{
     ...displayFlex('flex-start', 'center'),
     cursor: isDir ? 'pointer' : '',
     position: 'relative',
-    color: theme.colors.popoverColor,
     backgroundColor: 'transparent',
 
     ':hover': {

pnpm-lock.yaml

@@ -140,7 +140,7 @@ importers:
       '@affine/i18n': workspace:*
       '@blocksuite/blocks': 0.5.0-20230310062711-a86b71f
       '@blocksuite/editor': 0.5.0-20230310062711-a86b71f
-      '@blocksuite/icons': 2.0.17
+      '@blocksuite/icons': 2.0.22
       '@blocksuite/react': 0.5.0-20230310062711-a86b71f
       '@blocksuite/store': 0.5.0-20230310062711-a86b71f
       '@emotion/cache': ^11.10.5
@@ -191,7 +191,7 @@ importers:
       '@affine/i18n': link:../../packages/i18n
       '@blocksuite/blocks': 0.5.0-20230310062711-a86b71f_34dmxnh6uvn62azxghwkfwefga
       '@blocksuite/editor': 0.5.0-20230310062711-a86b71f_6ewxdfixd6tjoobxljjnuzgvum
-      '@blocksuite/icons': 2.0.17_pmekkgnqduwlme35zpnqhenc34
+      '@blocksuite/icons': 2.0.22_pmekkgnqduwlme35zpnqhenc34
       '@blocksuite/react': 0.5.0-20230310062711-a86b71f_t4q3ljijrokxgukt43p662mcc4
       '@blocksuite/store': 0.5.0-20230310062711-a86b71f_lit@2.6.1+yjs@13.5.48
       '@emotion/cache': 11.10.5
@@ -1758,6 +1758,16 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@blocksuite/icons/2.0.22_pmekkgnqduwlme35zpnqhenc34:
+    resolution: {integrity: sha512-VBpxzQCSDpQCXq+3TPj+gvWR0UZXwfZXOF0buu030GNQtw53yT1Y0Pynw9mDHzhUztm4LwBN8VKiBK1CbC3Q1g==}
+    peerDependencies:
+      '@types/react': ^18.0.25
+      react: ^18.2.0
+    dependencies:
+      '@types/react': 18.0.28
+      react: 18.2.0
+    dev: false
+
   /@blocksuite/phasor/0.5.0-20230310062711-a86b71f_lit@2.6.1+yjs@13.5.48:
     resolution: {integrity: sha512-LsPgNPM2G4jQHJ7U40wK/4BfqkKiE97YtC3KphYrp4Vc3wFctr8JIsMnhwDKYltmJ9rFgfBGp1L8wGE/K8OyTg==}
     peerDependencies: