refactor: Upgrade to the new UI (#521)

Co-authored-by: MystiPanda <mystipanda@proton.me>

src/components/proxy/proxy-item.tsx

@@ -11,6 +11,7 @@ import {
   styled,
   SxProps,
   Theme,
+  Typography,
 } from "@mui/material";
 import { BaseLoading } from "@/components/base";
 import delayManager from "@/services/delay";
@@ -78,19 +79,28 @@ export const ProxyItem = (props: Props) => {
         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;
+            const bgcolor = mode === "light" ? "#ffffff" : "#24252f";
+            const selectColor = mode === "light" ? primary.main : primary.light;
             const showDelay = delay > 0;
 
             return {
               "&:hover .the-check": { display: !showDelay ? "block" : "none" },
               "&:hover .the-delay": { display: showDelay ? "block" : "none" },
               "&:hover .the-icon": { display: "none" },
-              "&.Mui-selected": { bgcolor },
-              "&.Mui-selected .MuiListItemText-secondary": { color },
+              "&:hover ": {
+                bgcolor:
+                  mode === "light"
+                    ? alpha(primary.main, 0.15)
+                    : alpha(primary.main, 0.35),
+              },
+              "&.Mui-selected": {
+                borderLeft: `3px solid ${selectColor}`,
+                bgcolor,
+              },
+              // "&.Mui-selected .MuiListItemText-secondary": { bgcolor },
+              backgroundColor: bgcolor,
+              marginBottom: "8px",
+              height: "40px",
             };
           },
         ]}
@@ -99,7 +109,14 @@ export const ProxyItem = (props: Props) => {
           title={proxy.name}
           secondary={
             <>
-              <span style={{ marginRight: 4 }}>
+              <span
+                style={{
+                  marginRight: "8px",
+                  fontSize: "13px",
+                  color: "text.primary",
+                  fontWeight: "700",
+                }}
+              >
                 {proxy.name}
                 {showType && proxy.now && ` - ${proxy.now}`}
               </span>