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

2024-12-23 09:22:38 +03:00 · 2023-03-10 16:34:45 +08:00 · 2023-03-10 16:34:45 +08:00 · d60120ddf1
commit d60120ddf1
parent 16cbf85bf4
28 changed files with 100 additions and 158 deletions
--- a/apps/web/package.json
+++ b/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",
--- a/apps/web/src/components/tests/WorkSpaceSliderBar.spec.tsx
+++ b/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}
--- a/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx
+++ b/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',
--- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts
+++ b/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,
  };
 });

--- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts
+++ b/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,
  };
 });

--- a/apps/web/src/components/pure/create-workspace-modal/index.tsx
+++ b/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',
--- a/apps/web/src/components/pure/footer/index.tsx
+++ b/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 () => {
--- a/apps/web/src/components/pure/footer/styles.ts
+++ b/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'),
--- a/apps/web/src/components/pure/quick-search-modal/style.ts
+++ b/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',
--- a/apps/web/src/components/pure/shortcuts-modal/style.ts
+++ b/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',
--- a/apps/web/src/components/pure/workspace-card/index.tsx
+++ b/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>
  );
 };
--- a/apps/web/src/components/pure/workspace-card/styles.ts
+++ b/apps/web/src/components/pure/workspace-card/styles.ts
@ -1,26 +1,11 @@
-import {
-  displayFlex,
-  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',
-  };
-});
+import { displayFlex, styled, textEllipsis } from '@affine/component';
+import { IconButton } from '@affine/component';

 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,
-    paddingLeft: 0,
-    '.circle': {
-      width: '40px',
-      height: '40px',
-      borderRadius: '20px',
-      backgroundColor: theme.colors.innerHoverBackground,
-      flexShrink: 0,
-      marginRight: '16px',
-      ...displayInlineFlex('center', 'center'),
+    position: 'absolute',
+    right: '6px',
+    bottom: '6px',
+    ':hover': {
+      background: theme.colors.pageBackground,
    },
  };
 });
--- a/apps/web/src/components/pure/workspace-list-modal/index.tsx
+++ b/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} />
--- a/apps/web/src/components/pure/workspace-list-modal/language-menu.tsx
+++ b/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',
--- a/apps/web/src/components/pure/workspace-list-modal/styles.ts
+++ b/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'),
  };
 });
--- a/apps/web/src/components/pure/workspace-slider-bar/style.ts
+++ b/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',
--- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
+++ b/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 },
    },
  };
--- a/apps/web/src/providers/ModalProvider.tsx
+++ b/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();
--- a/packages/component/src/index.ts
+++ b/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;
--- a/packages/component/src/styles/theme.ts
+++ b/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,
--- a/packages/component/src/styles/types.ts
+++ b/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'];
--- a/packages/component/src/ui/breadcrumbs/index.ts
+++ b/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,
  };
 });
--- a/packages/component/src/ui/button/styles.ts
+++ b/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);
--- a/packages/component/src/ui/button/utils.ts
+++ b/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,
--- a/packages/component/src/ui/confirm/styles.ts
+++ b/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',
  };
 });
--- a/packages/component/src/ui/input/style.ts
+++ b/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,
--- a/packages/component/src/ui/menu/styles.ts
+++ b/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': {
--- a/pnpm-lock.yaml
+++ b/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: