feat(style): adjust style impl

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) => {
+          ({ palette: { mode, primary } }) => {
-            if (!match) return {};
+            const bgcolor =
-
+              mode === "light"
-            if (theme.palette.mode === "light") {
+                ? alpha(primary.main, 0.15)
-              return {
+                : alpha(primary.main, 0.35);
-                bgcolor: "rgba(91,92,157,0.15)",
+            const color = mode === "light" ? primary.main : primary.light;
-                "&:hover": { bgcolor: "rgba(91,92,157,0.15)" },
-              };
-            }
 
             return {
-              bgcolor: "rgba(91,92,157,0.35)",
+              "&.Mui-selected": { bgcolor },
-              "&:hover": { bgcolor: "rgba(91,92,157,0.35)" },
+              "&.Mui-selected:hover": { bgcolor },
+              "&.Mui-selected .MuiListItemText-primary": { color },
             };
           },
         ]}
         onClick={() => navigate(to)}
       >
-        <ListItemText
+        <ListItemText primary={children} />
-          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";
-            },
-          }}
-        />
       </ListItemButton>
     </ListItem>
   );

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 }} />