From 301586c0f4b8c5b287eb7d2ff00d6ce554f3d8c4 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Thu, 16 May 2024 06:43:47 +0000
Subject: [PATCH] fix(component): avoid close button of the notification being
 invisible in dark mode and bright bg (#6946)

---
 .../component/src/ui/notification/notification-card.tsx   | 2 ++
 .../frontend/component/src/ui/notification/styles.css.ts  | 3 ++-
 packages/frontend/component/src/ui/notification/utils.ts  | 8 +++++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/component/src/ui/notification/notification-card.tsx b/packages/frontend/component/src/ui/notification/notification-card.tsx
index 6b1d21f6ab..816c674234 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,
+  getCloseIconColor,
   getIconColor,
 } from './utils';
 
@@ -48,6 +49,7 @@ export const NotificationCard = ({ notification }: NotificationCardProps) => {
         [styles.cardForeground]: getCardForegroundColor(style),
         [styles.actionTextColor]: getActionTextColor(style, theme),
         [styles.iconColor]: getIconColor(style, theme, iconColor),
+        [styles.closeIconColor]: getCloseIconColor(style),
       })}
       data-with-icon={icon ? '' : undefined}
       {...rootAttrs}
diff --git a/packages/frontend/component/src/ui/notification/styles.css.ts b/packages/frontend/component/src/ui/notification/styles.css.ts
index 9c28bf2237..812ccffec2 100644
--- a/packages/frontend/component/src/ui/notification/styles.css.ts
+++ b/packages/frontend/component/src/ui/notification/styles.css.ts
@@ -6,6 +6,7 @@ export const cardForeground = createVar();
 export const cardBorderColor = createVar();
 export const actionTextColor = createVar();
 export const iconColor = createVar();
+export const closeIconColor = createVar();
 
 export const card = style({
   borderRadius: 8,
@@ -82,7 +83,7 @@ export const closeButton = style({
   },
 });
 export const closeIcon = style({
-  color: `${cardForeground} !important`,
+  color: `${closeIconColor} !important`,
 });
 
 export const main = style({
diff --git a/packages/frontend/component/src/ui/notification/utils.ts b/packages/frontend/component/src/ui/notification/utils.ts
index 814a14a74c..6d09597390 100644
--- a/packages/frontend/component/src/ui/notification/utils.ts
+++ b/packages/frontend/component/src/ui/notification/utils.ts
@@ -59,7 +59,7 @@ export const getIconColor = (
   theme: NotificationTheme,
   iconColor?: string
 ) => {
-  if (style === 'normal') {
+  if (style !== 'alert') {
     const map: Record<NotificationTheme, string> = {
       error: cssVar('errorColor'),
       info: cssVar('processingColor'),
@@ -71,3 +71,9 @@ export const getIconColor = (
 
   return iconColor || cssVar('pureWhite');
 };
+
+export const getCloseIconColor = (style: NotificationStyle) => {
+  return style === 'alert'
+    ? getCardForegroundColor(style)
+    : cssVar('iconColor');
+};