diff --git a/apps/web/src/components/header/header-right-items/SyncUser.tsx b/apps/web/src/components/header/header-right-items/SyncUser.tsx
index 24bb31c95..2bf8d415a 100644
--- a/apps/web/src/components/header/header-right-items/SyncUser.tsx
+++ b/apps/web/src/components/header/header-right-items/SyncUser.tsx
@@ -1,15 +1,16 @@
import { LocalWorkspaceIcon, CloudWorkspaceIcon } from '@blocksuite/icons';
import { useAppState } from '@/providers/app-state-provider';
-import { styled, Tooltip } from '@affine/component';
+import { displayFlex, styled, Tooltip, IconButton } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import { useModal } from '@/store/globalModal';
const IconWrapper = styled.div(() => {
return {
- width: '20px',
- height: '20px',
+ width: '32px',
+ height: '32px',
marginRight: '12px',
- fontSize: '20px',
+ fontSize: '22px',
+ ...displayFlex('center', 'center'),
};
});
export const SyncUser = () => {
@@ -24,14 +25,14 @@ export const SyncUser = () => {
content={t('Saved then enable AFFiNE Cloud')}
placement="bottom-end"
>
- {
triggerEnableWorkspaceModal();
}}
- style={{ cursor: 'pointer' }}
+ style={{ marginRight: '12px' }}
>
-
+
);
}
diff --git a/apps/web/src/components/header/header-right-items/theme-mode-switch/index.tsx b/apps/web/src/components/header/header-right-items/theme-mode-switch/index.tsx
index c1d842e23..64d13ea3c 100644
--- a/apps/web/src/components/header/header-right-items/theme-mode-switch/index.tsx
+++ b/apps/web/src/components/header/header-right-items/theme-mode-switch/index.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react';
import { useTheme } from '@/providers/ThemeProvider';
import { MoonIcon, SunIcon } from './Icons';
import { StyledThemeModeSwitch, StyledSwitchItem } from './style';
-
export const ThemeModeSwitch = () => {
const { mode, changeMode } = useTheme();
const [isHover, setIsHover] = useState(false);
diff --git a/apps/web/src/components/header/header-right-items/theme-mode-switch/style.ts b/apps/web/src/components/header/header-right-items/theme-mode-switch/style.ts
index 279d09b99..aa93f9ce2 100644
--- a/apps/web/src/components/header/header-right-items/theme-mode-switch/style.ts
+++ b/apps/web/src/components/header/header-right-items/theme-mode-switch/style.ts
@@ -9,7 +9,7 @@ const ANIMATE_DURATION = 400;
export const StyledThemeModeSwitch = styled('div')({
width: '32px',
height: '32px',
- borderRadius: '5px',
+ borderRadius: '6px',
overflow: 'hidden',
backgroundColor: 'transparent',
position: 'relative',
@@ -62,5 +62,9 @@ export const StyledSwitchItem = styled('div')<{
...displayFlex('center', 'center'),
cursor: 'pointer',
...activeStyle,
+ svg: {
+ width: '24px',
+ height: '24px',
+ },
};
});
diff --git a/apps/web/src/components/help-island/Icons.tsx b/apps/web/src/components/help-island/Icons.tsx
index 427e078dc..d8b1b3e5a 100644
--- a/apps/web/src/components/help-island/Icons.tsx
+++ b/apps/web/src/components/help-island/Icons.tsx
@@ -25,7 +25,11 @@ export const ContactIcon = () => {
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
-
+
);
};
@@ -43,17 +47,3 @@ export const KeyboardIcon = () => {
);
};
-
-export const CloseIcon = () => {
- return (
-
- );
-};
diff --git a/apps/web/src/components/help-island/index.tsx b/apps/web/src/components/help-island/index.tsx
index 2312416a3..b4eaac3d7 100644
--- a/apps/web/src/components/help-island/index.tsx
+++ b/apps/web/src/components/help-island/index.tsx
@@ -5,13 +5,14 @@ import {
StyledAnimateWrapper,
StyledTriggerWrapper,
} from './style';
-import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
+import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
import { Tooltip } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import { useModal } from '@/store/globalModal';
import { MuiFade } from '@affine/component';
import { useGlobalState } from '@/store/app';
+import { CloseIcon } from '@blocksuite/icons';
export type IslandItemNames = 'contact' | 'shortcuts';
export const HelpIsland = ({
showList = ['contact', 'shortcuts'],
@@ -76,11 +77,13 @@ export const HelpIsland = ({
)}
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/apps/web/src/components/help-island/style.ts b/apps/web/src/components/help-island/style.ts
index 8303d6591..7dde1a607 100644
--- a/apps/web/src/components/help-island/style.ts
+++ b/apps/web/src/components/help-island/style.ts
@@ -64,11 +64,8 @@ export const StyledTriggerWrapper = styled('div')(({ theme }) => {
backgroundColor: theme.colors.pageBackground,
color: theme.colors.iconColor,
borderRadius: '5px',
+ fontSize: '24px',
...displayFlex('center', 'center'),
...positionAbsolute({ left: '4px', bottom: '4px' }),
- ':hover': {
- color: theme.colors.primaryColor,
- backgroundColor: theme.colors.hoverBackground,
- },
};
});
diff --git a/apps/web/src/components/icons/index.tsx b/apps/web/src/components/icons/index.tsx
index 0829454b9..23b96c54f 100644
--- a/apps/web/src/components/icons/index.tsx
+++ b/apps/web/src/components/icons/index.tsx
@@ -16,7 +16,7 @@ export const LocalWorkspaceIcon = () => {
};
export const CloudWorkspaceIcon = () => {
- return ;
+ return ;
};
export const LocalDataIcon = () => {
@@ -24,5 +24,5 @@ export const LocalDataIcon = () => {
};
export const PublishIcon = () => {
- return ;
+ return ;
};
diff --git a/packages/component/src/styles/theme.ts b/packages/component/src/styles/theme.ts
index 5d1bc343f..99319bf55 100644
--- a/packages/component/src/styles/theme.ts
+++ b/packages/component/src/styles/theme.ts
@@ -28,7 +28,7 @@ export const getLightTheme = (
textColor: '#28293D',
edgelessTextColor: '#3A4C5C',
- iconColor: '#555770',
+ iconColor: '#77757D',
handleColor: '#c7c3d9',
linkColor: '#6880FF',
linkColor2: '#6880FF',
@@ -37,14 +37,14 @@ export const getLightTheme = (
inputColor: '#4C6275',
tooltipColor: '#fff',
codeColor: '#517ea6',
- quoteColor: '#4C6275',
- placeHolderColor: '#888A9E',
+ quoteColor: '#645F82',
+ placeHolderColor: '#C0BFC1',
selectedColor: 'rgba(104, 128, 255, 0.1)',
borderColor: '#E3E2E4',
- disableColor: '#555770',
+ disableColor: '#A9A9AD',
warningColor: '#906616',
errorColor: '#EB4335',
- lineNumberColor: '#555770',
+ lineNumberColor: '#77757D',
},
font: {
title: '36px',
diff --git a/packages/component/src/ui/button/styles.ts b/packages/component/src/ui/button/styles.ts
index 90957e025..deb75a170 100644
--- a/packages/component/src/ui/button/styles.ts
+++ b/packages/component/src/ui/button/styles.ts
@@ -32,6 +32,7 @@ export const StyledIconButton = styled('button', {
theme,
width,
height,
+ borderRadius,
disabled,
hoverBackground,
hoverColor,
@@ -52,7 +53,7 @@ export const StyledIconButton = styled('button', {
content: '""',
width,
height,
- borderRadius: width / 5,
+ borderRadius,
transition: 'background .15s',
...absoluteCenter({ horizontal: true, vertical: true }),
},
diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json
index d18b8a204..11b7f411d 100644
--- a/packages/i18n/src/resources/en.json
+++ b/packages/i18n/src/resources/en.json
@@ -187,5 +187,6 @@
"Download all data": "Download all data",
"emptyFavorite": "Click Add to Favorites and the page will appear here.",
"Edit": "Edit",
- "Sign out description": "Signing out will cause the unsynchronised content to be lost."
+ "Sign out description": "Signing out will cause the unsynchronised content to be lost.",
+ "Help and Feedback": "Help and Feedback"
}