Use severity colors

src/apps/dashboard/features/activity/components/ActivityListItem.tsx

@@ -10,6 +10,8 @@ import Typography from '@mui/material/Typography';
 import formatRelative from 'date-fns/formatRelative';
 import { getLocale } from 'utils/dateFnsLocale';
 import Stack from '@mui/material/Stack';
+import getLogLevelColor from '../utils/getLogLevelColor';
+import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
 
 type IProps = {
     item: ActivityLogEntry;
@@ -29,7 +31,7 @@ const ActivityListItem = ({ item, displayShortOverview }: IProps) => {
         <ListItem disablePadding>
             <ListItemButton>
                 <ListItemAvatar>
-                    <Avatar sx={{ bgcolor: 'primary.main' }}>
+                    <Avatar sx={{ bgcolor: getLogLevelColor(item.Severity || LogLevel.Information) + '.main' }}>
                         <Notifications sx={{ color: '#fff' }} />
                     </Avatar>
                 </ListItemAvatar>

src/apps/dashboard/features/activity/components/LogLevelChip.tsx

@@ -1,30 +1,17 @@
 import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
 import Chip from '@mui/material/Chip';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import globalize from 'lib/globalize';
+import getLogLevelColor from '../utils/getLogLevelColor';
 
 const LogLevelChip = ({ level }: { level: LogLevel }) => {
-    let color: 'info' | 'warning' | 'error' | undefined;
-    switch (level) {
-        case LogLevel.Information:
-            color = 'info';
-            break;
-        case LogLevel.Warning:
-            color = 'warning';
-            break;
-        case LogLevel.Error:
-        case LogLevel.Critical:
-            color = 'error';
-            break;
-    }
-
-    const levelText = globalize.translate(`LogLevel.${level}`);
+    const levelText = useMemo(() => globalize.translate(`LogLevel.${level}`), [level]);
 
     return (
         <Chip
             size='small'
-            color={color}
+            color={getLogLevelColor(level)}
             label={levelText}
             title={levelText}
         />

src/apps/dashboard/features/activity/utils/getLogLevelColor.ts

@@ -0,0 +1,15 @@
+import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
+
+const getLogLevelColor = (level: LogLevel) => {
+    switch (level) {
+        case LogLevel.Information:
+            return 'info';
+        case LogLevel.Warning:
+            return 'warning';
+        case LogLevel.Error:
+        case LogLevel.Critical:
+            return 'error';
+    }
+};
+
+export default getLogLevelColor;