From f27eb05024e62687a11ac71a38e66aae0a6867cb Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Sat, 20 Jul 2024 13:03:30 +0200
Subject: [PATCH] color log lines to match system log

---
 interface/src/framework/system/SystemLog.tsx | 25 +++++++++++++-------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/interface/src/framework/system/SystemLog.tsx b/interface/src/framework/system/SystemLog.tsx
index 44923b60b..384a4e10b 100644
--- a/interface/src/framework/system/SystemLog.tsx
+++ b/interface/src/framework/system/SystemLog.tsx
@@ -31,13 +31,22 @@ import type { LogEntry, LogSettings } from 'types';
 import { LogLevel } from 'types';
 import { updateValueDirty, useRest } from 'utils';
 
-const LogEntryLine = styled('div')(() => ({
-  color: '#bbbbbb',
-  fontFamily: 'monospace',
-  fontSize: '14px',
-  letterSpacing: 'normal',
-  whiteSpace: 'nowrap'
-}));
+const ButtonTextColors = {
+  [LogLevel.ERROR]: '#ff0000', // red
+  [LogLevel.WARNING]: '#ffcc00', // yellow
+  [LogLevel.NOTICE]: '#ffffff', // white
+  [LogLevel.INFO]: '#ffffff', // yellow
+  [LogLevel.DEBUG]: '#00ffff', // cyan
+  [LogLevel.TRACE]: '#00ffff' // cyan
+};
+
+const LogEntryLine = styled('div')(
+  ({ details: { level } }: { details: { level: LogLevel } }) => ({
+    color: ButtonTextColors[level],
+    font: '14px monospace',
+    whiteSpace: 'nowrap'
+  })
+);
 
 const topOffset = () =>
   document.getElementById('log-window')?.getBoundingClientRect().bottom || 0;
@@ -265,7 +274,7 @@ const SystemLog: FC = () => {
           }}
         >
           {logEntries.map((e) => (
-            <LogEntryLine key={e.i}>
+            <LogEntryLine details={{ level: e.l }} key={e.i}>
               <span>{e.t}</span>
               <span>{paddedLevelLabel(e.l)}&nbsp;</span>
               <span>{paddedIDLabel(e.i)} </span>