chore: fix select component bg in connection

src/components/base/base-styled-select.tsx

@@ -0,0 +1,19 @@
+import { Select, SelectProps, styled } from "@mui/material";
+
+export const BaseStyledSelect = styled((props: SelectProps<string>) => {
+  return (
+    <Select
+      size="small"
+      autoComplete="off"
+      sx={{
+        width: 120,
+        height: 33.375,
+        mr: 1,
+        '[role="button"]': { py: 0.65 },
+      }}
+      {...props}
+    />
+  );
+})(({ theme }) => ({
+  background: theme.palette.mode === "light" ? "#fff" : undefined,
+}));

src/pages/connections.tsx

@@ -1,6 +1,14 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLockFn } from "ahooks";
-import { Box, Button, IconButton, MenuItem, Select } from "@mui/material";
+import {
+  Box,
+  Button,
+  IconButton,
+  MenuItem,
+  Select,
+  SelectProps,
+  styled,
+} from "@mui/material";
 import { useRecoilState } from "recoil";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
@@ -19,6 +27,7 @@ import {
 import parseTraffic from "@/utils/parse-traffic";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
 import { BaseSearchBox } from "@/components/base/base-search-box";
+import { BaseStyledSelect } from "@/components/base/base-styled-select";
 
 const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 
@@ -163,24 +172,16 @@ const ConnectionsPage = () => {
         }}
       >
         {!isTableLayout && (
-          <Select
+          <BaseStyledSelect
-            size="small"
-            autoComplete="off"
             value={curOrderOpt}
             onChange={(e) => setOrderOpt(e.target.value)}
-            sx={{
-              mr: 1,
-              width: i18n.language === "en" ? 190 : 120,
-              height: 33.375,
-              '[role="button"]': { py: 0.65 },
-            }}
           >
             {Object.keys(orderOpts).map((opt) => (
               <MenuItem key={opt} value={opt}>
                 <span style={{ fontSize: 14 }}>{t(opt)}</span>
               </MenuItem>
             ))}
-          </Select>
+          </BaseStyledSelect>
         )}
         <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
       </Box>

src/pages/logs.tsx

@@ -20,24 +20,7 @@ import { BaseEmpty, BasePage } from "@/components/base";
 import LogItem from "@/components/log/log-item";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
 import { BaseSearchBox } from "@/components/base/base-search-box";
-
+import { BaseStyledSelect } from "@/components/base/base-styled-select";
-const StyledSelect = styled((props: SelectProps<string>) => {
-  return (
-    <Select
-      size="small"
-      autoComplete="off"
-      sx={{
-        width: 120,
-        height: 33.375,
-        mr: 1,
-        '[role="button"]': { py: 0.65 },
-      }}
-      {...props}
-    />
-  );
-})(({ theme }) => ({
-  background: theme.palette.mode === "light" ? "#fff" : undefined,
-}));
 
 const LogPage = () => {
   const { t } = useTranslation();
@@ -95,7 +78,7 @@ const LogPage = () => {
           alignItems: "center",
         }}
       >
-        <StyledSelect
+        <BaseStyledSelect
           value={logState}
           onChange={(e) => setLogState(e.target.value)}
         >
@@ -103,7 +86,7 @@ const LogPage = () => {
           <MenuItem value="inf">INFO</MenuItem>
           <MenuItem value="warn">WARN</MenuItem>
           <MenuItem value="err">ERROR</MenuItem>
-        </StyledSelect>
+        </BaseStyledSelect>
         <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
       </Box>