From f2a2f8bff1dcd64c548d93b4a1cebee49046550d Mon Sep 17 00:00:00 2001 From: Larvan2 <78135608+Larvan2@users.noreply.github.com> Date: Sat, 13 May 2023 17:28:49 +0800 Subject: update light --- src/components/MemoryChart.module.scss | 1 + src/components/MemoryChart.tsx | 3 +- src/components/SwitchThemed.tsx | 2 +- src/components/TrafficChart.module.scss | 1 + src/components/TrafficChart.tsx | 3 +- src/components/proxies/Proxies.module.scss | 2 +- src/components/proxies/Proxy.module.scss | 12 +++---- src/components/proxies/Proxy.tsx | 54 +++++++++++++++++++++--------- 8 files changed, 52 insertions(+), 26 deletions(-) (limited to 'src/components') diff --git a/src/components/MemoryChart.module.scss b/src/components/MemoryChart.module.scss index 63f4697..29279b8 100644 --- a/src/components/MemoryChart.module.scss +++ b/src/components/MemoryChart.module.scss @@ -11,4 +11,5 @@ @media only screen and (min-width: 1200px) { height: 35vh !important; } + box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1); } diff --git a/src/components/MemoryChart.tsx b/src/components/MemoryChart.tsx index 7e60528..255d8f0 100644 --- a/src/components/MemoryChart.tsx +++ b/src/components/MemoryChart.tsx @@ -22,13 +22,14 @@ const chartWrapperStyle = { justifySelf: 'center', position: 'relative', width: '100%', - borderTop: '2px solid #30363d', + height: '100%', }; const canvasWrapperStyle = { width: '100%', height: '100%', padding: '10px', + borderRadius: '10px', }; const mapState = (s: State) => ({ diff --git a/src/components/SwitchThemed.tsx b/src/components/SwitchThemed.tsx index 45dfa57..056e5a0 100644 --- a/src/components/SwitchThemed.tsx +++ b/src/components/SwitchThemed.tsx @@ -12,7 +12,7 @@ const Switch = ReactSwitch.default ? ReactSwitch.default : ReactSwitch; function SwitchThemed({ checked = false, onChange, theme, name }) { const offColor = theme === 'dark' ? '#393939' : '#e9e9e9'; - const onColor = theme === 'dark' ? '#306081' : '#24292f'; + const onColor = theme === 'dark' ? '#005caf' : '#005caf'; return ( ({ diff --git a/src/components/proxies/Proxies.module.scss b/src/components/proxies/Proxies.module.scss index e7f9808..6a4b655 100644 --- a/src/components/proxies/Proxies.module.scss +++ b/src/components/proxies/Proxies.module.scss @@ -35,5 +35,5 @@ @media (--breakpoint-not-small) { padding: 10px 40px; } - border-bottom: 1px #000000 solid; + border-bottom: dashed rgba(154, 154, 154, 0.222); } diff --git a/src/components/proxies/Proxy.module.scss b/src/components/proxies/Proxy.module.scss index 5ea7224..44f41a5 100644 --- a/src/components/proxies/Proxy.module.scss +++ b/src/components/proxies/Proxy.module.scss @@ -78,28 +78,28 @@ .proxySmall { position: relative; - width: 10px; - height: 10px; + width: 13px; + height: 13px; border-radius: 50%; .now { position: absolute; - width: 6px; - height: 6px; + width: 8px; + height: 8px; margin: auto; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; - background-color: white; + background-color: rgb(255, 253, 253); } &.selectable { transition: transform 0.1s ease-in-out; cursor: pointer; &:hover { - transform: scale(1.2); + transform: scale(1.5); } } } diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx index 1aa6bb3..a912a5b 100644 --- a/src/components/proxies/Proxy.tsx +++ b/src/components/proxies/Proxy.tsx @@ -3,9 +3,7 @@ import cx from 'clsx'; import * as React from 'react'; import { keyCodes } from '~/misc/keycode'; -import { - getLatencyTestUrl, -} from '~/store/app'; +import { getLatencyTestUrl } from '~/store/app'; import { ProxyItem } from '~/store/types'; import { getDelay, getProxies, NonProxyTypes } from '../../store/proxies'; @@ -26,12 +24,14 @@ const colorMap = { na: '#909399', }; -function getLabelColor({ - number, -}: { - number?: number; -} = {}, - httpsTest: boolean) { +function getLabelColor( + { + number, + }: { + number?: number; + } = {}, + httpsTest: boolean +) { const delayMap = { good: httpsTest ? 800 : 200, normal: httpsTest ? 1500 : 500, @@ -53,7 +53,7 @@ function getProxyDotBackgroundColor( number?: number; }, proxyType: string, - httpsTest: boolean, + httpsTest: boolean ) { if (NonProxyTypes.indexOf(proxyType) > -1) { return 'linear-gradient(135deg, white 15%, #999 15% 30%, white 30% 45%, #999 45% 60%, white 60% 75%, #999 75% 90%, white 90% 100%)'; @@ -66,15 +66,26 @@ type ProxyProps = { now?: boolean; proxy: ProxyItem; latency: any; - httpsLatencyTest: boolean, + httpsLatencyTest: boolean; isSelectable?: boolean; udp: boolean; tfo: boolean; onClick?: (proxyName: string) => unknown; }; -function ProxySmallImpl({ now, name, proxy, latency, httpsLatencyTest, isSelectable, onClick }: ProxyProps) { - const color = useMemo(() => getProxyDotBackgroundColor(latency, proxy.type, httpsLatencyTest), [latency, proxy]); +function ProxySmallImpl({ + now, + name, + proxy, + latency, + httpsLatencyTest, + isSelectable, + onClick, +}: ProxyProps) { + const color = useMemo( + () => getProxyDotBackgroundColor(latency, proxy.type, httpsLatencyTest), + [latency, proxy] + ); const title = useMemo(() => { let ret = name; if (latency && typeof latency.number === 'number') { @@ -139,7 +150,15 @@ function ProxyNameTooltip({ children, label, 'aria-label': ariaLabel }) { ); } -function ProxyImpl({ now, name, proxy, latency, httpsLatencyTest, isSelectable, onClick }: ProxyProps) { +function ProxyImpl({ + now, + name, + proxy, + latency, + httpsLatencyTest, + isSelectable, + onClick, +}: ProxyProps) { const color = useMemo(() => getLabelColor(latency, httpsLatencyTest), [latency]); const doSelect = React.useCallback(() => { isSelectable && onClick && onClick(name); @@ -196,14 +215,17 @@ function ProxyImpl({ now, name, proxy, latency, httpsLatencyTest, isSelectable, {name} - + {formatUdpType(proxy.udp, proxy.xudp)}
- + {formatProxyType(proxy.type)} -- cgit v1.3.1