From d1169da5a28fff5ede9b021aa51ac38d86a991dd Mon Sep 17 00:00:00 2001 From: JimmFly <447268514@qq.com> Date: Tue, 16 Apr 2024 15:59:54 +0800 Subject: [PATCH] feat(component): add custom iconColor option to notify --- .../src/ui/notification/notification-card.tsx | 3 +++ .../ui/notification/notification-center.tsx | 7 +++---- .../src/ui/notification/styles.css.ts | 2 ++ .../component/src/ui/notification/types.ts | 1 + .../component/src/ui/notification/utils.ts | 18 ++++++++++++++++++ .../affine/ai-onboarding/edgeless.dialog.tsx | 3 ++- .../plans/ai/actions/resume.tsx | 7 ++----- .../general-setting/plans/index.tsx | 5 ++--- 8 files changed, 33 insertions(+), 13 deletions(-) diff --git a/packages/frontend/component/src/ui/notification/notification-card.tsx b/packages/frontend/component/src/ui/notification/notification-card.tsx index ef7b1a7b3f3d5..0b542bb551cad 100644 --- a/packages/frontend/component/src/ui/notification/notification-card.tsx +++ b/packages/frontend/component/src/ui/notification/notification-card.tsx @@ -11,6 +11,7 @@ import { getCardBorderColor, getCardColor, getCardForegroundColor, + getIconColor, } from './utils'; export interface NotificationCardProps extends HTMLAttributes { @@ -22,6 +23,7 @@ export const NotificationCard = ({ notification }: NotificationCardProps) => { theme = 'info', style = 'normal', icon = , + iconColor, thumb, action, title, @@ -44,6 +46,7 @@ export const NotificationCard = ({ notification }: NotificationCardProps) => { [styles.cardBorderColor]: getCardBorderColor(style), [styles.cardForeground]: getCardForegroundColor(style), [styles.actionTextColor]: getActionTextColor(style, theme), + [styles.iconColor]: getIconColor(style, theme, iconColor), })} data-with-icon={icon ? '' : undefined} className={styles.card} diff --git a/packages/frontend/component/src/ui/notification/notification-center.tsx b/packages/frontend/component/src/ui/notification/notification-center.tsx index 8ac67c8787a69..d17fb13ca9e34 100644 --- a/packages/frontend/component/src/ui/notification/notification-center.tsx +++ b/packages/frontend/component/src/ui/notification/notification-center.tsx @@ -2,7 +2,6 @@ import { InformationFillDuotoneIcon, SingleSelectSelectSolidIcon, } from '@blocksuite/icons'; -import { cssVar } from '@toeverything/theme'; import { assignInlineVars } from '@vanilla-extract/dynamic'; import { type CSSProperties, type FC, useMemo } from 'react'; import { type ExternalToast, toast, Toaster } from 'sonner'; @@ -61,7 +60,7 @@ export function notify(notification: Notification, options?: ExternalToast) { notify.error = (notification: Notification, options?: ExternalToast) => { return notify( { - icon: , + icon: , style: 'normal', theme: 'error', ...notification, @@ -73,7 +72,7 @@ notify.error = (notification: Notification, options?: ExternalToast) => { notify.success = (notification: Notification, options?: ExternalToast) => { return notify( { - icon: , + icon: , style: 'normal', theme: 'success', ...notification, @@ -85,7 +84,7 @@ notify.success = (notification: Notification, options?: ExternalToast) => { notify.warning = (notification: Notification, options?: ExternalToast) => { return notify( { - icon: , + icon: , style: 'normal', theme: 'warning', ...notification, diff --git a/packages/frontend/component/src/ui/notification/styles.css.ts b/packages/frontend/component/src/ui/notification/styles.css.ts index 3a306cd74a1a0..9c28bf22377f3 100644 --- a/packages/frontend/component/src/ui/notification/styles.css.ts +++ b/packages/frontend/component/src/ui/notification/styles.css.ts @@ -5,6 +5,7 @@ export const cardColor = createVar(); export const cardForeground = createVar(); export const cardBorderColor = createVar(); export const actionTextColor = createVar(); +export const iconColor = createVar(); export const card = style({ borderRadius: 8, @@ -38,6 +39,7 @@ export const icon = style({ globalStyle(`${icon} svg`, { width: '100%', height: '100%', + color: iconColor, }); export const title = style({ width: 0, diff --git a/packages/frontend/component/src/ui/notification/types.ts b/packages/frontend/component/src/ui/notification/types.ts index 45b859b655d25..42bf239611e03 100644 --- a/packages/frontend/component/src/ui/notification/types.ts +++ b/packages/frontend/component/src/ui/notification/types.ts @@ -28,6 +28,7 @@ export interface Notification { title?: ReactNode; message?: ReactNode; icon?: ReactNode; + iconColor?: string; footer?: ReactNode; // events diff --git a/packages/frontend/component/src/ui/notification/utils.ts b/packages/frontend/component/src/ui/notification/utils.ts index 87886d85a8edf..814a14a74cd8c 100644 --- a/packages/frontend/component/src/ui/notification/utils.ts +++ b/packages/frontend/component/src/ui/notification/utils.ts @@ -53,3 +53,21 @@ export const getCardBorderColor = (style: NotificationStyle) => { export const getCardForegroundColor = (style: NotificationStyle) => { return style === 'alert' ? cssVar('pureWhite') : cssVar('textPrimaryColor'); }; + +export const getIconColor = ( + style: NotificationStyle, + theme: NotificationTheme, + iconColor?: string +) => { + if (style === 'normal') { + const map: Record = { + error: cssVar('errorColor'), + info: cssVar('processingColor'), + success: cssVar('successColor'), + warning: cssVar('warningColor'), + }; + return iconColor || map[theme]; + } + + return iconColor || cssVar('pureWhite'); +}; diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx b/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx index 21acbfd49ae16..a131f4a39190d 100644 --- a/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx +++ b/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx @@ -57,7 +57,8 @@ export const AIOnboardingEdgeless = ({ { title: t['com.affine.ai-onboarding.edgeless.title'](), message: t['com.affine.ai-onboarding.edgeless.message'](), - icon: , + icon: , + iconColor: cssVar('brandColor'), thumb: , alignMessage: 'icon', onDismiss, diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/resume.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/resume.tsx index 0823609f77e90..dcf910615d0b1 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/resume.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/resume.tsx @@ -50,11 +50,8 @@ export const AIResume = ({ setIdempotencyKey(nanoid()); onSubscriptionUpdate?.(data.resumeSubscription); notify({ - icon: ( - - ), + icon: , + iconColor: cssVar('processingColor'), title: t[ 'com.affine.payment.ai.action.resume.confirm.notify.title' diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx index 39a9a80b80a45..6d8b54f228cd4 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx @@ -183,9 +183,8 @@ const Settings = () => { onNotify={({ detail, recurring }) => { notify({ style: 'normal', - icon: ( - - ), + icon: , + iconColor: cssVar('primaryColor'), title: t['com.affine.payment.updated-notify-title'](), message: detail.plan === SubscriptionPlan.Free