2 files changed, 73 insertions, 56 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index a60270a6f..d5e1deb39 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -19,10 +19,7 @@ import { isWindows } from '../../environment';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import { workspaceStore } from '../../features/workspaces';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
-import TrialActivationInfoBar from '../TrialActivationInfoBar';
 import Todos from '../../features/todos/containers/TodosScreen';
-import PlanSelection from '../../features/planSelection/containers/PlanSelectionScreen';
-import TrialStatusBar from '../../features/trialStatusBar/containers/TrialStatusBarScreen';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -43,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.',
   },
 });
 
+let transition = 'none';
+
+if (window && 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,
@@ -79,12 +86,11 @@ class AppLayout extends Component {
     areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
     retryRequiredRequests: PropTypes.func.isRequired,
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
-    hasActivatedTrial: PropTypes.bool.isRequired,
   };
 
   state = {
     shouldShowAppUpdateInfoBar: true,
-  }
+  };
 
   static defaultProps = {
     children: [],
@@ -115,7 +121,6 @@ class AppLayout extends Component {
       areRequiredRequestsSuccessful,
       retryRequiredRequests,
       areRequiredRequestsLoading,
-      hasActivatedTrial,
     } = this.props;
 
     const { intl } = this.context;
@@ -123,45 +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>
-              ))}
-              {hasActivatedTrial && (
-                <TrialActivationInfoBar />
-              )}
-              {!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
@@ -186,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}
@@ -202,11 +210,9 @@ class AppLayout extends Component {
               <PublishDebugInfo />
               {services}
               {children}
-              <TrialStatusBar />
             </div>
             <Todos />
           </div>
-          <PlanSelection />
         </div>
       </ErrorBoundary>
     );
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 802538eba..daa5642c3 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -6,16 +6,13 @@ import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router';
 
 import Tabbar from '../services/tabs/Tabbar';
-import { ctrlKey, isMac } from '../../environment';
+import { settingsShortcutKey, lockFerdiShortcutKey, todosToggleShortcutKey, workspaceToggleShortcutKey, addNewServiceShortcutKey, muteFerdiShortcutKey } from '../../environment';
 import { workspaceStore } from '../../features/workspaces';
 import { todosStore } from '../../features/todos';
 import { todoActions } from '../../features/todos/actions';
 import AppStore from '../../stores/AppStore';
 import SettingsStore from '../../stores/SettingsStore';
 
-// Platform specific shortcut keys
-const settingsShortcutKey = isMac ? ',' : 'P';
-
 const messages = defineMessages({
   settings: {
     id: 'sidebar.settings',
@@ -58,6 +55,19 @@ const messages = defineMessages({
 export default @inject('stores', 'actions') @observer class Sidebar extends Component {
   static propTypes = {
     openSettings: PropTypes.func.isRequired,
+    closeSettings: PropTypes.func.isRequired,
+    setActive: PropTypes.func.isRequired,
+    reorder: PropTypes.func.isRequired,
+    reload: PropTypes.func.isRequired,
+    toggleNotifications: PropTypes.func.isRequired,
+    toggleAudio: PropTypes.func.isRequired,
+    toggleDarkMode: PropTypes.func.isRequired,
+    showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
+    deleteService: PropTypes.func.isRequired,
+    updateService: PropTypes.func.isRequired,
+    hibernateService: PropTypes.func.isRequired,
+    wakeUpService: PropTypes.func.isRequired,
     toggleMuteApp: PropTypes.func.isRequired,
     isAppMuted: PropTypes.bool.isRequired,
     isWorkspaceDrawerOpen: PropTypes.bool.isRequired,
@@ -139,7 +149,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
                     },
                   });
                 }}
-                data-tip={`${intl.formatMessage(messages.lockFerdi)} (${ctrlKey}+Shift+L)`}
+                data-tip={`${intl.formatMessage(messages.lockFerdi)} (${lockFerdiShortcutKey(false)})`}
               >
                 <i className="mdi mdi-lock" />
               </button>
@@ -152,8 +162,8 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
                   this.updateToolTip();
                 }}
                 disabled={isTodosServiceActive}
-                className={`sidebar__button sidebar__button--todos  ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`}
-                data-tip={`${intl.formatMessage(todosToggleMessage)} (${ctrlKey}+T)`}
+                className={`sidebar__button sidebar__button--todos ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`}
+                data-tip={`${intl.formatMessage(todosToggleMessage)} (${todosToggleShortcutKey(false)})`}
               >
                 <i className="mdi mdi-check-all" />
               </button>
@@ -166,7 +176,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
                   this.updateToolTip();
                 }}
                 className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
-                data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`}
+                data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${workspaceToggleShortcutKey(false)})`}
               >
                 <i className="mdi mdi-view-grid" />
               </button>
@@ -178,7 +188,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
                 this.updateToolTip();
               }}
               className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
-              data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
+              data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${muteFerdiShortcutKey(false)})`}
             >
               <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
             </button>
@@ -186,7 +196,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
               type="button"
               onClick={() => openSettings({ path: 'recipes' })}
               className="sidebar__button sidebar__button--new-service"
-              data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
+              data-tip={`${intl.formatMessage(messages.addNewService)} (${addNewServiceShortcutKey(false)})`}
             >
               <i className="mdi mdi-plus-box" />
             </button>
@@ -204,9 +214,10 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
           type="button"
           onClick={() => openSettings({ path: 'app' })}
           className="sidebar__button sidebar__button--settings"
-          data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+${settingsShortcutKey})`}
+          data-tip={`${intl.formatMessage(messages.settings)} (${settingsShortcutKey(false)})`}
         >
-          <i className="mdi mdi-settings" />
+          {/* TODO: Because of https://github.com/Templarian/MaterialDesign-Webfont/issues/81 bug in @mdi/font in 5.9.55, added `mdi-memory` as a fallback */}
+          <i className="mdi mdi-settings mdi-memory" />
           { (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE
             || this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED) && (
             <span className="update-available">