typo: inconsistent style in layout-viewer

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

@@ -1,9 +1,16 @@
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { List, Button, Select, MenuItem } from "@mui/material";
+import {
+  List,
+  Button,
+  Select,
+  MenuItem,
+  styled,
+  ListItem,
+  ListItemText,
+} from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
 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";
 import { convertFileSrc } from "@tauri-apps/api/tauri";
@@ -77,7 +84,8 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
       onCancel={() => setOpen(false)}
     >
       <List>
-        <SettingItem label={t("Traffic Graph")}>
+        <Item>
+          <ListItemText primary={t("Traffic Graph")} />
           <GuardState
             value={verge?.traffic_graph ?? true}
             valueProps="checked"
@@ -88,9 +96,10 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
           >
             <Switch edge="end" />
           </GuardState>
-        </SettingItem>
+        </Item>
 
-        <SettingItem label={t("Memory Usage")}>
+        <Item>
+          <ListItemText primary={t("Memory Usage")} />
           <GuardState
             value={verge?.enable_memory_usage ?? true}
             valueProps="checked"
@@ -101,9 +110,10 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
           >
             <Switch edge="end" />
           </GuardState>
-        </SettingItem>
+        </Item>
 
-        <SettingItem label={t("Proxy Group Icon")}>
+        <Item>
+          <ListItemText primary={t("Proxy Group Icon")} />
           <GuardState
             value={verge?.enable_group_icon ?? true}
             valueProps="checked"
@@ -114,9 +124,10 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
           >
             <Switch edge="end" />
           </GuardState>
-        </SettingItem>
+        </Item>
 
-        <SettingItem label={t("Menu Icon")}>
+        <Item>
+          <ListItemText primary={t("Menu Icon")} />
           <GuardState
             value={verge?.menu_icon ?? "monochrome"}
             onCatch={onError}
@@ -130,9 +141,11 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
               <MenuItem value="disable">{t("Disable")}</MenuItem>
             </Select>
           </GuardState>
-        </SettingItem>
+        </Item>
+
         {OS === "macos" && (
-          <SettingItem label={t("Tray Icon")}>
+          <Item>
+            <ListItemText primary={t("Tray Icon")} />
             <GuardState
               value={verge?.tray_icon ?? "monochrome"}
               onCatch={onError}
@@ -148,10 +161,11 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
                 <MenuItem value="colorful">{t("Colorful")}</MenuItem>
               </Select>
             </GuardState>
-          </SettingItem>
+          </Item>
         )}
 
-        <SettingItem label={t("Common Tray Icon")}>
+        <Item>
+          <ListItemText primary={t("Common Tray Icon")} />
           <GuardState
             value={verge?.common_tray_icon}
             onCatch={onError}
@@ -194,9 +208,10 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
               {verge?.common_tray_icon ? t("Clear") : t("Browse")}
             </Button>
           </GuardState>
-        </SettingItem>
+        </Item>
 
-        <SettingItem label={t("System Proxy Tray Icon")}>
+        <Item>
+          <ListItemText primary={t("System Proxy Tray Icon")} />
           <GuardState
             value={verge?.sysproxy_tray_icon}
             onCatch={onError}
@@ -239,9 +254,10 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
               {verge?.sysproxy_tray_icon ? t("Clear") : t("Browse")}
             </Button>
           </GuardState>
-        </SettingItem>
+        </Item>
 
-        <SettingItem label={t("Tun Tray Icon")}>
+        <Item>
+          <ListItemText primary={t("Tun Tray Icon")} />
           <GuardState
             value={verge?.tun_tray_icon}
             onCatch={onError}
@@ -282,8 +298,12 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
               {verge?.tun_tray_icon ? t("Clear") : t("Browse")}
             </Button>
           </GuardState>
-        </SettingItem>
+        </Item>
       </List>
     </BaseDialog>
   );
 });
+
+const Item = styled(ListItem)(() => ({
+  padding: "5px 2px",
+}));