From d79e186bb8bdfc8eec480b142d6bb5674dc3432d Mon Sep 17 00:00:00 2001
From: icefire <1028247921@qq.com>
Date: Mon, 14 Oct 2024 22:56:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9select=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                   | 10 ++++++++++
 src/Components/pane/index.js | 12 +++++++++++-
 src/images/svg/arrow.jsx     | 10 ++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/images/svg/arrow.jsx

diff --git a/src/App.js b/src/App.js
index 8b8f735..17401e9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -30,6 +30,15 @@ import i18n from "i18next";
 import languageImg from "./images/language.png";
 import Arrow from './images/arrow.svg'
 
+import SvgIcon from '@mui/material/SvgIcon';
+
+function CustomIcon(props) {
+  return (
+    <SvgIcon viewBox="0 0 24 24" {...props}>
+      <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
+    </SvgIcon>
+  );
+}
 
 class App extends React.Component {
   constructor(props) {
@@ -287,6 +296,7 @@ class App extends React.Component {
               className="language-select"
               value={language}
               label={t("language")}
+              IconComponent={CustomIcon}
               onChange={(e) => {
                 let lang = e.target.value;
                 this.setState({
diff --git a/src/Components/pane/index.js b/src/Components/pane/index.js
index d20f9ab..47cd46a 100644
--- a/src/Components/pane/index.js
+++ b/src/Components/pane/index.js
@@ -16,6 +16,15 @@ import verticalChecked from "../../images/vertical-button-checked.png";
 import verticalButton from "../../images/vertical-button.png";
 import modeSelectPng from "../../images/mode-select.png";
 import { useTranslation } from "react-i18next";
+import SvgIcon from '@mui/material/SvgIcon';
+
+function CustomIcon(props) {
+  return (
+    <SvgIcon viewBox="0 0 24 24" {...props}>
+      <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
+    </SvgIcon>
+  );
+}
 
 var deviceConfigs = [
 	{
@@ -74,6 +83,7 @@ function Pane(props) {
 				id="mode-select"
 				value={mode}
 				onChange={(e) => modeChange(e)}
+				IconComponent={CustomIcon}
 				sx={{
 					width: "100%",
 					height: '42px',
@@ -88,7 +98,7 @@ function Pane(props) {
 					'&.Mui-focused': {
 						borderColor: '#757575',
 						'&.MuiOutlinedInput-notchedOutline': {
-							borderColor: '#757575',
+							borderColor: '#757575 !important',
 						},
     				},
 				}}
diff --git a/src/images/svg/arrow.jsx b/src/images/svg/arrow.jsx
new file mode 100644
index 0000000..ce57bdf
--- /dev/null
+++ b/src/images/svg/arrow.jsx
@@ -0,0 +1,10 @@
+import SvgIcon from '@mui/material/SvgIcon';
+import React from "react";
+
+export function ArrowIcon(props) {
+    return (
+      <SvgIcon viewBox="0 0 24 24" {...props}>
+        <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
+      </SvgIcon>
+    );
+  }
\ No newline at end of file