From ca8e3179bb2e1817e989ff19cc02c51ab710b5c7 Mon Sep 17 00:00:00 2001
From: cismous <cismous@gmail.com>
Date: Sat, 30 Mar 2024 01:14:03 +0800
Subject: [PATCH] Style filter input (#724)

* refactor: reduce duplicate code

* style: add a white background to the light color theme to avoid the gray text being too light
---
 .../base/base-styled-text-field.tsx           | 24 ++++++++++
 src/pages/connections.tsx                     | 21 ++-------
 src/pages/logs.tsx                            | 45 ++++++++++---------
 src/pages/profiles.tsx                        | 19 ++------
 src/pages/rules.tsx                           | 13 ++----
 5 files changed, 57 insertions(+), 65 deletions(-)
 create mode 100644 src/components/base/base-styled-text-field.tsx

diff --git a/src/components/base/base-styled-text-field.tsx b/src/components/base/base-styled-text-field.tsx
new file mode 100644
index 00000000..1c508d4c
--- /dev/null
+++ b/src/components/base/base-styled-text-field.tsx
@@ -0,0 +1,24 @@
+import { TextField, type TextFieldProps, styled } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+export const BaseStyledTextField = styled((props: TextFieldProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <TextField
+      hiddenLabel
+      fullWidth
+      size="small"
+      autoComplete="off"
+      variant="outlined"
+      spellCheck="false"
+      placeholder={t("Filter conditions")}
+      sx={{ input: { py: 0.65, px: 1.25 } }}
+      {...props}
+    />
+  );
+})(({ theme }) => ({
+  "& .MuiInputBase-root": {
+    background: theme.palette.mode === "light" ? "#fff" : undefined,
+  },
+}));
diff --git a/src/pages/connections.tsx b/src/pages/connections.tsx
index 450bbfb6..96d1da3b 100644
--- a/src/pages/connections.tsx
+++ b/src/pages/connections.tsx
@@ -1,14 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLockFn } from "ahooks";
-import {
-  Box,
-  Button,
-  IconButton,
-  MenuItem,
-  Paper,
-  Select,
-  TextField,
-} from "@mui/material";
+import { Box, Button, IconButton, MenuItem, Select } from "@mui/material";
 import { useRecoilState } from "recoil";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
@@ -26,6 +18,7 @@ import {
 } from "@/components/connection/connection-detail";
 import parseTraffic from "@/utils/parse-traffic";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
+import { BaseStyledTextField } from "@/components/base/base-styled-text-field";
 
 const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 
@@ -185,17 +178,9 @@ const ConnectionsPage = () => {
           </Select>
         )}
 
-        <TextField
-          hiddenLabel
-          fullWidth
-          size="small"
-          autoComplete="off"
-          spellCheck="false"
-          variant="outlined"
-          placeholder={t("Filter conditions")}
+        <BaseStyledTextField
           value={filterText}
           onChange={(e) => setFilterText(e.target.value)}
-          sx={{ input: { py: 0.65, px: 1.25 } }}
         />
       </Box>
 
diff --git a/src/pages/logs.tsx b/src/pages/logs.tsx
index f9c76006..d96b96ac 100644
--- a/src/pages/logs.tsx
+++ b/src/pages/logs.tsx
@@ -5,9 +5,9 @@ import {
   Button,
   IconButton,
   MenuItem,
-  Paper,
   Select,
-  TextField,
+  SelectProps,
+  styled,
 } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
@@ -19,6 +19,25 @@ import { atomEnableLog, atomLogData } from "@/services/states";
 import { BaseEmpty, BasePage } from "@/components/base";
 import LogItem from "@/components/log/log-item";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
+import { BaseStyledTextField } from "@/components/base/base-styled-text-field";
+
+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();
@@ -77,35 +96,19 @@ const LogPage = () => {
           alignItems: "center",
         }}
       >
