Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-18 14:56:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(component): add a danger hover style for buttons (#7600)

Browse Source 
Like other delete buttons.

https://github.com/user-attachments/assets/85d1c3cb-bd17-4904-b671-c04c76bfd00b
This commit is contained in:
fundon
2024-07-26 07:30:10 +00:00
parent 1306a3be61
commit 2a2a19fec7
2 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/frontend/component/src/ui/button/button.css.ts
View File

@@ -164,6 +164,10 @@ export const button = style({
'&.processing.disabled:not(.without-hover):hover': { '&.processing.disabled:not(.without-hover):hover': {
background: cssVar('processingColor'), background: cssVar('processingColor'),
}, },
'&.danger:hover': {
color: cssVar('errorColor'),
background: cssVar('backgroundErrorColor'),
},
}, },
}); });
globalStyle(`${button} > span`, { globalStyle(`${button} > span`, {
@@ -359,5 +363,9 @@ export const iconButton = style({
'&.processing.disabled:not(.without-hover):hover': { '&.processing.disabled:not(.without-hover):hover': {
background: cssVar('processingColor'), background: cssVar('processingColor'),
}, },
'&.danger:hover': {
color: cssVar('errorColor'),
background: cssVar('backgroundErrorColor'),
},
}, },
}); });

1
packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx
View File

@@ -423,6 +423,7 @@ const ImagePreviewModalImpl = ({
<> <>
<div className={styles.dividerStyle}></div> <div className={styles.dividerStyle}></div>
<ButtonWithTooltip <ButtonWithTooltip
className="danger"
data-testid="delete-button" data-testid="delete-button"
tooltip="Delete" tooltip="Delete"
icon={<DeleteIcon />} icon={<DeleteIcon />}