feat: follow OS reduced motion setting (#1757)

- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference

Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>

1 files changed, 23 insertions, 9 deletions

diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss
index 31300c227..b5f6d5cd4 100644
--- a/src/styles/image-upload.scss
+++ b/src/styles/image-upload.scss
@@ -5,17 +5,23 @@
     color: $dark-theme-gray-lighter;
 
     &__action {
-      &-background { background: rgba($dark-theme-black, .7); }
+      &-background {
+        background: rgba($dark-theme-black, 0.7);
+      }
 
       button {
         color: $dark-theme-gray-lightest;
 
-        .mdi { color: $dark-theme-gray-lightest; }
+        .mdi {
+          color: $dark-theme-gray-lightest;
+        }
       }
     }
   }
 
-  .image-upload-wrapper .mdi { color: $dark-theme-gray-light; }
+  .image-upload-wrapper .mdi {
+    color: $dark-theme-gray-light;
+  }
 }
 
 .image-upload {
@@ -49,11 +55,13 @@
     justify-content: center;
     opacity: 0;
     position: relative;
-    transition: opacity .5s;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: opacity 0.5s;
+    }
     z-index: 10;
 
     &-background {
-      background: rgba($theme-gray, .7);
+      background: rgba($theme-gray, 0.7);
       bottom: 0;
       left: 0;
       position: absolute;
@@ -63,11 +71,13 @@
     }
 
     button {
-      color: #FFF;
+      color: #fff;
       position: relative;
       z-index: 100;
 
-      .mdi { color: #FFF; }
+      .mdi {
+        color: #fff;
+      }
     }
   }
 
@@ -83,7 +93,9 @@
 
   &__dropzone,
   button {
-    .mdi { margin-bottom: 5px; }
+    .mdi {
+      margin-bottom: 5px;
+    }
 
     p {
       font-size: 10px;
@@ -91,7 +103,9 @@
     }
   }
 
-  &:hover .image-upload__action { opacity: 1; }
+  &:hover .image-upload__action {
+    opacity: 1;
+  }
 }
 
 .image-upload-wrapper .mdi {