-        <Select
-          size="small"
-          autoComplete="off"
+        <StyledSelect
           value={logState}
           onChange={(e) => setLogState(e.target.value)}
-          sx={{
-            width: 120,
-            height: 33.375,
-            mr: 1,
-            '[role="button"]': { py: 0.65 },
-          }}
         >
           <MenuItem value="all">ALL</MenuItem>
           <MenuItem value="inf">INFO</MenuItem>
           <MenuItem value="warn">WARN</MenuItem>
           <MenuItem value="err">ERROR</MenuItem>
-        </Select>
+        </StyledSelect>
 
-        <TextField
-          hiddenLabel
-          fullWidth
-          size="small"
-          autoComplete="off"
-          spellCheck="false"
-          variant="outlined"
-          placeholder={t("Filter conditions")}
+        <BaseStyledTextField
           value={filterText}
           onChange={(e) => setFilterText(e.target.value)}
-          sx={{ input: { py: 0.65, px: 1.25 } }}
         />
       </Box>
 
diff --git a/src/pages/profiles.tsx b/src/pages/profiles.tsx
index 23817469..91a8ae2b 100644
--- a/src/pages/profiles.tsx
+++ b/src/pages/profiles.tsx
@@ -2,15 +2,7 @@ import useSWR, { mutate } from "swr";
 import { useMemo, useRef, useState } from "react";
 import { useLockFn } from "ahooks";
 import { useSetRecoilState } from "recoil";
-import {
-  Box,
-  Button,
-  Grid,
-  IconButton,
-  Stack,
-  TextField,
-  Divider,
-} from "@mui/material";
+import { Box, Button, Grid, IconButton, Stack, Divider } from "@mui/material";
 import {
   DndContext,
   closestCenter,
@@ -56,6 +48,7 @@ import { ConfigViewer } from "@/components/setting/mods/config-viewer";
 import { throttle } from "lodash-es";
 import { useRecoilState } from "recoil";
 import { atomThemeMode } from "@/services/states";
+import { BaseStyledTextField } from "@/components/base/base-styled-text-field";
 
 const ProfilePage = () => {
   const { t } = useTranslation();
@@ -299,16 +292,10 @@ const ProfilePage = () => {
           alignItems: "center",
         }}
       >
-        <TextField
-          hiddenLabel
-          fullWidth
-          size="small"
+        <BaseStyledTextField
           value={url}
           variant="outlined"
-          autoComplete="off"
-          spellCheck="false"
           onChange={(e) => setUrl(e.target.value)}
-          sx={{ input: { py: 0.65, px: 1.25 } }}
           placeholder={t("Profile URL")}
           InputProps={{
             sx: { pr: 1 },
diff --git a/src/pages/rules.tsx b/src/pages/rules.tsx
index 79580db1..afefe801 100644
--- a/src/pages/rules.tsx
+++ b/src/pages/rules.tsx
@@ -2,12 +2,13 @@ import useSWR from "swr";
 import { useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Virtuoso } from "react-virtuoso";
-import { Box, TextField } from "@mui/material";
+import { Box } from "@mui/material";
 import { getRules } from "@/services/api";
 import { BaseEmpty, BasePage } from "@/components/base";
 import RuleItem from "@/components/rule/rule-item";
 import { ProviderButton } from "@/components/rule/provider-button";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
+import { BaseStyledTextField } from "@/components/base/base-styled-text-field";
 
 const RulesPage = () => {
   const { t } = useTranslation();
@@ -41,17 +42,9 @@ const RulesPage = () => {
           alignItems: "center",
         }}
       >
-        <TextField
-          hiddenLabel
-          fullWidth
-          size="small"
-          autoComplete="off"
-          variant="outlined"
-          spellCheck="false"
-          placeholder={t("Filter conditions")}
+        <BaseStyledTextField
           value={filterText}
           onChange={(e) => setFilterText(e.target.value)}
-          sx={{ input: { py: 0.65, px: 1.25 } }}
         />
       </Box>