fix(ui): use react-media-hook instead of react-media

ui/package-lock.json

@@ -14642,14 +14642,6 @@
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
-    "json2mq": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
-      "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
-      "requires": {
-        "string-convert": "^0.2.0"
-      }
-    },
     "json3": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",
@@ -19202,16 +19194,10 @@
         "tlds": "^1.57.0"
       }
     },
-    "react-media": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/react-media/-/react-media-1.10.0.tgz",
-      "integrity": "sha512-FjgYmFoaPTImST06jqotuu0Mk8LOXiGYS/fIyiXuLnf20l3DPniBwtrxi604/HxxjqvmHS3oz5rAwnqdvosV4A==",
-      "requires": {
-        "@babel/runtime": "^7.2.0",
-        "invariant": "^2.2.2",
-        "json2mq": "^0.2.0",
-        "prop-types": "^15.5.10"
-      }
+    "react-media-hook": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/react-media-hook/-/react-media-hook-0.4.7.tgz",
+      "integrity": "sha512-3Q0glUJyGTWqHutvsSusTUQcfzWP/ProKi3nYul+8yYWR8zOl2p2JmOM1TcQuDqQGk5hoJJ6Hu+fmwwlwKMPbQ=="
     },
     "react-popper": {
       "version": "2.2.3",
@@ -21243,11 +21229,6 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
-    "string-convert": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
-      "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
-    },
     "string-length": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",

ui/package.json

@@ -46,7 +46,7 @@
     "react-js-pagination": "3.0.3",
     "react-json-pretty": "2.2.0",
     "react-linkify": "0.2.2",
-    "react-media": "1.10.0",
+    "react-media-hook": "0.4.7",
     "react-popper": "2.2.3",
     "react-resize-detector": "5.0.6",
     "react-reveal": "1.2.2",

ui/src/App.tsx

@@ -7,7 +7,8 @@ import React, {
 
 import { useObserver } from "mobx-react-lite";
 
-import Media from "react-media";
+// no types, see react-app-env.d.ts
+import { useMediaPredicate } from "react-media-hook";
 
 import { AlertStore, DecodeLocationSearch } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
@@ -100,59 +101,50 @@ const App: FunctionComponent<AppProps> = ({ defaultFilters, uiDefaults }) => {
     };
   }, [onPopState]);
 
+  const prefersColorScheme = useMediaPredicate("(prefers-color-scheme)");
+  const prefersDark = useMediaPredicate("(prefers-color-scheme: dark)");
+
   return useObserver(() => (
     <ErrorBoundary>
       <span data-theme={`${settingsStore.themeConfig.config.theme}`} />
-      <Media
-        queries={{
-          isSupported: "(prefers-color-scheme)",
-          light: "(prefers-color-scheme: light)",
-          dark: "(prefers-color-scheme: dark)",
+      <ThemeContext.Provider
+        value={{
+          isDark:
+            settingsStore.themeConfig.config.theme ===
+              settingsStore.themeConfig.options.auto.value && prefersColorScheme
+              ? prefersDark
+              : settingsStore.themeConfig.config.theme ===
+                settingsStore.themeConfig.options.dark.value,
+          reactSelectStyles:
+            settingsStore.themeConfig.config.theme ===
+              settingsStore.themeConfig.options.auto.value && prefersColorScheme
+              ? prefersDark
+                ? ReactSelectStyles(ReactSelectColors.Dark)
+                : ReactSelectStyles(ReactSelectColors.Light)
+              : settingsStore.themeConfig.config.theme ===
+                settingsStore.themeConfig.options.dark.value
+              ? ReactSelectStyles(ReactSelectColors.Dark)
+              : ReactSelectStyles(ReactSelectColors.Light),
+          animations: {
+            enabled: true,
+            duration: 1000,
+          },
         }}
       >
-        {(matches) => (
-          <ThemeContext.Provider
-            value={{
-              isDark:
-                settingsStore.themeConfig.config.theme ===
-                  settingsStore.themeConfig.options.auto.value &&
-                matches.isSupported
-                  ? matches.dark
-                  : settingsStore.themeConfig.config.theme ===
-                    settingsStore.themeConfig.options.dark.value,
-              reactSelectStyles:
-                settingsStore.themeConfig.config.theme ===
-                  settingsStore.themeConfig.options.auto.value &&
-                matches.isSupported
-                  ? matches.dark
-                    ? ReactSelectStyles(ReactSelectColors.Dark)
-                    : ReactSelectStyles(ReactSelectColors.Light)
-                  : settingsStore.themeConfig.config.theme ===
-                    settingsStore.themeConfig.options.dark.value
-                  ? ReactSelectStyles(ReactSelectColors.Dark)
-                  : ReactSelectStyles(ReactSelectColors.Light),
-              animations: {
-                enabled: true,
-                duration: 1000,
-              },
-            }}
-          >
-            <BodyTheme />
-            <React.Suspense fallback={null}>
-              <NavBar
-                alertStore={alertStore}
-                settingsStore={settingsStore}
-                silenceFormStore={silenceFormStore}
-              />
-              <Grid
-                alertStore={alertStore}
-                settingsStore={settingsStore}
-                silenceFormStore={silenceFormStore}
-              />
-            </React.Suspense>
-          </ThemeContext.Provider>
-        )}
-      </Media>
+        <BodyTheme />
+        <React.Suspense fallback={null}>
+          <NavBar
+            alertStore={alertStore}
+            settingsStore={settingsStore}
+            silenceFormStore={silenceFormStore}
+          />
+          <Grid
+            alertStore={alertStore}
+            settingsStore={settingsStore}
+            silenceFormStore={silenceFormStore}
+          />
+        </React.Suspense>
+      </ThemeContext.Provider>
       <React.Suspense fallback={null}>
         <FaviconBadge alertStore={alertStore} />
         <Fetcher alertStore={alertStore} settingsStore={settingsStore} />

ui/src/react-app-env.d.ts

@@ -1 +1,5 @@
 /// <reference types="react-scripts" />
+
+declare module "react-media-hook" {
+  function useMediaPredicate(query: string): boolean;
+}