From 1ac1c33bb15760e949deb7a22afdc66bad6ee103 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Wed, 12 Jul 2023 17:23:39 +0800 Subject: [PATCH] style: update delete button style (#3180) --- .../collections/collections-list.tsx | 2 +- .../pure/workspace-slider-bar/collections/page.tsx | 2 +- .../workspace-slider-bar/collections/styles.css.ts | 9 ++++++--- .../src/components/image-preview-modal/index.css.ts | 2 +- .../src/components/image-preview-modal/index.tsx | 2 +- .../src/components/page-list/operation-cell.tsx | 2 ++ .../page-list/operation-menu-items/index.css.ts | 12 ++++++++++++ .../page-list/operation-menu-items/move-to-trash.tsx | 3 ++- .../src/components/page-list/view/collection-bar.tsx | 2 +- .../components/page-list/view/collection-list.css.ts | 3 ++- .../components/page-list/view/collection-list.tsx | 2 +- 11 files changed, 30 insertions(+), 11 deletions(-) create mode 100644 packages/component/src/components/page-list/operation-menu-items/index.css.ts diff --git a/apps/web/src/components/pure/workspace-slider-bar/collections/collections-list.tsx b/apps/web/src/components/pure/workspace-slider-bar/collections/collections-list.tsx index e640f7b9c9..97a96d4e41 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/collections/collections-list.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/collections/collections-list.tsx @@ -87,7 +87,7 @@ const CollectionOperations = ({ element:
, }, { - icon: , + icon: , name: t['Delete'](), click: () => { return setting.deleteCollection(view.id); diff --git a/apps/web/src/components/pure/workspace-slider-bar/collections/page.tsx b/apps/web/src/components/pure/workspace-slider-bar/collections/page.tsx index 6389480740..87fbdb49f9 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/collections/page.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/collections/page.tsx @@ -77,7 +77,7 @@ export const PageOperations = ({ element:
, }, { - icon: , + icon: , name: t['Delete'](), click: () => { removeToTrash(page.id); diff --git a/apps/web/src/components/pure/workspace-slider-bar/collections/styles.css.ts b/apps/web/src/components/pure/workspace-slider-bar/collections/styles.css.ts index 137d7e2430..1623b553b4 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/collections/styles.css.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/collections/styles.css.ts @@ -1,4 +1,4 @@ -import { style } from '@vanilla-extract/css'; +import { globalStyle, style } from '@vanilla-extract/css'; export const wrapper = style({ userSelect: 'none', @@ -36,11 +36,14 @@ export const more = style({ }, }); export const deleteFolder = style({ - color: 'var(--affine-warning-color)', ':hover': { - backgroundColor: 'var(--affine-background-warning-color)', + color: 'var(--affine-error-color)', + backgroundColor: 'var(--affine-background-error-color)', }, }); +globalStyle(`${deleteFolder}:hover svg`, { + color: 'var(--affine-error-color)', +}); export const menuDividerStyle = style({ marginTop: '2px', marginBottom: '2px', diff --git a/packages/component/src/components/image-preview-modal/index.css.ts b/packages/component/src/components/image-preview-modal/index.css.ts index 36913e144c..d1b9b343fb 100644 --- a/packages/component/src/components/image-preview-modal/index.css.ts +++ b/packages/component/src/components/image-preview-modal/index.css.ts @@ -138,7 +138,7 @@ export const buttonStyle = style({ margin: '10px 6px', padding: '0 0', ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: 'var(--affine-background-error-color)', backgroundSize: '24px 24px', }, }); diff --git a/packages/component/src/components/image-preview-modal/index.tsx b/packages/component/src/components/image-preview-modal/index.tsx index 86e52cd470..db68780084 100644 --- a/packages/component/src/components/image-preview-modal/index.tsx +++ b/packages/component/src/components/image-preview-modal/index.tsx @@ -478,7 +478,7 @@ const ImagePreviewModalImpl = ( noBorder={true} className={buttonStyle} onClick={() => blockId && deleteHandler(blockId)} - hoverColor={'-moz-initial'} + hoverColor="var(--affine-error-color)" /> diff --git a/packages/component/src/components/page-list/operation-cell.tsx b/packages/component/src/components/page-list/operation-cell.tsx index e1c874d7fd..3b9dd9d1f9 100644 --- a/packages/component/src/components/page-list/operation-cell.tsx +++ b/packages/component/src/components/page-list/operation-cell.tsx @@ -147,6 +147,8 @@ export const TrashOperationCell: React.FC = ({ onClick={() => { setOpen(true); }} + hoverBackground="var(--affine-background-error-color)" + hoverColor="var(--affine-error-color)" > diff --git a/packages/component/src/components/page-list/operation-menu-items/index.css.ts b/packages/component/src/components/page-list/operation-menu-items/index.css.ts new file mode 100644 index 0000000000..d5941c4551 --- /dev/null +++ b/packages/component/src/components/page-list/operation-menu-items/index.css.ts @@ -0,0 +1,12 @@ +import { globalStyle, style } from '@vanilla-extract/css'; + +export const moveToTrashStyle = style({ + ':hover': { + backgroundColor: 'var(--affine-background-error-color)', + color: 'var(--affine-error-color)', + }, +}); + +globalStyle(`${moveToTrashStyle}:hover svg`, { + color: 'var(--affine-error-color)', +}); diff --git a/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx b/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx index 7e2a8128ae..57f18f120b 100644 --- a/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx +++ b/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx @@ -3,8 +3,8 @@ import { DeleteTemporarilyIcon } from '@blocksuite/icons'; import type { ConfirmProps } from '../../..'; import { Confirm, MenuItem } from '../../..'; +import { moveToTrashStyle } from './index.css'; import type { CommonMenuItemProps } from './types'; - export const MoveToTrash = ({ onSelect, onItemClick, @@ -21,6 +21,7 @@ export const MoveToTrash = ({ onSelect?.(); }} icon={} + className={moveToTrashStyle} > {t['Move to Trash']()} diff --git a/packages/component/src/components/page-list/view/collection-bar.tsx b/packages/component/src/components/page-list/view/collection-bar.tsx index c62603c82f..e3a4457948 100644 --- a/packages/component/src/components/page-list/view/collection-bar.tsx +++ b/packages/component/src/components/page-list/view/collection-bar.tsx @@ -69,7 +69,7 @@ export const CollectionBar = ({ }, }, { - icon: , + icon: , name: 'delete', click: () => { setting.deleteCollection(collection.id).catch(err => { diff --git a/packages/component/src/components/page-list/view/collection-list.css.ts b/packages/component/src/components/page-list/view/collection-list.css.ts index 35e2841523..c8d3dac4e2 100644 --- a/packages/component/src/components/page-list/view/collection-list.css.ts +++ b/packages/component/src/components/page-list/view/collection-list.css.ts @@ -202,6 +202,7 @@ export const deleteIcon = style({ padding: 4, cursor: 'pointer', ':hover': { - backgroundColor: 'var(--affine-hover-color)', + color: 'var(--affine-error-color)', + backgroundColor: 'var(--affine-background-error-color)', }, }); diff --git a/packages/component/src/components/page-list/view/collection-list.tsx b/packages/component/src/components/page-list/view/collection-list.tsx index 4faa10a5c0..1ef90ab22a 100644 --- a/packages/component/src/components/page-list/view/collection-list.tsx +++ b/packages/component/src/components/page-list/view/collection-list.tsx @@ -57,7 +57,7 @@ const CollectionOption = ({ }, }, { - icon: , + icon: , name: 'delete', click: () => { setting.deleteCollection(collection.id).catch(err => {