Upgrade deps

package.json

@@ -28,22 +28,22 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "7.20.1",
+    "@babel/runtime": "7.20.7",
     "@fontsource/roboto-mono": "4.5.8",
     "@reach/menu-button": "0.18.0",
     "@reach/tooltip": "0.18.0",
     "@reach/visually-hidden": "0.18.0",
-    "@tanstack/react-query": "4.14.5",
+    "@tanstack/react-query": "4.22.0",
-    "chart.js": "3.9.1",
+    "chart.js": "4.1.2",
     "clsx": "^1.2.1",
-    "core-js": "3.26.0",
+    "core-js": "3.27.1",
     "date-fns": "2.29.3",
-    "framer-motion": "7.6.4",
+    "framer-motion": "8.4.6",
     "history": "5.3.0",
-    "i18next": "22.0.4",
+    "i18next": "22.4.9",
     "i18next-browser-languagedetector": "7.0.1",
-    "i18next-http-backend": "2.0.1",
+    "i18next-http-backend": "2.1.1",
-    "immer": "9.0.16",
+    "immer": "9.0.18",
     "invariant": "^2.2.4",
     "lodash-es": "^4.17.21",
     "memoize-one": "6.0.0",
@@ -51,18 +51,18 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-feather": "^2.0.10",
-    "react-i18next": "12.0.0",
+    "react-i18next": "12.1.4",
-    "react-icons": "4.6.0",
+    "react-icons": "4.7.1",
     "react-modal": "3.16.1",
-    "react-router": "6.4.3",
+    "react-router": "6.6.2",
-    "react-router-dom": "6.4.3",
+    "react-router-dom": "6.6.2",
     "react-switch": "^7.0.0",
     "react-table": "7.8.0",
-    "react-tabs": "5.1.0",
+    "react-tabs": "6.0.0",
     "react-tiny-fab": "4.0.4",
     "react-window": "^1.8.8",
     "recoil": "0.7.6",
-    "regenerator-runtime": "0.13.10",
+    "regenerator-runtime": "0.13.11",
     "reselect": "4.1.7",
     "tslib": "2.4.1",
     "use-asset": "1.0.4",
@@ -76,33 +76,32 @@
     "@fontsource/inter": "4.5.14",
     "@types/invariant": "2.2.35",
     "@types/lodash-es": "4.17.6",
-    "@types/react": "18.0.25",
+    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.8",
+    "@types/react-dom": "18.0.10",
     "@types/react-modal": "3.13.1",
     "@types/react-window": "1.8.5",
-    "@typescript-eslint/eslint-plugin": "5.42.0",
+    "@typescript-eslint/eslint-plugin": "5.48.2",
-    "@typescript-eslint/parser": "5.42.0",
+    "@typescript-eslint/parser": "5.48.2",
-    "@vitejs/plugin-react": "2.2.0",
+    "@vitejs/plugin-react": "3.0.1",
     "autoprefixer": "10.4.13",
-    "eslint": "8.27.0",
+    "eslint": "8.32.0",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-prettier": "8.5.0",
+    "eslint-config-prettier": "8.6.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-flowtype": "8.0.3",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.31.10",
+    "eslint-plugin-react": "7.32.1",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-simple-import-sort": "^8.0.0",
+    "eslint-plugin-simple-import-sort": "^9.0.0",
-    "postcss": "8.4.18",
+    "postcss": "8.4.21",
-    "postcss-custom-media": "^8.0.2",
+    "postcss-import": "15.1.0",
-    "postcss-import": "15.0.0",
+    "postcss-simple-vars": "^7.0.1",
-    "postcss-simple-vars": "^7.0.0",
+    "prettier": "2.8.3",
-    "prettier": "2.7.1",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "1.56.0",
+    "sass": "1.57.1",
-    "typescript": "4.8.4",
+    "typescript": "4.9.4",
-    "vite": "3.2.3",
+    "vite": "4.0.4",
-    "vite-plugin-pwa": "0.13.2"
+    "vite-plugin-pwa": "0.14.1"
   }
 }

postcss.config.js

@@ -1,21 +1,13 @@
 'use strict';
 
