From c65adc5e258e8d8418059790412cc6e1e68a86a3 Mon Sep 17 00:00:00 2001 From: Qi <474021214@qq.com> Date: Wed, 15 Feb 2023 17:07:09 +0800 Subject: [PATCH] fix: ui issues (#1023) --- .../header/header-right-items/SyncUser.tsx | 15 +++++++------- .../theme-mode-switch/index.tsx | 1 - .../theme-mode-switch/style.ts | 6 +++++- apps/web/src/components/help-island/Icons.tsx | 20 +++++-------------- apps/web/src/components/help-island/index.tsx | 15 ++++++++------ apps/web/src/components/help-island/style.ts | 5 +---- apps/web/src/components/icons/index.tsx | 4 ++-- packages/component/src/styles/theme.ts | 10 +++++----- packages/component/src/ui/button/styles.ts | 3 ++- packages/i18n/src/resources/en.json | 3 ++- 10 files changed, 39 insertions(+), 43 deletions(-) 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" }