Overhaul of the highlight system

frontend/components/alerts/AlertsList.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useMemo } from 'react'
+import * as statusColors from '../../lib/statusColors'
 
 interface AlertItem {
   id: number
@@ -31,10 +32,14 @@ const AlertsList: React.FC<AlertsListProps> = ({ alerts, onAcknowledgeToggle, in
 
   const getStatusColor = (type: string) => {
     switch (type) {
-      case 'critical': return '#b3261e'
-      case 'warning': return '#fd7c22'
-      case 'info': return '#00ff00'
-      default: return '#666'
+      case 'critical':
+        return statusColors.STATUS_COLOR_CRITICAL
+      case 'warning':
+        return statusColors.STATUS_COLOR_WARNING
+      case 'info':
+        return statusColors.STATUS_COLOR_NORMAL
+      default:
+        return statusColors.STATUS_COLOR_UNKNOWN
     }
   }
   
@@ -104,7 +109,14 @@ const AlertsList: React.FC<AlertsListProps> = ({ alerts, onAcknowledgeToggle, in
                   <td className="py-4">
                     <span 
                       className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
-                      style={{ backgroundColor: item.priority === 'high' ? '#b3261e' : item.priority === 'medium' ? '#fd7c22' : '#00ff00' }}
+                      style={{
+                        backgroundColor:
+                          item.priority === 'high'
+                            ? statusColors.STATUS_COLOR_CRITICAL
+                            : item.priority === 'medium'
+                              ? statusColors.STATUS_COLOR_WARNING
+                              : statusColors.STATUS_COLOR_NORMAL,
+                      }}
                     >
                       {item.priority === 'high' ? 'Высокий' : item.priority === 'medium' ? 'Средний' : 'Низкий'}
                     </span>
@@ -142,4 +154,4 @@ const AlertsList: React.FC<AlertsListProps> = ({ alerts, onAcknowledgeToggle, in
   )
 }
 
-export default AlertsList
+export default AlertsList