+// '--breakpoint-not-small': 'screen and (min-width: 30em)',
+// '--breakpoint-medium': 'screen and (min-width: 30em) and (max-width: 60em)',
+// '--breakpoint-large': 'screen and (min-width: 60em)',
+
 module.exports = {
   plugins: [
     require('postcss-import')(),
     require('postcss-simple-vars')(),
-    require('postcss-custom-media')({
-      importFrom: [
-        {
-          customMedia: {
-            '--breakpoint-not-small': 'screen and (min-width: 30em)',
-            '--breakpoint-medium':
-              'screen and (min-width: 30em) and (max-width: 60em)',
-            '--breakpoint-large': 'screen and (min-width: 60em)',
-          },
-        },
-      ],
-    }),
     require('autoprefixer')(),
   ],
 };

src/components/Config.module.scss

@@ -4,7 +4,7 @@
   grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
   max-width: 900px;
   gap: 5px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     gap: 15px;
   }
 }
@@ -12,7 +12,7 @@
 .root,
 .section {
   padding: 6px 15px 10px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     padding: 10px 40px 15px;
   }
 }
@@ -26,7 +26,7 @@
 .sep {
   max-width: 900px;
   padding: 0 15px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     padding: 0 40px;
   }
   > div {

src/components/ContentHeader.module.scss

@@ -7,7 +7,7 @@
 .h1 {
   padding: 0 15px;
   font-size: 1.7em;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     padding: 0 40px;
     font-size: 2em;
   }

src/components/Home.module.scss

@@ -1,6 +1,6 @@
 .root {
   padding: 6px 15px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     padding: 10px 40px;
   }
 }

src/components/Rule.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   padding: 6px 15px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     padding: 10px 40px;
   }
 }
@@ -25,7 +25,7 @@
   padding: 10px 0;
   font-family: 'Roboto Mono', Menlo, monospace;
   font-size: 16px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     font-size: 19px;
   }
 }

src/components/Rules.module.scss

@@ -8,14 +8,14 @@
    * we need to apply some right padding to this container then
    */
   padding-right: 15px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     padding-right: 40px;
   }
 }
 
 .RuleProviderItemWrapper {
   padding: 6px 15px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     padding: 10px 40px;
   }
 }

src/components/SideBar.module.scss

@@ -32,7 +32,7 @@
   display: flex;
   align-items: center;
   padding: 6px 16px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     padding: 8px 20px;
   }
 
@@ -49,7 +49,7 @@
     width: 22px;
     height: 22px;
 
-    @media (--breakpoint-not-small) {
+    @media screen and (min-width: 30em) {
       width: 24px;
       height: 24px;
     }
@@ -76,7 +76,7 @@
     padding-top: 5px;
   }
 
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     font-size: 1em;
   }
 }

src/components/about/About.module.scss

@@ -1,6 +1,6 @@
 .root {
   padding: 6px 15px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     padding: 10px 40px;
   }
 }

src/components/proxies/Proxies.module.scss

@@ -30,7 +30,7 @@
 
 .group {
   padding: 10px 15px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     padding: 10px 40px;
   }
 }

src/components/proxies/Proxy.module.scss

@@ -16,7 +16,7 @@
   }
 
   max-width: 200px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     min-width: 200px;
     border-radius: 10px;
     padding: 10px;
@@ -43,7 +43,7 @@
   font-family: var(--font-mono);
   font-size: 0.6em;
   margin-right: 3px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     font-size: 0.85em;
   }
 }

src/components/proxies/ProxyLatency.module.scss

@@ -2,7 +2,7 @@
   border-radius: 20px;
   color: #eee;
   font-size: 0.6em;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     font-size: 0.85em;
   }
 }

src/components/proxies/ProxyProvider.module.scss

@@ -7,7 +7,7 @@
 
 .main {
   padding: 10px 15px;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     padding: 10px 40px;
   }
 }

src/components/shared/Basic.module.scss

@@ -1,7 +1,7 @@
 h2.sectionNameType {
   margin: 0;
   font-size: 1.3em;
-  @media (--breakpoint-not-small) {
+  @media screen and (min-width: 30em) {
     font-size: 1.5em;
   }
 

src/misc/chart.ts

@@ -22,8 +22,10 @@ export const commonChartOptions: import('chart.js').ChartOptions<'line'> = {
         display: true,
         color: '#555',
         drawTicks: false,
-        borderDash: [3, 6],
+      },
-        drawBorder: false,
+      border: {
+        display: false,
+        dash: [3, 6],
       },
       ticks: {
         callback(value: number) {