yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(color): change design & color for icon notification

Browse Source
This commit is contained in:
zain94rif
2026-01-12 15:35:41 +07:00
parent c2163cec5e
commit 0ffcf4c3c0
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/notification/component/ListNotification.jsx
View File

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