root/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2026-01-28 16:30:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Upgrade to the new UI (#521)

Browse Source 
Co-authored-by: MystiPanda <mystipanda@proton.me>
This commit is contained in:
Amnesiash
2024-03-09 21:37:21 +08:00
committed by GitHub
parent ab539081fa
commit 3a0429d049
39 changed files with 533 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/proxy/proxy-item-mini.tsx
View File

@@ -50,30 +50,36 @@ export const ProxyItemMini = (props: Props) => {
sx={[
{
height: 56,
borderRadius: 1,
borderRadius: 1.5,
pl: 1.5,
pr: 1,
justifyContent: "space-between",
alignItems: "center",
},
({ palette: { mode, primary } }) => {
const bgcolor =
mode === "light"
? alpha(primary.main, 0.15)
: alpha(primary.main, 0.35);
const bgcolor = mode === "light" ? "#ffffff" : "#24252f";
const color = mode === "light" ? primary.main : primary.light;
const showDelay = delay > 0;
const shadowColor =
mode === "light" ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.08)";
const selectColor = mode === "light" ? primary.main : primary.light;
return {
"&:hover .the-check": { display: !showDelay ? "block" : "none" },
"&:hover .the-delay": { display: showDelay ? "block" : "none" },
"&:hover .the-icon": { display: "none" },
"&.Mui-selected": { bgcolor, boxShadow: `0 0 0 1px ${bgcolor}` },
"&.Mui-selected .MuiListItemText-secondary": { color },
boxShadow: `0 0 0 1px ${shadowColor}`,
"&:hover ": {
bgcolor:
mode === "light"
? alpha(primary.main, 0.15)
: alpha(primary.main, 0.35),
},
"&.Mui-selected": {
width: `calc(100% + 3px)`,
marginLeft: `-3px`,
borderLeft: `3px solid ${selectColor}`,
bgcolor,
},
// "&.Mui-selected .MuiListItemText-secondary": { color },
backgroundColor: bgcolor,
};
},
]}
@@ -82,13 +88,15 @@ export const ProxyItemMini = (props: Props) => {
<Typography
variant="body2"
component="div"
color="text.secondary"
color="text.primary"
sx={{
display: "block",
textOverflow: "ellipsis",
wordBreak: "break-all",
overflow: "hidden",
whiteSpace: "nowrap",
fontSize: "13px",
fontWeight: "700",
}}
>
{proxy.name}
@@ -114,7 +122,8 @@ export const ProxyItemMini = (props: Props) => {
wordBreak: "break-all",
overflow: "hidden",
whiteSpace: "nowrap",
fontSize: "0.75rem",
fontSize: "11px",
fontWeight: "700",
marginRight: "8px",
}}
>
@@ -191,8 +200,8 @@ export const ProxyItemMini = (props: Props) => {
};
const Widget = styled(Box)(({ theme: { typography } }) => ({
padding: "3px 6px",
fontSize: 14,
padding: "2px 4px",
fontSize: 12,
fontFamily: typography.fontFamily,
borderRadius: "4px",
}));
@@ -200,15 +209,15 @@ const Widget = styled(Box)(({ theme: { typography } }) => ({
const TypeBox = styled(Box)(({ theme: { palette, typography } }) => ({
display: "inline-block",
border: "1px solid #ccc",
borderColor: alpha(palette.text.secondary, 0.36),
color: alpha(palette.text.secondary, 0.42),
borderColor: palette.mode === "light" ? "#d9d9d9" : "#424242",
color: palette.mode === "light" ? "#8c8c8c" : "#ffffff",
borderRadius: 4,
fontSize: 10,
fontFamily: typography.fontFamily,
marginRight: "4px",
marginTop: "auto",
padding: "0 2px",
lineHeight: 1.25,
padding: "0 4px",
lineHeight: 1.5,
}));
const TypeTypo = styled(Box)(({ theme: { palette, typography } }) => ({