refactor: Upgrade to the new UI (#521)

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

src/components/setting/mods/layout-viewer.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { List, Switch, Button } from "@mui/material";
+import { List, Button } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
-import { BaseDialog, DialogRef, Notice } from "@/components/base";
+import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base";
 import { SettingItem } from "./setting-comp";
 import { GuardState } from "./guard-state";
 import { open as openDialog } from "@tauri-apps/api/dialog";

src/components/setting/mods/misc-viewer.tsx

@@ -7,11 +7,10 @@ import {
   ListItemText,
   MenuItem,
   Select,
-  Switch,
   TextField,
 } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
-import { BaseDialog, DialogRef, Notice } from "@/components/base";
+import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base";
 
 export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();

src/components/setting/mods/setting-comp.tsx

@@ -18,9 +18,11 @@ export const SettingItem: React.FC<ItemProps> = (props) => {
   const { label, extra, children, secondary } = props;
 
   const primary = !extra ? (
-    label
+    <Box sx={{ display: "flex", alignItems: "center", fontSize: "14px" }}>
+      <span>{label}</span>
+    </Box>
   ) : (
-    <Box sx={{ display: "flex", alignItems: "center" }}>
+    <Box sx={{ display: "flex", alignItems: "center", fontSize: "14px" }}>
       <span>{label}</span>
       {extra}
     </Box>
@@ -39,7 +41,17 @@ export const SettingList: React.FC<{
   children: ReactNode;
 }> = (props) => (
   <List>
-    <ListSubheader sx={{ background: "transparent" }} disableSticky>
+    <ListSubheader
+      sx={[
+        { background: "transparent", fontSize: "16px", fontWeight: "700" },
+        ({ palette }) => {
+          return {
+            color: palette.text.primary,
+          };
+        },
+      ]}
+      disableSticky
+    >
       {props.title}
     </ListSubheader>
 

src/components/setting/mods/sysproxy-viewer.tsx

@@ -8,13 +8,12 @@ import {
   ListItem,
   ListItemText,
   styled,
-  Switch,
   TextField,
   Typography,
 } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
 import { getSystemProxy } from "@/services/cmds";
-import { BaseDialog, DialogRef, Notice } from "@/components/base";
+import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base";
 
 export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();

src/components/setting/mods/tun-viewer.tsx

@@ -8,11 +8,10 @@ import {
   Box,
   Typography,
   Button,
-  Switch,
   TextField,
 } from "@mui/material";
 import { useClash } from "@/hooks/use-clash";
-import { BaseDialog, DialogRef, Notice } from "@/components/base";
+import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base";
 import { StackModeSwitch } from "./stack-mode-switch";
 
 export const TunViewer = forwardRef<DialogRef>((props, ref) => {