From 88967a1dbef04d03847d59a87bb2944cce2a485e Mon Sep 17 00:00:00 2001
From: Qi <474021214@qq.com>
Date: Wed, 8 Mar 2023 11:07:52 +0800
Subject: [PATCH] fix: ui issues (#1401)
---
.../header-right-items/EditorOptionMenu.tsx | 13 +++++++--
.../header/header-right-items/SyncUser.tsx | 28 ++++++-------------
.../theme-mode-switch/index.tsx | 6 ++--
.../theme-mode-switch/style.ts | 9 +++---
packages/component/src/ui/menu/MenuItem.tsx | 1 +
5 files changed, 28 insertions(+), 29 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 322b33d60a..0ad01af357 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
@@ -13,6 +13,7 @@ import {
MoreVerticalIcon,
} from '@blocksuite/icons';
import { assertExists } from '@blocksuite/store';
+import { useTheme } from '@mui/material';
import { useCurrentPageId } from '../../../../hooks/current/use-current-page-id';
import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
@@ -24,6 +25,8 @@ import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/Icons';
const PopoverContent = () => {
const { t } = useTranslation();
+ const theme = useTheme();
+
// fixme(himself65): remove these hooks ASAP
const [workspace] = useCurrentWorkspace();
const [pageId] = useCurrentPageId();
@@ -48,7 +51,13 @@ const PopoverContent = () => {
favorite ? t('Removed from Favorites') : t('Added to Favorites')
);
}}
- icon={favorite ? : }
+ icon={
+ favorite ? (
+
+ ) : (
+
+ )
+ }
>
{favorite ? t('Remove from favorites') : t('Add to Favorites')}
@@ -111,7 +120,7 @@ const PopoverContent = () => {
export const EditorOptionMenu = () => {
return (
} placement="bottom-end" trigger="click">
-
+
diff --git a/apps/web/src/components/blocksuite/header/header-right-items/SyncUser.tsx b/apps/web/src/components/blocksuite/header/header-right-items/SyncUser.tsx
index 317b957a63..4f2172b78c 100644
--- a/apps/web/src/components/blocksuite/header/header-right-items/SyncUser.tsx
+++ b/apps/web/src/components/blocksuite/header/header-right-items/SyncUser.tsx
@@ -1,6 +1,10 @@
import { displayFlex, IconButton, styled, Tooltip } from '@affine/component';
import { useTranslation } from '@affine/i18n';
-import { CloudWorkspaceIcon, LocalWorkspaceIcon } from '@blocksuite/icons';
+import {
+ CloudWorkspaceIcon,
+ LocalWorkspaceIcon,
+ NoNetworkIcon,
+} from '@blocksuite/icons';
import { assertEquals, assertExists } from '@blocksuite/store';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';
@@ -15,29 +19,12 @@ import {
} from '../../../../shared';
import { TransformWorkspaceToAffineModal } from '../../../affine/transform-workspace-to-affine-modal';
-const NoNetWorkIcon = () => {
- return (
-
- );
-};
const IconWrapper = styled('div')(({ theme }) => {
return {
width: '32px',
height: '32px',
marginRight: '12px',
- fontSize: '22px',
+ fontSize: '20px',
color: theme.colors.iconColor,
...displayFlex('center', 'center'),
};
@@ -96,7 +83,7 @@ export const SyncUser = () => {
placement="bottom-end"
>
-
+
);
@@ -114,6 +101,7 @@ export const SyncUser = () => {
setOpen(true);
}}
style={{ marginRight: '12px' }}
+ iconSize={[20, 20]}
>
diff --git a/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/index.tsx b/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/index.tsx
index cea6fbeeb5..250f352a95 100644
--- a/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/index.tsx
+++ b/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/index.tsx
@@ -1,7 +1,7 @@
+import { DarkModeIcon, LightModeIcon } from '@blocksuite/icons';
import { useTheme } from 'next-themes';
import { useState } from 'react';
-import { MoonIcon, SunIcon } from './Icons';
import { StyledSwitchItem, StyledThemeModeSwitch } from './style';
export const ThemeModeSwitch = () => {
const { setTheme, resolvedTheme } = useTheme();
@@ -24,7 +24,7 @@ export const ThemeModeSwitch = () => {
setTheme('light');
}}
>
-
+
{
setTheme('dark');
}}
>
-
+
);
diff --git a/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/style.ts b/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/style.ts
index 7598f58072..70119c010f 100644
--- a/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/style.ts
+++ b/apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/style.ts
@@ -63,9 +63,10 @@ export const StyledSwitchItem = styled('div')<{
background-color: ${activeStyle.backgroundColor};
animation: ${activeStyle.animation};
animation-direction: ${activeStyle.animationDirection};
- svg {
- width: 24px;
- height: 24px;
- },
+ font-size: 20px;
+ //svg {
+ // width: 24px;
+ // height: 24px;
+ //},
`;
});
diff --git a/packages/component/src/ui/menu/MenuItem.tsx b/packages/component/src/ui/menu/MenuItem.tsx
index 7c7f5eb236..746a3331e1 100644
--- a/packages/component/src/ui/menu/MenuItem.tsx
+++ b/packages/component/src/ui/menu/MenuItem.tsx
@@ -23,6 +23,7 @@ export const MenuItem = forwardRef(
height: 16,
style: {
marginRight: 14,
+ ...icon.props?.style,
},
})}
{children}