refactor: replace sass with postcss

50 files changed, 99 insertions, 128 deletions

diff --git a/src/components/APIConfig.js b/src/components/APIConfig.js
index 36c551a..3c5d62d 100644
--- a/src/components/APIConfig.js
+++ b/src/components/APIConfig.js
@@ -5,7 +5,7 @@ import Field from 'c/Field';
 import Button from 'c/Button';
 import SvgYacd from './SvgYacd';
 
-import s0 from './APIConfig.module.scss';
+import s0 from './APIConfig.module.css';
 
 import { getClashAPIConfig, updateClashAPIConfig } from 'd/app';
 
diff --git a/src/components/APIConfig.module.scss b/src/components/APIConfig.module.css
index f6f41f8..f6f41f8 100644
--- a/src/components/APIConfig.module.scss
+++ b/src/components/APIConfig.module.css
diff --git a/src/components/APIDiscovery.js b/src/components/APIDiscovery.js
index 12e92c9..08ecd57 100644
--- a/src/components/APIDiscovery.js
+++ b/src/components/APIDiscovery.js
@@ -7,7 +7,7 @@ import APIConfig from 'c/APIConfig';
 import { closeModal } from 'd/modals';
 import { fetchConfigs } from 'd/configs';
 
-import s0 from './APIDiscovery.module.scss';
+import s0 from './APIDiscovery.module.css';
 
 const mapStateToProps = s => ({
   modals: s.modals
diff --git a/src/components/APIDiscovery.module.scss b/src/components/APIDiscovery.module.css
index 87357ce..87357ce 100644
--- a/src/components/APIDiscovery.module.scss
+++ b/src/components/APIDiscovery.module.css
diff --git a/src/components/Button.js b/src/components/Button.js
index eb50ffd..d7928c7 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import s0 from 'c/Button.module.scss';
+import s0 from 'c/Button.module.css';
 const noop = () => {};
 
 const Button = React.memo(function Button({ label, onClick = noop }) {
diff --git a/src/components/Button.module.scss b/src/components/Button.module.css
index e60f902..f0ab4e1 100644
--- a/src/components/Button.module.scss
+++ b/src/components/Button.module.css
@@ -14,7 +14,7 @@
     background: #387cec;
     border: 1px solid #387cec;
     color: #fff;
-    // background: darken(#555, 3%);
+    /* background: darken(#555, 3%); */
   }
   &:active {
     transform: scale(0.97);
diff --git a/src/components/Config.js b/src/components/Config.js
index 6656ad7..6f4c336 100644
--- a/src/components/Config.js
+++ b/src/components/Config.js
@@ -8,7 +8,7 @@ import ContentHeader from 'c/ContentHeader';
 import Switch from 'c/Switch';
 import ToggleSwitch from 'c/ToggleSwitch';
 import Input from 'c/Input';
-import s0 from 'c/Config.module.scss';
+import s0 from 'c/Config.module.css';
 
 const optionsRule = [
   {
diff --git a/src/components/Config.module.scss b/src/components/Config.module.css
index 1d747b4..1d747b4 100644
--- a/src/components/Config.module.scss
+++ b/src/components/Config.module.css
diff --git a/src/components/ContentHeader.js b/src/components/ContentHeader.js
index 24d887b..b34d5df 100644
--- a/src/components/ContentHeader.js
+++ b/src/components/ContentHeader.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import s0 from './ContentHeader.module.scss';
+import s0 from './ContentHeader.module.css';
 
 function ContentHeader({ title }) {
   return (
diff --git a/src/components/ContentHeader.module.scss b/src/components/ContentHeader.module.css
index 54e4c99..54e4c99 100644
--- a/src/components/ContentHeader.module.scss
+++ b/src/components/ContentHeader.module.css
diff --git a/src/components/ErrorBoundaryFallback.js b/src/components/ErrorBoundaryFallback.js
index 295d458..5d5698a 100644
--- a/src/components/ErrorBoundaryFallback.js
+++ b/src/components/ErrorBoundaryFallback.js
@@ -3,7 +3,7 @@ import Icon from 'c/Icon';
 import SvgYacd from './SvgYacd';
 import github from 's/github.svg';
 
-import s0 from './ErrorBoundaryFallback.module.scss';
+import s0 from './ErrorBoundaryFallback.module.css';
 const yacdRepoIssueUrl = 'https://github.com/haishanh/yacd/issues';
 
 function ErrorBoundaryFallback() {
diff --git a/src/components/ErrorBoundaryFallback.module.scss b/src/components/ErrorBoundaryFallback.module.css
index 5deae74..5deae74 100644
--- a/src/components/ErrorBoundaryFallback.module.scss
+++ b/src/components/ErrorBoundaryFallback.module.css
diff --git a/src/components/Field.js b/src/components/Field.js
index aa7aec5..8041a3b 100644
--- a/src/components/Field.js
+++ b/src/components/Field.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import s from './Field.module.scss';
+import s from './Field.module.css';
 
 const { useCallback } = React;
 
diff --git a/src/components/Field.module.scss b/src/components/Field.module.css
index 2c61d08..ec0b306 100644
--- a/src/components/Field.module.scss
+++ b/src/components/Field.module.css
@@ -4,7 +4,7 @@
   input {
     -webkit-appearance: none;
     background-color: transparent;
-    // background-color: var(--color-input-bg);
+    /* background-color: var(--color-input-bg); */
     background-image: none;
     border: none;
     border-radius: 0;
diff --git a/src/components/Home.js b/src/components/Home.js
index 57f6c6f..e2dcc6a 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -4,7 +4,7 @@ import ContentHeader from 'c/ContentHeader';
 import TrafficChart from 'c/TrafficChart';
 import TrafficNow from 'c/TrafficNow';
 import Loading from 'c/Loading';
-import s0 from 'c/Home.module.scss';
+import s0 from 'c/Home.module.css';
 
 export default function Home() {
   return (
diff --git a/src/components/Home.module.scss b/src/components/Home.module.css
index 464f40f..464f40f 100644
--- a/src/components/Home.module.scss
+++ b/src/components/Home.module.css
diff --git a/src/components/Input.js b/src/components/Input.js
index f621b43..c7bfbbe 100644
--- a/src/components/Input.js
+++ b/src/components/Input.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import s0 from './Input.module.scss';
+import s0 from './Input.module.css';
 
 export default function Input(props) {
   return <input className={s0.input} {...props} />;
diff --git a/src/components/Input.module.scss b/src/components/Input.module.css
index a39c064..a39c064 100644
--- a/src/components/Input.module.scss
+++ b/src/components/Input.module.css
diff --git a/src/components/Loading.js b/src/components/Loading.js
index 7949a4b..37fcef5 100644
--- a/src/components/Loading.js
+++ b/src/components/Loading.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import s0 from './Loading.module.scss';
+import s0 from './Loading.module.css';
 
 const Loading = ({ height }) => {
   const style = height ? { height } : {};
diff --git a/src/components/Loading.module.scss b/src/components/Loading.module.css
index 05f8f3f..11d3297 100644
--- a/src/components/Loading.module.scss
+++ b/src/components/Loading.module.css
@@ -1,7 +1,3 @@
-// $color1: #2a477a;
-$color1: #dddddd;
-
-$size: 40px;
 
 .loading {
   width: 100%;
@@ -12,10 +8,12 @@ $size: 40px;
 }
 
 .pulse {
-  width: $size;
-  height: $size;
+  --color1: #dddddd;
+  --size: 40px;
+  width: var(--size);
+  height: var(--size);
   margin: 10px;
-  background-color: $color1;
+  background-color: var(--color1);
   border-radius: 100%;
   animation: pulseScaleOut 1s infinite ease-in-out;
 }
diff --git a/src/components/Logs.js b/src/components/Logs.js
index 8fba941..60b7e43 100644
--- a/src/components/Logs.js
+++ b/src/components/Logs.js
@@ -13,7 +13,7 @@ import { fetchLogs } from '../api/logs';
 import LogSearch from './LogSearch';
 import { getLogsForDisplay, appendLog } from 'd/logs';
 
-import s0 from 'c/Logs.module.scss';
+import s0 from 'c/Logs.module.css';
 const paddingBottom = 30;
 const colors = {
   debug: 'none',
diff --git a/src/components/Logs.module.scss b/src/components/Logs.module.css
index 7b32633..5113afc 100644
--- a/src/components/Logs.module.scss
+++ b/src/components/Logs.module.css
@@ -1,6 +1,3 @@
-$colorf: #eee;
-$heightHeader: 76px;
-
 .logMeta {
   display: flex;
   align-items: center;
@@ -10,7 +7,7 @@ $heightHeader: 76px;
 }
 
 .logType {
-  color: $colorf;
+  color: #eee;
   flex-shrink: 0;
   text-align: center;
   width: 66px;
@@ -32,13 +29,13 @@ $heightHeader: 76px;
   font-family: 'Roboto Mono', Menlo, monospace;
   align-items: center;
   padding: 8px 0;
-  // force wrap
+  /* force wrap */
   width: 100%;
   white-space: pre;
   overflow: auto;
 }
 
-//////////
+/*******************/
 
 .logsWrapper {
   margin: 0;
@@ -59,7 +56,7 @@ $heightHeader: 76px;
   padding: 10px 40px;
 }
 
-/////////
+/*******************/
 
 .logPlaceholder {
   display: flex;
diff --git a/src/components/Modal.js b/src/components/Modal.js
index a9b1951..6cf476d 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Modal from 'react-modal';
 import cx from 'classnames';
 
-import s0 from './Modal.module.scss';
+import s0 from './Modal.module.css';
 
 function ModalAPIConfig({
   isOpen,
diff --git a/src/components/Modal.module.scss b/src/components/Modal.module.css
index 935c6a7..0df0030 100644
--- a/src/components/Modal.module.scss
+++ b/src/components/Modal.module.css
@@ -1,11 +1,9 @@
 .overlay {
   position: fixed;
-  // z-index: 1000;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
-  // background: rgba(255, 255, 255, 0.5);
   background: #444;
 }
 
@@ -18,6 +16,5 @@
   transform: translate(-50%, -50%);
   background: #444;
   padding: 20px;
-  // border: 1px solid #ccc;
   border-radius: 10px;
 }
diff --git a/src/components/Proxies.js b/src/components/Proxies.js
index b3286b8..45e8252 100644
--- a/src/components/Proxies.js
+++ b/src/components/Proxies.js
@@ -5,7 +5,7 @@ import ContentHeader from 'c/ContentHeader';
 import ProxyGroup from 'c/ProxyGroup';
 import Button from 'c/Button';
 
-import s0 from 'c/Proxies.module.scss';
+import s0 from 'c/Proxies.module.css';
 
 import {
   getProxies,
diff --git a/src/components/Proxies.module.scss b/src/components/Proxies.module.css
index 8be48ce..8be48ce 100644
--- a/src/components/Proxies.module.scss
+++ b/src/components/Proxies.module.css
diff --git a/src/components/Proxy.js b/src/components/Proxy.js
index 3d22ade..57f3657 100644
--- a/src/components/Proxy.js
+++ b/src/components/Proxy.js
@@ -14,7 +14,7 @@ import direct from 's/direct.svg';
 import http from 's/http.svg';
 import group from 's/group.svg';
 
-import s0 from './Proxy.module.scss';
+import s0 from './Proxy.module.css';
 
 import { getDelay, getProxies } from 'd/proxies';
 
diff --git a/src/components/Proxy.module.scss b/src/components/Proxy.module.css
index df6fcae..df6fcae 100644
--- a/src/components/Proxy.module.scss
+++ b/src/components/Proxy.module.css
diff --git a/src/components/ProxyGroup.js b/src/components/ProxyGroup.js
index 61b9185..a0d6da9 100644
--- a/src/components/ProxyGroup.js
+++ b/src/components/ProxyGroup.js
@@ -5,7 +5,7 @@ import { useActions, useStoreState } from 'm/store';
 
 import Proxy from 'c/Proxy';
 
-import s0 from './ProxyGroup.module.scss';
+import s0 from './ProxyGroup.module.css';
 
 import { getProxies, switchProxy } from 'd/proxies';
 
diff --git a/src/components/ProxyGroup.module.scss b/src/components/ProxyGroup.module.css
index f5218ea..ec52279 100644
--- a/src/components/ProxyGroup.module.scss
+++ b/src/components/ProxyGroup.module.css
@@ -20,7 +20,6 @@
   width: 300px;
   padding: 10px 5px;
   transition: transform 0.2s ease-in-out;
-  // transition: transform 0.4s ease, color 0.4s ease;
   &.proxySelectable {
     cursor: pointer;
     &:hover {
diff --git a/src/components/ProxyLatency.js b/src/components/ProxyLatency.js
index 96dd26f..33a94f5 100644
--- a/src/components/ProxyLatency.js
+++ b/src/components/ProxyLatency.js
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import s0 from './ProxyLatency.module.scss';
+import s0 from './ProxyLatency.module.css';
 
 const colorMap = {
   good: '#67C23A',
diff --git a/src/components/ProxyLatency.module.scss b/src/components/ProxyLatency.module.css
index 61485bd..aee0864 100644
--- a/src/components/ProxyLatency.module.scss
+++ b/src/components/ProxyLatency.module.css
@@ -1,8 +1,6 @@
 .proxyLatency {
   border-radius: 20px;
   margin: 10px 0;
-  // padding: 3px 5px;
   padding: 3px 0;
   color: #eee;
-  // background: #ccc;
 }
diff --git a/src/components/Root.scss b/src/components/Root.css
index 696dcbf..0397507 100644
--- a/src/components/Root.scss
+++ b/src/components/Root.css
@@ -1,4 +1,3 @@
-// this font-family only covers latin
 @font-face {
   font-family: 'Roboto Mono';
   font-style: normal;
diff --git a/src/components/Root.js b/src/components/Root.js
index b8e3b20..6f18b22 100644
--- a/src/components/Root.js
+++ b/src/components/Root.js
@@ -10,8 +10,8 @@ import Logs from 'c/Logs';
 import Config from 'c/Config';
 import APIDiscovery from 'c/APIDiscovery';
 import { store } from '../store/configureStore';
-import './Root.scss';
-import s0 from './Root.module.scss';
+import './Root.css';
+import s0 from './Root.module.css';
 
 const Proxies = React.lazy(() =>
   import(/* webpackChunkName: "proxies" */
diff --git a/src/components/Root.module.css b/src/components/Root.module.css
new file mode 100644
index 0000000..c35c4cb
--- /dev/null
+++ b/src/components/Root.module.css
@@ -0,0 +1,33 @@
+.app {
+  display: flex;
+
+  background: var(--color-background);
+  color: var(--color-text);
+  min-height: 300px;
+  height: 100vh;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+
+.content {
+  flex-grow: 1;
+  overflow: auto;
+
+  /*
+
+  $w: 7px;
+  &::-webkit-scrollbar {
+    width: $w;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 20px;
+    background-color: rgba(221, 221, 221, 0.7);
+  }
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  */
+}
diff --git a/src/components/Root.module.scss b/src/components/Root.module.scss
deleted file mode 100644
index 4c3653b..0000000
--- a/src/components/Root.module.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.app {
-  display: flex;
-
-  background: var(--color-background);
-  color: var(--color-text);
-  min-height: 300px;
-  height: 100vh;
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-  }
-}
-
-.content {
-  flex-grow: 1;
-  overflow: auto;
-  // background: #202020;
-
-  // $w: 7px;
-  // &::-webkit-scrollbar {
-  //   width: $w;
-  // }
-  // &::-webkit-scrollbar-thumb {
-  //   border-radius: 20px;
-  //   background-color: rgba(221, 221, 221, 0.7);
-  // }
-  // &::-webkit-scrollbar-corner {
-  //   background: transparent;
-  // }
-}
diff --git a/src/components/Rule.js b/src/components/Rule.js
index 3468d17..db6652d 100644
--- a/src/components/Rule.js
+++ b/src/components/Rule.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import s0 from './Rule.module.scss';
+import s0 from './Rule.module.css';
 
 const colorMap = {
   _default: '#59caf9',
@@ -26,9 +26,7 @@ function Rule({ type, payload, proxy, id }) {
         <div className={s0.b}>{payload}</div>
         <div className={s0.a}>
           <div className={s0.type}>{type}</div>
-          <div className={s0.proxy} style={styleProxy}>
-            {proxy}
-          </div>
+          <div style={styleProxy}>{proxy}</div>
         </div>
       </div>
     </div>
diff --git a/src/components/Rule.module.scss b/src/components/Rule.module.css
index bffac93..6505aa6 100644
--- a/src/components/Rule.module.scss
+++ b/src/components/Rule.module.css
@@ -15,7 +15,6 @@
   display: flex;
   align-items: center;
   font-size: 12px;
-
   opacity: 0.8;
 }
 
@@ -28,11 +27,3 @@
 .type {
   width: 110px;
 }
-
-.proxy {
-  // background: #f5bc41;
-  // background: #eee;
-  // color: #eee;
-  // padding: 5px;
-  // border-radius: 5px;
-}
diff --git a/src/components/Rules.js b/src/components/Rules.js
index ad652e4..f37e1b0 100644
--- a/src/components/Rules.js
+++ b/src/components/Rules.js
@@ -10,7 +10,7 @@ import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 
 import { getRules, fetchRules, fetchRulesOnce } from 'd/rules';
 
-import s0 from './Rules.module.scss';
+import s0 from './Rules.module.css';
 const paddingBottom = 30;
 
 const mapStateToProps = s => ({
diff --git a/src/components/Rules.module.scss b/src/components/Rules.module.css
index 1fb94eb..1fb94eb 100644
--- a/src/components/Rules.module.scss
+++ b/src/components/Rules.module.css
diff --git a/src/components/Search.js b/src/components/Search.js
index 88c6b44..b93d429 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -6,7 +6,7 @@ import { useActions, useStoreState } from 'm/store';
 
 import debounce from 'lodash-es/debounce';
 
-import s0 from './Search.module.scss';
+import s0 from './Search.module.css';
 
 function getSerachComponent({ mapStateToProps, actions }) {
   return memo(function RuleSearch() {
diff --git a/src/components/Search.module.scss b/src/components/Search.module.css
index 31e6e36..657c741 100644
--- a/src/components/Search.module.scss
+++ b/src/components/Search.module.css
@@ -1,9 +1,5 @@
 .RuleSearch {
-  // width: 100%;
-  // padding: 0 40px;
-  // height: 40px;
   padding: 0 40px 5px;
-  // height: 40px;
 }
 
 .RuleSearchContainer {
diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index 2da6c1e..c78d6a9 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -17,7 +17,7 @@ import SvgCommand from './SvgCommand';
 import SvgSettings from './SvgSettings';
 import SvgFile from './SvgFile';
 
-import s from 'c/SideBar.module.scss';
+import s from 'c/SideBar.module.css';
 
 const icons = {
   activity: SvgActivity,
diff --git a/src/components/SideBar.module.scss b/src/components/SideBar.module.css
index a8fe68e..b78d731 100644
--- a/src/components/SideBar.module.scss
+++ b/src/components/SideBar.module.css
@@ -45,7 +45,7 @@
   }
 }
 
-// a router link
+/* a router link */
 .row {
   color: var(--color-text);
   text-decoration: none;
@@ -56,7 +56,6 @@
 
   @media (max-width: 768px) {
     flex-direction: column;
-    // display: flex;
   }
 
   svg {
@@ -82,7 +81,7 @@
 }
 
 .themeSwitchContainer {
-  $sz: 50px;
+  --sz: 50px;
 
   @media (max-width: 768px) {
     display: none;
@@ -92,8 +91,8 @@
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  width: $sz;
-  height: $sz;
+  width: var(--sz);
+  height: var(--sz);
   padding: 20px 0;
   display: flex;
   justify-content: center;
diff --git a/src/components/Switch.js b/src/components/Switch.js
index f956b6d..8062af2 100644
--- a/src/components/Switch.js
+++ b/src/components/Switch.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import s0 from 'c/Switch.module.scss';
+import s0 from 'c/Switch.module.css';
 const noop = () => {};
 
 function Switch({ checked = false, onChange = noop, name = '' }) {
diff --git a/src/components/Switch.module.scss b/src/components/Switch.module.css
index 835de87..2199c74 100644
--- a/src/components/Switch.module.scss
+++ b/src/components/Switch.module.css
@@ -1,17 +1,16 @@
-// steal from https://codepen.io/joshnh/pen/hjbuH
-
-$white: #fff;
-// $green: #53d76a;
-$grey: #d3d3d3;
-$color-theme: #047aff;
+/* steal from https://codepen.io/joshnh/pen/hjbuH */
 
 input.switch[type='checkbox'] {
+  --white: #fff;
+  --grey: #d3d3d3;
+  --color-theme: #047aff;
+
   appearance: none;
   outline: none;
-  background-color: darken($white, 2%);
-  border: 1px solid $grey;
+  background-color: darken(var(--white), 2%);
+  border: 1px solid var(--grey);
   border-radius: 26px;
-  box-shadow: inset 0 0 0 1px $grey;
+  box-shadow: inset 0 0 0 1px var(--grey);
   cursor: pointer;
   height: 28px;
   position: relative;
@@ -20,8 +19,8 @@ input.switch[type='checkbox'] {
   vertical-align: top;
 
   &:after {
-    background-color: $white;
-    border: 1px solid $grey;
+    background-color: var(--white);
+    border: 1px solid var(--grey);
     border-radius: 24px;
     box-shadow: inset 0 -3px 3px hsla(0, 0%, 0%, 0.025),
       0 1px 4px hsla(0, 0%, 0%, 0.15), 0 4px 4px hsla(0, 0%, 0%, 0.1);
@@ -35,13 +34,13 @@ input.switch[type='checkbox'] {
     transition: border 0.25s 0.15s, left 0.25s 0.1s, right 0.15s 0.175s;
   }
   &:checked {
-    border-color: $color-theme;
-    box-shadow: inset 0 0 0 13px $color-theme;
+    border-color: var(--color-theme);
+    box-shadow: inset 0 0 0 13px var(--color-theme);
     padding-left: 18px;
     transition: border 0.25s, box-shadow 0.25s, padding 0.25s 0.15s;
 
     &:after {
-      border-color: $color-theme;
+      border-color: var(--color-theme);
       left: 16px;
       right: 0;
       transition: border 0.25s, left 0.15s 0.25s, right 0.25s 0.175s;
diff --git a/src/components/ToggleSwitch.js b/src/components/ToggleSwitch.js
index 59323c4..7d6431c 100644
--- a/src/components/ToggleSwitch.js
+++ b/src/components/ToggleSwitch.js
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import s0 from 'c/ToggleSwitch.module.scss';
+import s0 from 'c/ToggleSwitch.module.css';
 
 function ToggleSwitch({ options, value, name, onChange }) {
   const idxSelected = useMemo(() => options.map(o => o.value).indexOf(value), [
diff --git a/src/components/ToggleSwitch.module.scss b/src/components/ToggleSwitch.module.css
index 78a2b41..78a2b41 100644
--- a/src/components/ToggleSwitch.module.scss
+++ b/src/components/ToggleSwitch.module.css
diff --git a/src/components/TrafficNow.js b/src/components/TrafficNow.js
index c24abc1..bcdd58a 100644
--- a/src/components/TrafficNow.js
+++ b/src/components/TrafficNow.js
@@ -5,7 +5,7 @@ import { useStoreState } from 'm/store';
 import { getClashAPIConfig } from 'd/app';
 import { fetchData } from '../api/traffic';
 
-import s0 from 'c/TrafficNow.module.scss';
+import s0 from 'c/TrafficNow.module.css';
 
 export default function TrafficNow() {
   const { upStr, downStr } = useSpeed();
@@ -26,20 +26,17 @@ export default function TrafficNow() {
 function useSpeed() {
   const [speed, setSpeed] = useState({ upStr: '0 B/s', downStr: '0 B/s' });
   const { hostname, port, secret } = useStoreState(getClashAPIConfig);
-  useEffect(
-    () => {
-      return fetchData({
-        hostname,
-        port,
-        secret
-      }).subscribe(o =>
-        setSpeed({
-          upStr: prettyBytes(o.up) + '/s',
-          downStr: prettyBytes(o.down) + '/s'
-        })
-      );
-    },
-    [hostname, port, secret]
-  );
+  useEffect(() => {
+    return fetchData({
+      hostname,
+      port,
+      secret
+    }).subscribe(o =>
+      setSpeed({
+        upStr: prettyBytes(o.up) + '/s',
+        downStr: prettyBytes(o.down) + '/s'
+      })
+    );
+  }, [hostname, port, secret]);
   return speed;
 }
diff --git a/src/components/TrafficNow.module.scss b/src/components/TrafficNow.module.css
index 7c3aee7..7c3aee7 100644
--- a/src/components/TrafficNow.module.scss
+++ b/src/components/TrafficNow.module.css