Merge pull request #23537 from mareklibra/FLPATH-1005.severity.followUp

chore: use colors from theme for notification's severity

plugins/notifications/src/api/NotificationsClient.ts

@@ -68,7 +68,7 @@ export class NotificationsClient implements NotificationsApi {
       queryString.append('createdAfter', options.createdAfter.toISOString());
     }
     if (options?.minimumSeverity !== undefined) {
-      queryString.append('minimal_severity', options.minimumSeverity);
+      queryString.append('minimumSeverity', options.minimumSeverity);
     }
     const urlSegment = `?${queryString}`;
 

plugins/notifications/src/components/NotificationsTable/SeverityIcon.tsx

@@ -19,21 +19,39 @@ import NormalIcon from '@material-ui/icons/CheckOutlined';
 import CriticalIcon from '@material-ui/icons/ErrorOutline';
 import HighIcon from '@material-ui/icons/WarningOutlined';
 import LowIcon from '@material-ui/icons/InfoOutlined';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  critical: {
+    color: theme.palette.status.error,
+  },
+  high: {
+    color: theme.palette.status.warning,
+  },
+  normal: {
+    color: theme.palette.status.ok,
+  },
+  low: {
+    color: theme.palette.status.running,
+  },
+}));
 
 export const SeverityIcon = ({
   severity,
 }: {
   severity?: NotificationSeverity;
 }) => {
+  const classes = useStyles();
+
   switch (severity) {
     case 'critical':
-      return <CriticalIcon htmlColor="#C9190B" />;
+      return <CriticalIcon className={classes.critical} />;
     case 'high':
-      return <HighIcon htmlColor="#F0AB00" />;
+      return <HighIcon className={classes.high} />;
     case 'low':
-      return <LowIcon htmlColor="#2B9AF3" />;
+      return <LowIcon className={classes.low} />;
     case 'normal':
     default:
-      return <NormalIcon htmlColor="#5BA352" />;
+      return <NormalIcon className={classes.normal} />;
   }
 };