From 3b1a816b3bfd0b1e917f8a01d4a13571276a482c Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sun, 12 Dec 2021 15:34:17 +0800
Subject: [PATCH] feat(style): adjust style impl
---
src/components/list-item-link.tsx | 38 +++++++++++--------------------
src/components/proxy-group.tsx | 23 ++++++++++++++++---
2 files changed, 33 insertions(+), 28 deletions(-)
diff --git a/src/components/list-item-link.tsx b/src/components/list-item-link.tsx
index bc1bd31..3e45320 100644
--- a/src/components/list-item-link.tsx
+++ b/src/components/list-item-link.tsx
@@ -1,4 +1,4 @@
-import { ListItem, ListItemButton, ListItemText } from "@mui/material";
+import { alpha, ListItem, ListItemButton, ListItemText } from "@mui/material";
import { useMatch, useResolvedPath, useNavigate } from "react-router-dom";
import type { LinkProps } from "react-router-dom";
@@ -12,42 +12,30 @@ const ListItemLink = (props: LinkProps) => {
return (
<ListItem sx={{ py: 0.5, maxWidth: 250, mx: "auto" }}>
<ListItemButton
+ selected={!!match}
sx={[
{
- color: "primary",
borderRadius: 2,
textAlign: "center",
+ "& .MuiListItemText-primary": { color: "text.secondary" },
},
- (theme) => {
- if (!match) return {};
-
- if (theme.palette.mode === "light") {
- return {
- bgcolor: "rgba(91,92,157,0.15)",
- "&:hover": { bgcolor: "rgba(91,92,157,0.15)" },
- };
- }
+ ({ palette: { mode, primary } }) => {
+ const bgcolor =
+ mode === "light"
+ ? alpha(primary.main, 0.15)
+ : alpha(primary.main, 0.35);
+ const color = mode === "light" ? primary.main : primary.light;
return {
- bgcolor: "rgba(91,92,157,0.35)",
- "&:hover": { bgcolor: "rgba(91,92,157,0.35)" },
+ "&.Mui-selected": { bgcolor },
+ "&.Mui-selected:hover": { bgcolor },
+ "&.Mui-selected .MuiListItemText-primary": { color },
};
},
]}
onClick={() => navigate(to)}
>
- <ListItemText
- primary={children}
- sx={{
- color: (theme) => {
- if (!match) return "text.secondary";
-
- const light = theme.palette.mode === "light";
- if (match && light) return "primary.main";
- return "primary.light";
- },
- }}
- />
+ <ListItemText primary={children} />
</ListItemButton>
</ListItem>
);
diff --git a/src/components/proxy-group.tsx b/src/components/proxy-group.tsx
index 61eb334..bf3bb4e 100644
--- a/src/components/proxy-group.tsx
+++ b/src/components/proxy-group.tsx
@@ -1,6 +1,7 @@
import { useState } from "react";
import { Virtuoso } from "react-virtuoso";
import {
+ alpha,
Box,
Collapse,
Divider,
@@ -32,9 +33,26 @@ const Item = ({ proxy, selected, onClick }: ItemProps) => {
return (
<ListItem sx={{ py: 0, pl: 4 }}>
<ListItemButton
+ dense
selected={selected}
onClick={() => onClick?.(proxy.name)}
- sx={{ borderRadius: 1, py: 0.5 }}
+ sx={[
+ {
+ borderRadius: 1,
+ },
+ ({ palette: { mode, primary } }) => {
+ const bgcolor =
+ mode === "light"
+ ? alpha(primary.main, 0.15)
+ : alpha(primary.main, 0.35);
+ const color = mode === "light" ? primary.main : primary.light;
+
+ return {
+ "&.Mui-selected": { bgcolor },
+ "&.Mui-selected .MuiListItemText-secondary": { color },
+ };
+ },
+ ]}
>
<ListItemText title={proxy.name} secondary={proxy.name} />
<ListItemIcon
@@ -77,10 +95,9 @@ const ProxyGroup = ({ group }: Props) => {
return (
<>
- <ListItem button onClick={() => setOpen(!open)}>
+ <ListItem button onClick={() => setOpen(!open)} dense>
<ListItemText
primary={group.name}
- sx={{ my: 0.25 }}
secondary={
<>
<SendRounded color="primary" sx={{ mr: 1, fontSize: 14 }} />
--
GitLab