feat: add a setting to disable animations and transitions

Some users may not know the reduced motion settings, so I provide an
option directly on the website to disable animations.

3 files changed, 45 insertions, 0 deletions

diff --git a/src/components/Settings/ReduceMotion/ReduceMotion.tsx b/src/components/Settings/ReduceMotion/ReduceMotion.tsx
new file mode 100644
index 0000000..01f8b67
--- /dev/null
+++ b/src/components/Settings/ReduceMotion/ReduceMotion.tsx
@@ -0,0 +1,35 @@
+import { Toggle } from '@components/Form';
+import { t } from '@lingui/macro';
+import { LocalStorage } from '@services/local-storage';
+import { useEffect, useState } from 'react';
+
+const ReduceMotion = () => {
+  const [isDeactivated, setIsDeactivated] = useState<boolean>(false);
+
+  useEffect(() => {
+    const initialState = LocalStorage.get('reduced-motion');
+    if (initialState) setIsDeactivated(initialState === 'true' ? true : false);
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.dataset.reducedMotion = `${isDeactivated}`;
+    LocalStorage.set('reduced-motion', `${isDeactivated}`);
+  }, [isDeactivated]);
+
+  const updateState = () => {
+    setIsDeactivated(!isDeactivated);
+  };
+
+  return (
+    <Toggle
+      id="reduced-motion"
+      label={t`Animations:`}
+      leftChoice={t`On`}
+      rightChoice={t`Off`}
+      value={isDeactivated}
+      changeHandler={updateState}
+    />
+  );
+};
+
+export default ReduceMotion;
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index 7d5516c..bd2f33d 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -1,6 +1,7 @@
 import { CogIcon } from '@components/Icons';
 import ThemeToggle from '@components/Settings/ThemeToggle/ThemeToggle';
 import { t } from '@lingui/macro';
+import ReduceMotion from './ReduceMotion/ReduceMotion';
 import styles from './Settings.module.scss';
 
 const Settings = () => {
@@ -10,6 +11,7 @@ const Settings = () => {
         <CogIcon /> {t`Settings`}
       </div>
       <ThemeToggle />
+      <ReduceMotion />
     </>
   );
 };
diff --git a/src/styles/base/_helpers.scss b/src/styles/base/_helpers.scss
index 9fe2bd4..65f06d8 100644
--- a/src/styles/base/_helpers.scss
+++ b/src/styles/base/_helpers.scss
@@ -44,6 +44,14 @@
 
 @include mix.motion("reduce") {
   * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+[data-reduced-motion="true"] {
+  * {
+    animation: none !important;
     transition: none !important;
   }
 }