fix: adjust log ui

src/components/log/log-item.tsx

@@ -1,13 +1,15 @@
 import { styled, Box } from "@mui/material";
 
-const Item = styled(Box)(({ theme }) => ({
+const Item = styled(Box)(({ theme: { palette } }) => ({
   padding: "8px 0",
   margin: "0 12px",
   lineHeight: 1.35,
-  borderBottom: `1px solid ${theme.palette.divider}`,
+  borderBottom: `1px solid ${palette.divider}`,
   fontSize: "0.875rem",
   userSelect: "text",
-  "& .time": {},
+  "& .time": {
+    color: palette.text.secondary,
+  },
   "& .type": {
     display: "inline-block",
     marginLeft: 8,
@@ -16,7 +18,18 @@ const Item = styled(Box)(({ theme }) => ({
     textTransform: "uppercase",
     fontWeight: "600",
   },
-  "& .data": {},
+  '& .type[data-type="error"], & .type[data-type="err"]': {
+    color: palette.error.main,
+  },
+  '& .type[data-type="warning"], & .type[data-type="warn"]': {
+    color: palette.warning.main,
+  },
+  '& .type[data-type="info"], & .type[data-type="inf"]': {
+    color: palette.info.main,
+  },
+  "& .data": {
+    color: palette.text.primary,
+  },
 }));
 
 interface Props {
@@ -30,7 +43,9 @@ const LogItem = (props: Props) => {
     <Item>
       <div>
         <span className="time">{value.time}</span>
-        <span className="type">{value.type}</span>
+        <span className="type" data-type={value.type.toLowerCase()}>
+          {value.type}
+        </span>
       </div>
       <div>
         <span className="data">{value.payload}</span>

src/pages/logs.tsx

@@ -91,8 +91,9 @@ const LogPage = () => {
             sx={{ width: 120, mr: 1, '[role="button"]': { py: 0.65 } }}
           >
             <MenuItem value="all">ALL</MenuItem>
-            <MenuItem value="info">INFO</MenuItem>
+            <MenuItem value="inf">INFO</MenuItem>
             <MenuItem value="warn">WARN</MenuItem>
+            <MenuItem value="err">ERROR</MenuItem>
           </Select>
 
           <TextField