From 0ffcf4c3c0a0ecb3634a9a1d0f50bd1ed96ea486 Mon Sep 17 00:00:00 2001
From: zain94rif <zainul94rifin@gmail.com>
Date: Mon, 12 Jan 2026 15:35:41 +0700
Subject: [PATCH] fix(color): change design & color for icon notification

---
 .../component/ListNotification.jsx            | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx
index 03aa741..c7078f3 100644
--- a/src/pages/notification/component/ListNotification.jsx
+++ b/src/pages/notification/component/ListNotification.jsx
@@ -36,6 +36,7 @@ import {
     PlusOutlined,
     ExclamationCircleOutlined,
     SearchOutlined,
+    MailFilled,
 } from '@ant-design/icons';
 import { useNavigate, Link as RouterLink } from 'react-router-dom';
 import {
@@ -55,6 +56,7 @@ const transformNotificationData = (apiData) => {
         id: `notification-${item.notification_error_id}-${index}`, // Unique key prefix with array index
         type: item.is_read ? 'resolved' : item.is_delivered ? 'warning' : 'critical',
         title: item.error_code_name || 'Unknown Error',
+        color: item.error_code_color || 'Black',
         issue: item.error_code || item.error_code_name || 'Unknown Error',
         description: `${item.error_code} - ${item.error_code_name || ''}`,
         timestamp: item.created_at
@@ -182,13 +184,13 @@ const ListNotification = memo(function ListNotification(props) {
     const getIconAndColor = (type) => {
         switch (type) {
             case 'critical':
-                return { IconComponent: CloseCircleFilled, color: '#ff4d4f', bgColor: '#fff1f0' };
+                return { IconComponent: MailFilled, color: '#faad14', bgColor: '#fff1f0' };
             case 'warning':
-                return { IconComponent: WarningFilled, color: '#faad14', bgColor: '#fffbe6' };
+                return { IconComponent: MailFilled, color: '#1890ff', bgColor: '#fffbe6' };
             case 'resolved':
-                return { IconComponent: CheckCircleFilled, color: '#52c41a', bgColor: '#f6ffed' };
+                return { IconComponent: MailFilled, color: '#52c41a', bgColor: '#f6ffed' };
             default:
-                return { IconComponent: InfoCircleFilled, color: '#1890ff', bgColor: '#e6f7ff' };
+                return { IconComponent: MailFilled, color: '#1890ff', bgColor: '#e6f7ff' };
         }
     };
 
@@ -420,7 +422,11 @@ const ListNotification = memo(function ListNotification(props) {
                                                     <div>
                                                         <Text strong>{notification.title}</Text>
                                                         <div style={{ marginTop: '4px' }}>
-                                                            <Text style={{ color }}>
+                                                            <Text
+                                                                style={{
+                                                                    color: notification.color,
+                                                                }}
+                                                            >
                                                                 Error Code {notification.issue}
                                                             </Text>
                                                         </div>
@@ -748,9 +754,7 @@ const ListNotification = memo(function ListNotification(props) {
                                                     </Space>
 
                                                     <div>
-                                                        <Text strong>
-                                                            {log.addedBy.name}
-                                                        </Text>
+                                                        <Text strong>{log.addedBy.name}</Text>
                                                     </div>
 
                                                     <div>