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>

5 files changed, 247 insertions, 186 deletions

diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index bd9069eb7..06ab09892 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -18,15 +18,16 @@ const SLACK_ID = 'slack';
 const messages = defineMessages({
   headline: {
     id: 'setupAssistant.headline',
-    defaultMessage: '!!!Let\'s get started',
+    defaultMessage: "!!!Let's get started",
   },
   subHeadline: {
     id: 'setupAssistant.subheadline',
-    defaultMessage: '!!!Choose from our most used services and get back on top of your messaging now.',
+    defaultMessage:
+      '!!!Choose from our most used services and get back on top of your messaging now.',
   },
   submitButtonLabel: {
     id: 'setupAssistant.submit.label',
-    defaultMessage: '!!!Let\'s go',
+    defaultMessage: "!!!Let's go",
   },
   inviteSuccessInfo: {
     id: 'invite.successInfo',
@@ -34,14 +35,19 @@ const messages = defineMessages({
   },
 });
 
-const styles = (theme) => ({
+let transition = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  transition = 'all 0.25s';
+}
+
+const styles = theme => ({
   root: {
     width: '500px !important',
     textAlign: 'center',
     padding: 20,
 
-    '& h1': {
-    },
+    '& h1': {},
   },
   servicesGrid: {
     display: 'flex',
@@ -60,7 +66,7 @@ const styles = (theme) => ({
     borderRadius: theme.borderRadius,
     marginBottom: 10,
     opacity: 0.5,
-    transition: 'all 0.25s',
+    transition,
     border: [3, 'solid', 'transparent'],
 
     '& h2': {
@@ -70,10 +76,8 @@ const styles = (theme) => ({
 
     '&:hover': {
       border: [3, 'solid', theme.brandPrimary],
-      '& $serviceIcon': {
-      },
+      '& $serviceIcon': {},
     },
-
   },
   selected: {
     border: [3, 'solid', theme.brandPrimary],
@@ -82,7 +86,7 @@ const styles = (theme) => ({
   },
   serviceIcon: {
     width: 50,
-    transition: 'all 0.25s',
+    transition,
   },
 
   slackModalContent: {
@@ -125,7 +129,8 @@ const styles = (theme) => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class SetupAssistant extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -144,13 +149,17 @@ class SetupAssistant extends Component {
   };
 
   state = {
-    services: [{
-      id: 'whatsapp',
-    }, {
-      id: 'messenger',
-    }, {
-      id: 'gmail',
-    }],
+    services: [
+      {
+        id: 'whatsapp',
+      },
+      {
+        id: 'messenger',
+      },
+      {
+        id: 'gmail',
+      },
+    ],
     isSlackModalOpen: false,
     slackWorkspace: '',
   };
@@ -158,10 +167,12 @@ class SetupAssistant extends Component {
   slackWorkspaceHandler() {
     const { slackWorkspace = '', services } = this.state;
 
-    const sanitizedWorkspace = slackWorkspace.trim().replace(/^https?:\/\//, '');
+    const sanitizedWorkspace = slackWorkspace
+      .trim()
+      .replace(/^https?:\/\//, '');
 
     if (sanitizedWorkspace) {
-      const index = services.findIndex((s) => s.id === SLACK_ID);
+      const index = services.findIndex(s => s.id === SLACK_ID);
 
       if (index === -1) {
         const newServices = services;
@@ -179,9 +190,17 @@ class SetupAssistant extends Component {
   render() {
     const { intl } = this.context;
     const {
-      classes, isInviteSuccessful, onSubmit, services, isSettingUpServices,
+      classes,
+      isInviteSuccessful,
+      onSubmit,
+      services,
+      isSettingUpServices,
     } = this.props;
-    const { isSlackModalOpen, slackWorkspace, services: addedServices } = this.state;
+    const {
+      isSlackModalOpen,
+      slackWorkspace,
+      services: addedServices,
+    } = this.state;
 
     return (
       <div className={`auth__container ${classes.root}`}>
@@ -197,29 +216,22 @@ class SetupAssistant extends Component {
           </Appear>
         )}
 
-        <img
-          src="./assets/images/logo.svg"
-          className="auth__logo"
-          alt=""
-        />
-        <h1>
-          {intl.formatMessage(messages.headline)}
-        </h1>
-        <h2>
-          {intl.formatMessage(messages.subHeadline)}
-        </h2>
+        <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
+        <h1>{intl.formatMessage(messages.headline)}</h1>
+        <h2>{intl.formatMessage(messages.subHeadline)}</h2>
         <div className={classnames('grid', classes.servicesGrid)}>
-          {Object.keys(services).map((id) => {
+          {Object.keys(services).map(id => {
             const service = services[id];
             return (
               <button
                 className={classnames({
                   [classes.serviceContainer]: true,
-                  [classes.selected]: this.state.services.findIndex((s) => s.id === id) !== -1,
+                  [classes.selected]:
+                    this.state.services.findIndex(s => s.id === id) !== -1,
                 })}
                 key={id}
                 onClick={() => {
-                  const index = this.state.services.findIndex((s) => s.id === id);
+                  const index = this.state.services.findIndex(s => s.id === id);
                   if (index === -1) {
                     if (id === SLACK_ID) {
                       this.setState({ isSlackModalOpen: true });
@@ -244,9 +256,7 @@ class SetupAssistant extends Component {
                   className={classes.serviceIcon}
                   alt=""
                 />
-                <h2>
-                  {service.name}
-                </h2>
+                <h2>{service.name}</h2>
                 {id === SLACK_ID && slackWorkspace && (
                   <Badge type="secondary" className={classes.slackBadge}>
                     {slackWorkspace}
@@ -275,22 +285,22 @@ class SetupAssistant extends Component {
           <div className={classes.slackModalContent}>
             <img src={`${CDN_URL}/recipes/dist/slack/src/icon.svg`} alt="" />
             <h1>Create your first Slack workspace</h1>
-            <form onSubmit={(e) => {
-              e.preventDefault();
-              this.slackWorkspaceHandler();
-            }}
+            <form
+              onSubmit={e => {
+                e.preventDefault();
+                this.slackWorkspaceHandler();
+              }}
             >
               <Input
                 suffix=".slack.com"
                 placeholder="workspace-url"
-                onChange={(e) => this.setState({ slackWorkspace: e.target.value })}
+                onChange={e =>
+                  this.setState({ slackWorkspace: e.target.value })
+                }
                 value={slackWorkspace}
               />
               <div className={classes.modalActionContainer}>
-                <Button
-                  type="submit"
-                  label="Save"
-                />
+                <Button type="submit" label="Save" />
                 <Button
                   type="link"
                   buttonType="secondary"
@@ -305,7 +315,7 @@ class SetupAssistant extends Component {
         <Button
           type="button"
           className="auth__button"
-            // disabled={!atLeastOneEmailAddress}
+          // disabled={!atLeastOneEmailAddress}
           label={intl.formatMessage(messages.submitButtonLabel)}
           onClick={() => onSubmit(this.state.services)}
           busy={isSettingUpServices}
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 6e1d7c9a0..de962cc12 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -40,22 +40,32 @@ const messages = defineMessages({
   },
   authRequestFailed: {
     id: 'infobar.authRequestFailed',
-    defaultMessage: '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.',
+    defaultMessage:
+      '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.',
   },
 });
 
-const styles = (theme) => ({
+let transition = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  transition = 'transform 0.5s ease';
+}
+
+const styles = theme => ({
   appContent: {
     // width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
     width: '100%',
-    transition: 'transform 0.5s ease',
+    transition,
     transform() {
-      return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`;
+      return workspaceStore.isWorkspaceDrawerOpen
+        ? 'translateX(0)'
+        : `translateX(-${theme.workspaces.drawer.width}px)`;
     },
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class AppLayout extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -80,7 +90,7 @@ class AppLayout extends Component {
 
   state = {
     shouldShowAppUpdateInfoBar: true,
-  }
+  };
 
   static defaultProps = {
     children: [],
@@ -118,42 +128,48 @@ class AppLayout extends Component {
     return (
       <ErrorBoundary>
         <div className="app">
-          {isWindows && !isFullScreen && <TitleBar menu={window.ferdi.menu.template} icon="assets/images/logo.svg" />}
+          {isWindows && !isFullScreen && (
+            <TitleBar
+              menu={window.ferdi.menu.template}
+              icon="assets/images/logo.svg"
+            />
+          )}
           <div className={`app__content ${classes.appContent}`}>
             {workspacesDrawer}
             {sidebar}
             <div className="app__service">
               <WorkspaceSwitchingIndicator />
-              {news.length > 0 && news.map((item) => (
+              {news.length > 0 &&
+                news.map(item => (
+                  <InfoBar
+                    key={item.id}
+                    position="top"
+                    type={item.type}
+                    sticky={item.sticky}
+                    onHide={() => removeNewsItem({ newsId: item.id })}
+                  >
+                    <span
+                      dangerouslySetInnerHTML={createMarkup(item.message)}
+                      onClick={event => {
+                        const { target } = event;
+                        if (target && target.hasAttribute('data-is-news-cta')) {
+                          removeNewsItem({ newsId: item.id });
+                        }
+                      }}
+                    />
+                  </InfoBar>
+                ))}
+              {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
                 <InfoBar
-                  key={item.id}
-                  position="top"
-                  type={item.type}
-                  sticky={item.sticky}
-                  onHide={() => removeNewsItem({ newsId: item.id })}
+                  type="danger"
+                  ctaLabel="Try again"
+                  ctaLoading={areRequiredRequestsLoading}
+                  sticky
+                  onClick={retryRequiredRequests}
                 >
-                  <span
-                    dangerouslySetInnerHTML={createMarkup(item.message)}
-                    onClick={(event) => {
-                      const { target } = event;
-                      if (target && target.hasAttribute('data-is-news-cta')) {
-                        removeNewsItem({ newsId: item.id });
-                      }
-                    }}
-                  />
+                  <span className="mdi mdi-flash" />
+                  {intl.formatMessage(messages.requiredRequestsFailed)}
                 </InfoBar>
-              ))}
-              {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-              <InfoBar
-                type="danger"
-                ctaLabel="Try again"
-                ctaLoading={areRequiredRequestsLoading}
-                sticky
-                onClick={retryRequiredRequests}
-              >
-                <span className="mdi mdi-flash" />
-                {intl.formatMessage(messages.requiredRequestsFailed)}
-              </InfoBar>
               )}
               {authRequestFailed && (
                 <InfoBar
@@ -178,7 +194,7 @@ class AppLayout extends Component {
                   {intl.formatMessage(messages.servicesUpdated)}
                 </InfoBar>
               )}
-              { appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && (
+              {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && (
                 <AppUpdateInfoBar
                   nextAppReleaseVersion={nextAppReleaseVersion}
                   onInstallUpdate={installAppUpdate}
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index 0b9d3122c..343ddf8b4 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -5,9 +5,7 @@ import injectSheet from 'react-jss';
 import { Icon } from '@meetfranz/ui';
 import { intlShape, defineMessages } from 'react-intl';
 
-import {
-  mdiAlert,
-} from '@mdi/js';
+import { mdiAlert } from '@mdi/js';
 import { LIVE_API_FERDI_WEBSITE } from '../../../config';
 // import { Button } from '@meetfranz/forms';
 
@@ -26,7 +24,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,
     borderRadius: theme.borderRadius,
@@ -47,7 +51,7 @@ const styles = (theme) => ({
     opacity: 0.7,
   },
   button: {
-    transition: 'opacity 0.25s',
+    transition: buttonTransition,
     color: theme.colorText,
     border: [1, 'solid', theme.colorText],
     borderRadius: theme.borderRadiusSmall,
@@ -65,13 +69,14 @@ const styles = (theme) => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class ConnectionLostBanner extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     name: PropTypes.string.isRequired,
     reload: PropTypes.func.isRequired,
-  }
+  };
 
   static contextTypes = {
     intl: intlShape,
@@ -80,20 +85,13 @@ class ConnectionLostBanner extends Component {
   inputRef = React.createRef();
 
   render() {
-    const {
-      classes,
-      name,
-      reload,
-    } = this.props;
+    const { classes, name, reload } = this.props;
 
     const { intl } = this.context;
 
     return (
       <div className={classes.root}>
-        <Icon
-          icon={mdiAlert}
-          className={classes.icon}
-        />
+        <Icon icon={mdiAlert} className={classes.icon} />
         <p>
           {intl.formatMessage(messages.text, { name })}
           <br />
@@ -104,11 +102,7 @@ class ConnectionLostBanner extends Component {
             {intl.formatMessage(messages.moreInformation)}
           </a>
         </p>
-        <button
-          type="button"
-          className={classes.button}
-          onClick={reload}
-        >
+        <button type="button" className={classes.button} onClick={reload}>
           {intl.formatMessage(messages.cta)}
         </button>
       </div>
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index ccf3333f8..023e152c7 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -1,6 +1,4 @@
-import {
-  Menu, dialog, app, getCurrentWindow,
-} from '@electron/remote';
+import { Menu, dialog, app, getCurrentWindow } from '@electron/remote';
 import React, { Component } from 'react';
 import { defineMessages, intlShape } from 'react-intl';
 import PropTypes from 'prop-types';
@@ -14,7 +12,9 @@ import { observable, autorun } from 'mobx';
 import ServiceModel from '../../../models/Service';
 import { ctrlKey, cmdKey } from '../../../environment';
 
-const IS_SERVICE_DEBUGGING_ENABLED = (localStorage.getItem('debug') || '').includes('Ferdi:Service');
+const IS_SERVICE_DEBUGGING_ENABLED = (
+  localStorage.getItem('debug') || ''
+).includes('Ferdi:Service');
 
 const messages = defineMessages({
   reload: {
@@ -63,10 +63,21 @@ const messages = defineMessages({
   },
   confirmDeleteService: {
     id: 'tabs.item.confirmDeleteService',
-    defaultMessage: '!!!Do you really want to delete the {serviceName} service?',
+    defaultMessage:
+      '!!!Do you really want to delete the {serviceName} service?',
   },
 });
 
+let pollIndicatorTransition = 'none';
+let polledTransition = 'none';
+let pollAnsweredTransition = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  pollIndicatorTransition = 'background 0.5s';
+  polledTransition = 'background 0.1s';
+  pollAnsweredTransition = 'background 0.1s';
+}
+
 const styles = {
   pollIndicator: {
     position: 'absolute',
@@ -75,7 +86,7 @@ const styles = {
     height: 10,
     borderRadius: 5,
     background: 'gray',
-    transition: 'background 0.5s',
+    transition: pollIndicatorTransition,
   },
   pollIndicatorPoll: {
     left: 2,
@@ -85,18 +96,20 @@ const styles = {
   },
   polled: {
     background: 'yellow !important',
-    transition: 'background 0.1s',
+    transition: polledTransition,
   },
   pollAnswered: {
     background: 'green !important',
-    transition: 'background 0.1s',
+    transition: pollAnsweredTransition,
   },
   stale: {
     background: 'red !important',
   },
 };
 
-@injectSheet(styles) @observer class TabItem extends Component {
+@injectSheet(styles)
+@observer
+class TabItem extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     service: PropTypes.instanceOf(ServiceModel).isRequired,
@@ -131,13 +144,17 @@ const styles = {
         if (Date.now() - service.lastPoll < ms('0.2s')) {
           this.isPolled = true;
 
-          setTimeout(() => { this.isPolled = false; }, ms('1s'));
+          setTimeout(() => {
+            this.isPolled = false;
+          }, ms('1s'));
         }
 
         if (Date.now() - service.lastPollAnswer < ms('0.2s')) {
           this.isPollAnswered = true;
 
-          setTimeout(() => { this.isPollAnswered = false; }, ms('1s'));
+          setTimeout(() => {
+            this.isPollAnswered = false;
+          }, ms('1s'));
         }
       });
     }
@@ -163,62 +180,85 @@ const styles = {
     } = this.props;
     const { intl } = this.context;
 
-    const menuTemplate = [{
-      label: service.name || service.recipe.name,
-      enabled: false,
-    }, {
-      type: 'separator',
-    }, {
-      label: intl.formatMessage(messages.reload),
-      click: reload,
-      accelerator: `${cmdKey}+R`,
-    }, {
-      label: intl.formatMessage(messages.edit),
-      click: () => openSettings({
-        path: `services/edit/${service.id}`,
-      }),
-    }, {
-      type: 'separator',
-    }, {
-      label: service.isNotificationEnabled
-        ? intl.formatMessage(messages.disableNotifications)
-        : intl.formatMessage(messages.enableNotifications),
-      click: () => toggleNotifications(),
-    }, {
-      label: service.isMuted
-        ? intl.formatMessage(messages.enableAudio)
-        : intl.formatMessage(messages.disableAudio),
-      click: () => toggleAudio(),
-    }, {
-      label: intl.formatMessage(service.isEnabled ? messages.disableService : messages.enableService),
-      click: () => (service.isEnabled ? disableService() : enableService()),
-    }, {
-      label: intl.formatMessage(service.isHibernating ? messages.wakeUpService : messages.hibernateService),
-      click: () => (service.isHibernating ? wakeUpService() : hibernateService()),
-      enabled: service.canHibernate,
-    }, {
-      type: 'separator',
-    }, {
-      label: intl.formatMessage(messages.deleteService),
-      click: () => {
-        const selection = dialog.showMessageBoxSync(app.mainWindow, {
-          type: 'question',
-          message: intl.formatMessage(messages.deleteService),
-          detail: intl.formatMessage(messages.confirmDeleteService, { serviceName: service.name || service.recipe.name }),
-          buttons: [
-            'Yes',
-            'No',
-          ],
-        });
-        if (selection === 0) {
-          deleteService();
-        }
+    const menuTemplate = [
+      {
+        label: service.name || service.recipe.name,
+        enabled: false,
+      },
+      {
+        type: 'separator',
+      },
+      {
+        label: intl.formatMessage(messages.reload),
+        click: reload,
+        accelerator: `${cmdKey}+R`,
+      },
+      {
+        label: intl.formatMessage(messages.edit),
+        click: () =>
+          openSettings({
+            path: `services/edit/${service.id}`,
+          }),
+      },
+      {
+        type: 'separator',
       },
-    }];
+      {
+        label: service.isNotificationEnabled
+          ? intl.formatMessage(messages.disableNotifications)
+          : intl.formatMessage(messages.enableNotifications),
+        click: () => toggleNotifications(),
+      },
+      {
+        label: service.isMuted
+          ? intl.formatMessage(messages.enableAudio)
+          : intl.formatMessage(messages.disableAudio),
+        click: () => toggleAudio(),
+      },
+      {
+        label: intl.formatMessage(
+          service.isEnabled ? messages.disableService : messages.enableService,
+        ),
+        click: () => (service.isEnabled ? disableService() : enableService()),
+      },
+      {
+        label: intl.formatMessage(
+          service.isHibernating
+            ? messages.wakeUpService
+            : messages.hibernateService,
+        ),
+        click: () =>
+          (service.isHibernating ? wakeUpService() : hibernateService()),
+        enabled: service.canHibernate,
+      },
+      {
+        type: 'separator',
+      },
+      {
+        label: intl.formatMessage(messages.deleteService),
+        click: () => {
+          const selection = dialog.showMessageBoxSync(app.mainWindow, {
+            type: 'question',
+            message: intl.formatMessage(messages.deleteService),
+            detail: intl.formatMessage(messages.confirmDeleteService, {
+              serviceName: service.name || service.recipe.name,
+            }),
+            buttons: ['Yes', 'No'],
+          });
+          if (selection === 0) {
+            deleteService();
+          }
+        },
+      },
+    ];
     const menu = Menu.buildFromTemplate(menuTemplate);
 
     let notificationBadge = null;
-    if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && service.isBadgeEnabled) {
+    if (
+      (showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) &&
+      showMessageBadgesEvenWhenMuted &&
+      service.isBadgeEnabled
+    ) {
       notificationBadge = (
         <span>
           {service.unreadDirectMessageCount > 0 && (
@@ -226,17 +266,13 @@ const styles = {
               {service.unreadDirectMessageCount}
             </span>
           )}
-          {service.unreadIndirectMessageCount > 0
-            && service.unreadDirectMessageCount === 0
-            && service.isIndirectMessageBadgeEnabled && (
-            <span className="tab-item__message-count is-indirect">
-              •
-            </span>
+          {service.unreadIndirectMessageCount > 0 &&
+            service.unreadDirectMessageCount === 0 &&
+            service.isIndirectMessageBadgeEnabled && (
+              <span className="tab-item__message-count is-indirect">•</span>
           )}
           {service.isHibernating && (
-            <span className="tab-item__message-count hibernating">
-              •
-            </span>
+            <span className="tab-item__message-count hibernating">•</span>
           )}
         </span>
       );
@@ -245,7 +281,8 @@ const styles = {
     return (
       <li
         className={classnames({
-          [classes.stale]: IS_SERVICE_DEBUGGING_ENABLED && service.lostRecipeConnection,
+          [classes.stale]:
+            IS_SERVICE_DEBUGGING_ENABLED && service.lostRecipeConnection,
           'tab-item': true,
           'is-active': service.isActive,
           'has-custom-icon': service.hasCustomIcon,
@@ -253,13 +290,11 @@ const styles = {
         })}
         onClick={clickHandler}
         onContextMenu={() => menu.popup(getCurrentWindow())}
-        data-tip={`${service.name} ${shortcutIndex <= 9 ? `(${ctrlKey}+${shortcutIndex})` : ''}`}
+        data-tip={`${service.name} ${
+          shortcutIndex <= 9 ? `(${ctrlKey}+${shortcutIndex})` : ''
+        }`}
       >
-        <img
-          src={service.icon}
-          className="tab-item__icon"
-          alt=""
-        />
+        <img src={service.icon} className="tab-item__icon" alt="" />
         {notificationBadge}
         {IS_SERVICE_DEBUGGING_ENABLED && (
           <>
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js
index 755a56b40..011f6282d 100644
--- a/src/components/ui/AppLoader/styles.js
+++ b/src/components/ui/AppLoader/styles.js
@@ -1,3 +1,9 @@
+let sloganTransition = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  sloganTransition = 'opacity 1s ease';
+}
+
 export default {
   component: {
     color: '#FFF',
@@ -5,7 +11,7 @@ export default {
   slogan: {
     display: 'block',
     opacity: 0,
-    transition: 'opacity 1s ease',
+    transition: sloganTransition,
     position: 'absolute',
     textAlign: 'center',
     width: '100%',