From 8ee653f2523dd27544fd0077a94a8b88cbe510f4 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Mon, 15 Mar 2021 13:50:22 -0500
Subject: [PATCH] Respect users's "reduced motion" preference for smooth
 scrolling

---
 stylesheets/_mixins.scss                 | 10 ++++++++++
 stylesheets/_modules.scss                |  5 +++--
 stylesheets/components/ContactPills.scss |  3 ++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index 5e1d3775a27..1c90794c4a9 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -106,6 +106,16 @@
   }
 }
 
+// Smooth scrolling
+
+@mixin smooth-scroll() {
+  scroll-behavior: smooth;
+
+  @media (prefers-reduced-motion) {
+    scroll-behavior: auto;
+  }
+}
+
 // Icons
 
 @mixin color-svg($svg, $color, $stretch: true) {
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 7c77536eae6..96257fa6202 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -6308,12 +6308,13 @@ button.module-image__border-overlay:focus {
       &__scroll-marker {
         $scroll-marker-selector: &;
 
+        @include smooth-scroll;
+
         display: flex;
         justify-content: center;
         left: 0;
         opacity: 1;
         position: absolute;
-        scroll-behavior: smooth;
         transition: opacity 200ms ease-out;
         width: 100%;
         z-index: 1;
@@ -6896,7 +6897,7 @@ button.module-image__border-overlay:focus {
 // Module: conversation list
 
 .module-conversation-list {
-  scroll-behavior: smooth;
+  @include smooth-scroll;
 
   &__item {
     &--archive-button {
diff --git a/stylesheets/components/ContactPills.scss b/stylesheets/components/ContactPills.scss
index c0ccc04b4a4..a8f8275920c 100644
--- a/stylesheets/components/ContactPills.scss
+++ b/stylesheets/components/ContactPills.scss
@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-ContactPills {
+  @include smooth-scroll;
+
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 10px;
@@ -9,7 +11,6 @@
   overflow-x: hidden;
   overflow-y: scroll;
   padding-left: 12px;
-  scroll-behavior: smooth;
 
   .module-ContactPill {
     margin: 4px 6px;