feat(component): add custom iconColor option to notify

toeverything · Apr 16, 2024 · d1169da · d1169da
1 parent 02a387b
commit d1169da
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 13 deletions.
diff --git 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<HTMLDivElement> {
@@ -22,6 +23,7 @@ export const NotificationCard = ({ notification }: NotificationCardProps) => {
     theme = 'info',
     style = 'normal',
     icon = <InformationFillDuotoneIcon />,
+    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
@@ -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: <InformationFillDuotoneIcon color={cssVar('errorColor')} />,
+      icon: <InformationFillDuotoneIcon />,
       style: 'normal',
       theme: 'error',
       ...notification,
@@ -73,7 +72,7 @@ notify.error = (notification: Notification, options?: ExternalToast) => {
 notify.success = (notification: Notification, options?: ExternalToast) => {
   return notify(
     {
-      icon: <SingleSelectSelectSolidIcon color={cssVar('successColor')} />,
+      icon: <SingleSelectSelectSolidIcon />,
       style: 'normal',
       theme: 'success',
       ...notification,
@@ -85,7 +84,7 @@ notify.success = (notification: Notification, options?: ExternalToast) => {
 notify.warning = (notification: Notification, options?: ExternalToast) => {
   return notify(
     {
-      icon: <InformationFillDuotoneIcon color={cssVar('warningColor')} />,
+      icon: <InformationFillDuotoneIcon />,
       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
@@ -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
@@ -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
@@ -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<NotificationTheme, string> = {
+      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
@@ -57,7 +57,8 @@ export const AIOnboardingEdgeless = ({
           {
             title: t['com.affine.ai-onboarding.edgeless.title'](),
             message: t['com.affine.ai-onboarding.edgeless.message'](),
-            icon: <AiIcon color={cssVar('processingColor')} />,
+            icon: <AiIcon />,
+            iconColor: cssVar('brandColor'),
             thumb: <EdgelessOnboardingAnimation />,
             alignMessage: 'icon',
             onDismiss,

diff --git a/...tend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/resume.tsx b/...tend/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: (
-                  <SingleSelectSelectSolidIcon
-                    color={cssVar('processingColor')}
-                  />
-                ),
+                icon: <SingleSelectSelectSolidIcon />,
+                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
@@ -183,9 +183,8 @@ const Settings = () => {
             onNotify={({ detail, recurring }) => {
               notify({
                 style: 'normal',
-                icon: (
-                  <SingleSelectSelectSolidIcon color={cssVar('primaryColor')} />
-                ),
+                icon: <SingleSelectSelectSolidIcon />,
+                iconColor: cssVar('primaryColor'),
                 title: t['com.affine.payment.updated-notify-title'](),
                 message:
                   detail.plan === SubscriptionPlan.Free