miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

chore(nx-dev): honor prefers-reduced-motion (#27976)

Browse Source 
Fixes #27114 (again)
This commit is contained in:
Isaac Mann 2024-09-18 11:50:53 -04:00 committed by GitHub
parent 50927c2462
commit 24ddbe7254
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
nx-dev/ui-home/src/lib/hero.tsx
View File

@ -1,7 +1,7 @@
'use client'; 'use client';
import { ButtonLink, SectionHeading, Strong } from '@nx/nx-dev/ui-common'; import { ButtonLink, SectionHeading, Strong } from '@nx/nx-dev/ui-common';
import { ShaderGradient, ShaderGradientCanvas } from 'shadergradient'; import { ShaderGradient, ShaderGradientCanvas } from 'shadergradient';
import { BlurFade } from '@nx/nx-dev/ui-animations'; import { BlurFade, usePrefersReducedMotion } from '@nx/nx-dev/ui-animations';
import { Theme, useTheme } from '@nx/nx-dev/ui-theme'; import { Theme, useTheme } from '@nx/nx-dev/ui-theme';
import { useState } from 'react'; import { useState } from 'react';
import Link from 'next/link'; import Link from 'next/link';
@ -141,6 +141,8 @@ export function Hero(): JSX.Element {
function ShaderGradientElement() { function ShaderGradientElement() {
const [theme] = useTheme(); const [theme] = useTheme();
const [displayTheme, setDisplayTheme] = useState<Theme>('system'); const [displayTheme, setDisplayTheme] = useState<Theme>('system');
const prefersReducedMotion = usePrefersReducedMotion();
useIsomorphicLayoutEffect(() => { useIsomorphicLayoutEffect(() => {
const matchMedia: any = window.matchMedia('(prefers-color-scheme: dark)'); const matchMedia: any = window.matchMedia('(prefers-color-scheme: dark)');
@ -170,6 +172,10 @@ function ShaderGradientElement() {
}; };
}, [theme]); }, [theme]);
if (prefersReducedMotion) {
return;
}
if (displayTheme === 'dark') if (displayTheme === 'dark')
return ( return (
<BlurFade <BlurFade