3 files changed, 75 insertions, 60 deletions

diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
index 1cdd14e55..417ebb0b0 100644
--- a/src/features/webControls/components/WebControls.js
+++ b/src/features/webControls/components/WebControls.js
@@ -6,7 +6,11 @@ import { Icon } from '@meetfranz/ui';
 import { defineMessages, intlShape } from 'react-intl';
 
 import {
-  mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline, mdiEarth,
+  mdiReload,
+  mdiArrowRight,
+  mdiArrowLeft,
+  mdiHomeOutline,
+  mdiEarth,
 } from '@mdi/js';
 
 const messages = defineMessages({
@@ -32,7 +36,13 @@ const messages = defineMessages({
   },
 });
 
-const styles = (theme) => ({
+let buttonTransition = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'opacity 0.25s';
+}
+
+const styles = theme => ({
   root: {
     background: theme.colorBackground,
     position: 'relative',
@@ -51,7 +61,7 @@ const styles = (theme) => ({
   button: {
     width: 30,
     height: 50,
-    transition: 'opacity 0.25s',
+    transition: buttonTransition,
 
     '&:hover': {
       opacity: 0.8,
@@ -83,7 +93,8 @@ const styles = (theme) => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class WebControls extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -96,7 +107,7 @@ class WebControls extends Component {
     openInBrowser: PropTypes.func.isRequired,
     url: PropTypes.string.isRequired,
     navigate: PropTypes.func.isRequired,
-  }
+  };
 
   static contextTypes = {
     intl: intlShape,
@@ -119,7 +130,7 @@ class WebControls extends Component {
   state = {
     inputUrl: '',
     editUrl: false,
-  }
+  };
 
   render() {
     const {
@@ -135,10 +146,7 @@ class WebControls extends Component {
       navigate,
     } = this.props;
 
-    const {
-      inputUrl,
-      editUrl,
-    } = this.state;
+    const { inputUrl, editUrl } = this.state;
 
     const { intl } = this.context;
 
@@ -151,10 +159,7 @@ class WebControls extends Component {
           data-tip={intl.formatMessage(messages.goHome)}
           data-place="bottom"
         >
-          <Icon
-            icon={mdiHomeOutline}
-            className={classes.icon}
-          />
+          <Icon icon={mdiHomeOutline} className={classes.icon} />
         </button>
         <button
           onClick={goBack}
@@ -164,10 +169,7 @@ class WebControls extends Component {
           data-tip={intl.formatMessage(messages.back)}
           data-place="bottom"
         >
-          <Icon
-            icon={mdiArrowLeft}
-            className={classes.icon}
-          />
+          <Icon icon={mdiArrowLeft} className={classes.icon} />
         </button>
         <button
           onClick={goForward}
@@ -177,10 +179,7 @@ class WebControls extends Component {
           data-tip={intl.formatMessage(messages.forward)}
           data-place="bottom"
         >
-          <Icon
-            icon={mdiArrowRight}
-            className={classes.icon}
-          />
+          <Icon icon={mdiArrowRight} className={classes.icon} />
         </button>
         <button
           onClick={reload}
@@ -189,25 +188,24 @@ class WebControls extends Component {
           data-tip={intl.formatMessage(messages.reload)}
           data-place="bottom"
         >
-          <Icon
-            icon={mdiReload}
-            className={classes.icon}
-          />
+          <Icon icon={mdiReload} className={classes.icon} />
         </button>
         <input
           value={editUrl ? inputUrl : url}
           className={classes.input}
-          onChange={(event) => this.setState({
-            inputUrl: event.target.value,
-          })}
-          onFocus={(event) => {
+          onChange={event =>
+            this.setState({
+              inputUrl: event.target.value,
+            })
+          }
+          onFocus={event => {
             console.log('on focus event');
             event.target.select();
             this.setState({
               editUrl: true,
             });
           }}
-          onKeyDown={(event) => {
+          onKeyDown={event => {
             if (event.key === 'Enter') {
               this.setState({
                 editUrl: false,
@@ -231,10 +229,7 @@ class WebControls extends Component {
           data-tip={intl.formatMessage(messages.openInBrowser)}
           data-place="bottom"
         >
-          <Icon
-            icon={mdiEarth}
-            className={classes.icon}
-          />
+          <Icon icon={mdiEarth} className={classes.icon} />
         </button>
       </div>
     );
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}