update light

9 files changed, 64 insertions, 38 deletions

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 (
     <Switch
       onChange={onChange}
diff --git a/src/components/TrafficChart.module.scss b/src/components/TrafficChart.module.scss
index 63f4697..29279b8 100644
--- a/src/components/TrafficChart.module.scss
+++ b/src/components/TrafficChart.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/TrafficChart.tsx b/src/components/TrafficChart.tsx
index 2f22de4..f811a28 100644
--- a/src/components/TrafficChart.tsx
+++ b/src/components/TrafficChart.tsx
@@ -17,13 +17,14 @@ const chartWrapperStyle: React.CSSProperties = {
   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/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,
         <ProxyNameTooltip label={name} aria-label={`proxy name: ${name}`}>
           <span>{name}</span>
         </ProxyNameTooltip>
-        <span className={s0.proxyType} style={{ paddingLeft: 4, opacity: now ? 0.6 : 0.2 }}>
+        <span className={s0.proxyType} style={{ paddingLeft: 4, opacity: 1.0, color: '#51A8DD' }}>
           {formatUdpType(proxy.udp, proxy.xudp)}
         </span>
       </div>
 
       <div className={s0.row}>
         <div className={s0.row}>
-          <span className={s0.proxyType} style={{ paddingRight: 4, opacity: now ? 0.6 : 0.2 }}>
+          <span
+            className={s0.proxyType}
+            style={{ paddingRight: 4, opacity: 1.0, color: '#F596AA' }}
+          >
             {formatProxyType(proxy.type)}
           </span>
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index c501eb4..e26fe95 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -133,26 +133,26 @@ body {
 @mixin light {
   --color-background: #eee;
   --color-background2: rgba(240, 240, 240, 0.3);
-  --color-bg-chart: white;
-  --color-bg-card: #fafafa;
-  --color-focus-blue: #24292f;
-  --btn-bg: #24292f;
-  --card-hover-border-lightness: #24292f;
+  --color-bg-chart: rgb(245, 245, 245);
+  --color-bg-card: rgb(245, 245, 245);
+  --color-focus-blue: #005caf;
+  --btn-bg: #005caf;
+  --card-hover-border-lightness: #005caf;
   --color-text: #222;
   --color-text-secondary: #646464;
   --color-text-highlight: #040404;
-  --color-bg-sidebar: #f8f8f8;
-  --color-sb-active-row-bg: #24292f;
-  --color-sb-active-row-font: #eee;
+  --color-bg-sidebar: #cbcbcb2f;
+  --color-sb-active-row-bg: #005caf;
+  --color-sb-active-row-font: #dfdbdb;
   --color-input-bg: #f0f0f0;
   --color-input-border: #c0c0c0;
-  --color-toggle-bg: #ffffff;
+  --color-toggle-bg: #ffffff80;
   --color-toggle-selected: #d7d7d7;
   --color-icon: #5b5b5b;
   --color-separator: #ccc;
   --color-btn-bg: #f4f4f4;
-  --color-btn-fg: #101010;
-  --color-bg-proxy: #fafafa;
+  --color-btn-fg: #000000;
+  --color-bg-proxy: #c4c4c456;
   --color-row-odd: #f5f5f5;
   --bg-log-info-tag: #888;
   --bg-modal: #fbfbfb;
@@ -161,7 +161,7 @@ body {
   --bc-tooltip: #ccc;
   --select-border-color: #999999;
   --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);
-  --bg-log-info-card: #f5f5f5;
+  --bg-log-info-card: #e3e3e351;
 }
 
 :root[data-theme='auto'] {