typo: inconsistent style in layout-viewer

This commit is contained in:
dongchengjie 2024-05-27 16:37:48 +08:00
parent e400111f8a
commit 194fe59458

View File

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