Support switch theme on backend config page

20 files changed, 352 insertions, 315 deletions

diff --git a/package.json b/package.json
index 3f9e7ed..cf7b5ea 100644
--- a/package.json
+++ b/package.json
@@ -23,12 +23,11 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "7.14.0",
-    "@fontsource/open-sans": "4.4.2",
+    "@babel/runtime": "7.14.5",
+    "@fontsource/open-sans": "4.4.5",
     "@fontsource/roboto-mono": "4.4.2",
     "@hsjs/react-cache": "0.0.0-alpha.aa94237",
     "@reach/tooltip": "0.15.0",
-    "@sentry/browser": "6.5.1",
     "chart.js": "2.9.4",
     "clsx": "^1.1.0",
     "core-js": "3.14.0",
@@ -38,7 +37,7 @@
     "i18next": "20.3.1",
     "i18next-browser-languagedetector": "6.1.1",
     "i18next-http-backend": "1.2.6",
-    "immer": "9.0.2",
+    "immer": "9.0.3",
     "invariant": "^2.2.4",
     "lodash-es": "^4.17.21",
     "memoize-one": "5.2.1",
@@ -50,7 +49,7 @@
     "react-i18next": "11.10.0",
     "react-icons": "^4.2.0",
     "react-modal": "3.14.2",
-    "react-query": "3.16.1",
+    "react-query": "3.17.0",
     "react-router": "6.0.0-beta.0",
     "react-router-dom": "6.0.0-beta.0",
     "react-switch": "^6.0.0",
@@ -61,7 +60,7 @@
     "recoil": "0.3.1",
     "regenerator-runtime": "^0.13.7",
     "reselect": "^4.0.0",
-    "tslib": "2.2.0",
+    "tslib": "2.3.0",
     "workbox-core": "6.1.5",
     "workbox-expiration": "6.1.5",
     "workbox-precaching": "6.1.5",
@@ -72,16 +71,16 @@
     "@types/invariant": "^2.2.33",
     "@types/jest": "26.0.23",
     "@types/lodash-es": "^4.17.4",
-    "@types/react": "17.0.9",
-    "@types/react-dom": "17.0.6",
+    "@types/react": "17.0.11",
+    "@types/react-dom": "17.0.7",
     "@types/react-modal": "^3.12.0",
     "@types/react-tabs": "^2.3.2",
     "@types/react-window": "1.8.3",
-    "@typescript-eslint/eslint-plugin": "4.26.0",
-    "@typescript-eslint/parser": "4.26.0",
+    "@typescript-eslint/eslint-plugin": "4.26.1",
+    "@typescript-eslint/parser": "4.26.1",
     "@vitejs/plugin-react-refresh": "1.3.3",
     "autoprefixer": "10.2.6",
-    "cssnano": "5.0.5",
+    "cssnano": "5.0.6",
     "eslint": "7.28.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "8.3.0",
@@ -93,7 +92,7 @@
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "postcss": "8.3.0",
+    "postcss": "8.3.2",
     "postcss-custom-media": "^8.0.0",
     "postcss-import": "14.0.2",
     "postcss-simple-vars": "^6.0.3",
@@ -101,7 +100,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "sass": "1.34.1",
     "typescript": "4.3.2",
-    "vite": "2.3.6",
-    "vite-plugin-pwa": "0.7.3"
+    "vite": "2.3.7",
+    "vite-plugin-pwa": "0.8.1"
   }
 }
diff --git a/src/components/APIConfig.module.scss b/src/components/APIConfig.module.scss
index afc2d53..6581d46 100644
--- a/src/components/APIConfig.module.scss
+++ b/src/components/APIConfig.module.scss
@@ -10,11 +10,12 @@
   align-items: center;
 
   .icon {
-    color: #2d2d30;
-    opacity: 0.4;
+    --stroke: #f3f3f3;
+    color: #20497e;
+    opacity: 0.7;
     transition: opacity 400ms;
     &:hover {
-      opacity: 0.7;
+      opacity: 1;
     }
   }
 }
diff --git a/src/components/APIConfig.tsx b/src/components/APIConfig.tsx
index 9b2e7e9..9bf255f 100644
--- a/src/components/APIConfig.tsx
+++ b/src/components/APIConfig.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { fetchConfigs } from 'src/api/configs';
 import { BackendList } from 'src/components/BackendList';
+import { addClashAPIConfig, getClashAPIConfig } from 'src/store/app';
+import { State } from 'src/store/types';
 import { ClashAPIConfig } from 'src/types';
 
-import { addClashAPIConfig, getClashAPIConfig } from '../store/app';
 import s0 from './APIConfig.module.scss';
 import Button from './Button';
 import Field from './Field';
@@ -13,7 +14,7 @@ import SvgYacd from './SvgYacd';
 const { useState, useRef, useCallback } = React;
 const Ok = 0;
 
