Merge pull request #2149 from headlamp-k8s/reduced-motion-fix

frontend: Fix reduced motion styles
headlamp-k8s · Jul 9, 2024 · 840701a · 840701a
2 parents 320f2e2 + 2945374
commit 840701a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/frontend/src/components/App/AppContainer.tsx b/frontend/src/components/App/AppContainer.tsx
@@ -1,3 +1,4 @@
+import { GlobalStyles } from '@mui/material';
 import { SnackbarProvider } from 'notistack';
 import React from 'react';
 import { BrowserRouter, HashRouter } from 'react-router-dom';
@@ -22,6 +23,20 @@ export default function AppContainer() {
         horizontal: 'left',
       }}
     >
+      <GlobalStyles
+        styles={{
+          ':root': {
+            '@media (prefers-reduced-motion: reduce)': {
+              '& *': {
+                animationDuration: '0.01ms !important',
+                animationIterationCount: '1 !important',
+                transitionDuration: '0.01ms !important',
+                scrollBehavior: 'auto !important',
+              },
+            },
+          },
+        }}
+      />
       <Router>
         <PreviousRouteProvider>
           <Plugins />

diff --git a/frontend/src/lib/themes.ts b/frontend/src/lib/themes.ts
@@ -157,20 +157,6 @@ const commonRules = {
     borderRadius: 4,
   },
   components: {
-    MuiCssBaseline: {
-      styleOverrides: {
-        '@global': {
-          '@media (prefers-reduced-motion: reduce)': {
-            '*': {
-              animationDuration: '0.01ms !important',
-              animationIterationCount: '1 !important',
-              transitionDuration: '0.01ms !important',
-              scrollBehavior: 'auto !important',
-            },
-          },
-        },
-      },
-    },
     MuiSelect: {
       defaultProps: {
         variant: 'standard' as 'filled' | 'outlined' | 'standard',