From 3444f61688524644285de0d69a568e86a110d44e Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sat, 14 Mar 2020 15:45:20 +0800
Subject: [PATCH] fix: fix broken allow-lan switch

---
 src/components/Config.js        | 17 +++++++++++------
 src/components/Proxy.module.css |  2 +-
 src/components/Root.css         |  4 ++--
 src/components/SwitchThemed.js  |  3 ++-
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/Config.js b/src/components/Config.js
index 7848b9b..b98bcb6 100644
--- a/src/components/Config.js
+++ b/src/components/Config.js
@@ -109,17 +109,22 @@ function ConfigImpl({
     [configState]
   );
 
+  const handleSwitchOnChange = useCallback(
+    checked => {
+      const name = 'allow-lan';
+      const value = checked;
+      setConfigState(name, value);
+      dispatch(updateConfigs(apiConfig, { [name]: value }));
+    },
+    [apiConfig, dispatch, setConfigState]
+  );
+
   const handleInputOnChange = useCallback(
     e => {
       const target = e.target;
       const { name } = target;
       let { value } = target;
       switch (target.name) {
-        case 'allow-lan':
-          value = target.checked;
-          setConfigState(name, value);
-          dispatch(updateConfigs(apiConfig, { [name]: value }));
-          break;
         case 'mode':
         case 'log-level':
           setConfigState(name, value);
@@ -206,7 +211,7 @@ function ConfigImpl({
           <Switch
             name="allow-lan"
             checked={configState['allow-lan']}
-            onChange={handleInputOnChange}
+            onChange={handleSwitchOnChange}
           />
         </div>
 
diff --git a/src/components/Proxy.module.css b/src/components/Proxy.module.css
index 7e6e2cc..089b686 100644
--- a/src/components/Proxy.module.css
+++ b/src/components/Proxy.module.css
@@ -11,7 +11,7 @@
     padding: 10px;
   }
 
-  background-color: var(--color-bg-proxy-selected);
+  background-color: var(--color-bg-proxy);
   &.now {
     background-color: var(--color-focus-blue);
     color: #ddd;
diff --git a/src/components/Root.css b/src/components/Root.css
index 060edf7..fd7d6d9 100644
--- a/src/components/Root.css
+++ b/src/components/Root.css
@@ -97,7 +97,7 @@ body.dark {
   --color-icon: #c7c7c7;
   --color-btn-bg: #232323;
   --color-btn-fg: #bebebe;
-  --color-bg-proxy-selected: #303030;
+  --color-bg-proxy: #303030;
   --color-row-odd: #282828;
   --bg-modal: #1f1f20;
   --bg-near-transparent: rgba(255, 255, 255, 0.1);
@@ -116,7 +116,7 @@ body.light {
   --color-icon: #5b5b5b;
   --color-btn-bg: #f4f4f4;
   --color-btn-fg: #101010;
-  --color-bg-proxy-selected: #cfcfcf;
+  --color-bg-proxy: #e7e7e7;
   --color-row-odd: #f5f5f5;
   --bg-modal: #fbfbfb;
   --bg-near-transparent: rgba(0, 0, 0, 0.1);
diff --git a/src/components/SwitchThemed.js b/src/components/SwitchThemed.js
index 36f438b..1967a6b 100644
--- a/src/components/SwitchThemed.js
+++ b/src/components/SwitchThemed.js
@@ -4,7 +4,7 @@ import Switch from 'react-switch';
 import { connect } from './StateProvider';
 import { getTheme } from '../store/app';
 
-function SwitchThemed({ checked = false, onChange, theme }) {
+function SwitchThemed({ checked = false, onChange, theme, name }) {
   const offColor = theme === 'dark' ? '#393939' : '#e9e9e9';
 
   return (
@@ -21,6 +21,7 @@ function SwitchThemed({ checked = false, onChange, theme }) {
       height={28}
       width={44}
       className="rs"
+      name={name}
     />
   );
 }