From f85f7758e68a4ca1a378c86d3b71690e1c800b66 Mon Sep 17 00:00:00 2001
From: dongchengjie <37543964+dongchengjie@users.noreply.github.com>
Date: Fri, 12 Jul 2024 18:24:19 +0800
Subject: [PATCH] chore: checkbox items' title & button icons

---
 src/components/profile/groups-editor-viewer.tsx  | 9 +++++++++
 src/components/profile/proxies-editor-viewer.tsx | 5 ++++-
 src/components/profile/rules-editor-viewer.tsx   | 5 ++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/profile/groups-editor-viewer.tsx b/src/components/profile/groups-editor-viewer.tsx
index fc8a832..6de1b44 100644
--- a/src/components/profile/groups-editor-viewer.tsx
+++ b/src/components/profile/groups-editor-viewer.tsx
@@ -30,6 +30,8 @@ import {
   TextField,
   styled,
 } from "@mui/material";
+import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
+import VerticalAlignBottomIcon from "@mui/icons-material/VerticalAlignBottom";
 import { GroupItem } from "@/components/profile/group-item";
 import {
   getNetworkInterfaces,
@@ -402,6 +404,11 @@ export const GroupsEditorViewer = (props: Props) => {
                         disableCloseOnSelect
                         onChange={(_, value) => value && field.onChange(value)}
                         renderInput={(params) => <TextField {...params} />}
+                        renderOption={(props, option) => (
+                          <li {...props} title={t(option)}>
+                            {option}
+                          </li>
+                        )}
                       />
                     </Item>
                   )}
@@ -705,6 +712,7 @@ export const GroupsEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
+                  startIcon={<VerticalAlignTopIcon />}
                   onClick={() => {
                     try {
                       validateGroup();
@@ -726,6 +734,7 @@ export const GroupsEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
+                  startIcon={<VerticalAlignBottomIcon />}
                   onClick={() => {
                     try {
                       validateGroup();
diff --git a/src/components/profile/proxies-editor-viewer.tsx b/src/components/profile/proxies-editor-viewer.tsx
index 0818ac0..7ef6dc4 100644
--- a/src/components/profile/proxies-editor-viewer.tsx
+++ b/src/components/profile/proxies-editor-viewer.tsx
@@ -24,10 +24,11 @@ import {
   DialogTitle,
   List,
   ListItem,
-  ListItemText,
   TextField,
   styled,
 } from "@mui/material";
+import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
+import VerticalAlignBottomIcon from "@mui/icons-material/VerticalAlignBottom";
 import { ProxyItem } from "@/components/profile/proxy-item";
 import { readProfileFile, saveProfileFile } from "@/services/cmds";
 import { Notice } from "@/components/base";
@@ -270,6 +271,7 @@ export const ProxiesEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
+                  startIcon={<VerticalAlignTopIcon />}
                   onClick={() => {
                     let proxies = handleParse();
                     setPrependSeq([...prependSeq, ...proxies]);
@@ -282,6 +284,7 @@ export const ProxiesEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
+                  startIcon={<VerticalAlignBottomIcon />}
                   onClick={() => {
                     let proxies = handleParse();
                     setAppendSeq([...appendSeq, ...proxies]);
diff --git a/src/components/profile/rules-editor-viewer.tsx b/src/components/profile/rules-editor-viewer.tsx
index 9cd51f2..c7c0877 100644
--- a/src/components/profile/rules-editor-viewer.tsx
+++ b/src/components/profile/rules-editor-viewer.tsx
@@ -29,7 +29,8 @@ import {
   TextField,
   styled,
 } from "@mui/material";
-
+import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
+import VerticalAlignBottomIcon from "@mui/icons-material/VerticalAlignBottom";
 import { readProfileFile, saveProfileFile } from "@/services/cmds";
 import { Notice, Switch } from "@/components/base";
 import getSystem from "@/utils/get-system";
@@ -535,6 +536,7 @@ export const RulesEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
+                  startIcon={<VerticalAlignTopIcon />}
                   onClick={() => {
                     try {
                       let raw = validateRule();
@@ -552,6 +554,7 @@ export const RulesEditorViewer = (props: Props) => {
                 <Button
                   fullWidth
                   variant="contained"
+                  startIcon={<VerticalAlignBottomIcon />}
                   onClick={() => {
                     try {
                       let raw = validateRule();