From 132f914b0de23ee2376a796269f71a85721a9446 Mon Sep 17 00:00:00 2001
From: GyDi <zzzgydi@gmail.com>
Date: Wed, 14 Dec 2022 15:49:05 +0800
Subject: [PATCH] fix: adjust log ui
---
src/components/log/log-item.tsx | 25 ++++++++++++++++++++-----
src/pages/logs.tsx | 3 ++-
2 files changed, 22 insertions(+), 6 deletions(-)
diff --git a/src/components/log/log-item.tsx b/src/components/log/log-item.tsx
index ca66e00..dfb15e6 100644
--- a/src/components/log/log-item.tsx
+++ b/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>
diff --git a/src/pages/logs.tsx b/src/pages/logs.tsx
index 1e6fb5b..793690c 100644
--- a/src/pages/logs.tsx
+++ b/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
--
GitLab