From 86eb50978180edd8ee3bbc4a119faf4ee47e5b72 Mon Sep 17 00:00:00 2001
From: CatsAndDogs123 <yaronking100@gmail.com>
Date: Fri, 3 Dec 2021 14:00:05 +0200
Subject: [PATCH] [fix]: add-listner is deprecated, switched those to
 add-event-listner (#4093)

---
 beta/src/components/Layout/useMediaQuery.tsx | 4 ++--
 beta/src/pages/_document.tsx                 | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/beta/src/components/Layout/useMediaQuery.tsx b/beta/src/components/Layout/useMediaQuery.tsx
index d35c796b..3d541bd7 100644
--- a/beta/src/components/Layout/useMediaQuery.tsx
+++ b/beta/src/components/Layout/useMediaQuery.tsx
@@ -17,14 +17,14 @@ const useMediaQuery = (width: number) => {
 
   useEffect(() => {
     const media = window.matchMedia(`(max-width: ${width}px)`);
-    media.addListener(updateTarget);
+    media.addEventListener('change', updateTarget);
 
     // Check on mount (callback is not called until a change occurs)
     if (media.matches) {
       setTargetReached(true);
     }
 
-    return () => media.removeListener(updateTarget);
+    return () => media.removeEventListener('change', updateTarget);
   }, [updateTarget, width]);
 
   return targetReached;
diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
index 51da08cc..969a659e 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -46,7 +46,7 @@ class MyDocument extends Document {
                   }
                   setTheme(initialTheme);
 
-                  darkQuery.addListener(function (e) {
+                  darkQuery.addEventListener('change', function (e) {
                     if (!preferredTheme) {
                       setTheme(e.matches ? 'dark' : 'light');
                     }