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>

2 files changed, 45 insertions, 25 deletions

diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 0294f69fc..c3f9fcb19 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -18,12 +18,18 @@ const messages = defineMessages({
   },
 });
 
-const styles = (theme) => ({
+let itemTransition = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  itemTransition = 'background-color 300ms ease-out';
+}
+
+const styles = theme => ({
   item: {
     height: '67px',
     padding: `15px ${theme.workspaces.drawer.padding}px`,
     borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`,
-    transition: 'background-color 300ms ease-out',
+    transition: itemTransition,
     '&:first-child': {
       borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`,
     },
@@ -59,7 +65,8 @@ const styles = (theme) => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class WorkspaceDrawerItem extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -91,15 +98,19 @@ class WorkspaceDrawerItem extends Component {
     } = this.props;
     const { intl } = this.context;
 
-    const contextMenuTemplate = [{
-      label: name,
-      enabled: false,
-    }, {
-      type: 'separator',
-    }, {
-      label: intl.formatMessage(messages.contextMenuEdit),
-      click: onContextMenuEditClick,
-    }];
+    const contextMenuTemplate = [
+      {
+        label: name,
+        enabled: false,
+      },
+      {
+        type: 'separator',
+      },
+      {
+        label: intl.formatMessage(messages.contextMenuEdit),
+        click: onContextMenuEditClick,
+      },
+    ];
 
     const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);
 
@@ -110,10 +121,12 @@ class WorkspaceDrawerItem extends Component {
           isActive ? classes.isActiveItem : null,
         ])}
         onClick={onClick}
-        onContextMenu={() => (
+        onContextMenu={() =>
           onContextMenuEditClick && contextMenu.popup(getCurrentWindow())
-        )}
-        data-tip={`${shortcutIndex <= 9 ? `(${ctrlKey}+${altKey}+${shortcutIndex})` : ''}`}
+        }
+        data-tip={`${
+          shortcutIndex <= 9 ? `(${ctrlKey}+${altKey}+${shortcutIndex})` : ''
+        }`}
       >
         <span
           className={classnames([
@@ -129,7 +142,9 @@ class WorkspaceDrawerItem extends Component {
             isActive ? classes.activeServices : null,
           ])}
         >
-          {services.length ? services.join(', ') : intl.formatMessage(messages.noServicesAddedYet)}
+          {services.length
+            ? services.join(', ')
+            : intl.formatMessage(messages.noServicesAddedYet)}
         </span>
       </div>
     );
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index b46959e91..613075c4a 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -15,12 +15,18 @@ const messages = defineMessages({
   },
 });
 
-const styles = (theme) => ({
+let wrapperTransition = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  wrapperTransition = 'width 0.5s ease';
+}
+
+const styles = theme => ({
   wrapper: {
     display: 'flex',
     alignItems: 'flex-start',
     position: 'absolute',
-    transition: 'width 0.5s ease',
+    transition: wrapperTransition,
     width: `calc(100% - ${theme.workspaces.drawer.width}px)`,
     marginTop: '20px',
   },
@@ -47,7 +53,8 @@ const styles = (theme) => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class WorkspaceSwitchingIndicator extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -63,13 +70,11 @@ class WorkspaceSwitchingIndicator extends Component {
     const { intl } = this.context;
     const { isSwitchingWorkspace, nextWorkspace } = workspaceStore;
     if (!isSwitchingWorkspace) return null;
-    const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
+    const nextWorkspaceName = nextWorkspace
+      ? nextWorkspace.name
+      : 'All services';
     return (
-      <div
-        className={classnames([
-          classes.wrapper,
-        ])}
-      >
+      <div className={classnames([classes.wrapper])}>
         <div className={classes.component}>
           <Loader
             className={classes.spinner}