-const mapState = (s) => ({
+const mapState = (s: State) => ({
   apiConfig: getClashAPIConfig(s),
 });
 
@@ -73,23 +74,22 @@ function APIConfig({ dispatch }) {
     <div className={s0.root} ref={contentEl} onKeyDown={handleContentOnKeyDown}>
       <div className={s0.header}>
         <div className={s0.icon}>
-          <SvgYacd width={160} height={160} />
+          <SvgYacd width={160} height={160} stroke="var(--stroke)" />
         </div>
       </div>
       <div className={s0.body}>
         <div className={s0.hostnamePort}>
           <Field
             id="baseURL"
-            // @ts-expect-error ts-migrate(2322) FIXME: Type '{ id: string; name: string; label: string; t... Remove this comment to see the full error message
             name="baseURL"
             label="API Base URL"
             type="text"
+            placeholder="http://127.0.0.1:9090"
             value={baseURL}
             onChange={handleInputOnChange}
           />
           <Field
             id="secret"
-            // @ts-expect-error ts-migrate(2322) FIXME: Type '{ id: string; name: string; label: string; v... Remove this comment to see the full error message
             name="secret"
             label="Secret(optional)"
             value={secret}
diff --git a/src/components/APIDiscovery.module.scss b/src/components/APIDiscovery.module.scss
index 6c1295a..e2161f8 100644
--- a/src/components/APIDiscovery.module.scss
+++ b/src/components/APIDiscovery.module.scss
@@ -22,5 +22,12 @@
 }
 
 .overlay.overlay {
-  background: #222;
+  background-color: var(--color-background);
+}
+
+.fixed {
+  position: fixed;
+  padding: 16px;
+  bottom: 0;
+  right: 0;
 }
diff --git a/src/components/APIDiscovery.tsx b/src/components/APIDiscovery.tsx
index 82ffbbf..f34c886 100644
--- a/src/components/APIDiscovery.tsx
+++ b/src/components/APIDiscovery.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
+import * as React from 'react';
+import { ThemeSwitcher } from 'src/components/shared/ThemeSwitcher';
+import { DOES_NOT_SUPPORT_FETCH, errors } from 'src/misc/errors';
+import { getClashAPIConfig } from 'src/store/app';
+import { fetchConfigs } from 'src/store/configs';
+import { closeModal } from 'src/store/modals';
+import { State } from 'src/store/types';
 
-import { DOES_NOT_SUPPORT_FETCH, errors } from '../misc/errors';
-import { getClashAPIConfig } from '../store/app';
-import { fetchConfigs } from '../store/configs';
-import { closeModal } from '../store/modals';
 import APIConfig from './APIConfig';
 import s0 from './APIDiscovery.module.scss';
 import Modal from './Modal';
@@ -32,7 +34,6 @@ function APIDiscovery({ dispatch, apiConfig, modals }) {
       isOpen={modals.apiConfig}
       className={s0.content}
       overlayClassName={s0.overlay}
-      // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; isOpen: any; className:... Remove this comment to see the full error message
       shouldCloseOnOverlayClick={false}
       shouldCloseOnEsc={false}
       onRequestClose={closeApiConfigModal}
@@ -40,11 +41,15 @@ function APIDiscovery({ dispatch, apiConfig, modals }) {
       <div className={s0.container}>
         <APIConfig />
       </div>
+
+      <div className={s0.fixed}>
+        <ThemeSwitcher />
+      </div>
     </Modal>
   );
 }
 
-const mapState = (s) => ({
+const mapState = (s: State) => ({
   modals: s.modals,
   apiConfig: getClashAPIConfig(s),
 });
diff --git a/src/components/BackendList.module.scss b/src/components/BackendList.module.scss
index 1de1972..6872d3a 100644
--- a/src/components/BackendList.module.scss
+++ b/src/components/BackendList.module.scss
@@ -19,6 +19,7 @@
   grid-template-rows: 30px;
   grid-template-areas: 'close url .';
   column-gap: 10px;
+  border: 1px solid var(--bg-near-transparent);
 }
 
 .li:hover {
@@ -29,6 +30,7 @@
   opacity: 0;
   grid-area: close;
   place-self: center;
+  cursor: pointer;
 }
 
 .li:hover .close,
@@ -83,6 +85,7 @@
 }
 .btn:hover:enabled {
   background-color: var(--color-focus-blue);
+  color: white;
 }
 .btn:active:enabled {
   transform: scale(0.97);
diff --git a/src/components/Field.module.scss b/src/components/Field.module.scss
index 9a5f1e4..72a5149 100644
--- a/src/components/Field.module.scss
+++ b/src/components/Field.module.scss
@@ -9,13 +9,12 @@
     border-radius: 0;
     border-bottom: 1px solid var(--color-input-border);
     box-sizing: border-box;
-    color: #c1c1c1;
+    color: inherit;
     display: inline-block;
     font-size: inherit;
     height: 40px;
     outline: none;
     padding: 0 4px;
-    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
     width: 100%;
     &:focus {
       border-color: var(--color-focus-blue);
diff --git a/src/components/Field.tsx b/src/components/Field.tsx
index 4134d3e..a0d43cf 100644
--- a/src/components/Field.tsx
+++ b/src/components/Field.tsx
@@ -1,27 +1,25 @@
-import cx from 'clsx';
-import React from 'react';
+import * as React from 'react';
 
 import s from './Field.module.scss';
 
 const { useCallback } = React;
 
 type Props = {
+  name: string;
   value?: string | number;
   type?: 'text' | 'number';
   onChange?: (...args: any[]) => any;
   id?: string;
   label?: string;
+  placeholder?: string;
 };
 
 export default function Field({ id, label, value, onChange, ...props }: Props) {
   const valueOnChange = useCallback((e) => onChange(e), [onChange]);
-  const labelClassName = cx({
-    [s.floatAbove]: typeof value === 'string' && value !== '',
-  });
   return (
     <div className={s.root}>
       <input id={id} value={value} onChange={valueOnChange} {...props} />
-      <label htmlFor={id} className={labelClassName}>
+      <label htmlFor={id} className={s.floatAbove}>
         {label}
       </label>
     </div>
diff --git a/src/components/Modal.module.scss b/src/components/Modal.module.scss
index 6192a1f..8f9807c 100644
--- a/src/components/Modal.module.scss
+++ b/src/components/Modal.module.scss
@@ -11,11 +11,11 @@
 .content {
   outline: none;
   position: relative;
-  color: #ddd;
+  color: var(--color-text);
+  background: #444;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: #444;
   padding: 20px;
   border-radius: 10px;
 }
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index fda3263..e91523c 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,10 +1,10 @@
 import cx from 'clsx';
-import React from 'react';
-import Modal from 'react-modal';
+import * as React from 'react';
+import Modal, { Props as ReactModalProps } from 'react-modal';
 
 import s0 from './Modal.module.scss';
 
-type Props = {
+type Props = ReactModalProps & {
   isOpen: boolean;
   onRequestClose: (...args: any[]) => any;
   children: React.ReactNode;
diff --git a/src/components/Root.scss b/src/components/Root.scss
index 83d4171..55198ab 100644
--- a/src/components/Root.scss
+++ b/src/components/Root.scss
@@ -68,12 +68,12 @@ body {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   margin: 0;
   padding: 0;
 }
 
-body,
-body.dark {
+@mixin dark {
   --color-background: #202020;
   --color-background2: rgba(32, 32, 32, 0.3);
   --color-bg-card: #2d2d2d;
@@ -100,8 +100,7 @@ body.dark {
   --select-border-color: #040404;
   --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%23ffffff%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);
 }
-
-body.light {
+@mixin light {
   --color-background: #eee;
   --color-background2: rgba(240, 240, 240, 0.3);
   --color-bg-card: #fafafa;
@@ -129,6 +128,19 @@ body.light {
   --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);
 }
 
+// we don't have a "system" or "auto" mode now
+// it's just not make sense to have these yet
+// @media (prefers-color-scheme: dark) {}
+// @media (prefers-color-scheme: light) {}
+
+:root[data-theme='dark'] {
+  @include dark;
+}
+
+:root[data-theme='light'] {
+  @include light;
+}
+
 .flexCenter {
   display: flex;
   align-items: center;
diff --git a/src/components/SideBar.module.scss b/src/components/SideBar.module.scss
index 744d29d..4a06377 100644
--- a/src/components/SideBar.module.scss
+++ b/src/components/SideBar.module.scss
@@ -103,10 +103,3 @@
 .iconWrapper:focus {
   border-color: var(--color-focus-blue);
 }
-
-.themeSwitchContainer {
-  appearance: none;
-  user-select: none;
-  background: none;
-  cursor: pointer;
-}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 8a6429a..dbe7f0d 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -12,13 +12,9 @@ import {
   FcSettings,
 } from 'react-icons/fc';
 import { Link, useLocation } from 'react-router-dom';
+import { ThemeSwitcher } from 'src/components/shared/ThemeSwitcher';
 
-import { framerMotionResouce } from '../misc/motion';
-import { getTheme, switchTheme } from '../store/app';
 import s from './SideBar.module.scss';
-import { connect } from './StateProvider';
-
-const { useCallback } = React;
 
 const icons = {
   activity: FcAreaChart,
@@ -85,12 +81,9 @@ const pages = [
   },
 ];
 
-function SideBar({ dispatch, theme }) {
+export default function SideBar() {
   const { t } = useTranslation();
   const location = useLocation();
-  const switchThemeHooked = useCallback(() => {
-    dispatch(switchTheme());
-  }, [dispatch]);
   return (
     <div className={s.root}>
       <div className={s.logoPlaceholder} />
@@ -106,19 +99,7 @@ function SideBar({ dispatch, theme }) {
         ))}
       </div>
       <div className={s.footer}>
-        <Tooltip
-          label={t('theme')}
-          aria-label={
-            'switch to ' + (theme === 'light' ? 'dark' : 'light') + ' theme'
-          }
-        >
-          <button
-            className={cx(s.iconWrapper, s.themeSwitchContainer)}
-            onClick={switchThemeHooked}
-          >
-            {theme === 'light' ? <MoonA /> : <Sun />}
-          </button>
-        </Tooltip>
+        <ThemeSwitcher />
         <Tooltip label={t('about')}>
           <Link to="/about" className={s.iconWrapper}>
             <Info size={20} />
@@ -128,66 +109,3 @@ function SideBar({ dispatch, theme }) {
     </div>
   );
 }
-
-function MoonA() {
-  const module = framerMotionResouce.read();
-  const motion = module.motion;
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <motion.path
-        d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
-        initial={{ rotate: -30 }}
-        animate={{ rotate: 0 }}
-        transition={{ duration: 0.7 }}
-      />
-    </svg>
-  );
-}
-
-function Sun() {
-  const module = framerMotionResouce.read();
-  const motion = module.motion;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="12" cy="12" r="5"></circle>
-      <motion.g
-        initial={{ scale: 0.8 }}
-        animate={{ scale: 1 }}
-        transition={{ duration: 0.7 }}
-      >
-        <line x1="12" y1="1" x2="12" y2="3"></line>
-        <line x1="12" y1="21" x2="12" y2="23"></line>
-        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-        <line x1="1" y1="12" x2="3" y2="12"></line>
-        <line x1="21" y1="12" x2="23" y2="12"></line>
-        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-      </motion.g>
-    </svg>
-  );
-}
-
-const mapState = (s) => ({ theme: getTheme(s) });
-export default connect(mapState)(SideBar);
diff --git a/src/components/SvgYacd.tsx b/src/components/SvgYacd.tsx
index 90ad7e2..63c0bd5 100644
--- a/src/components/SvgYacd.tsx
+++ b/src/components/SvgYacd.tsx
@@ -1,5 +1,5 @@
 import cx from 'clsx';
-import React from 'react';
+import * as React from 'react';
 
 import s from './SvgYacd.module.scss';
 
@@ -9,6 +9,9 @@ type Props = {
   animate?: boolean;
   c0?: string;
   c1?: string;
+  stroke?: string;
+  eye?: string;
+  mouth?: string;
 };
 
 function SvgYacd({
@@ -16,7 +19,9 @@ function SvgYacd({
   height = 320,
   animate = false,
   c0 = 'currentColor',
-  c1 = '#eee',
+  stroke = '#eee',
+  eye = '#eee',
+  mouth = '#eee',
 }: Props) {
   const faceClasName = cx({ [s.path]: animate });
   return (
@@ -30,16 +35,16 @@ function SvgYacd({
         {/* face */}
         <path
           d="M71.689 53.055c9.23-1.487 25.684 27.263 41.411 56.663 18.572-8.017 71.708-7.717 93.775 0 4.714-15.612 31.96-57.405 41.626-56.663 3.992.088 13.07 31.705 23.309 94.96 2.743 16.949 7.537 47.492 14.38 91.63-42.339 17.834-84.37 26.751-126.095 26.751-41.724 0-83.756-8.917-126.095-26.751C52.973 116.244 65.536 54.047 71.689 53.055z"
-          stroke={c1}
+          stroke={stroke}
           strokeWidth="4"
           strokeLinecap="round"
           fill={c0}
           className={faceClasName}
         />
-        <circle fill={c1} cx="216.5" cy="181.5" r="14.5" />
-        <circle fill={c1} cx="104.5" cy="181.5" r="14.5" />
+        <circle fill={eye} cx="216.5" cy="181.5" r="14.5" />
+        <circle fill={eye} cx="104.5" cy="181.5" r="14.5" />
         {/* mouth */}
-        <g stroke={c1} strokeLinecap="round" strokeWidth="4">
+        <g stroke={mouth} strokeLinecap="round" strokeWidth="4">
           <path d="M175.568 218.694c-2.494 1.582-5.534 2.207-8.563 1.508-3.029-.7-5.487-2.594-7.035-5.11M143.981 218.694c2.494 1.582 5.534 2.207 8.563 1.508 3.03-.7 5.488-2.594 7.036-5.11" />
         </g>
       </g>
diff --git a/src/components/shared/ThemeSwitcher.module.css b/src/components/shared/ThemeSwitcher.module.css
new file mode 100644
index 0000000..919c86c
--- /dev/null
+++ b/src/components/shared/ThemeSwitcher.module.css
@@ -0,0 +1,28 @@
+.iconWrapper {
+  --sz: 40px;
+
+  width: var(--sz);
+  height: var(--sz);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  outline: none;
+  padding: 5px;
+  color: var(--color-text);
+  border-radius: 100%;
+  border: 1px solid transparent;
+}
+.iconWrapper:hover {
+  opacity: 0.6;
+}
+.iconWrapper:focus {
+  border-color: var(--color-focus-blue);
+}
+
+.themeSwitchContainer {
+  appearance: none;
+  user-select: none;
+  background: none;
+  cursor: pointer;
+}
diff --git a/src/components/shared/ThemeSwitcher.tsx b/src/components/shared/ThemeSwitcher.tsx
new file mode 100644
index 0000000..fba5b0b
--- /dev/null
+++ b/src/components/shared/ThemeSwitcher.tsx
@@ -0,0 +1,97 @@
+import Tooltip from '@reach/tooltip';
+import cx from 'clsx';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { connect } from 'src/components/StateProvider';
+import { framerMotionResouce } from 'src/misc/motion';
+import { getTheme, switchTheme } from 'src/store/app';
+import { State } from 'src/store/types';
+
+import s from './ThemeSwitcher.module.css';
+
+export function ThemeSwitcherImpl({ theme, dispatch }) {
+  const { t } = useTranslation();
+
+  const switchThemeHooked = React.useCallback(() => {
+    dispatch(switchTheme());
+  }, [dispatch]);
+
+  return (
+    <Tooltip
+      label={t('theme')}
+      aria-label={
+        'switch to ' + (theme === 'light' ? 'dark' : 'light') + ' theme'
+      }
+    >
+      <button
+        className={cx(s.iconWrapper, s.themeSwitchContainer)}
+        onClick={switchThemeHooked}
+      >
+        {theme === 'light' ? <MoonA /> : <Sun />}
+      </button>
+    </Tooltip>
+  );
+}
+
+function MoonA() {
+  const module = framerMotionResouce.read();
+  const motion = module.motion;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <motion.path
+        d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+        initial={{ rotate: -30 }}
+        animate={{ rotate: 0 }}
+        transition={{ duration: 0.7 }}
+      />
+    </svg>
+  );
+}
+
+function Sun() {
+  const module = framerMotionResouce.read();
+  const motion = module.motion;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="5"></circle>
+      <motion.g
+        initial={{ scale: 0.8 }}
+        animate={{ scale: 1 }}
+        transition={{ duration: 0.7 }}
+      >
+        <line x1="12" y1="1" x2="12" y2="3"></line>
+        <line x1="12" y1="21" x2="12" y2="23"></line>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+        <line x1="1" y1="12" x2="3" y2="12"></line>
+        <line x1="21" y1="12" x2="23" y2="12"></line>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+      </motion.g>
+    </svg>
+  );
+}
+
+const mapState = (s: State) => ({ theme: getTheme(s) });
+export const ThemeSwitcher = connect(mapState)(ThemeSwitcherImpl);
diff --git a/src/store/app.ts b/src/store/app.ts
index ccdae1a..c6a455e 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -95,14 +95,15 @@ export function updateClashAPIConfig({ baseURL, secret }) {
   };
 }
 
-const bodyElement = document.body;
+const rootEl = document.querySelector('html');
+const themeColorMeta = document.querySelector('meta[name="theme-color"]');
 function setTheme(theme = 'dark') {
   if (theme === 'dark') {
-    bodyElement.classList.remove('light');
-    bodyElement.classList.add('dark');
+    rootEl.setAttribute('data-theme', 'dark');
+    themeColorMeta.setAttribute('content', '#202020');
   } else {
-    bodyElement.classList.remove('dark');
-    bodyElement.classList.add('light');
+    rootEl.setAttribute('data-theme', 'light');
+    themeColorMeta.setAttribute('content', '#eeeeee');
   }
 }
 
diff --git a/src/store/modals.ts b/src/store/modals.ts
index 3b8b488..0b27ce9 100644
--- a/src/store/modals.ts
+++ b/src/store/modals.ts
@@ -1,13 +1,15 @@
-export function openModal(modalName) {
-  return (dispatch) => {
+import { DispatchFn } from './types';
+
+export function openModal(modalName: string) {
+  return (dispatch: DispatchFn) => {
     dispatch(`openModal:${modalName}`, (s) => {
       s.modals[modalName] = true;
     });
   };
 }
 
-export function closeModal(modalName) {
-  return (dispatch) => {
+export function closeModal(modalName: string) {
+  return (dispatch: DispatchFn) => {
     dispatch(`closeModal:${modalName}`, (s) => {
       s.modals[modalName] = false;
     });
diff --git a/src/store/types.ts b/src/store/types.ts
index c358ae3..7e6a39d 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -88,6 +88,12 @@ export type StateConfigs = {
   haveFetchedConfig: boolean;
 };
 
+///// store.modals
+
+export type StateModals = {
+  apiConfig: boolean;
+};
+
 //////
 
 export type State = {
@@ -95,6 +101,7 @@ export type State = {
   configs: StateConfigs;
   proxies: StateProxies;
   logs: StateLogs;
+  modals: StateModals;
 };
 
 export type GetStateFn = () => State;
diff --git a/yarn.lock b/yarn.lock
index e684501..512d2bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1008,10 +1008,10 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/[email protected]", "@babel/runtime@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
-  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+"@babel/[email protected]":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.5.tgz#665450911c6031af38f81db530f387ec04cd9a98"
+  integrity sha512-121rumjddw9c3NCQ55KGkyE1h/nzWhU/owjhw0l4mQrkzz4x9SGS1X8gFLraHwX7td3Yo4QTL+qj0NcIzN87BA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -1029,6 +1029,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2":
   version "7.13.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.8.tgz#cc886a85c072df1de23670dc1aa59fc116c4017c"
@@ -1200,10 +1207,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fontsource/[email protected]":
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/@fontsource/open-sans/-/open-sans-4.4.2.tgz#766334df3846b5ad653871e3cc85b2a28b8094a5"
-  integrity sha512-ZARG7zZKMgnRTIcTRDtjsJQvX4vbDEnAH8D8fPES8Mw8xJrpHGe2laYhrgKvwWFLuiTZHmiPRXju0yrLFJeL1g==
+"@fontsource/[email protected]":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@fontsource/open-sans/-/open-sans-4.4.5.tgz#07b31617e62ed753c94cabcf552ebaed4de497ce"
+  integrity sha512-PDWEvO1/p8OAHHiielvEmwGXHNbZhrZn96ojV7+/mKgFu+cCUcGVJl9sFs97rCWLe3hKQsYLEsJs4EiLjwa+UQ==
 
 "@fontsource/[email protected]":
   version "4.4.2"
@@ -1384,58 +1391,6 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@sentry/[email protected]":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.5.1.tgz#9a6ed5607b3b0f4e83f38720e3e202906f8c5bdb"
-  integrity sha512-iVLCdEFwsoWAzE/hNknexPQjjDpMQV7mmaq9Z1P63bD6MfhwVTx4hG4pHn8HEvC38VvCVf1wv0v/LxtoODAYXg==
-  dependencies:
-    "@sentry/core" "6.5.1"
-    "@sentry/types" "6.5.1"
-    "@sentry/utils" "6.5.1"
-    tslib "^1.9.3"
-
-"@sentry/[email protected]":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.5.1.tgz#c8b6c3ed86ed07b193c95d599c1b9a4a161e500e"
-  integrity sha512-Mh3sl/iUOT1myHmM6RlDy2ARzkUClx/g4DAt1rJ/IpQBOlDYQraplXSIW80i/hzRgQDfwhwgf4wUa5DicKBjKw==
-  dependencies:
-    "@sentry/hub" "6.5.1"
-    "@sentry/minimal" "6.5.1"
-    "@sentry/types" "6.5.1"
-    "@sentry/utils" "6.5.1"
-    tslib "^1.9.3"
-
-"@sentry/[email protected]":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.5.1.tgz#135ef09d07d32e87a53f664c0ae8fcc4f5963519"
-  integrity sha512-lBRMBVMYP8B4PfRiM70murbtJAXiIAao/asDEMIRNGMP6pI2ArqXfJCBYDkStukhikYD0Kqb4trXq+JYF07Hbg==
-  dependencies:
-    "@sentry/types" "6.5.1"
-    "@sentry/utils" "6.5.1"
-    tslib "^1.9.3"
-
-"@sentry/[email protected]":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.5.1.tgz#b8c1b382c2ea788eec3d32d203e5081b00eb6838"
-  integrity sha512-q9Do/oreu1RP695CXCLowVDuQyk7ilE6FGdz2QLpTXAfx8247qOwk6+zy9Kea/Djk93+BoSDVQUSneNiVwl0nQ==
-  dependencies:
-    "@sentry/hub" "6.5.1"
-    "@sentry/types" "6.5.1"
-    tslib "^1.9.3"
-
-"@sentry/[email protected]":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.5.1.tgz#0a34ecfd1ae9275a416a105640eb4bed45a46a1d"
-  integrity sha512-b/7a6CMoytaeFPx4IBjfxPw3nPvsQh7ui1C8Vw0LxNNDgBwVhPLzUOWeLWbo5YZCVbGEMIWwtCUQYWxneceZSA==
-
-"@sentry/[email protected]":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.5.1.tgz#046baf7d1a6564d6d555437ad3674dba9bc0806a"
-  integrity sha512-Wv86JYGQH+ZJ5XGFQX7h6ijl32667ikenoL9EyXMn8UoOYX/MLwZoQZin1P60wmKkYR9ifTNVmpaI9OoTaH+UQ==
-  dependencies:
-    "@sentry/types" "6.5.1"
-    tslib "^1.9.3"
-
 "@surma/rollup-plugin-off-main-thread@^1.4.1":
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz#e6786b6af5799f82f7ab3a82e53f6182d2b91a58"
@@ -1528,10 +1483,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
-"@types/[email protected]":
-  version "17.0.6"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.6.tgz#c158325cf91b196270bc0f4af73463f149e7eafe"
-  integrity sha512-MGTI+TudxAnGTj8aco8mogaPSJGK2Whje7OZh1CxNLRyhJpTZg/pGQpIbCT0eCVFQyH7UFpdvCqQEThHIp/gsA==
+"@types/[email protected]":
+  version "17.0.7"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.7.tgz#b8ee15ead9e5d6c2c858b44949fdf2ebe5212232"
+  integrity sha512-Wd5xvZRlccOrCTej8jZkoFZuZRKHzanDDv1xglI33oBNFMWrqOSzrvWFw7ngSiZjrpJAzPKFtX7JvuXpkNmQHA==
   dependencies:
     "@types/react" "*"
 
@@ -1564,10 +1519,10 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/[email protected]":
-  version "17.0.9"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.9.tgz#1147fb520024a62c9b3841f5cb4db89b73ddb87f"
-  integrity sha512-2Cw7FvevpJxQrCb+k5t6GH1KIvmadj5uBbjPaLlJB/nZWUj56e1ZqcD6zsoMFB47MsJUTFl9RJ132A7hb3QFJA==
+"@types/[email protected]":
+  version "17.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451"
+  integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -1597,13 +1552,13 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/[email protected]":
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.26.0.tgz#12bbd6ebd5e7fabd32e48e1e60efa1f3554a3242"
-  integrity sha512-yA7IWp+5Qqf+TLbd8b35ySFOFzUfL7i+4If50EqvjT6w35X8Lv0eBHb6rATeWmucks37w+zV+tWnOXI9JlG6Eg==
+"@typescript-eslint/[email protected]":
+  version "4.26.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.26.1.tgz#b9c7313321cb837e2bf8bebe7acc2220659e67d3"
+  integrity sha512-aoIusj/8CR+xDWmZxARivZjbMBQTT9dImUtdZ8tVCVRXgBUuuZyM5Of5A9D9arQPxbi/0rlJLcuArclz/rCMJw==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.26.0"
-    "@typescript-eslint/scope-manager" "4.26.0"
+    "@typescript-eslint/experimental-utils" "4.26.1"
+    "@typescript-eslint/scope-manager" "4.26.1"
     debug "^4.3.1"
     functional-red-black-tree "^1.0.1"
     lodash "^4.17.21"
@@ -1611,15 +1566,15 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/[email protected]":
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.26.0.tgz#ba7848b3f088659cdf71bce22454795fc55be99a"
-  integrity sha512-TH2FO2rdDm7AWfAVRB5RSlbUhWxGVuxPNzGT7W65zVfl8H/WeXTk1e69IrcEVsBslrQSTDKQSaJD89hwKrhdkw==
+"@typescript-eslint/[email protected]":
+  version "4.26.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.26.1.tgz#a35980a2390da9232aa206b27f620eab66e94142"
+  integrity sha512-sQHBugRhrXzRCs9PaGg6rowie4i8s/iD/DpTB+EXte8OMDfdCG5TvO73XlO9Wc/zi0uyN4qOmX9hIjQEyhnbmQ==
   dependencies:
     "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.26.0"
-    "@typescript-eslint/types" "4.26.0"
-    "@typescript-eslint/typescript-estree" "4.26.0"
+    "@typescript-eslint/scope-manager" "4.26.1"
+    "@typescript-eslint/types" "4.26.1"
+    "@typescript-eslint/typescript-estree" "4.26.1"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
@@ -1635,14 +1590,14 @@
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/[email protected]":
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.26.0.tgz#31b6b732c9454f757b020dab9b6754112aa5eeaf"
-  integrity sha512-b4jekVJG9FfmjUfmM4VoOItQhPlnt6MPOBUL0AQbiTmm+SSpSdhHYlwayOm4IW9KLI/4/cRKtQCmDl1oE2OlPg==
+"@typescript-eslint/[email protected]":
+  version "4.26.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.26.1.tgz#cecfdd5eb7a5c13aabce1c1cfd7fbafb5a0f1e8e"
+  integrity sha512-q7F3zSo/nU6YJpPJvQveVlIIzx9/wu75lr6oDbDzoeIRWxpoc/HQ43G4rmMoCc5my/3uSj2VEpg/D83LYZF5HQ==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.26.0"
-    "@typescript-eslint/types" "4.26.0"
-    "@typescript-eslint/typescript-estree" "4.26.0"
+    "@typescript-eslint/scope-manager" "4.26.1"
+    "@typescript-eslint/types" "4.26.1"
+    "@typescript-eslint/typescript-estree" "4.26.1"
     debug "^4.3.1"
 
 "@typescript-eslint/[email protected]":
@@ -1653,23 +1608,23 @@
     "@typescript-eslint/types" "4.1.0"
     "@typescript-eslint/visitor-keys" "4.1.0"
 
-"@typescript-eslint/[email protected]":
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.26.0.tgz#60d1a71df162404e954b9d1c6343ff3bee496194"
-  integrity sha512-G6xB6mMo4xVxwMt5lEsNTz3x4qGDt0NSGmTBNBPJxNsrTXJSm21c6raeYroS2OwQsOyIXqKZv266L/Gln1BWqg==
+"@typescript-eslint/[email protected]":
+  version "4.26.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.26.1.tgz#075a74a15ff33ee3a7ed33e5fce16ee86689f662"
+  integrity sha512-TW1X2p62FQ8Rlne+WEShyd7ac2LA6o27S9i131W4NwDSfyeVlQWhw8ylldNNS8JG6oJB9Ha9Xyc+IUcqipvheQ==
   dependencies:
-    "@typescript-eslint/types" "4.26.0"
-    "@typescript-eslint/visitor-keys" "4.26.0"
+    "@typescript-eslint/types" "4.26.1"
+    "@typescript-eslint/visitor-keys" "4.26.1"
 
 "@typescript-eslint/[email protected]":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.1.0.tgz#edbd3fec346f34e13ce7aa176b03b497a32c496a"
   integrity sha512-rkBqWsO7m01XckP9R2YHVN8mySOKKY2cophGM8K5uDK89ArCgahItQYdbg/3n8xMxzu2elss+an1TphlUpDuJw==
 
-"@typescript-eslint/[email protected]":
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.26.0.tgz#7c6732c0414f0a69595f4f846ebe12616243d546"
-  integrity sha512-rADNgXl1kS/EKnDr3G+m7fB9yeJNnR9kF7xMiXL6mSIWpr3Wg5MhxyfEXy/IlYthsqwBqHOr22boFbf/u6O88A==
+"@typescript-eslint/[email protected]":
+  version "4.26.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.26.1.tgz#9e7c523f73c34b04a765e4167ca5650436ef1d38"
+  integrity sha512-STyMPxR3cS+LaNvS8yK15rb8Y0iL0tFXq0uyl6gY45glyI7w0CsyqyEXl/Fa0JlQy+pVANeK3sbwPneCbWE7yg==
 
 "@typescript-eslint/[email protected]":
   version "4.1.0"
@@ -1685,13 +1640,13 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/[email protected]":
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.26.0.tgz#aea17a40e62dc31c63d5b1bbe9a75783f2ce7109"
-  integrity sha512-GHUgahPcm9GfBuy3TzdsizCcPjKOAauG9xkz9TR8kOdssz2Iz9jRCSQm6+aVFa23d5NcSpo1GdHGSQKe0tlcbg==
+"@typescript-eslint/[email protected]":
+  version "4.26.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.26.1.tgz#b2ce2e789233d62283fae2c16baabd4f1dbc9633"
+  integrity sha512-l3ZXob+h0NQzz80lBGaykdScYaiEbFqznEs99uwzm8fPHhDjwaBFfQkjUC/slw6Sm7npFL8qrGEAMxcfBsBJUg==
   dependencies:
-    "@typescript-eslint/types" "4.26.0"
-    "@typescript-eslint/visitor-keys" "4.26.0"
+    "@typescript-eslint/types" "4.26.1"
+    "@typescript-eslint/visitor-keys" "4.26.1"
     debug "^4.3.1"
     globby "^11.0.3"
     is-glob "^4.0.1"
@@ -1706,12 +1661,12 @@
     "@typescript-eslint/types" "4.1.0"
     eslint-visitor-keys "^2.0.0"
 
-"@typescript-eslint/[email protected]":
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.26.0.tgz#26d2583169222815be4dcd1da4fe5459bc3bcc23"
-  integrity sha512-cw4j8lH38V1ycGBbF+aFiLUls9Z0Bw8QschP3mkth50BbWzgFS33ISIgBzUMuQ2IdahoEv/rXstr8Zhlz4B1Zg==
+"@typescript-eslint/[email protected]":
+  version "4.26.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.26.1.tgz#0d55ea735cb0d8903b198017d6d4f518fdaac546"
+  integrity sha512-IGouNSSd+6x/fHtYRyLOM6/C+QxMDzWlDtN41ea+flWuSF9g02iqcIlX8wM53JkfljoIjP0U+yp7SiTS1onEkw==
   dependencies:
-    "@typescript-eslint/types" "4.26.0"
+    "@typescript-eslint/types" "4.26.1"
     eslint-visitor-keys "^2.0.0"
 
 "@vitejs/[email protected]":
@@ -2279,10 +2234,10 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssnano-preset-default@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.1.2.tgz#5d4877a91769823c5da6bcebd54996ecdf8aca12"
-  integrity sha512-spilp8LRw0sacuxiN9A/dyyPr6G/WISKMBKcBD4NMoPV0ENx4DeuWvIIrSx9PII2nJIDCO3kywkqTPreECBVOg==
+cssnano-preset-default@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.1.3.tgz#caa54183a8c8df03124a9e23f374ab89df5a9a99"
+  integrity sha512-qo9tX+t4yAAZ/yagVV3b+QBKeLklQbmgR3wI7mccrDcR+bEk9iHgZN1E7doX68y9ThznLya3RDmR+nc7l6/2WQ==
   dependencies:
     css-declaration-sorter "^6.0.3"
     cssnano-utils "^2.0.1"
@@ -2306,9 +2261,9 @@ cssnano-preset-default@^5.1.2:
     postcss-normalize-string "^5.0.1"
     postcss-normalize-timing-functions "^5.0.1"
     postcss-normalize-unicode "^5.0.1"
-    postcss-normalize-url "^5.0.1"
+    postcss-normalize-url "^5.0.2"
     postcss-normalize-whitespace "^5.0.1"
-    postcss-ordered-values "^5.0.1"
+    postcss-ordered-values "^5.0.2"
     postcss-reduce-initial "^5.0.1"
     postcss-reduce-transforms "^5.0.1"
     postcss-svgo "^5.0.2"
@@ -2319,13 +2274,13 @@ cssnano-utils@^2.0.1:
   resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-2.0.1.tgz#8660aa2b37ed869d2e2f22918196a9a8b6498ce2"
   integrity sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==
 
[email protected]:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.0.5.tgz#6b8787123bf4cd5a220a2fa6cb5bc036b0854b48"
-  integrity sha512-L2VtPXnq6rmcMC9vkBOP131sZu3ccRQI27ejKZdmQiPDpUlFkUbpXHgKN+cibeO1U4PItxVZp1zTIn5dHsXoyg==
[email protected]:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.0.6.tgz#2a91ad34c6521ae31eab3da9c90108ea3093535d"
+  integrity sha512-NiaLH/7yqGksFGsFNvSRe2IV/qmEBAeDE64dYeD8OBrgp6lE8YoMeQJMtsv5ijo6MPyhuoOvFhI94reahBRDkw==
   dependencies:
     cosmiconfig "^7.0.0"
-    cssnano-preset-default "^5.1.2"
+    cssnano-preset-default "^5.1.3"
     is-resolvable "^1.1.0"
 
 csso@^4.2.0:
@@ -3207,10 +3162,10 @@ ignore@^5.1.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
[email protected]:
-  version "9.0.2"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.2.tgz#83e4593df9914acaecfd9fac6a8601ef44d883fc"
-  integrity sha512-mkcmzLtIfSp40vAqteRr1MbWNSoI7JE+/PB36FNPoSfJ9RQRmNKuTYCjKkyXyuq3Dgn07HuJBrwJd4ZSk2yUbw==
[email protected]:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.3.tgz#146e2ba8b84d4b1b15378143c2345559915097f4"
+  integrity sha512-mONgeNSMuyjIe0lkQPa9YhdmTv8P19IeHV0biYhcXhbd5dhdB9HSK93zBpyKjp6wersSUgT5QyU0skmejUVP2A==
 
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.2.1"
@@ -3801,10 +3756,10 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
-normalize-url@^4.5.0:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
-  integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
+normalize-url@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.0.1.tgz#a4f27f58cf8c7b287b440b8a8201f42d0b00d256"
+  integrity sha512-VU4pzAuh7Kip71XEmO9aNREYAdMHFGTVj/i+CaTImS8x0i1d3jUZkXhqluy/PRgjPLMgsLQulYY3PJ/aSbSjpQ==
 
 nth-check@^2.0.0:
   version "2.0.0"
@@ -4194,13 +4149,13 @@ postcss-normalize-unicode@^5.0.1:
     browserslist "^4.16.0"
     postcss-value-parser "^4.1.0"
 
-postcss-normalize-url@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-5.0.1.tgz#ffa9fe545935d8b57becbbb7934dd5e245513183"
-  integrity sha512-hkbG0j58Z1M830/CJ73VsP7gvlG1yF+4y7Fd1w4tD2c7CaA2Psll+pQ6eQhth9y9EaqZSLzamff/D0MZBMbYSg==
+postcss-normalize-url@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-5.0.2.tgz#ddcdfb7cede1270740cf3e4dfc6008bd96abc763"
+  integrity sha512-k4jLTPUxREQ5bpajFQZpx8bCF2UrlqOTzP9kEqcEnOfwsRshWs2+oAFIHfDQB8GO2PaUaSE0NlTAYtbluZTlHQ==
   dependencies:
     is-absolute-url "^3.0.3"
-    normalize-url "^4.5.0"
+    normalize-url "^6.0.1"
     postcss-value-parser "^4.1.0"
 
 postcss-normalize-whitespace@^5.0.1:
@@ -4210,10 +4165,10 @@ postcss-normalize-whitespace@^5.0.1:
   dependencies:
     postcss-value-parser "^4.1.0"
 
-postcss-ordered-values@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-5.0.1.tgz#79ef6e2bd267ccad3fc0c4f4a586dfd01c131f64"
-  integrity sha512-6mkCF5BQ25HvEcDfrMHCLLFHlraBSlOXFnQMHYhSpDO/5jSR1k8LdEXOkv+7+uzW6o6tBYea1Km0wQSRkPJkwA==
+postcss-ordered-values@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-5.0.2.tgz#1f351426977be00e0f765b3164ad753dac8ed044"
+  integrity sha512-8AFYDSOYWebJYLyJi3fyjl6CqMEG/UVworjiyK1r573I56kb3e879sCJLGvR3merj+fAdPpVplXKQZv+ey6CgQ==
   dependencies:
     cssnano-utils "^2.0.1"
     postcss-value-parser "^4.1.0"
@@ -4279,10 +4234,10 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
[email protected], postcss@^8.2.10:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.0.tgz#b1a713f6172ca427e3f05ef1303de8b65683325f"
-  integrity sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==
[email protected], postcss@^8.3.0:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.2.tgz#ed3ec489f5428af5740cd6effcc216b4d455ee64"
+  integrity sha512-y1FK/AWdZlBF5lusS5j5l4/vF67+vQZt1SXPVJ32y1kRGDQyrs1zk32hG1cInRTu14P0V+orPz+ifwW/7rR4bg==
   dependencies:
     colorette "^1.2.2"
     nanoid "^3.1.23"
@@ -4398,10 +4353,10 @@ [email protected]:
     react-lifecycles-compat "^3.0.0"
     warning "^4.0.3"
 
[email protected]:
-  version "3.16.1"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.16.1.tgz#0bb9c5c45a74e14b5e204218fa602fe1a1065976"
-  integrity sha512-dof8XXSZ7HprfzvpbJE+YZrhUXcQYxy1j+NU8ZPYpKKDF79wlZAke+GyYhQ0b6SuOFp8ZpVXSpdD4AL3lxmeXQ==
[email protected]:
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.17.0.tgz#461c0a030044760cd874c7ea8aa9d55c2dceb15d"
+  integrity sha512-/qUNb6ESCz75Z/bR5p/ztp5ipRj8IQSiIpHK3AkCLTT4IqZsceAoD+9B+wbitA0LkxsR3snGrpgKUc9MMYQ/Ow==
   dependencies:
     "@babel/runtime" "^7.5.5"
     broadcast-channel "^3.4.1"
@@ -4662,13 +4617,20 @@ rollup-plugin-terser@^7.0.0:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup@^2.38.5, rollup@^2.43.1, rollup@^2.45.2:
+rollup@^2.38.5, rollup@^2.43.1:
   version "2.50.4"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.50.4.tgz#5a53e4294296dfee2a83b0ec0d0536984b98de71"
   integrity sha512-mBQa9O6bdqur7a6R+TXcbdYgfO2arXlDG+rSrWfwAvsiumpJjD4OS23R9QuhItuz8ysWb8mZ91CFFDQUhJY+8Q==
   optionalDependencies:
     fsevents "~2.3.1"
 
+rollup@^2.51.2:
+  version "2.51.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.51.2.tgz#6de71e28c833089a0bd745a09671a3e2b92af6b7"
+  integrity sha512-ReV2eGEadA7hmXSzjxdDKs10neqH2QURf2RxJ6ayAlq93ugy6qIvXMmbc5cWMGCDh1h5T4thuWO1e2VNbMq8FA==
+  optionalDependencies:
+    fsevents "~2.3.1"
+
 run-parallel@^1.1.9:
   version "1.1.10"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
@@ -5063,12 +5025,12 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
[email protected]:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
-  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
[email protected]:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
-tslib@^1.8.1, tslib@^1.9.3:
+tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -5212,25 +5174,25 @@ vendors@^1.0.3:
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
   integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
[email protected]:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.7.3.tgz#ce3fdd64ac68033ea840bfea41add1af4d13f93a"
-  integrity sha512-RgGJW02OxRxziNKYTUtWXr9hF+Px6jcdyMN7IkuOOV9WcFaJQCKb3Pxqizb8GMjIBLtjEebwa0XbKXWDFhZWjw==
[email protected]:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.8.1.tgz#8b6fc6c26fcc6fab9d39a087256ba6280173b6eb"
+  integrity sha512-Hrfz+NpZ6yroVm5yiCWQ1N9HX9o6H/CCyg7ZHiaP3ZZC29a0Z9lqnnicEAhZMLkVPJqHM60wowL0EJkyOVyxBg==
   dependencies:
     debug "^4.3.2"
     fast-glob "^3.2.5"
     pretty-bytes "^5.6.0"
-    rollup "^2.45.2"
+    rollup "^2.51.2"
     workbox-build "^6.1.5"
     workbox-window "^6.1.5"
 
[email protected]:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.3.6.tgz#1f7cfde88a51a802d69000c7bac85d481c2e871c"
-  integrity sha512-fsEpNKDHgh3Sn66JH06ZnUBnIgUVUtw6ucDhlOj1CEqxIkymU25yv1/kWDPlIjyYHnalr0cN6V+zzUJ+fmWHYw==
[email protected]:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.3.7.tgz#3023892419367465e1af1739578f8663d04243b2"
+  integrity sha512-Y0xRz11MPYu/EAvzN94+FsOZHbSvO6FUvHv127CyG7mV6oDoay2bw+g5y9wW3Blf8OY3chaz3nc/DcRe1IQ3Nw==
   dependencies:
     esbuild "^0.12.5"
-    postcss "^8.2.10"
+    postcss "^8.3.0"
     resolve "^1.19.0"
     rollup "^2.38.5"
   optionalDependencies: