From f32ec5906da97d982b43dadbe7e254e74e7f8484 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= <canaltinova@gmail.com>
Date: Mon, 4 Apr 2022 13:36:24 +0200
Subject: [PATCH] Remove animations from various places for users with
 prefer-reduced-motion

---
 src/components/app/Home.css                  | 19 +++++++++++--------
 src/components/app/MenuButtons/Publish.css   |  7 +++++++
 src/components/app/ProfileRootMessage.css    | 13 +++++++++++++
 src/components/app/ProfileViewer.css         | 14 ++++++++++++++
 src/components/shared/FilterNavigatorBar.css |  8 ++++++++
 5 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/components/app/Home.css b/src/components/app/Home.css
index 2183a0b96c..89056df043 100644
--- a/src/components/app/Home.css
+++ b/src/components/app/Home.css
@@ -165,15 +165,18 @@
   position: relative;
 }
 
-.homeTransition-enter {
-  opacity: 0.1;
-  transform: translateX(100px);
-}
+/* Only show the home transition when reduced motion is not preferred */
+@media (prefers-reduced-motion: no-preference) {
+  .homeTransition-enter {
+    opacity: 0.1;
+    transform: translateX(100px);
+  }
 
-.homeTransition-enter.homeTransition-enter-active {
-  opacity: 1;
-  transform: translateX(0);
-  transition: opacity 300ms ease-out, transform 300ms ease-out;
+  .homeTransition-enter.homeTransition-enter-active {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity 300ms ease-out, transform 300ms ease-out;
+  }
 }
 
 .homeSectionUploadFromFileInput {
diff --git a/src/components/app/MenuButtons/Publish.css b/src/components/app/MenuButtons/Publish.css
index de3e3d2a7a..ddfa09113c 100644
--- a/src/components/app/MenuButtons/Publish.css
+++ b/src/components/app/MenuButtons/Publish.css
@@ -175,3 +175,10 @@
 .menuButtonsPublishError {
   margin: 10px 0;
 }
+
+/* Do not animate the publish animation for stripes at the top loading bar. */
+@media (prefers-reduced-motion) {
+  .menuButtonsPublishUploadBarInner {
+    animation: none;
+  }
+}
diff --git a/src/components/app/ProfileRootMessage.css b/src/components/app/ProfileRootMessage.css
index 87201c0626..fde52de4e9 100644
--- a/src/components/app/ProfileRootMessage.css
+++ b/src/components/app/ProfileRootMessage.css
@@ -1,3 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 .rootMessageContainer {
   position: absolute;
   top: 0;
@@ -165,3 +169,12 @@
     transform: translateX(-100px);
   }
 }
+
+/* Do not animate the loading animation when user prefers reduced motion. The
+ * other alternative was to remove these boxes completely, but it's still nice
+ * to keep the boxes as a nice visualization. */
+@media (prefers-reduced-motion) {
+  .loading-div {
+    animation: none;
+  }
+}
diff --git a/src/components/app/ProfileViewer.css b/src/components/app/ProfileViewer.css
index decc21a247..8e650a18b5 100644
--- a/src/components/app/ProfileViewer.css
+++ b/src/components/app/ProfileViewer.css
@@ -1,3 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 @keyframes profileViewerFadeIn {
   0% {
     opacity: 0;
@@ -114,3 +118,13 @@
 .profileViewerSpacer {
   flex: 1;
 }
+
+/* Do no animate the whole profile viewer during loading and publishing if user
+ * prefers reduced motion. */
+@media (prefers-reduced-motion) {
+  .profileViewer,
+  .profileViewerFadeOut,
+  .profileViewerFadeInSanitized {
+    animation: none;
+  }
+}
diff --git a/src/components/shared/FilterNavigatorBar.css b/src/components/shared/FilterNavigatorBar.css
index b60bdac8c8..06b7090f59 100644
--- a/src/components/shared/FilterNavigatorBar.css
+++ b/src/components/shared/FilterNavigatorBar.css
@@ -160,3 +160,11 @@
   opacity: 0;
   transform: translateX(50%);
 }
+
+/* Do not animate the filter navigator bar items when user prefers reduced motion */
+@media (prefers-reduced-motion) {
+  .filterNavigatorBarItem {
+    animation: none;
+    transition: none;
+  }
+}