From 0445f9dfc24b96e95af41ccee9149e59891147a9 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sun, 10 Apr 2022 03:33:17 +0800
Subject: [PATCH] fix: check button hover style
---
src/components/proxy/proxy-item.tsx | 29 ++++++++++++++++++++++-------
1 file changed, 22 insertions(+), 7 deletions(-)
diff --git a/src/components/proxy/proxy-item.tsx b/src/components/proxy/proxy-item.tsx
index 73bed67..30d3e85 100644
--- a/src/components/proxy/proxy-item.tsx
+++ b/src/components/proxy/proxy-item.tsx
@@ -25,8 +25,9 @@ interface Props {
}
const Widget = styled(Box)(() => ({
- padding: "4px 6px",
+ padding: "3px 6px",
fontSize: 14,
+ borderRadius: "4px",
}));
const TypeBox = styled(Box)(({ theme }) => ({
@@ -51,10 +52,7 @@ const ProxyItem = (props: Props) => {
}
}, [proxy]);
- const onDelay = useLockFn(async (e: any) => {
- e.preventDefault();
- e.stopPropagation();
-
+ const onDelay = useLockFn(async () => {
return delayManager
.checkDelay(proxy.name, groupName)
.then((result) => setDelay(result))
@@ -107,13 +105,27 @@ const ProxyItem = (props: Props) => {
<ListItemIcon
sx={{ justifyContent: "flex-end", color: "primary.main" }}
>
- <Widget className="the-check" onClick={onDelay}>
+ <Widget
+ className="the-check"
+ onClick={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ onDelay();
+ }}
+ sx={(theme) => ({
+ ":hover": { bgcolor: alpha(theme.palette.primary.main, 0.15) },
+ })}
+ >
Check
</Widget>
<Widget
className="the-delay"
- onClick={onDelay}
+ onClick={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ onDelay();
+ }}
color={
delay > 500
? "error.main"
@@ -121,6 +133,9 @@ const ProxyItem = (props: Props) => {
? "success.main"
: "text.secondary"
}
+ sx={(theme) => ({
+ ":hover": { bgcolor: alpha(theme.palette.primary.main, 0.15) },
+ })}
>
{delay > 1e5 ? "Error" : delay > 3000 ? "Timeout" : `${delay}ms`}
</Widget>
--
GitLab