chore: adjust style

This commit is contained in:
GyDi 2022-03-23 13:58:57 +08:00 committed by GitHub
parent 502706931e
commit 5d0ffbe453
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 4 deletions

View File

@ -1,11 +1,11 @@
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useLockFn } from "ahooks"; import { useLockFn } from "ahooks";
import { styled, Box, ListItem, IconButton, ListItemText } from "@mui/material"; import { styled, ListItem, IconButton, ListItemText } from "@mui/material";
import { CloseRounded } from "@mui/icons-material"; import { CloseRounded } from "@mui/icons-material";
import { ApiType } from "../../services/types"; import { ApiType } from "../../services/types";
import { deleteConnection } from "../../services/api"; import { deleteConnection } from "../../services/api";
const Tag = styled(Box)(({ theme }) => ({ const Tag = styled("span")(({ theme }) => ({
display: "inline-block", display: "inline-block",
fontSize: "12px", fontSize: "12px",
padding: "0 4px", padding: "0 4px",
@ -37,16 +37,19 @@ const ConnectionItem = (props: Props) => {
<ListItemText <ListItemText
primary={value.metadata.host || value.metadata.destinationIP} primary={value.metadata.host || value.metadata.destinationIP}
secondary={ secondary={
<Box> <>
<Tag sx={{ textTransform: "uppercase", color: "success" }}> <Tag sx={{ textTransform: "uppercase", color: "success" }}>
{value.metadata.network} {value.metadata.network}
</Tag> </Tag>
<Tag>{value.metadata.type}</Tag> <Tag>{value.metadata.type}</Tag>
{value.chains.length > 0 && ( {value.chains.length > 0 && (
<Tag>{value.chains[value.chains.length - 1]}</Tag> <Tag>{value.chains[value.chains.length - 1]}</Tag>
)} )}
<Tag>{dayjs(value.start).fromNow()}</Tag> <Tag>{dayjs(value.start).fromNow()}</Tag>
</Box> </>
} }
/> />
</ListItem> </ListItem>

View File

@ -6,6 +6,8 @@ const Item = styled(Box)(({ theme }) => ({
margin: "0 12px", margin: "0 12px",
lineHeight: 1.35, lineHeight: 1.35,
borderBottom: `1px solid ${theme.palette.divider}`, borderBottom: `1px solid ${theme.palette.divider}`,
fontSize: "0.875rem",
userSelect: "text",
"& .time": {}, "& .time": {},
"& .type": { "& .type": {
display: "inline-block", display: "inline-block",