Minor style tweaks

package.json

@@ -77,12 +77,12 @@
     "@fontsource/inter": "4.5.12",
     "@types/invariant": "2.2.35",
     "@types/lodash-es": "4.17.6",
-    "@types/react": "18.0.17",
+    "@types/react": "18.0.18",
     "@types/react-dom": "18.0.6",
     "@types/react-modal": "3.13.1",
     "@types/react-window": "1.8.5",
-    "@typescript-eslint/eslint-plugin": "5.35.1",
-    "@typescript-eslint/parser": "5.35.1",
+    "@typescript-eslint/eslint-plugin": "5.36.1",
+    "@typescript-eslint/parser": "5.36.1",
     "@vitejs/plugin-react": "2.0.1",
     "autoprefixer": "10.4.8",
     "eslint": "8.23.0",
@@ -92,18 +92,18 @@
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.1",
+    "eslint-plugin-react": "7.31.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "postcss": "8.4.16",
     "postcss-custom-media": "^8.0.2",
-    "postcss-import": "14.1.0",
+    "postcss-import": "15.0.0",
     "postcss-simple-vars": "^6.0.3",
     "prettier": "2.7.1",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "1.54.5",
+    "sass": "1.54.8",
     "typescript": "4.8.2",
     "vite": "3.0.9",
-    "vite-plugin-pwa": "0.12.3"
+    "vite-plugin-pwa": "0.12.6"
   }
 }

src/components/Home.module.scss

@@ -4,3 +4,6 @@
     padding: 10px 40px;
   }
 }
+.chart {
+  margin-top: 15px;
+}

src/components/Input.module.scss

@@ -10,7 +10,7 @@
   font-size: inherit;
   height: 40px;
   outline: none;
-  padding: 0 15px;
+  padding: 0 8px;
   width: 100%;
 }
 

src/components/Input.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import s0 from './Input.module.scss';
 
@@ -27,7 +27,10 @@ export function SelfControlledInput({ value, ...restProps }) {
     }
     refValue.current = value;
   }, [value]);
-  const onChange = useCallback((e) => setInternalValue(e.target.value), [setInternalValue]);
+  const onChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => setInternalValue(e.target.value),
+    [setInternalValue]
+  );
 
   return <input className={s0.input} value={internalValue} onChange={onChange} {...restProps} />;
 }

src/components/TrafficNow.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { State } from '$src/store/types';
+import { ClashAPIConfig } from '$src/types';
+
 import * as connAPI from '../api/connections';
 import { fetchData } from '../api/traffic';
 import prettyBytes from '../misc/pretty-bytes';
@@ -10,7 +13,7 @@ import s0 from './TrafficNow.module.scss';
 
 const { useState, useEffect, useCallback } = React;
 
-const mapState = (s) => ({
+const mapState = (s: State) => ({
   apiConfig: getClashAPIConfig(s),
 });
 export default connect(mapState)(TrafficNow);
@@ -45,7 +48,7 @@ function TrafficNow({ apiConfig }) {
   );
 }
 
-function useSpeed(apiConfig) {
+function useSpeed(apiConfig: ClashAPIConfig) {
   const [speed, setSpeed] = useState({ upStr: '0 B/s', downStr: '0 B/s' });
   useEffect(() => {
     return fetchData(apiConfig).subscribe((o) =>
@@ -58,7 +61,7 @@ function useSpeed(apiConfig) {
   return speed;
 }
 
-function useConnection(apiConfig) {
+function useConnection(apiConfig: ClashAPIConfig) {
   const [state, setState] = useState({
     upTotal: '0 B',
     dlTotal: '0 B',