diff --git a/components/ThemeToggle/ThemeToggle.tsx b/components/ThemeToggle/ThemeToggle.tsx index 41f0fcbf..c25d7122 100644 --- a/components/ThemeToggle/ThemeToggle.tsx +++ b/components/ThemeToggle/ThemeToggle.tsx @@ -24,20 +24,20 @@ export type ThemeToggleProps = { const ThemeToggle = ({ className }: ThemeToggleProps) => { const hasMounted = useHasMounted(); - const isFirstMount = useFirstMountState(); const { activeTheme, setTheme } = useTheme(); - const hasNoMotionPreference = useMedia("(prefers-reduced-motion: no-preference)", false); + const isFirstMount = useFirstMountState(); + const prefersReducedMotion = useMedia("(prefers-reduced-motion: reduce)", false); const maskId = useId(); // SSR-safe ID to cross-reference areas of the SVG // default to light since `activeTheme` might be undefined const safeTheme = activeTheme === "dark" ? activeTheme : "light"; - // accessibility: skip animation if user prefers reduced motion + // accessibility: disable animation if user prefers reduced motion useEffect(() => { Globals.assign({ - skipAnimation: isFirstMount || !hasNoMotionPreference, + skipAnimation: !!isFirstMount || !!prefersReducedMotion, }); - }, [isFirstMount, hasNoMotionPreference]); + }, [isFirstMount, prefersReducedMotion]); // modified from https://jfelix.info/blog/using-react-spring-to-animate-svg-icons-dark-mode-toggle const springProperties = { diff --git a/components/VNC/VNC.tsx b/components/VNC/VNC.tsx index 4a67c62c..e5e01c5e 100644 --- a/components/VNC/VNC.tsx +++ b/components/VNC/VNC.tsx @@ -4,6 +4,9 @@ import RFB from "@novnc/novnc/core/rfb.js"; import Terminal from "../Terminal"; import { styled } from "../../lib/styles/stitches.config"; +// types for @novnc/novnc are defined manually in ../../types/rfb.d.ts: +import type NoVncClient from "@novnc/novnc/core/rfb.js"; + const Display = styled( "div", { @@ -54,7 +57,7 @@ const VNC = ({ server }: VNCProps) => { const [message, setMessage] = useState({ message: "", anyKey: false }); // the actual connection and virtual screen (injected by noVNC when it's ready) - const rfbRef = useRef(); + const rfbRef = useRef(); const screenRef = useRef(null); // ends the session forcefully