Implement new in-call header and footer designs

src/usePrefersReducedMotion.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,29 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useCallback, useRef, useState } from "react";
-
-import { useEventTarget } from "./useEvents";
+import { useMediaQuery } from "./useMediaQuery";
 
 /**
  * @returns Whether the user has requested reduced motion.
  */
-export const usePrefersReducedMotion = () => {
-  const mediaQuery = useRef<MediaQueryList>();
-  if (mediaQuery.current === undefined)
-    mediaQuery.current = matchMedia("(prefers-reduced-motion)");
-
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(
-    mediaQuery.current.matches
-  );
-  useEventTarget(
-    mediaQuery.current!,
-    "change",
-    useCallback(
-      () => setPrefersReducedMotion(mediaQuery.current!.matches),
-      [setPrefersReducedMotion]
-    )
-  );
-
-  return prefersReducedMotion;
-};
+export const usePrefersReducedMotion = () =>
+  useMediaQuery("(prefers-reduced-motion)");