From 45373f655f68fdd0b320cde175b6108454ad4731 Mon Sep 17 00:00:00 2001
From: Vijay A <avijayr@protonmail.com>
Date: Sat, 17 Jul 2021 20:32:22 +0530
Subject: Removed Franz paid plans features: - serviceLimit - planSelection -
 trialStatusBar

and other Franz features that were for different tiers of subscription.
---
 .../services/content/ServiceRestricted.js          | 78 ----------------------
 src/components/services/content/Services.js        |  5 +-
 2 files changed, 1 insertion(+), 82 deletions(-)
 delete mode 100644 src/components/services/content/ServiceRestricted.js

(limited to 'src/components/services')

diff --git a/src/components/services/content/ServiceRestricted.js b/src/components/services/content/ServiceRestricted.js
deleted file mode 100644
index 4b8d926aa..000000000
--- a/src/components/services/content/ServiceRestricted.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
-
-import { serviceLimitStore } from '../../../features/serviceLimit';
-import Button from '../../ui/Button';
-import { RESTRICTION_TYPES } from '../../../models/Service';
-
-const messages = defineMessages({
-  headlineServiceLimit: {
-    id: 'service.restrictedHandler.serviceLimit.headline',
-    defaultMessage: '!!!You have reached your service limit.',
-  },
-  textServiceLimit: {
-    id: 'service.restrictedHandler.serviceLimit.text',
-    defaultMessage: '!!!Please upgrade your account to use more than {count} services.',
-  },
-  headlineCustomUrl: {
-    id: 'service.restrictedHandler.customUrl.headline',
-    defaultMessage: '!!!Franz Professional Plan required',
-  },
-  textCustomUrl: {
-    id: 'service.restrictedHandler.customUrl.text',
-    defaultMessage: '!!!Please upgrade to the Franz Professional plan to use custom urls & self hosted services.',
-  },
-  action: {
-    id: 'service.restrictedHandler.action',
-    defaultMessage: '!!!Upgrade Account',
-  },
-});
-
-export default @observer class ServiceRestricted extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    upgrade: PropTypes.func.isRequired,
-    type: PropTypes.number.isRequired,
-  };
-
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  countdownInterval = null;
-
-  countdownIntervalTimeout = 1000;
-
-  render() {
-    const {
-      name,
-      upgrade,
-      type,
-    } = this.props;
-    const { intl } = this.context;
-
-    return (
-      <div className="services__info-layer">
-        {type === RESTRICTION_TYPES.SERVICE_LIMIT && (
-          <>
-            <h1>{intl.formatMessage(messages.headlineServiceLimit)}</h1>
-            <p>{intl.formatMessage(messages.textServiceLimit, { count: serviceLimitStore.serviceLimit })}</p>
-          </>
-        )}
-        {type === RESTRICTION_TYPES.CUSTOM_URL && (
-          <>
-            <h1>{intl.formatMessage(messages.headlineCustomUrl)}</h1>
-            <p>{intl.formatMessage(messages.textCustomUrl)}</p>
-          </>
-        )}
-        <Button
-          label={intl.formatMessage(messages.action, { name })}
-          buttonType="inverted"
-          onClick={() => upgrade()}
-        />
-      </div>
-    );
-  }
-}
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index caa3cf9aa..6e46a60d2 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -54,7 +54,6 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
     openSettings: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
     userHasCompletedSignup: PropTypes.bool.isRequired,
-    hasActivatedTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
     actions: PropTypes.object.isRequired,
     isSpellcheckerEnabled: PropTypes.bool.isRequired,
@@ -109,7 +108,6 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
       openSettings,
       update,
       userHasCompletedSignup,
-      hasActivatedTrial,
       classes,
       isSpellcheckerEnabled,
     } = this.props;
@@ -123,7 +121,7 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
 
     return (
       <div className="services">
-        {(userHasCompletedSignup || hasActivatedTrial) && (
+        {userHasCompletedSignup && (
           <div className={classes.confettiContainer}>
             <Confetti
               width={window.width}
@@ -186,7 +184,6 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
               },
               redirect: false,
             })}
-            upgrade={() => openSettings({ path: 'user' })}
             isSpellcheckerEnabled={isSpellcheckerEnabled}
           />
         ))}
-- 
cgit v1.2.3-70-g09d2


From 012e55ebf87559f2d782e5400fb885df8b80a445 Mon Sep 17 00:00:00 2001
From: kytwb <412895+kytwb@users.noreply.github.com>
Date: Fri, 23 Jul 2021 10:04:43 +0100
Subject: Fix hibernation mode (#1486)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Use hibernation strategy from settings instead of hardcoded 5 minutes

* Fix conditions with isHibernationEnabled, previously disableHibernation

* Make service hibernation obey global setting

Also refactors hibernation to move some hibernation enablement logic
into the Service model

* Remove global hibernation enable switch

Implements option 4 from
https://github.com/getferdi/ferdi/pull/1486#issuecomment-860290992
according to
https://github.com/getferdi/ferdi/pull/1486#issuecomment-876558694

* Implements #865 : Add 'hibernate service' and 'wake up service' in the sidebar context menu.

* Removed 'hibernationEnabled' check on main settings screen

Since this is an (imo) incongruous behavior for the first time user.
They will see a message, but with no ability to choose the hibernation strategy.

* Autogenerated files from conflict fixes

Co-authored-by: Kristóf Marussy <kristof@marussy.com>
Co-authored-by: Vijay A <avijayr@protonmail.com>
---
 src/components/layout/Sidebar.js                   |  12 ++
 src/components/services/content/ServiceView.js     |  16 ++-
 src/components/services/tabs/TabBarSortableList.js |   6 +
 src/components/services/tabs/TabItem.js            |  18 ++-
 src/components/services/tabs/Tabbar.js             |  16 +++
 .../settings/services/EditServiceForm.js           |  14 +--
 .../settings/settings/EditSettingsForm.js          |  11 +-
 src/containers/layout/AppLayoutContainer.js        |   4 +
 src/containers/settings/EditServiceScreen.js       |   3 +-
 src/containers/settings/EditSettingsScreen.js      |  10 --
 src/environment.js                                 |   1 -
 src/i18n/locales/defaultMessages.json              |  34 +++++-
 src/i18n/locales/en-US.json                        |   2 +
 .../src/components/services/tabs/TabItem.json      |  34 +++++-
 .../containers/settings/EditSettingsScreen.json    | 129 +++++++++------------
 .../workspaces/components/WorkspaceDrawer.json     |   2 +-
 src/models/Service.js                              |  21 ++--
 src/stores/ServicesStore.js                        |  14 ++-
 18 files changed, 211 insertions(+), 136 deletions(-)

(limited to 'src/components/services')

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 802538eba..9f3cacd38 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -58,6 +58,18 @@ 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,
+    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,
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 17d2db5a0..3fc084ff0 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -145,19 +145,17 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
           </>
         ) : (
           <>
-            {(!service.isHibernating || service.isHibernationEnabled) ? (
+            {!service.isHibernating ? (
               <>
                 {showNavBar && (
                   <WebControlsScreen service={service} />
                 )}
-                {!service.isHibernating && (
-                  <ServiceWebview
-                    service={service}
-                    setWebviewReference={setWebviewReference}
-                    detachService={detachService}
-                    isSpellcheckerEnabled={isSpellcheckerEnabled}
-                  />
-                )}
+                <ServiceWebview
+                  service={service}
+                  setWebviewReference={setWebviewReference}
+                  detachService={detachService}
+                  isSpellcheckerEnabled={isSpellcheckerEnabled}
+                />
               </>
             ) : (
               <div>
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 489027d57..f12d90602 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -17,6 +17,8 @@ class TabBarSortableList extends Component {
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
+    hibernateService: PropTypes.func.isRequired,
+    wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   }
@@ -31,6 +33,8 @@ class TabBarSortableList extends Component {
       deleteService,
       disableService,
       enableService,
+      hibernateService,
+      wakeUpService,
       openSettings,
       showMessageBadgeWhenMutedSetting,
       showMessageBadgesEvenWhenMuted,
@@ -53,6 +57,8 @@ class TabBarSortableList extends Component {
             deleteService={() => deleteService({ serviceId: service.id })}
             disableService={() => disableService({ serviceId: service.id })}
             enableService={() => enableService({ serviceId: service.id })}
+            hibernateService={() => hibernateService({ serviceId: service.id })}
+            wakeUpService={() => wakeUpService({ serviceId: service.id })}
             openSettings={openSettings}
             showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
             showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 5c3149a11..ccf3333f8 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -49,6 +49,14 @@ const messages = defineMessages({
     id: 'tabs.item.enableService',
     defaultMessage: '!!!Enable Service',
   },
+  hibernateService: {
+    id: 'tabs.item.hibernateService',
+    defaultMessage: '!!!Hibernate Service',
+  },
+  wakeUpService: {
+    id: 'tabs.item.wakeUpService',
+    defaultMessage: '!!!Wake Up Service',
+  },
   deleteService: {
     id: 'tabs.item.deleteService',
     defaultMessage: '!!!Delete Service',
@@ -101,6 +109,8 @@ const styles = {
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
+    hibernateService: PropTypes.func.isRequired,
+    wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
@@ -145,6 +155,8 @@ const styles = {
       deleteService,
       disableService,
       enableService,
+      hibernateService,
+      wakeUpService,
       openSettings,
       showMessageBadgeWhenMutedSetting,
       showMessageBadgesEvenWhenMuted,
@@ -180,6 +192,10 @@ const styles = {
     }, {
       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',
     }, {
@@ -217,7 +233,7 @@ const styles = {
               •
             </span>
           )}
-          {service.isHibernating && !service.isHibernationEnabled && (
+          {service.isHibernating && (
             <span className="tab-item__message-count hibernating">
               •
             </span>
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index 5e8260ad0..db7a69bfc 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -17,6 +17,8 @@ export default @observer class TabBar extends Component {
     toggleAudio: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     updateService: PropTypes.func.isRequired,
+    hibernateService: PropTypes.func.isRequired,
+    wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
@@ -55,6 +57,18 @@ export default @observer class TabBar extends Component {
     this.toggleService({ serviceId, isEnabled: true });
   }
 
+  hibernateService({ serviceId }) {
+    if (serviceId) {
+      this.props.hibernateService({ serviceId });
+    }
+  }
+
+  wakeUpService({ serviceId }) {
+    if (serviceId) {
+      this.props.wakeUpService({ serviceId });
+    }
+  }
+
   render() {
     const {
       services,
@@ -83,6 +97,8 @@ export default @observer class TabBar extends Component {
           deleteService={deleteService}
           disableService={args => this.disableService(args)}
           enableService={args => this.enableService(args)}
+          hibernateService={args => this.hibernateService(args)}
+          wakeUpService={args => this.wakeUpService(args)}
           openSettings={openSettings}
           distance={20}
           axis="y"
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 0f7c29de5..56e5f9c94 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -145,7 +145,6 @@ export default @observer class EditServiceForm extends Component {
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
-    isHibernationFeatureActive: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -208,7 +207,6 @@ export default @observer class EditServiceForm extends Component {
       onDelete,
       openRecipeFile,
       isProxyFeatureEnabled,
-      isHibernationFeatureActive,
     } = this.props;
     const { intl } = this.context;
 
@@ -341,14 +339,10 @@ export default @observer class EditServiceForm extends Component {
                 <div className="settings__settings-group">
                   <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
                   <Toggle field={form.$('isEnabled')} />
-                  {isHibernationFeatureActive && (
-                    <>
-                      <Toggle field={form.$('isHibernationEnabled')} />
-                      <p className="settings__help indented__help">
-                        {intl.formatMessage(messages.isHibernationEnabledInfo)}
-                      </p>
-                    </>
-                  )}
+                  <Toggle field={form.$('isHibernationEnabled')} />
+                  <p className="settings__help indented__help">
+                    {intl.formatMessage(messages.isHibernationEnabledInfo)}
+                  </p>
                   <Toggle field={form.$('isDarkModeEnabled')} />
                   {form.$('isDarkModeEnabled').value
                     && (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index a8ba8748d..d2a9eb6e0 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -171,7 +171,6 @@ export default @observer class EditSettingsForm extends Component {
     isTodosActivated: PropTypes.bool.isRequired,
     isWorkspaceEnabled: PropTypes.bool.isRequired,
     automaticUpdates: PropTypes.bool.isRequired,
-    hibernationEnabled: PropTypes.bool.isRequired,
     isDarkmodeEnabled: PropTypes.bool.isRequired,
     isAdaptableDarkModeEnabled: PropTypes.bool.isRequired,
     isNightlyEnabled: PropTypes.bool.isRequired,
@@ -225,7 +224,6 @@ export default @observer class EditSettingsForm extends Component {
       isTodosEnabled,
       isWorkspaceEnabled,
       automaticUpdates,
-      hibernationEnabled,
       isDarkmodeEnabled,
       isTodosActivated,
       isNightlyEnabled,
@@ -336,13 +334,8 @@ export default @observer class EditSettingsForm extends Component {
 
                 <Hr />
 
-                <Toggle field={form.$('hibernate')} />
-                {hibernationEnabled && (
-                  <>
-                    <Select field={form.$('hibernationStrategy')} />
-                    <Toggle field={form.$('hibernateOnStartup')} />
-                  </>
-                )}
+                <Select field={form.$('hibernationStrategy')} />
+                <Toggle field={form.$('hibernateOnStartup')} />
                 <p
                   className="settings__message"
                   style={{
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 9cdb20727..21be9d9d1 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -56,6 +56,8 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       toggleAudio,
       deleteService,
       updateService,
+      hibernate,
+      awake,
     } = this.props.actions.service;
 
     const { hide } = this.props.actions.news;
@@ -109,6 +111,8 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         toggleAudio={toggleAudio}
         deleteService={deleteService}
         updateService={updateService}
+        hibernateService={hibernate}
+        wakeUpService={awake}
         toggleMuteApp={toggleMuteApp}
         toggleWorkspaceDrawer={workspaceActions.toggleWorkspaceDrawer}
         isWorkspaceDrawerOpen={workspaceStore.isWorkspaceDrawerOpen}
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index e22e91822..0fe84792f 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -345,7 +345,7 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
 
   render() {
     const {
-      recipes, services, user, settings,
+      recipes, services, user,
     } = this.props.stores;
     const { action } = this.props.router.params;
 
@@ -398,7 +398,6 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           onDelete={() => this.deleteService()}
           openRecipeFile={file => this.openRecipeFile(file)}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
-          isHibernationFeatureActive={settings.app.hibernate}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 3b8f03ae4..5f29ee385 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -87,10 +87,6 @@ const messages = defineMessages({
     id: 'settings.app.form.sentry',
     defaultMessage: '!!!Send telemetry data',
   },
-  hibernate: {
-    id: 'settings.app.form.hibernate',
-    defaultMessage: '!!!Enable service hibernation',
-  },
   hibernateOnStartup: {
     id: 'settings.app.form.hibernateOnStartup',
     defaultMessage: '!!!Keep services in hibernation on startup',
@@ -432,11 +428,6 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           value: settings.all.app.sentry,
           default: DEFAULT_APP_SETTINGS.sentry,
         },
-        hibernate: {
-          label: intl.formatMessage(messages.hibernate),
-          value: settings.all.app.hibernate,
-          default: DEFAULT_APP_SETTINGS.hibernate,
-        },
         hibernateOnStartup: {
           label: intl.formatMessage(messages.hibernateOnStartup),
           value: settings.all.app.hibernateOnStartup,
@@ -653,7 +644,6 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           isWorkspaceEnabled={workspaces.isFeatureActive}
           lockingFeatureEnabled={lockingFeatureEnabled}
           automaticUpdates={this.props.stores.settings.app.automaticUpdates}
-          hibernationEnabled={this.props.stores.settings.app.hibernate}
           isDarkmodeEnabled={this.props.stores.settings.app.darkMode}
           isAdaptableDarkModeEnabled={this.props.stores.settings.app.adaptableDarkMode}
           isTodosActivated={this.props.stores.todos.isFeatureEnabledByUser}
diff --git a/src/environment.js b/src/environment.js
index e13e5f676..6a126e0c6 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -132,7 +132,6 @@ export const DEFAULT_APP_SETTINGS = {
   scheduledDNDEnabled: false,
   scheduledDNDStart: '17:00',
   scheduledDNDEnd: '09:00',
-  hibernate: false,
   hibernateOnStartup: true,
   hibernationStrategy: 300,
   inactivityLock: 0,
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 0cedeb4cb..7d4a0fe06 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1867,29 +1867,55 @@
         }
       },
       {
-        "defaultMessage": "!!!Delete Service",
+        "defaultMessage": "!!!Hibernate Service",
         "end": {
           "column": 3,
           "line": 55
         },
         "file": "src/components/services/tabs/TabItem.js",
+        "id": "tabs.item.hibernateService",
+        "start": {
+          "column": 20,
+          "line": 52
+        }
+      },
+      {
+        "defaultMessage": "!!!Wake Up Service",
+        "end": {
+          "column": 3,
+          "line": 59
+        },
+        "file": "src/components/services/tabs/TabItem.js",
+        "id": "tabs.item.wakeUpService",
+        "start": {
+          "column": 17,
+          "line": 56
+        }
+      },
+      {
+        "defaultMessage": "!!!Delete Service",
+        "end": {
+          "column": 3,
+          "line": 63
+        },
+        "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.deleteService",
         "start": {
           "column": 17,
-          "line": 52
+          "line": 60
         }
       },
       {
         "defaultMessage": "!!!Do you really want to delete the {serviceName} service?",
         "end": {
           "column": 3,
-          "line": 59
+          "line": 67
         },
         "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.confirmDeleteService",
         "start": {
           "column": 24,
-          "line": 56
+          "line": 64
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 5ff146ea5..76fc7cfc2 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -453,7 +453,9 @@
   "tabs.item.enableAudio": "Enable audio",
   "tabs.item.enableNotification": "Enable notifications",
   "tabs.item.enableService": "Enable service",
+  "tabs.item.hibernateService": "Hibernate service",
   "tabs.item.reload": "Reload",
+  "tabs.item.wakeUpService": "Wake up service",
   "validation.email": "{field} is not valid",
   "validation.minLength": "{field} should be at least {length} characters long",
   "validation.oneRequired": "At least one is required",
diff --git a/src/i18n/messages/src/components/services/tabs/TabItem.json b/src/i18n/messages/src/components/services/tabs/TabItem.json
index a1b0d2435..6d4d5f6fd 100644
--- a/src/i18n/messages/src/components/services/tabs/TabItem.json
+++ b/src/i18n/messages/src/components/services/tabs/TabItem.json
@@ -103,16 +103,42 @@
       "column": 3
     }
   },
+  {
+    "id": "tabs.item.hibernateService",
+    "defaultMessage": "!!!Hibernate Service",
+    "file": "src/components/services/tabs/TabItem.js",
+    "start": {
+      "line": 52,
+      "column": 20
+    },
+    "end": {
+      "line": 55,
+      "column": 3
+    }
+  },
+  {
+    "id": "tabs.item.wakeUpService",
+    "defaultMessage": "!!!Wake Up Service",
+    "file": "src/components/services/tabs/TabItem.js",
+    "start": {
+      "line": 56,
+      "column": 17
+    },
+    "end": {
+      "line": 59,
+      "column": 3
+    }
+  },
   {
     "id": "tabs.item.deleteService",
     "defaultMessage": "!!!Delete Service",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 52,
+      "line": 60,
       "column": 17
     },
     "end": {
-      "line": 55,
+      "line": 63,
       "column": 3
     }
   },
@@ -121,11 +147,11 @@
     "defaultMessage": "!!!Do you really want to delete the {serviceName} service?",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 56,
+      "line": 64,
       "column": 24
     },
     "end": {
-      "line": 59,
+      "line": 67,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
index 5c15933e4..33bcde0de 100644
--- a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
+++ b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
@@ -194,29 +194,16 @@
       "column": 3
     }
   },
-  {
-    "id": "settings.app.form.hibernate",
-    "defaultMessage": "!!!Enable service hibernation",
-    "file": "src/containers/settings/EditSettingsScreen.js",
-    "start": {
-      "line": 90,
-      "column": 13
-    },
-    "end": {
-      "line": 93,
-      "column": 3
-    }
-  },
   {
     "id": "settings.app.form.hibernateOnStartup",
     "defaultMessage": "!!!Keep services in hibernation on startup",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 94,
+      "line": 90,
       "column": 22
     },
     "end": {
-      "line": 97,
+      "line": 93,
       "column": 3
     }
   },
@@ -225,11 +212,11 @@
     "defaultMessage": "!!!Hibernation strategy",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 98,
+      "line": 94,
       "column": 23
     },
     "end": {
-      "line": 101,
+      "line": 97,
       "column": 3
     }
   },
@@ -238,11 +225,11 @@
     "defaultMessage": "!!!Todo Server",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 102,
+      "line": 98,
       "column": 24
     },
     "end": {
-      "line": 105,
+      "line": 101,
       "column": 3
     }
   },
@@ -251,11 +238,11 @@
     "defaultMessage": "!!!Custom TodoServer",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 106,
+      "line": 102,
       "column": 20
     },
     "end": {
-      "line": 109,
+      "line": 105,
       "column": 3
     }
   },
@@ -264,11 +251,11 @@
     "defaultMessage": "!!!Enable Password Lock",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 110,
+      "line": 106,
       "column": 14
     },
     "end": {
-      "line": 113,
+      "line": 109,
       "column": 3
     }
   },
@@ -277,11 +264,11 @@
     "defaultMessage": "!!!Password",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 114,
+      "line": 110,
       "column": 16
     },
     "end": {
-      "line": 117,
+      "line": 113,
       "column": 3
     }
   },
@@ -290,11 +277,11 @@
     "defaultMessage": "!!!Allow using Touch ID to unlock",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 118,
+      "line": 114,
       "column": 22
     },
     "end": {
-      "line": 121,
+      "line": 117,
       "column": 3
     }
   },
@@ -303,11 +290,11 @@
     "defaultMessage": "!!!Lock after inactivity",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 122,
+      "line": 118,
       "column": 18
     },
     "end": {
-      "line": 125,
+      "line": 121,
       "column": 3
     }
   },
@@ -316,11 +303,11 @@
     "defaultMessage": "!!!Enable scheduled Do-not-Disturb",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 126,
+      "line": 122,
       "column": 23
     },
     "end": {
-      "line": 129,
+      "line": 125,
       "column": 3
     }
   },
@@ -329,11 +316,11 @@
     "defaultMessage": "!!!From",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 130,
+      "line": 126,
       "column": 21
     },
     "end": {
-      "line": 133,
+      "line": 129,
       "column": 3
     }
   },
@@ -342,11 +329,11 @@
     "defaultMessage": "!!!To",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 134,
+      "line": 130,
       "column": 19
     },
     "end": {
-      "line": 137,
+      "line": 133,
       "column": 3
     }
   },
@@ -355,11 +342,11 @@
     "defaultMessage": "!!!Language",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 138,
+      "line": 134,
       "column": 12
     },
     "end": {
-      "line": 141,
+      "line": 137,
       "column": 3
     }
   },
@@ -368,11 +355,11 @@
     "defaultMessage": "!!!Dark Mode",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 142,
+      "line": 138,
       "column": 12
     },
     "end": {
-      "line": 145,
+      "line": 141,
       "column": 3
     }
   },
@@ -381,11 +368,11 @@
     "defaultMessage": "!!!Synchronize dark mode with my OS's dark mode setting",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 146,
+      "line": 142,
       "column": 21
     },
     "end": {
-      "line": 149,
+      "line": 145,
       "column": 3
     }
   },
@@ -394,11 +381,11 @@
     "defaultMessage": "!!!Enable universal Dark Mode",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 150,
+      "line": 146,
       "column": 21
     },
     "end": {
-      "line": 153,
+      "line": 149,
       "column": 3
     }
   },
@@ -407,11 +394,11 @@
     "defaultMessage": "!!!Sidebar width",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 154,
+      "line": 150,
       "column": 22
     },
     "end": {
-      "line": 157,
+      "line": 153,
       "column": 3
     }
   },
@@ -420,11 +407,11 @@
     "defaultMessage": "!!!Service icon size",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 158,
+      "line": 154,
       "column": 12
     },
     "end": {
-      "line": 161,
+      "line": 157,
       "column": 3
     }
   },
@@ -433,11 +420,11 @@
     "defaultMessage": "!!!Use vertical style",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 162,
+      "line": 158,
       "column": 20
     },
     "end": {
-      "line": 165,
+      "line": 161,
       "column": 3
     }
   },
@@ -446,11 +433,11 @@
     "defaultMessage": "!!!Always show workspace drawer",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 166,
+      "line": 162,
       "column": 24
     },
     "end": {
-      "line": 169,
+      "line": 165,
       "column": 3
     }
   },
@@ -459,11 +446,11 @@
     "defaultMessage": "!!!Accent color",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 170,
+      "line": 166,
       "column": 15
     },
     "end": {
-      "line": 173,
+      "line": 169,
       "column": 3
     }
   },
@@ -472,11 +459,11 @@
     "defaultMessage": "!!!Display disabled services tabs",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 174,
+      "line": 170,
       "column": 24
     },
     "end": {
-      "line": 177,
+      "line": 173,
       "column": 3
     }
   },
@@ -485,11 +472,11 @@
     "defaultMessage": "!!!Show unread message badge when notifications are disabled",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 178,
+      "line": 174,
       "column": 29
     },
     "end": {
-      "line": 181,
+      "line": 177,
       "column": 3
     }
   },
@@ -498,11 +485,11 @@
     "defaultMessage": "!!!Show draggable area on window",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 182,
+      "line": 178,
       "column": 16
     },
     "end": {
-      "line": 185,
+      "line": 181,
       "column": 3
     }
   },
@@ -511,11 +498,11 @@
     "defaultMessage": "!!!Enable spell checking",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 186,
+      "line": 182,
       "column": 23
     },
     "end": {
-      "line": 189,
+      "line": 185,
       "column": 3
     }
   },
@@ -524,11 +511,11 @@
     "defaultMessage": "!!!Enable GPU Acceleration",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 190,
+      "line": 186,
       "column": 25
     },
     "end": {
-      "line": 193,
+      "line": 189,
       "column": 3
     }
   },
@@ -537,11 +524,11 @@
     "defaultMessage": "!!!Include beta versions",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 194,
+      "line": 190,
       "column": 8
     },
     "end": {
-      "line": 197,
+      "line": 193,
       "column": 3
     }
   },
@@ -550,11 +537,11 @@
     "defaultMessage": "!!!Enable updates",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 198,
+      "line": 194,
       "column": 20
     },
     "end": {
-      "line": 201,
+      "line": 197,
       "column": 3
     }
   },
@@ -563,11 +550,11 @@
     "defaultMessage": "!!!Enable Franz Todos",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 202,
+      "line": 198,
       "column": 15
     },
     "end": {
-      "line": 205,
+      "line": 201,
       "column": 3
     }
   },
@@ -576,11 +563,11 @@
     "defaultMessage": "!!!Keep all workspaces loaded",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 206,
+      "line": 202,
       "column": 27
     },
     "end": {
-      "line": 209,
+      "line": 205,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
index a8ccb5a39..431f12710 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
@@ -64,4 +64,4 @@
       "column": 3
     }
   }
-]
+]
\ No newline at end of file
diff --git a/src/models/Service.js b/src/models/Service.js
index 397950787..162dcea65 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -37,8 +37,6 @@ export default class Service {
 
   @observable isMuted = false;
 
-  @observable isHibernating = false;
-
   @observable team = '';
 
   @observable customUrl = '';
@@ -77,7 +75,7 @@ export default class Service {
 
   @observable isHibernationEnabled = false;
 
-  @observable isHibernating = false;
+  @observable isHibernationRequested = false;
 
   @observable lastUsed = Date.now(); // timestamp
 
@@ -145,14 +143,11 @@ export default class Service {
     this.recipe = recipe;
 
     // Check if "Hibernate on Startup" is enabled and hibernate all services except active one
-    const {
-      hibernate,
-      hibernateOnStartup,
-    } = window.ferdi.stores.settings.app;
+    const { hibernateOnStartup } = window.ferdi.stores.settings.app;
     // The service store is probably not loaded yet so we need to use localStorage data to get active service
     const isActive = window.localStorage.service && JSON.parse(window.localStorage.service).activeService === this.id;
-    if (hibernate && hibernateOnStartup && !isActive) {
-      this.isHibernating = true;
+    if (hibernateOnStartup && !isActive) {
+      this.isHibernationRequested = true;
     }
 
     autorun(() => {
@@ -185,6 +180,14 @@ export default class Service {
     return this.recipe.id === todosStore.todoRecipeId;
   }
 
+  @computed get canHibernate() {
+    return this.isHibernationEnabled;
+  }
+
+  @computed get isHibernating() {
+    return this.canHibernate && this.isHibernationRequested;
+  }
+
   get webview() {
     if (this.isTodosService) {
       return todosStore.webview;
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 9521f8493..6064b9929 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -166,8 +166,8 @@ export default class ServicesStore extends Store {
   _serviceMaintenance() {
     this.all.forEach((service) => {
       // Defines which services should be hibernated.
-      if (!service.isActive && (Date.now() - service.lastUsed > ms('5m'))) {
-        // If service is stale for 5 min, hibernate it.
+      if (!service.isActive && (Date.now() - service.lastUsed > ms(`${this.stores.settings.all.app.hibernationStrategy}s`))) {
+        // If service is stale, hibernate it.
         this._hibernate({ serviceId: service.id });
       }
 
@@ -820,19 +820,23 @@ export default class ServicesStore extends Store {
 
   @action _hibernate({ serviceId }) {
     const service = this.one(serviceId);
-    if (service.isActive || !service.isHibernationEnabled) {
+    if (!service.canHibernate) {
+      return;
+    }
+    if (service.isActive) {
       debug('Skipping service hibernation');
       return;
     }
 
     debug(`Hibernate ${service.name}`);
 
-    service.isHibernating = true;
+    service.isHibernationRequested = true;
   }
 
   @action _awake({ serviceId }) {
+    debug('Waking up from service hibernation');
     const service = this.one(serviceId);
-    service.isHibernating = false;
+    service.isHibernationRequested = false;
     service.liveFrom = Date.now();
   }
 
-- 
cgit v1.2.3-70-g09d2


From 9c3c441941ad5060ec2db89b805a958a914547f3 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sat, 24 Jul 2021 02:23:48 +0200
Subject: Recipe context isolation (#1456)

* Enable service contextIsolation

* Enable contextIsolation on the service webviews
* Expose a new API window.ferdi in the service main world to allow
  calling back into the service isolated world
* Expose a new IPC message inject-js-unsafe from the service isolated
  world to execute Javascript in the service main world (i.e., run code
  without context isolation). While the name contains the "unsafe"
  suffix to show the lack of context isolation, this should mostly be
  safe, as no nodejs APIs are available in the injected code.
* Refactor the Notifications shim into a part in the isolated world that
  handles displaying and modifying notifications, and a shim in the main
  world for the Notifications class. The two communicate via the
  window.ferdi endpoint and a Promise object can be used to detect
  notification clicks.
* Refactor the screen sharing shim into a part in the isolated world
  that enumerated shareable screens and windows and a shim in the main
  world that displays the media selector and completes the media
  selection promise.
* Expose the injectJSUnsafe API to recipes to inject javascript code
  into the main world without context isolation.

* Expose setBadge to the main world

The window.ferdi.setBadge API can be used to update the service badge
from injected unsafe Javascript

* Safer script injection into the service main world

Make sure that we don't try to serialize stray objects back from the
main world to the isolated world by always surrounding the script to be
executed by an anonymous function.

* Always read recipe assets as utf8

* Remove window.log from recipes

We didn't use it anywhere and its behavior was confusing in production
mode.

* Inject multiple unsafe scripts at the same time

* Find in page without remote module

Remove the @electron/remote dependency from the find in page (Ctrl+F)
functionality. The remote webContents is replaced with Electron IPC.
Synchronous IPC messages are handled in the main Electron process,
because the renderer process cannot reply to IPC messages synchronously.

* Update to latest contextIsolation recipes

* Fixing issue with missing 'fs' functions.

Co-authored-by: Vijay A <avijayr@protonmail.com>
---
 recipes                                           |   2 +-
 src/components/services/content/ServiceWebview.js |   2 +-
 src/index.js                                      |  30 +++++
 src/models/Service.js                             |  21 +++-
 src/webview/badge.js                              |  33 ++++++
 src/webview/find.js                               |  23 ++++
 src/webview/lib/RecipeWebview.js                  |  48 ++++----
 src/webview/notifications.js                      |  88 +++++++++------
 src/webview/recipe.js                             | 132 ++++++++++++----------
 src/webview/screenshare.js                        |  81 ++++++-------
 10 files changed, 287 insertions(+), 173 deletions(-)
 create mode 100644 src/webview/badge.js
 create mode 100644 src/webview/find.js

(limited to 'src/components/services')

diff --git a/recipes b/recipes
index ebb2cc3c6..3108591b2 160000
--- a/recipes
+++ b/recipes
@@ -1 +1 @@
-Subproject commit ebb2cc3c68f74ce1d8b8a61d128078753d9a0398
+Subproject commit 3108591b234d011e9681bf9aca366555b64cb8e4
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 9e5fed996..4edbde5e2 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -83,7 +83,7 @@ class ServiceWebview extends Component {
         useragent={service.userAgent}
         disablewebsecurity={service.recipe.disablewebsecurity ? true : undefined}
         allowpopups
-        webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0}, contextIsolation=false`}
+        webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0}`}
       />
     );
   }
diff --git a/src/index.js b/src/index.js
index 91004aac7..63e6e3d0f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -449,6 +449,36 @@ ipcMain.on('feature-basic-auth-cancel', () => {
   authCallback = noop;
 });
 
+// Handle synchronous messages from service webviews.
+
+ipcMain.on('find-in-page', (e, text, options) => {
+  const { sender: webContents } = e;
+  if (webContents !== mainWindow.webContents && typeof (text) === 'string') {
+    const sanitizedOptions = {};
+    for (const option of ['forward', 'findNext', 'matchCase']) {
+      if (option in options) {
+        sanitizedOptions[option] = !!options[option];
+      }
+    }
+    const requestId = webContents.findInPage(text, sanitizedOptions);
+    debug('Find in page', text, options, requestId);
+    e.returnValue = requestId;
+  } else {
+    e.returnValue = null;
+  }
+});
+
+ipcMain.on('stop-find-in-page', (e, action) => {
+  const { sender: webContents } = e;
+  if (webContents !== mainWindow.webContents) {
+    const validActions = ['clearSelection', 'keepSelection', 'activateSelection'];
+    if (validActions.includes(action)) {
+      webContents.stopFindInPage(action);
+    }
+  }
+  e.returnValue = null;
+});
+
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
   // On OS X it is common for applications and their menu bar
diff --git a/src/models/Service.js b/src/models/Service.js
index 74e100ea4..36b310da1 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -275,11 +275,17 @@ export default class Service {
       debug(this.name, 'modifyRequestHeaders is not defined in the recipe');
     }
 
-    this.webview.addEventListener('ipc-message', e => handleIPCMessage({
-      serviceId: this.id,
-      channel: e.channel,
-      args: e.args,
-    }));
+    this.webview.addEventListener('ipc-message', async (e) => {
+      if (e.channel === 'inject-js-unsafe') {
+        await Promise.all(e.args.map(script => this.webview.executeJavaScript(`"use strict"; (() => { ${script} })();`)));
+      } else {
+        handleIPCMessage({
+          serviceId: this.id,
+          channel: e.channel,
+          args: e.args,
+        });
+      }
+    });
 
     this.webview.addEventListener('new-window', (event, url, frameName, options) => {
       debug('new-window', event, url, frameName, options);
@@ -334,6 +340,11 @@ export default class Service {
       this.hasCrashed = true;
     });
 
+    this.webview.addEventListener('found-in-page', ({ result }) => {
+      debug('Found in page', result);
+      this.webview.send('found-in-page', result);
+    });
+
     webviewWebContents.on('login', (event, request, authInfo, callback) => {
       // const authCallback = callback;
       debug('browser login event', authInfo);
diff --git a/src/webview/badge.js b/src/webview/badge.js
new file mode 100644
index 000000000..1e02fb56a
--- /dev/null
+++ b/src/webview/badge.js
@@ -0,0 +1,33 @@
+const { ipcRenderer } = require('electron');
+
+const debug = require('debug')('Ferdi:Plugin:BadgeHandler');
+
+export class BadgeHandler {
+  constructor() {
+    this.countCache = {
+      direct: 0,
+      indirect: 0,
+    };
+  }
+
+  setBadge(direct, indirect) {
+    if (this.countCache.direct === direct
+        && this.countCache.indirect === indirect) return;
+
+    // Parse number to integer
+    // This will correct errors that recipes may introduce, e.g.
+    // by sending a String instead of an integer
+    const directInt = parseInt(direct, 10);
+    const indirectInt = parseInt(indirect, 10);
+
+    const count = {
+      direct: Math.max(directInt, 0),
+      indirect: Math.max(indirectInt, 0),
+    };
+
+    ipcRenderer.sendToHost('message-counts', count);
+    Object.assign(this.countCache, count);
+
+    debug('Sending badge count to host', count);
+  }
+}
diff --git a/src/webview/find.js b/src/webview/find.js
new file mode 100644
index 000000000..040811d68
--- /dev/null
+++ b/src/webview/find.js
@@ -0,0 +1,23 @@
+import { ipcRenderer } from 'electron';
+import { FindInPage as ElectronFindInPage } from 'electron-find';
+
+// Shim to expose webContents functionality to electron-find without @electron/remote
+const webContentsShim = {
+  findInPage: (text, options = {}) => ipcRenderer.sendSync('find-in-page', text, options),
+  stopFindInPage: (action) => {
+    ipcRenderer.sendSync('stop-find-in-page', action);
+  },
+  on: (eventName, listener) => {
+    if (eventName === 'found-in-page') {
+      ipcRenderer.on('found-in-page', (_, result) => {
+        listener({ sender: this }, result);
+      });
+    }
+  },
+};
+
+export default class FindInPage extends ElectronFindInPage {
+  constructor(options = {}) {
+    super(webContentsShim, options);
+  }
+}
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index b8fe7dc52..3bb9352f6 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -1,14 +1,12 @@
 import { ipcRenderer } from 'electron';
-import { pathExistsSync, readFile } from 'fs-extra';
+import { exists, pathExistsSync, readFile } from 'fs-extra';
 
 const debug = require('debug')('Ferdi:Plugin:RecipeWebview');
 
 class RecipeWebview {
-  constructor() {
-    this.countCache = {
-      direct: 0,
-      indirect: 0,
-    };
+  constructor(badgeHandler, notificationsHandler) {
+    this.badgeHandler = badgeHandler;
+    this.notificationsHandler = notificationsHandler;
 
     ipcRenderer.on('poll', () => {
       this.loopFunc();
@@ -45,24 +43,7 @@ class RecipeWebview {
    *                          me directly to me eg. in a channel
    */
   setBadge(direct = 0, indirect = 0) {
-    if (this.countCache.direct === direct
-      && this.countCache.indirect === indirect) return;
-
-    // Parse number to integer
-    // This will correct errors that recipes may introduce, e.g.
-    // by sending a String instead of an integer
-    const directInt = parseInt(direct, 10);
-    const indirectInt = parseInt(indirect, 10);
-
-    const count = {
-      direct: Math.max(directInt, 0),
-      indirect: Math.max(indirectInt, 0),
-    };
-
-    ipcRenderer.sendToHost('message-counts', count);
-    Object.assign(this.countCache, count);
-
-    debug('Sending badge count to host', count);
+    this.badgeHandler.setBadge(direct, indirect);
   }
 
   /**
@@ -85,6 +66,23 @@ class RecipeWebview {
     });
   }
 
+  injectJSUnsafe(...files) {
+    Promise.all(files.map(async (file) => {
+      if (await exists(file)) {
+        const data = await readFile(file, 'utf8');
+        return data;
+      }
+      debug('Script not found', file);
+      return null;
+    })).then(async (scripts) => {
+      const scriptsFound = scripts.filter(script => script !== null);
+      if (scriptsFound.length > 0) {
+        debug('Inject scripts to main world', scriptsFound);
+        ipcRenderer.sendToHost('inject-js-unsafe', ...scriptsFound);
+      }
+    });
+  }
+
   /**
    * Set a custom handler for turning on and off dark mode
    *
@@ -96,7 +94,7 @@ class RecipeWebview {
 
   onNotify(fn) {
     if (typeof fn === 'function') {
-      window.Notification.prototype.onNotify = fn;
+      this.notificationsHandler.onNotify = fn;
     }
   }
 
diff --git a/src/webview/notifications.js b/src/webview/notifications.js
index 021f05cc3..39a515143 100644
--- a/src/webview/notifications.js
+++ b/src/webview/notifications.js
@@ -3,49 +3,65 @@ import uuidV1 from 'uuid/v1';
 
 const debug = require('debug')('Ferdi:Notifications');
 
-class Notification {
-  static permission = 'granted';
-
-  constructor(title = '', options = {}) {
-    debug('New notification', title, options);
-    this.title = title;
-    this.options = options;
-    this.notificationId = uuidV1();
-
-    ipcRenderer.sendToHost('notification', this.onNotify({
-      title: this.title,
-      options: this.options,
-      notificationId: this.notificationId,
-    }));
-
-    ipcRenderer.once(`notification-onclick:${this.notificationId}`, () => {
-      if (typeof this.onclick === 'function') {
-        this.onclick();
-      }
+export class NotificationsHandler {
+  onNotify = data => data;
+
+  displayNotification(title, options) {
+    return new Promise((resolve) => {
+      debug('New notification', title, options);
+
+      const notificationId = uuidV1();
+
+      ipcRenderer.sendToHost('notification', this.onNotify({
+        title,
+        options,
+        notificationId,
+      }));
+
+      ipcRenderer.once(`notification-onclick:${notificationId}`, () => {
+        resolve();
+      });
     });
   }
+}
 
-  static requestPermission(cb = null) {
-    if (!cb) {
-      return new Promise((resolve) => {
-        resolve(Notification.permission);
-      });
-    }
+export const notificationsClassDefinition = `(() => {
+  class Notification {
+    static permission = 'granted';
 
-    if (typeof (cb) === 'function') {
-      return cb(Notification.permission);
+    constructor(title = '', options = {}) {
+      this.title = title;
+      this.options = options;
+      window.ferdi.displayNotification(title, options)
+        .then(() => {
+          if (typeof (this.onClick) === 'function') {
+            this.onClick();
+          }
+        });
     }
 
-    return Notification.permission;
-  }
+    static requestPermission(cb = null) {
+      if (!cb) {
+        return new Promise((resolve) => {
+          resolve(Notification.permission);
+        });
+      }
 
-  onNotify(data) {
-    return data;
-  }
+      if (typeof (cb) === 'function') {
+        return cb(Notification.permission);
+      }
 
-  onClick() {}
+      return Notification.permission;
+    }
 
-  close() {}
-}
+    onNotify(data) {
+      return data;
+    }
+
+    onClick() {}
+
+    close() {}
+  }
 
-window.Notification = Notification;
+  window.Notification = Notification;
+})();`;
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 8da45864b..d143675dc 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -1,11 +1,9 @@
 /* eslint-disable import/first */
-import { ipcRenderer } from 'electron';
-import { getCurrentWebContents } from '@electron/remote';
+import { contextBridge, ipcRenderer } from 'electron';
 import path from 'path';
 import { autorun, computed, observable } from 'mobx';
 import fs from 'fs-extra';
 import { debounce } from 'lodash';
-import { FindInPage } from 'electron-find';
 
 // For some services darkreader tries to use the chrome extension message API
 // This will cause the service to fail loading
@@ -23,16 +21,81 @@ import customDarkModeCss from './darkmode/custom';
 import RecipeWebview from './lib/RecipeWebview';
 import Userscript from './lib/Userscript';
 
-import { switchDict, getSpellcheckerLocaleByFuzzyIdentifier } from './spellchecker';
-import { injectDarkModeStyle, isDarkModeStyleInjected, removeDarkModeStyle } from './darkmode';
+import { BadgeHandler } from './badge';
 import contextMenu from './contextMenu';
-import './notifications';
-import { screenShareCss } from './screenshare';
+import { injectDarkModeStyle, isDarkModeStyleInjected, removeDarkModeStyle } from './darkmode';
+import FindInPage from './find';
+import { NotificationsHandler, notificationsClassDefinition } from './notifications';
+import { getDisplayMediaSelector, screenShareCss, screenShareJs } from './screenshare';
+import { switchDict, getSpellcheckerLocaleByFuzzyIdentifier } from './spellchecker';
 
-import { DEFAULT_APP_SETTINGS, isDevMode } from '../environment';
+import { DEFAULT_APP_SETTINGS } from '../environment';
 
 const debug = require('debug')('Ferdi:Plugin');
 
+const badgeHandler = new BadgeHandler();
+
+const notificationsHandler = new NotificationsHandler();
+
+// Patching window.open
+const originalWindowOpen = window.open;
+
+window.open = (url, frameName, features) => {
+  debug('window.open', url, frameName, features);
+  if (!url) {
+    // The service hasn't yet supplied a URL (as used in Skype).
+    // Return a new dummy window object and wait for the service to change the properties
+    const newWindow = {
+      location: {
+        href: '',
+      },
+    };
+
+    const checkInterval = setInterval(() => {
+      // Has the service changed the URL yet?
+      if (newWindow.location.href !== '') {
+        if (features) {
+          originalWindowOpen(newWindow.location.href, frameName, features);
+        } else {
+          // Open the new URL
+          ipcRenderer.sendToHost('new-window', newWindow.location.href);
+        }
+        clearInterval(checkInterval);
+      }
+    }, 0);
+
+    setTimeout(() => {
+      // Stop checking for location changes after 1 second
+      clearInterval(checkInterval);
+    }, 1000);
+
+    return newWindow;
+  }
+
+  // We need to differentiate if the link should be opened in a popup or in the systems default browser
+  if (!frameName && !features && typeof features !== 'string') {
+    return ipcRenderer.sendToHost('new-window', url);
+  }
+
+  if (url) {
+    return originalWindowOpen(url, frameName, features);
+  }
+};
+
+// We can't override APIs here, so we first expose functions via window.ferdi,
+// then overwrite the corresponding field of the window object by injected JS.
+contextBridge.exposeInMainWorld('ferdi', {
+  open: window.open,
+  setBadge: (direct, indirect) => badgeHandler.setBadge(direct || 0, indirect || 0),
+  displayNotification: (title, options) => notificationsHandler.displayNotification(title, options),
+  getDisplayMediaSelector,
+});
+
+ipcRenderer.sendToHost('inject-js-unsafe',
+  'window.open = window.ferdi.open;',
+  notificationsClassDefinition,
+  screenShareJs);
+
 class RecipeController {
   @observable settings = {
     overrideSpellcheckerLanguage: false,
@@ -97,7 +160,7 @@ class RecipeController {
     autorun(() => this.update());
 
     document.addEventListener('DOMContentLoaded', () => {
-      this.findInPage = new FindInPage(getCurrentWebContents(), {
+      this.findInPage = new FindInPage({
         inputFocusColor: '#CE9FFC',
         textColor: '#212121',
       });
@@ -111,7 +174,7 @@ class RecipeController {
     // Delete module from cache
     delete require.cache[require.resolve(modulePath)];
     try {
-      this.recipe = new RecipeWebview();
+      this.recipe = new RecipeWebview(badgeHandler, notificationsHandler);
       // eslint-disable-next-line
       require(modulePath)(this.recipe, {...config, recipe,});
       debug('Initialize Recipe', config, recipe);
@@ -327,52 +390,3 @@ class RecipeController {
 /* eslint-disable no-new */
 new RecipeController();
 /* eslint-enable no-new */
-
-// Patching window.open
-const originalWindowOpen = window.open;
-
-window.open = (url, frameName, features) => {
-  debug('window.open', url, frameName, features);
-  if (!url) {
-    // The service hasn't yet supplied a URL (as used in Skype).
-    // Return a new dummy window object and wait for the service to change the properties
-    const newWindow = {
-      location: {
-        href: '',
-      },
-    };
-
-    const checkInterval = setInterval(() => {
-      // Has the service changed the URL yet?
-      if (newWindow.location.href !== '') {
-        if (features) {
-          originalWindowOpen(newWindow.location.href, frameName, features);
-        } else {
-          // Open the new URL
-          ipcRenderer.sendToHost('new-window', newWindow.location.href);
-        }
-        clearInterval(checkInterval);
-      }
-    }, 0);
-
-    setTimeout(() => {
-      // Stop checking for location changes after 1 second
-      clearInterval(checkInterval);
-    }, 1000);
-
-    return newWindow;
-  }
-
-  // We need to differentiate if the link should be opened in a popup or in the systems default browser
-  if (!frameName && !features && typeof features !== 'string') {
-    return ipcRenderer.sendToHost('new-window', url);
-  }
-
-  if (url) {
-    return originalWindowOpen(url, frameName, features);
-  }
-};
-
-if (isDevMode) {
-  window.log = console.log;
-}
diff --git a/src/webview/screenshare.js b/src/webview/screenshare.js
index 84d2e1e95..ab548a625 100644
--- a/src/webview/screenshare.js
+++ b/src/webview/screenshare.js
@@ -2,6 +2,27 @@ import { desktopCapturer } from 'electron';
 
 const CANCEL_ID = 'desktop-capturer-selection__cancel';
 
+export async function getDisplayMediaSelector() {
+  const sources = await desktopCapturer.getSources({ types: ['screen', 'window'] });
+  return `<div class="desktop-capturer-selection__scroller">
+  <ul class="desktop-capturer-selection__list">
+    ${sources.map(({ id, name, thumbnail }) => `
+      <li class="desktop-capturer-selection__item">
+        <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
+          <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
+          <span class="desktop-capturer-selection__name">${name}</span>
+        </button>
+      </li>
+    `).join('')}
+    <li class="desktop-capturer-selection__item">
+      <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
+        <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
+      </button>
+    </li>
+  </ul>
+</div>`;
+}
+
 export const screenShareCss = `
 .desktop-capturer-selection {
   position: fixed;
@@ -72,38 +93,12 @@ export const screenShareCss = `
 }
 `;
 
-// Patch getDisplayMedia for screen sharing
-window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) => {
+export const screenShareJs = `
+window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve, reject) => {
   try {
-    const sources = await desktopCapturer.getSources({
-      types: ['screen', 'window'],
-    });
-
     const selectionElem = document.createElement('div');
-    selectionElem.classList = 'desktop-capturer-selection';
-    selectionElem.innerHTML = `
-        <div class="desktop-capturer-selection__scroller">
-          <ul class="desktop-capturer-selection__list">
-            ${sources
-    .map(
-      ({ id, name, thumbnail }) => `
-              <li class="desktop-capturer-selection__item">
-                <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
-                  <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
-                  <span class="desktop-capturer-selection__name">${name}</span>
-                </button>
-              </li>
-            `,
-    )
-    .join('')}
-            <li class="desktop-capturer-selection__item">
-              <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
-                <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
-              </button>
-            </li>
-          </ul>
-        </div>
-      `;
+    selectionElem.classList = ['desktop-capturer-selection'];
+    selectionElem.innerHTML = await window.ferdi.getDisplayMediaSelector();
     document.body.appendChild(selectionElem);
 
     document
@@ -112,25 +107,18 @@ window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) =>
         button.addEventListener('click', async () => {
           try {
             const id = button.getAttribute('data-id');
-            if (id === CANCEL_ID) {
+            if (id === '${CANCEL_ID}') {
               reject(new Error('Cancelled by user'));
             } else {
-              const mediaSource = sources.find((source) => source.id === id);
-              if (!mediaSource) {
-                throw new Error(`Source with id ${id} does not exist`);
-              }
-
-              const stream = await window.navigator.mediaDevices.getUserMedia(
-                {
-                  audio: false,
-                  video: {
-                    mandatory: {
-                      chromeMediaSource: 'desktop',
-                      chromeMediaSourceId: mediaSource.id,
-                    },
+              const stream = await window.navigator.mediaDevices.getUserMedia({
+                audio: false,
+                video: {
+                  mandatory: {
+                    chromeMediaSource: 'desktop',
+                    chromeMediaSourceId: id,
                   },
                 },
-              );
+              });
               resolve(stream);
             }
           } catch (err) {
@@ -143,4 +131,5 @@ window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) =>
   } catch (err) {
     reject(err);
   }
-};
+});
+`;
-- 
cgit v1.2.3-70-g09d2


From f4b4416ea52d564bc2dbe543a82084ed98843ccc Mon Sep 17 00:00:00 2001
From: Markus Hatvan <markus_hatvan@aon.at>
Date: Fri, 30 Jul 2021 10:54:54 +0200
Subject: chore: migrate from tslint to @typescript-eslint (#1706)

- update .eslintrc to work for .js and .ts
- update devDependencies
- lint properly both root /src and nested /packages
- update webhint recommended setting for tsconfig.json to shrink output
- Manage all eslint rules from the repo root
- escape single quotes in scripts to please windows build

Co-authored-by: Vijay A <avijayr@protonmail.com>
---
 .eslintignore                                      |   3 +-
 .eslintrc                                          | 163 +++++---
 package-lock.json                                  | 439 ++++++---------------
 package.json                                       |  11 +-
 packages/forms/src/button/index.tsx                |  29 +-
 packages/forms/src/error/index.tsx                 |  13 +-
 packages/forms/src/input/index.tsx                 |  63 ++-
 packages/forms/src/input/scorePassword.ts          |   6 +-
 packages/forms/src/label/index.tsx                 |  13 +-
 packages/forms/src/select/index.tsx                | 119 +++---
 packages/forms/src/textarea/index.tsx              |  22 +-
 packages/forms/src/toggle/index.tsx                |   2 +-
 packages/forms/src/wrapper/index.tsx               |   9 +-
 packages/forms/tslint.json                         |   3 -
 packages/theme/src/index.ts                        |  12 +-
 packages/theme/src/themes/IStyleTypes.ts           |   1 -
 packages/theme/src/themes/dark/index.ts            |  30 +-
 packages/theme/src/themes/default/index.ts         |  14 +-
 packages/theme/tslint.json                         |   3 -
 packages/typings/types/react-loader.d.ts           |   2 +-
 packages/ui/src/badge/ProBadge.tsx                 |  11 +-
 packages/ui/src/badge/index.tsx                    |   9 +-
 packages/ui/src/headline/index.tsx                 |  15 +-
 packages/ui/src/icon/index.tsx                     |   7 +-
 packages/ui/src/infobox/index.tsx                  |  49 +--
 packages/ui/src/loader/index.tsx                   |  10 +-
 packages/ui/tslint.json                            |   3 -
 src/actions/lib/actions.js                         |   4 +-
 src/api/server/LocalApi.js                         |  20 +-
 src/api/server/ServerApi.js                        | 288 ++++++++------
 src/app.js                                         |   8 +-
 src/components/auth/AuthLayout.js                  |  28 +-
 src/components/auth/ChangeServer.js                |   4 +-
 src/components/auth/Locked.js                      |   2 +-
 src/components/auth/Login.js                       |   2 +-
 src/components/auth/Password.js                    |   2 +-
 src/components/auth/SetupAssistant.js              |  10 +-
 src/components/auth/Signup.js                      |   2 +-
 src/components/auth/Welcome.js                     |   2 +-
 src/components/layout/AppLayout.js                 |   4 +-
 .../services/content/ConnectionLostBanner.js       |   2 +-
 .../services/content/ErrorHandlers/styles.js       |   2 +-
 src/components/services/content/Services.js        |   2 +-
 .../services/content/WebviewCrashHandler.js        |   2 +-
 src/components/services/tabs/Tabbar.js             |  10 +-
 .../settings/services/EditServiceForm.js           |   2 +-
 .../settings/services/ServicesDashboard.js         |   4 +-
 .../settings/settings/EditSettingsForm.js          |  23 +-
 .../settings/supportFerdi/SupportFerdiDashboard.js |  18 +-
 src/components/settings/user/EditUserForm.js       |   2 +-
 src/components/ui/AppLoader/index.js               |   2 +-
 src/components/ui/FeatureItem.js                   |   2 +-
 src/components/ui/FeatureList.js                   |   2 +-
 src/components/ui/Link.js                          |   2 +-
 src/components/ui/Modal/styles.js                  |   2 +-
 src/components/ui/Radio.js                         |   2 +-
 src/components/ui/SearchInput.js                   |   2 +-
 src/components/ui/Select.js                        |   4 +-
 src/components/ui/ServiceIcon.js                   |   2 +-
 src/components/ui/Slider.js                        |   2 +-
 src/components/ui/Tabs/TabItem.js                  |   8 +-
 src/components/ui/Tabs/Tabs.js                     |   2 +-
 src/components/ui/Toggle.js                        |   2 +-
 src/components/ui/ToggleRaw.js                     |   2 +-
 src/components/ui/WebviewLoader/styles.js          |   2 +-
 src/components/util/ErrorBoundary/styles.js        |   2 +-
 src/containers/auth/SetupAssistantScreen.js        |   2 +-
 src/containers/auth/SignupScreen.js                |   2 +-
 src/containers/layout/AppLayoutContainer.js        |   4 +-
 src/containers/settings/AccountScreen.js           |   5 +-
 src/containers/settings/EditServiceScreen.js       |   4 +-
 src/containers/settings/EditSettingsScreen.js      |   2 +-
 src/containers/settings/EditUserScreen.js          |   2 +-
 src/containers/settings/RecipesScreen.js           |  10 +-
 .../announcements/components/AnnouncementScreen.js |   2 +-
 src/features/communityRecipes/store.js             |   2 +-
 src/features/publishDebugInfo/Component.js         |   6 +-
 src/features/quickSwitch/Component.js              |   4 +-
 src/features/shareFranz/Component.js               |   2 +-
 src/features/todos/containers/TodosScreen.js       |   4 +-
 src/features/utils/ActionBinding.js                |   4 +-
 src/features/utils/FeatureStore.js                 |   8 +-
 src/features/webControls/components/WebControls.js |   4 +-
 .../webControls/containers/WebControlsScreen.js    |   2 +-
 src/features/workspaces/api.js                     |   2 +-
 .../workspaces/components/WorkspaceDrawer.js       |   2 +-
 .../workspaces/components/WorkspaceDrawerItem.js   |   2 +-
 .../workspaces/components/WorkspaceItem.js         |   2 +-
 .../components/WorkspaceServiceListItem.js         |   2 +-
 .../components/WorkspaceSwitchingIndicator.js      |   2 +-
 .../workspaces/components/WorkspacesDashboard.js   |   4 +-
 .../workspaces/containers/WorkspacesScreen.js      |   4 +-
 src/features/workspaces/models/Workspace.js        |   4 +-
 src/helpers/array-helpers.js                       |   6 +-
 src/helpers/async-helpers.js                       |   2 +-
 src/helpers/service-helpers.js                     |   2 +-
 src/helpers/validation-helpers.js                  |   2 +-
 src/models/Recipe.js                               |   2 +-
 src/models/Service.js                              |   2 +-
 src/models/UserAgent.js                            |   4 +-
 src/stores/AppStore.js                             | 105 +++--
 src/stores/NewsStore.js                            |   2 +-
 src/stores/RecipePreviewsStore.js                  |   2 +-
 src/stores/RecipesStore.js                         |   8 +-
 src/stores/ServicesStore.js                        |  44 +--
 src/stores/UIStore.js                              |   2 +-
 src/stores/UserStore.js                            |   4 +-
 src/stores/lib/CachedRequest.js                    |   4 +-
 src/stores/lib/Reaction.js                         |   4 +-
 src/stores/lib/Request.js                          |   2 +-
 src/stores/lib/Store.js                            |   6 +-
 src/webview/contextMenuBuilder.js                  |   4 +-
 src/webview/lib/RecipeWebview.js                   |   2 +-
 src/webview/notifications.js                       |   2 +-
 src/webview/spellchecker.js                        |   2 +-
 tsconfig.settings.json                             |   3 +
 tslint.json                                        |  12 -
 uidev/src/app.tsx                                  |   2 +-
 uidev/src/stores/stories.ts                        |   2 -
 uidev/src/stories/button.stories.tsx               |  72 ++--
 uidev/src/stories/headline.stories.tsx             |   3 -
 uidev/src/stories/infobox.stories.tsx              |  10 +-
 uidev/src/stories/input.stories.tsx                |   4 +-
 uidev/src/stories/loader.stories.tsx               |   3 -
 uidev/src/stories/select.stories.tsx               |   2 +-
 uidev/src/stories/textarea.stories.tsx             |   2 +-
 uidev/src/stories/toggle.stories.tsx               |  19 +-
 uidev/src/withTheme/index.tsx                      |  16 +-
 uidev/tslint.json                                  |   3 -
 129 files changed, 964 insertions(+), 1039 deletions(-)
 delete mode 100644 packages/forms/tslint.json
 delete mode 100644 packages/theme/tslint.json
 delete mode 100644 packages/ui/tslint.json
 delete mode 100644 tslint.json
 delete mode 100644 uidev/tslint.json

(limited to 'src/components/services')

diff --git a/.eslintignore b/.eslintignore
index 52fde4c3e..5385bbb5f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,6 @@
 build/
 out/
 packages/*/lib
+packages/**/*.test.*
 src/internal-server
-recipes/
\ No newline at end of file
+recipes/
diff --git a/.eslintrc b/.eslintrc
index 668f688ae..5e8d4cebf 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,71 +3,124 @@
   "parser": "@babel/eslint-parser",
   "extends": "eslint-config-airbnb",
   "plugins": ["jest"],
-  "rules": {
-    "arrow-parens": 0,
-    "consistent-return": 0,
-    "no-param-reassign": 0,
-    "import/extensions": 0,
-    "import/no-extraneous-dependencies": 0,
-    "import/no-unresolved": [
-      2,
-      {
-        "ignore": ["electron"]
-      }
-    ],
-    "import/prefer-default-export": 0,
-    "linebreak-style": 0,
-    "react/static-property-placement": 0,
-    "react/state-in-constructor": 0,
-    "react/jsx-props-no-spreading": 0,
-    "react/prefer-stateless-function": 0,
-    "react/jsx-filename-extension": [
-      1,
-      {
-        "extensions": [".js", ".jsx"]
-      }
-    ],
-    "react/forbid-prop-types": 0,
-    "react/destructuring-assignment": 0,
-    "prefer-destructuring": 1,
-    "no-underscore-dangle": 0,
-    "max-len": 0,
-    "class-methods-use-this": 0,
-    "no-console": 0,
-    "react/jsx-no-bind": 0,
-    "react/sort-comp": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "react/jsx-no-target-blank": 0,
-    "no-restricted-syntax": [0, "ForInStatement"],
-    "jsx-a11y/no-noninteractive-element-interactions": 1,
-    "jsx-a11y/label-has-for": [
-      2,
-      {
-        "components": ["Label"],
-        "required": {
-          "every": ["id"]
-        },
-        "allowChildren": false
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "env": { "browser": true, "es6": true, "node": true },
+      "extends": ["airbnb-typescript"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "ecmaFeatures": { "jsx": true },
+        "ecmaVersion": 2018,
+        "sourceType": "module",
+        "project": "./tsconfig.json"
+      },
+      "plugins": ["@typescript-eslint"],
+      "rules": {
+        // eslint
+        "arrow-parens": 0,
+        "array-callback-return": 1,
+        "class-methods-use-this": 0,
+        "consistent-return": 0,
+        "implicit-arrow-linebreak": 0,
+        "linebreak-style": 0,
+        "max-len": 0,
+        "no-confusing-arrow": 0,
+        "no-console": 0,
+        "no-param-reassign": 0,
+        "no-return-assign": 1,
+        "no-underscore-dangle": 0,
+        "no-use-before-define": 0,
+        "prefer-destructuring": 1,
+        "object-curly-newline": 0,
+        "operator-linebreak": 0,
+        // @typescript-eslint
+        "@typescript-eslint/indent": 0,
+        "@typescript-eslint/no-shadow": 0,
+        "@typescript-eslint/no-unused-expressions": 0,
+        // eslint-plugin-import
+        "import/extensions": 0,
+        "import/no-cycle": 1,
+        "import/no-extraneous-dependencies": 0,
+        "import/no-unresolved": 0,
+        "import/prefer-default-export": 0,
+        // eslint-plugin-react
+        "react/destructuring-assignment": 0,
+        "react/button-has-type": 0,
+        "react/forbid-prop-types": 0,
+        "react/jsx-curly-newline": 0,
+        "react/jsx-no-bind": 0,
+        "react/jsx-no-target-blank": 0,
+        "react/jsx-props-no-spreading": 0,
+        "react/no-deprecated": 1,
+        "react/no-array-index-key": 0,
+        "react/prefer-stateless-function": 0,
+        "react/sort-comp": 0,
+        "react/state-in-constructor": 0,
+        "react/static-property-placement": 0,
+        //  eslint-plugin-jsx-a11y
+        "jsx-a11y/click-events-have-key-events": 1,
+        "jsx-a11y/mouse-events-have-key-events": 1,
+        "jsx-a11y/label-has-for": [
+          2,
+          {
+            "components": ["Label"],
+            "required": {
+              "every": ["id"]
+            },
+            "allowChildren": false
+          }
+        ],
+        "jsx-a11y/no-static-element-interactions": 0,
+        "jsx-a11y/no-noninteractive-element-interactions": 1
       }
-    ],
-    "jsx-a11y/click-events-have-key-events": 1
+    }
+  ],
+  "settings": {
+    "react": {
+      "pragma": "React", // Pragma to use, default to "React"
+      "version": "detect" // React version. "detect" automatically picks the version you have installed.
+    }
   },
   "globals": {
     "window": true,
     "document": true,
-    "ENV": true,
     "FormData": true,
     "localStorage": true,
     "navigator": true,
-    "Worker": true,
-    "atob": true,
-    "btoa": true,
-    "ga": true,
-    "mocha": true,
-    "Element": true,
-    "electron": true
+    "Element": true
   },
   "env": {
     "jest/globals": true
+  },
+  "rules": {
+    // eslint
+    "prefer-destructuring": 1,
+    "class-methods-use-this": 1,
+    "consistent-return": 1,
+    "max-len": 0,
+    "no-param-reassign": 1,
+    "no-restricted-syntax": 0,
+    "no-underscore-dangle": 0,
+    "operator-linebreak": 0,
+    // eslint-plugin-import
+    "import/extensions": 1,
+    "import/prefer-default-export": 0,
+    "import/no-extraneous-dependencies": 1,
+    "import/no-unresolved": 1,
+    // eslint-plugin-react
+    "react/forbid-prop-types": 1,
+    "react/destructuring-assignment": 0,
+    "react/jsx-filename-extension": 1,
+    "react/jsx-no-bind": 1,
+    "react/jsx-props-no-spreading": 0,
+    "react/prefer-stateless-function": 1,
+    "react/static-property-placement": 0,
+    "react/state-in-constructor": 1,
+    "react/sort-comp": 0,
+    //  eslint-plugin-jsx-a11y
+    "jsx-a11y/click-events-have-key-events": 1,
+    "jsx-a11y/no-static-element-interactions": 1,
+    "jsx-a11y/no-noninteractive-element-interactions": 1
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 45c38f01b..cb80ba47a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3526,46 +3526,6 @@
         }
       }
     },
-    "@fimbul/bifrost": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@fimbul/bifrost/-/bifrost-0.21.0.tgz",
-      "integrity": "sha512-ou8VU+nTmOW1jeg+FT+sn+an/M0Xb9G16RucrfhjXGWv1Q97kCoM5CG9Qj7GYOSdu7km72k7nY83Eyr53Bkakg==",
-      "dev": true,
-      "requires": {
-        "@fimbul/ymir": "^0.21.0",
-        "get-caller-file": "^2.0.0",
-        "tslib": "^1.8.1",
-        "tsutils": "^3.5.0"
-      },
-      "dependencies": {
-        "get-caller-file": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-          "dev": true
-        },
-        "tsutils": {
-          "version": "3.17.1",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
-          "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
-        }
-      }
-    },
-    "@fimbul/ymir": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@fimbul/ymir/-/ymir-0.21.0.tgz",
-      "integrity": "sha512-T/y7WqPsm4n3zhT08EpB5sfdm2Kvw3gurAxr2Lr5dQeLi8ZsMlNT/Jby+ZmuuAAd1PnXYzKp+2SXgIkQIIMCUg==",
-      "dev": true,
-      "requires": {
-        "inversify": "^5.0.0",
-        "reflect-metadata": "^0.1.12",
-        "tslib": "^1.8.1"
-      }
-    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -8175,22 +8135,6 @@
         "@types/ms": "*"
       }
     },
-    "@types/eslint": {
-      "version": "7.2.13",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.13.tgz",
-      "integrity": "sha512-LKmQCWAlnVHvvXq4oasNUMTJJb2GwSyTY8+1C7OH5ILR8mPLaljv1jxL1bXW3xB3jFbQxTKxJAvI8PyjB09aBg==",
-      "dev": true,
-      "requires": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "@types/estree": {
-      "version": "0.0.48",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.48.tgz",
-      "integrity": "sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==",
-      "dev": true
-    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@@ -8484,6 +8428,38 @@
       "integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==",
       "dev": true
     },
+    "@typescript-eslint/eslint-plugin": {
+      "version": "4.28.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.5.tgz",
+      "integrity": "sha512-m31cPEnbuCqXtEZQJOXAHsHvtoDi9OVaeL5wZnO2KZTnkvELk+u6J6jHg+NzvWQxk+87Zjbc4lJS4NHmgImz6Q==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/experimental-utils": "4.28.5",
+        "@typescript-eslint/scope-manager": "4.28.5",
+        "debug": "^4.3.1",
+        "functional-red-black-tree": "^1.0.1",
+        "regexpp": "^3.1.0",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
     "@typescript-eslint/experimental-utils": {
       "version": "4.28.5",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.5.tgz",
@@ -8536,6 +8512,35 @@
         }
       }
     },
+    "@typescript-eslint/parser": {
+      "version": "4.28.5",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.28.5.tgz",
+      "integrity": "sha512-NPCOGhTnkXGMqTznqgVbA5LqVsnw+i3+XA1UKLnAb+MG1Y1rP4ZSK9GX0kJBmAZTMIktf+dTwXToT6kFwyimbw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "4.28.5",
+        "@typescript-eslint/types": "4.28.5",
+        "@typescript-eslint/typescript-estree": "4.28.5",
+        "debug": "^4.3.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
     "@typescript-eslint/scope-manager": {
       "version": "4.28.5",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.5.tgz",
@@ -11698,12 +11703,6 @@
         }
       }
     },
-    "builtin-modules": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
-      "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
-      "dev": true
-    },
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -16965,6 +16964,23 @@
         }
       }
     },
+    "eslint-config-airbnb-typescript": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-12.3.1.tgz",
+      "integrity": "sha512-ql/Pe6/hppYuRp4m3iPaHJqkBB7dgeEmGPQ6X0UNmrQOfTF+dXw29/ZjU2kQ6RDoLxaxOA+Xqv07Vbef6oVTWw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/parser": "^4.4.1",
+        "eslint-config-airbnb": "^18.2.0",
+        "eslint-config-airbnb-base": "^14.2.0"
+      }
+    },
+    "eslint-config-prettier": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz",
+      "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==",
+      "dev": true
+    },
     "eslint-import-resolver-node": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
@@ -17237,6 +17253,15 @@
         }
       }
     },
+    "eslint-plugin-prettier": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
+      "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "eslint-plugin-react": {
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz",
@@ -17289,6 +17314,12 @@
         }
       }
     },
+    "eslint-plugin-react-hooks": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz",
+      "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==",
+      "dev": true
+    },
     "eslint-scope": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
@@ -17322,120 +17353,6 @@
       "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
       "dev": true
     },
-    "eslint-webpack-plugin": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-2.5.4.tgz",
-      "integrity": "sha512-7rYh0m76KyKSDE+B+2PUQrlNS4HJ51t3WKpkJg6vo2jFMbEPTG99cBV0Dm7LXSHucN4WGCG65wQcRiTFrj7iWw==",
-      "dev": true,
-      "requires": {
-        "@types/eslint": "^7.2.6",
-        "arrify": "^2.0.1",
-        "jest-worker": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "normalize-path": "^3.0.0",
-        "schema-utils": "^3.0.0"
-      },
-      "dependencies": {
-        "arrify": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-          "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-          "dev": true
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "jest-worker": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
-          "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
-          "dev": true,
-          "requires": {
-            "@types/node": "*",
-            "merge-stream": "^2.0.0",
-            "supports-color": "^7.0.0"
-          }
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "normalize-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-          "dev": true
-        },
-        "picomatch": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-          "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-          "dev": true
-        },
-        "schema-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.6",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
-      }
-    },
     "espree": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
@@ -17927,6 +17844,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
@@ -22075,12 +21998,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "inversify": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/inversify/-/inversify-5.0.1.tgz",
-      "integrity": "sha512-Ieh06s48WnEYGcqHepdsJUIJUXpwH5o5vodAX+DK2JA/gjy4EbEcQZxw+uFfzysmKjiLXGYwNG3qDZsKVMcINQ==",
-      "dev": true
-    },
     "invert-kv": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
@@ -30130,6 +30047,15 @@
       "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
       "dev": true
     },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -31734,12 +31660,6 @@
         }
       }
     },
-    "reflect-metadata": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
-      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
-      "dev": true
-    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -34842,152 +34762,15 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
       "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
     },
-    "tslint": {
-      "version": "5.20.1",
-      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.20.1.tgz",
-      "integrity": "sha512-EcMxhzCFt8k+/UP5r8waCf/lzmeSyVlqxqMEDQE7rWYiQky8KpIBz1JAoYXfROHrPZ1XXd43q8yQnULOLiBRQg==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "builtin-modules": "^1.1.1",
-        "chalk": "^2.3.0",
-        "commander": "^2.12.1",
-        "diff": "^4.0.1",
-        "glob": "^7.1.1",
-        "js-yaml": "^3.13.1",
-        "minimatch": "^3.0.4",
-        "mkdirp": "^0.5.1",
-        "resolve": "^1.3.2",
-        "semver": "^5.3.0",
-        "tslib": "^1.8.0",
-        "tsutils": "^2.29.0"
-      },
-      "dependencies": {
-        "diff": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.1.tgz",
-          "integrity": "sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==",
-          "dev": true
-        },
-        "js-yaml": {
-          "version": "3.14.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
-          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
-          "dev": true,
-          "requires": {
-            "argparse": "^1.0.7",
-            "esprima": "^4.0.0"
-          }
-        },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
-        }
-      }
-    },
-    "tslint-config-airbnb": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/tslint-config-airbnb/-/tslint-config-airbnb-5.11.2.tgz",
-      "integrity": "sha512-mUpHPTeeCFx8XARGG/kzYP4dPSOgoCqNiYbGHh09qTH8q+Y1ghsOgaeZKYYQT7IyxMos523z/QBaiv2zKNBcow==",
-      "dev": true,
-      "requires": {
-        "tslint-consistent-codestyle": "^1.14.1",
-        "tslint-eslint-rules": "^5.4.0",
-        "tslint-microsoft-contrib": "~5.2.1"
-      }
-    },
-    "tslint-consistent-codestyle": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/tslint-consistent-codestyle/-/tslint-consistent-codestyle-1.16.0.tgz",
-      "integrity": "sha512-ebR/xHyMEuU36hGNOgCfjGBNYxBPixf0yU1Yoo6s3BrpBRFccjPOmIVaVvQsWAUAMdmfzHOCihVkcaMfimqvHw==",
-      "dev": true,
-      "requires": {
-        "@fimbul/bifrost": "^0.21.0",
-        "tslib": "^1.7.1",
-        "tsutils": "^2.29.0"
-      }
-    },
-    "tslint-eslint-rules": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/tslint-eslint-rules/-/tslint-eslint-rules-5.4.0.tgz",
-      "integrity": "sha512-WlSXE+J2vY/VPgIcqQuijMQiel+UtmXS+4nvK4ZzlDiqBfXse8FAvkNnTcYhnQyOTW5KFM+uRRGXxYhFpuBc6w==",
-      "dev": true,
-      "requires": {
-        "doctrine": "0.7.2",
-        "tslib": "1.9.0",
-        "tsutils": "^3.0.0"
-      },
-      "dependencies": {
-        "doctrine": {
-          "version": "0.7.2",
-          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
-          "integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=",
-          "dev": true,
-          "requires": {
-            "esutils": "^1.1.6",
-            "isarray": "0.0.1"
-          }
-        },
-        "esutils": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz",
-          "integrity": "sha1-wBzKqa5LiXxtDD4hCuUvPHqEQ3U=",
-          "dev": true
-        },
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-          "dev": true
-        },
-        "tslib": {
-          "version": "1.9.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
-          "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ==",
-          "dev": true
-        },
-        "tsutils": {
-          "version": "3.17.1",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
-          "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
-        }
-      }
-    },
-    "tslint-microsoft-contrib": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/tslint-microsoft-contrib/-/tslint-microsoft-contrib-5.2.1.tgz",
-      "integrity": "sha512-PDYjvpo0gN9IfMULwKk0KpVOPMhU6cNoT9VwCOLeDl/QS8v8W2yspRpFFuUS7/c5EIH/n8ApMi8TxJAz1tfFUA==",
-      "dev": true,
-      "requires": {
-        "tsutils": "^2.27.2 <2.29.0"
-      },
-      "dependencies": {
-        "tsutils": {
-          "version": "2.28.0",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.28.0.tgz",
-          "integrity": "sha512-bh5nAtW0tuhvOJnx1GLRn5ScraRLICGyJV5wJhtRWOLsxW70Kk5tZtpK3O/hW6LDnqKS9mlUMPZj9fEMJ0gxqA==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
-        }
-      }
-    },
     "tsscmp": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz",
       "integrity": "sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA=="
     },
     "tsutils": {
-      "version": "2.29.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
-      "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
       "dev": true,
       "requires": {
         "tslib": "^1.8.1"
diff --git a/package.json b/package.json
index 524a445f1..6bc86ea6d 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "dev": "cross-env NODE_ENV=development gulp dev",
     "test": "jest",
     "test:watch": "jest --watch",
-    "lint": "eslint --quiet --fix src",
+    "lint": "eslint \"{src,packages,uidev}/**/*.{js,jsx,ts,tsx}\" --quiet --fix",
     "manage-translations": "node ./src/i18n/manage-translations.js",
     "prebuild": "preval-build-info-cli && gulp build",
     "build": "electron-builder",
@@ -156,6 +156,8 @@
     "@types/react": "16.14.6",
     "@types/react-dom": "16.9.13",
     "@types/uuid": "3.4.9",
+    "@typescript-eslint/eslint-plugin": "4.28.5",
+    "@typescript-eslint/parser": "4.28.5",
     "all-contributors-cli": "6.20.0",
     "babel-loader": "8.2.2",
     "babel-plugin-react-intl": "3.5.1",
@@ -169,11 +171,14 @@
     "electron-rebuild": "2.3.5",
     "eslint": "7.31.0",
     "eslint-config-airbnb": "18.2.1",
+    "eslint-config-airbnb-typescript": "12.3.1",
+    "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jest": "24.4.0",
     "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-react": "7.24.0",
-    "eslint-webpack-plugin": "2.5.4",
+    "eslint-plugin-react-hooks": "4.2.0",
     "expect.js": "0.3.1",
     "gulp": "4.0.0",
     "gulp-babel": "8.0.0",
@@ -196,8 +201,6 @@
     "sass": "1.36.0",
     "terser-webpack-plugin": "1.4.5",
     "ts-loader": "5.4.5",
-    "tslint": "5.20.1",
-    "tslint-config-airbnb": "5.11.2",
     "typescript": "3.9.10",
     "webpack": "4.46.0",
     "webpack-cli": "3.3.12",
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index ecb2876ca..c08c4e97d 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -8,14 +8,24 @@ import Loader from 'react-loader';
 import { IFormField, IWithStyle } from '../typings/generic';
 import { Theme } from '../../../theme';
 
-type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted';
+type ButtonType =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'inverted';
 
 interface IProps extends IFormField, IWithStyle {
   className?: string;
   disabled?: boolean;
   id?: string;
   type?: 'button' | 'reset' | 'submit' | undefined;
-  onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
+  onClick: (
+    event:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLAnchorElement>,
+  ) => void;
   buttonType?: ButtonType;
   stretch?: boolean;
   loaded?: boolean;
@@ -25,10 +35,6 @@ interface IProps extends IFormField, IWithStyle {
   target?: string;
 }
 
-interface IState {
-  busy: boolean;
-}
-
 const styles = (theme: Theme) => ({
   button: {
     borderRadius: theme.borderRadiusSmall,
@@ -40,7 +46,8 @@ const styles = (theme: Theme) => ({
     outline: 'none',
     alignItems: 'center',
     padding: 0,
-    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as Property.Width<string>,
+    width: (props: IProps) =>
+      (props.stretch ? '100%' : 'auto') as Property.Width<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
     // height: theme.buttonHeight,
@@ -125,7 +132,8 @@ const styles = (theme: Theme) => ({
     transition: 'all 0.3s',
     marginLeft: (props: IProps): number => (!props.busy ? 10 : 20),
     marginRight: (props: IProps): number => (!props.busy ? -10 : -20),
-    position: (props: IProps): Property.Position => props.stretch ? 'absolute' : 'inherit',
+    position: (props: IProps): Property.Position =>
+      props.stretch ? 'absolute' : 'inherit',
   },
   icon: {
     margin: [1, 10, 0, -5],
@@ -175,7 +183,6 @@ class ButtonComponent extends Component<IProps> {
       buttonType,
       loaded,
       icon,
-      busy: busyProp,
       href,
       target,
     } = this.props;
@@ -185,7 +192,9 @@ class ButtonComponent extends Component<IProps> {
     let showLoader = false;
     if (loaded) {
       showLoader = !loaded;
-      console.warn('Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead');
+      console.warn(
+        'Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead',
+      );
     }
     if (busy) {
       showLoader = busy;
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx
index a487bb281..243321d97 100644
--- a/packages/forms/src/error/index.tsx
+++ b/packages/forms/src/error/index.tsx
@@ -11,18 +11,9 @@ interface IProps {
 
 class ErrorComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      message,
-    } = this.props;
+    const { classes, message } = this.props;
 
-    return (
-      <p
-        className={classes.message}
-      >
-        {message}
-      </p>
-    );
+    return <p className={classes.message}>{message}</p>;
   }
 }
 
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index b96dbc12d..41751710a 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -17,7 +17,10 @@ interface IData {
   [index: string]: string;
 }
 
-interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
+interface IProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    IFormField,
+    IWithStyle {
   focus?: boolean;
   prefix?: string;
   suffix?: string;
@@ -62,23 +65,24 @@ class InputComponent extends Component<IProps, IState> {
       }
 
       if (data) {
-        Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
+        Object.keys(data).map(
+          key => (this.inputRef.current!.dataset[key] = data[key]),
+        );
       }
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const {
-      scorePassword,
-      onChange,
-    } = this.props;
+    const { scorePassword, onChange } = this.props;
 
     if (onChange) {
       onChange(e);
     }
 
     if (this.inputRef && this.inputRef.current && scorePassword) {
-      this.setState({ passwordScore: scorePasswordFunc(this.inputRef.current.value) });
+      this.setState({
+        passwordScore: scorePasswordFunc(this.inputRef.current.value),
+      });
     }
   }
 
@@ -117,10 +121,7 @@ class InputComponent extends Component<IProps, IState> {
       noMargin,
     } = this.props;
 
-    const {
-      showPassword,
-      passwordScore,
-    } = this.state;
+    const { showPassword, passwordScore } = this.state;
 
     const inputType = type === 'password' && showPassword ? 'text' : type;
 
@@ -144,12 +145,9 @@ class InputComponent extends Component<IProps, IState> {
               [`${classes.wrapper}`]: true,
               [`${classes.disabled}`]: disabled,
               [`${classes.hasError}`]: error,
-            })}>
-            {prefix && (
-              <span className={classes.prefix}>
-                {prefix}
-              </span>
-            )}
+            })}
+          >
+            {prefix && <span className={classes.prefix}>{prefix}</span>}
             <input
               id={id}
               type={inputType}
@@ -168,30 +166,29 @@ class InputComponent extends Component<IProps, IState> {
               max={max}
               step={step}
             />
-            {suffix && (
-              <span className={classes.suffix}>
-                {suffix}
-              </span>
-            )}
+            {suffix && <span className={classes.suffix}>{suffix}</span>}
             {showPasswordToggle && (
               <button
                 type="button"
                 className={classes.formModifier}
-                onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))}
+                onClick={() =>
+                  this.setState(prevState => ({
+                    showPassword: !prevState.showPassword,
+                  }))
+                }
                 tabIndex={-1}
               >
-                <Icon
-                  path={!showPassword ? mdiEye : mdiEyeOff}
-                  size={1}
-                />
+                <Icon path={!showPassword ? mdiEye : mdiEyeOff} size={1} />
               </button>
             )}
           </div>
           {scorePassword && (
-            <div className={classnames({
-              [`${classes.passwordScore}`]: true,
-              [`${classes.hasError}`]: error,
-            })}>
+            <div
+              className={classnames({
+                [`${classes.passwordScore}`]: true,
+                [`${classes.hasError}`]: error,
+              })}
+            >
               <meter
                 value={passwordScore < 5 ? 5 : passwordScore}
                 low={30}
@@ -202,9 +199,7 @@ class InputComponent extends Component<IProps, IState> {
             </div>
           )}
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/input/scorePassword.ts b/packages/forms/src/input/scorePassword.ts
index 0b7719ec1..bc30de4b8 100644
--- a/packages/forms/src/input/scorePassword.ts
+++ b/packages/forms/src/input/scorePassword.ts
@@ -11,7 +11,7 @@ interface IVariations {
 }
 
 export function scorePasswordFunc(password: string): number {
-  let score: number = 0;
+  let score = 0;
   if (!password) {
     return score;
   }
@@ -32,8 +32,8 @@ export function scorePasswordFunc(password: string): number {
   };
 
   let variationCount = 0;
-  Object.keys(variations).forEach((key) => {
-    variationCount += (variations[key] === true) ? 1 : 0;
+  Object.keys(variations).forEach(key => {
+    variationCount += variations[key] === true ? 1 : 0;
   });
 
   score += (variationCount - 1) * 10;
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
index 1b33ba22c..ad503b785 100644
--- a/packages/forms/src/label/index.tsx
+++ b/packages/forms/src/label/index.tsx
@@ -7,7 +7,9 @@ import { IFormField } from '../typings/generic';
 
 import styles from './styles';
 
-interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement> {
+interface ILabel
+  extends IFormField,
+    React.LabelHTMLAttributes<HTMLLabelElement> {
   classes: Classes;
   isRequired: boolean;
 }
@@ -38,11 +40,12 @@ class LabelComponent extends Component<ILabel> {
         htmlFor={htmlFor}
       >
         {showLabel && (
-          <span className={classes.label}>{title}{isRequired && ' *'}</span>
+          <span className={classes.label}>
+            {title}
+            {isRequired && ' *'}
+          </span>
         )}
-        <div className={classes.content}>
-          {children}
-        </div>
+        <div className={classes.content}>{children}</div>
       </label>
     );
   }
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index e5b59cb19..4a5775579 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -1,4 +1,8 @@
-import { mdiArrowRightDropCircleOutline, mdiCloseCircle, mdiMagnify } from '@mdi/js';
+import {
+  mdiArrowRightDropCircleOutline,
+  mdiCloseCircle,
+  mdiMagnify,
+} from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import React, { Component, createRef } from 'react';
@@ -58,7 +62,7 @@ const styles = (theme: Theme) => ({
   label: {
     '& > div': {
       marginTop: 5,
-    }
+    },
   },
   popup: {
     opacity: 0,
@@ -153,9 +157,13 @@ class SelectComponent extends Component<IProps> {
   };
 
   private componentRef = createRef<HTMLDivElement>();
+
   private inputRef = createRef<HTMLInputElement>();
+
   private searchInputRef = createRef<HTMLInputElement>();
+
   private scrollContainerRef = createRef<HTMLDivElement>();
+
   private activeOptionRef = createRef<HTMLDivElement>();
 
   private keyListener: any;
@@ -168,7 +176,7 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
-  componentDidUpdate(prevProps: IProps, prevState: IState) {
+  componentDidUpdate() {
     const { open } = this.state;
 
     if (this.searchInputRef && this.searchInputRef.current) {
@@ -183,7 +191,9 @@ class SelectComponent extends Component<IProps> {
       const { data } = this.props;
 
       if (data) {
-        Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
+        Object.keys(data).map(
+          key => (this.inputRef.current!.dataset[key] = data[key]),
+        );
       }
     }
 
@@ -194,7 +204,10 @@ class SelectComponent extends Component<IProps> {
     const { value } = this.props;
 
     if (this.componentRef && this.componentRef.current) {
-      this.componentRef.current.removeEventListener('keydown', this.keyListener);
+      this.componentRef.current.removeEventListener(
+        'keydown',
+        this.keyListener,
+      );
     }
 
     if (value) {
@@ -210,13 +223,18 @@ class SelectComponent extends Component<IProps> {
     window.removeEventListener('keydown', this.arrowKeysHandler.bind(this));
   }
 
-  setFilter(needle: string = '') {
+  setFilter(needle = '') {
     const { options } = this.props;
 
     let filteredOptions = {};
     if (needle) {
-      Object.keys(options).map((key) => {
-        if (key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) || options[key].toLocaleLowerCase().startsWith(needle.toLocaleLowerCase())) {
+      Object.keys(options).map(key => {
+        if (
+          key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) ||
+          options[key]
+            .toLocaleLowerCase()
+            .startsWith(needle.toLocaleLowerCase())
+        ) {
           Object.assign(filteredOptions, {
             [`${key}`]: options[key],
           });
@@ -234,7 +252,7 @@ class SelectComponent extends Component<IProps> {
   }
 
   select(key: string) {
-    this.setState((state: IState) => ({
+    this.setState(() => ({
       value: key,
       open: false,
     }));
@@ -247,11 +265,7 @@ class SelectComponent extends Component<IProps> {
   }
 
   arrowKeysHandler(e: KeyboardEvent) {
-    const {
-      selected,
-      open,
-      options,
-    } = this.state;
+    const { selected, open, options } = this.state;
 
     if (!open) return;
 
@@ -264,7 +278,10 @@ class SelectComponent extends Component<IProps> {
         this.setState((state: IState) => ({
           selected: state.selected - 1,
         }));
-      } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) {
+      } else if (
+        e.keyCode === 40 &&
+        selected < Object.keys(options!).length - 1
+      ) {
         this.setState((state: IState) => ({
           selected: state.selected + 1,
         }));
@@ -272,7 +289,12 @@ class SelectComponent extends Component<IProps> {
         this.select(Object.keys(options!)[selected]);
       }
 
-      if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) {
+      if (
+        this.activeOptionRef &&
+        this.activeOptionRef.current &&
+        this.scrollContainerRef &&
+        this.scrollContainerRef.current
+      ) {
         const containerTopOffset = this.scrollContainerRef.current.offsetTop;
         const optionTopOffset = this.activeOptionRef.current.offsetTop;
 
@@ -282,10 +304,15 @@ class SelectComponent extends Component<IProps> {
       }
     }
 
-    switch (e.keyCode){
-      case 37: case 39: case 38:  case 40: // Arrow keys
-      case 32:  break; // Space
-      default: break; // do not block other keys
+    switch (e.keyCode) {
+      case 37:
+      case 39:
+      case 38:
+      case 40: // Arrow keys
+      case 32:
+        break; // Space
+      default:
+        break; // do not block other keys
     }
   }
 
@@ -307,13 +334,7 @@ class SelectComponent extends Component<IProps> {
       required,
     } = this.props;
 
-    const {
-      open,
-      needle,
-      value,
-      selected,
-      options,
-    } = this.state;
+    const { open, needle, value, selected, options } = this.state;
 
     let selection = '';
     if (!value && defaultValue && options![defaultValue]) {
@@ -325,10 +346,7 @@ class SelectComponent extends Component<IProps> {
     }
 
     return (
-      <Wrapper
-        className={className}
-        identifier="franz-select"
-      >
+      <Wrapper className={className} identifier="franz-select">
         <Label
           title={label}
           showLabel={showLabel}
@@ -345,14 +363,19 @@ class SelectComponent extends Component<IProps> {
           >
             <button
               type="button"
-               className={classnames({
-                 [`${inputClassName}`]: inputClassName,
-                 [`${classes.select}`]: true,
-                 [`${classes.hasError}`]: error,
-               })}
-              onClick= {!disabled ? () => this.setState((state: IState) => ({
-                open: !state.open,
-              })) : () => {}}
+              className={classnames({
+                [`${inputClassName}`]: inputClassName,
+                [`${classes.select}`]: true,
+                [`${classes.hasError}`]: error,
+              })}
+              onClick={
+                !disabled
+                  ? () =>
+                      this.setState((state: IState) => ({
+                        open: !state.open,
+                      }))
+                  : () => {}
+              }
             >
               {selection}
               <Icon
@@ -366,10 +389,7 @@ class SelectComponent extends Component<IProps> {
             </button>
             {showSearch && open && (
               <div className={classes.searchContainer}>
-                <Icon
-                  path={mdiMagnify}
-                  size={0.8}
-                />
+                <Icon path={mdiMagnify} size={0.8} />
                 <input
                   type="text"
                   value={needle}
@@ -384,10 +404,7 @@ class SelectComponent extends Component<IProps> {
                     className={classes.clearNeedle}
                     onClick={() => this.setFilter()}
                   >
-                    <Icon
-                      path={mdiCloseCircle}
-                      size={0.7}
-                    />
+                    <Icon path={mdiCloseCircle} size={0.7} />
                   </button>
                 )}
               </div>
@@ -399,7 +416,7 @@ class SelectComponent extends Component<IProps> {
               })}
               ref={this.scrollContainerRef}
             >
-              {Object.keys(options!).map(((key, i) => (
+              {Object.keys(options!).map((key, i) => (
                 <div
                   key={key}
                   onClick={() => this.select(key)}
@@ -413,7 +430,7 @@ class SelectComponent extends Component<IProps> {
                 >
                   {options![key]}
                 </div>
-              )))}
+              ))}
             </div>
           </div>
           <input
@@ -427,9 +444,7 @@ class SelectComponent extends Component<IProps> {
             ref={this.inputRef}
           />
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/textarea/index.tsx b/packages/forms/src/textarea/index.tsx
index 31c572d1c..2d89d1c9f 100644
--- a/packages/forms/src/textarea/index.tsx
+++ b/packages/forms/src/textarea/index.tsx
@@ -14,7 +14,10 @@ interface IData {
   [index: string]: string;
 }
 
-interface IProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, IFormField, IWithStyle {
+interface IProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    IFormField,
+    IWithStyle {
   focus?: boolean;
   data: IData;
   textareaClassName?: string;
@@ -37,14 +40,14 @@ class TextareaComponent extends Component<IProps> {
     const { data } = this.props;
 
     if (this.textareaRef && this.textareaRef.current && data) {
-      Object.keys(data).map(key => this.textareaRef.current!.dataset[key] = data[key]);
+      Object.keys(data).map(
+        key => (this.textareaRef.current!.dataset[key] = data[key]),
+      );
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
-    const {
-      onChange,
-    } = this.props;
+    const { onChange } = this.props;
 
     if (onChange) {
       onChange(e);
@@ -57,7 +60,6 @@ class TextareaComponent extends Component<IProps> {
       className,
       disabled,
       error,
-      focus,
       id,
       textareaClassName,
       label,
@@ -94,9 +96,9 @@ class TextareaComponent extends Component<IProps> {
               [`${classes.wrapper}`]: true,
               [`${classes.disabled}`]: disabled,
               [`${classes.hasError}`]: error,
-            })}>
+            })}
+          >
             <textarea
-              autoFocus={focus}
               id={id}
               name={name}
               placeholder={placeholder}
@@ -115,9 +117,7 @@ class TextareaComponent extends Component<IProps> {
             </textarea>
           </div>
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index b146236df..a9970c8f1 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -3,7 +3,7 @@ import { Property } from 'csstype';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { IFormField, IWithStyle, Omit } from '../typings/generic';
+import { IFormField, IWithStyle } from '../typings/generic';
 import { Theme } from '../../../theme';
 
 import { Error } from '../error';
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index cf179bc5e..3ae551e2c 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -12,18 +12,13 @@ interface IProps extends IWithStyle {
 
 const styles = {
   container: {
-    marginBottom: (props: IProps) => props.noMargin ? 0 : 20,
+    marginBottom: (props: IProps) => (props.noMargin ? 0 : 20),
   },
 };
 
 class WrapperComponent extends Component<IProps> {
   render() {
-    const {
-      children,
-      classes,
-      className,
-      identifier,
-    } = this.props;
+    const { children, classes, className, identifier } = this.props;
 
     return (
       <div
diff --git a/packages/forms/tslint.json b/packages/forms/tslint.json
deleted file mode 100644
index 0946f2096..000000000
--- a/packages/forms/tslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../tslint.json"
-}
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index 94df5afd1..5ba225e51 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -9,11 +9,13 @@ export enum ThemeType {
 
 export const DEFAULT_ACCENT_COLOR = themeBrandPrimary;
 
-export function theme(themeId: ThemeType,
-                      brandColor: string = DEFAULT_ACCENT_COLOR) {
-  return themeId === ThemeType.dark ?
-    makeDarkThemeConfig(brandColor) :
-    makeDefaultThemeConfig(brandColor);
+export function theme(
+  themeId: ThemeType,
+  brandColor: string = DEFAULT_ACCENT_COLOR,
+) {
+  return themeId === ThemeType.dark
+    ? makeDarkThemeConfig(brandColor)
+    : makeDefaultThemeConfig(brandColor);
 }
 
 const defaultThemeConfigWithDefaultAccentColor =
diff --git a/packages/theme/src/themes/IStyleTypes.ts b/packages/theme/src/themes/IStyleTypes.ts
index df5b51c1d..cf8bdea33 100644
--- a/packages/theme/src/themes/IStyleTypes.ts
+++ b/packages/theme/src/themes/IStyleTypes.ts
@@ -1,4 +1,3 @@
-
 export default interface IStyleTypes {
   [index: string]: {
     accent: string;
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index c8ad78829..7d7bab399 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -18,7 +18,9 @@ export default (brandPrimary: string) => {
   const inputColor = legacyStyles.darkThemeGrayLightest;
   const inputBackground = legacyStyles.themeGrayDark;
   const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`;
-  const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
+  const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter)
+    .lighten(0.3)
+    .hex();
   const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor;
   const selectColor = inputColor;
   const drawerBg = color(colorBackground).lighten(0.3).hex();
@@ -47,7 +49,10 @@ export default (brandPrimary: string) => {
 
     // Loader
     colorFullscreenLoaderSpinner: '#FFF',
-    colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(),
+    colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest)
+      .alpha(0.5)
+      .rgb()
+      .string(),
 
     // Input
     labelColor: legacyStyles.darkThemeTextColor,
@@ -58,8 +63,12 @@ export default (brandPrimary: string) => {
     inputPrefixBackground: legacyStyles.darkThemeGray,
     inputDisabledOpacity: 0.5,
     inputScorePasswordBackground: legacyStyles.darkThemeGrayDark,
-    inputModifierColor: color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(),
-    inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(),
+    inputModifierColor: color(legacyStyles.darkThemeGrayLighter)
+      .lighten(0.3)
+      .hex(),
+    inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter)
+      .darken(0.1)
+      .hex(),
 
     // Toggle
     toggleBackground: legacyStyles.darkThemeGray,
@@ -91,13 +100,20 @@ export default (brandPrimary: string) => {
     selectToggleColor: inputPrefixColor,
     selectPopupBackground: legacyStyles.darkThemeGrayLight,
     selectOptionColor: '#FFF',
-    selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`,
-    selectOptionItemHover: color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(),
+    selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight)
+      .darken(0.2)
+      .hex()}`,
+    selectOptionItemHover: color(legacyStyles.darkThemeGrayLight)
+      .darken(0.2)
+      .hex(),
     selectOptionItemHoverColor: selectColor,
     selectSearchColor: inputBackground,
 
     // Modal
-    colorModalOverlayBackground: color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string(),
+    colorModalOverlayBackground: color(legacyStyles.darkThemeBlack)
+      .alpha(0.9)
+      .rgb()
+      .string(),
     colorModalBackground: legacyStyles.darkThemeGrayDark,
 
     // Services
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index b8f3e3201..21017bbe0 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -82,7 +82,10 @@ export default (brandPrimary: string) => {
 
     colorText,
 
-    defaultContentBorder: color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string(),
+    defaultContentBorder: color(legacyStyles.themeGrayLighter)
+      .darken(0.1)
+      .rgb()
+      .string(),
 
     // Subscription Container Component
     colorSubscriptionContainerBackground: 'none',
@@ -94,7 +97,10 @@ export default (brandPrimary: string) => {
     // Loader
     colorAppLoaderSpinner: '#FFF',
     colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark,
-    colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string(),
+    colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter)
+      .alpha(0.8)
+      .rgb()
+      .string(),
 
     // Input
     labelColor: legacyStyles.themeGrayLight,
@@ -103,7 +109,9 @@ export default (brandPrimary: string) => {
     inputBackground,
     inputBorder,
     inputModifierColor: legacyStyles.themeGrayLight,
-    inputPlaceholderColor: color(legacyStyles.themeGrayLight).lighten(0.3).hex(),
+    inputPlaceholderColor: color(legacyStyles.themeGrayLight)
+      .lighten(0.3)
+      .hex(),
     inputPrefixColor,
     inputPrefixBackground: legacyStyles.themeGrayLighter,
     inputDisabledOpacity,
diff --git a/packages/theme/tslint.json b/packages/theme/tslint.json
deleted file mode 100644
index 0946f2096..000000000
--- a/packages/theme/tslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../tslint.json"
-}
diff --git a/packages/typings/types/react-loader.d.ts b/packages/typings/types/react-loader.d.ts
index 8dc36b71f..728e3dfa0 100644
--- a/packages/typings/types/react-loader.d.ts
+++ b/packages/typings/types/react-loader.d.ts
@@ -36,7 +36,7 @@ interface LoaderProps extends LoaderOptions {
   className?: string;
 }
 
-declare class ReactLoader extends Component<LoaderProps>  {
+declare class ReactLoader extends Component<LoaderProps> {
 }
 
 declare namespace ReactLoader {
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index 73db47068..63d5d673a 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { Badge, Icon } from '../';
+import { Badge, Icon } from '..';
 import { Theme } from '../../../theme';
 import { IWithStyle } from '../typings/generic';
 
@@ -34,13 +34,8 @@ const styles = (theme: Theme) => ({
 
 class ProBadgeComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      badgeClasses,
-      iconClasses,
-      inverted,
-      className,
-    } = this.props;
+    const { classes, badgeClasses, iconClasses, inverted, className } =
+      this.props;
 
     return (
       <Badge
diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx
index 0ba383673..5dd735879 100644
--- a/packages/ui/src/badge/index.tsx
+++ b/packages/ui/src/badge/index.tsx
@@ -13,7 +13,7 @@ interface IProps extends IWithStyle {
 
 const badgeStyles = (theme: Theme) => {
   const styles = {};
-  Object.keys(theme.styleTypes).map((style) => {
+  Object.keys(theme.styleTypes).map(style => {
     Object.assign(styles, {
       [style]: {
         background: theme.styleTypes[style].accent,
@@ -51,12 +51,7 @@ class BadgeComponent extends Component<IProps> {
   };
 
   render() {
-    const {
-      classes,
-      children,
-      type,
-      className,
-    } = this.props;
+    const { classes, children, type, className } = this.props;
 
     return (
       <div
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx
index 11b6125cd..bf3d4418c 100644
--- a/packages/ui/src/headline/index.tsx
+++ b/packages/ui/src/headline/index.tsx
@@ -37,13 +37,7 @@ const styles = (theme: Theme) => ({
 
 class HeadlineComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      level,
-      className,
-      children,
-      id,
-    } = this.props;
+    const { classes, level, className, children, id } = this.props;
 
     return React.createElement(
       `h${level}`,
@@ -63,7 +57,12 @@ class HeadlineComponent extends Component<IProps> {
 
 const Headline = injectStyle(styles)(HeadlineComponent);
 
-const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) => <Headline level={level} {...props}>{props.children}</Headline>;
+const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) =>
+  (
+    <Headline level={level} {...props}>
+      {props.children}
+    </Headline>
+  );
 
 export const H1 = createH(1);
 export const H2 = createH(2);
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx
index ed55eccfe..b644a9234 100644
--- a/packages/ui/src/icon/index.tsx
+++ b/packages/ui/src/icon/index.tsx
@@ -24,12 +24,7 @@ class IconComponent extends Component<IProps> {
   };
 
   render() {
-    const {
-      classes,
-      icon,
-      size,
-      className,
-    } = this.props;
+    const { classes, icon, size, className } = this.props;
 
     if (!icon) {
       console.warn('No Icon specified');
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index bd62fc4ea..961262001 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -3,8 +3,8 @@ import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
+import { Icon } from '..';
 import { Theme } from '../../../theme';
-import { Icon } from '../';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -27,7 +27,7 @@ interface IState {
 
 const buttonStyles = (theme: Theme) => {
   const styles = {};
-  Object.keys(theme.styleTypes).map((style) => {
+  Object.keys(theme.styleTypes).map(style => {
     Object.assign(styles, {
       [style]: {
         background: theme.styleTypes[style].accent,
@@ -73,18 +73,21 @@ const styles = (theme: Theme) => ({
     marginRight: 10,
   },
   close: {
-    color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     marginRight: -5,
     border: 0,
     background: 'none',
   },
   cta: {
-    borderColor: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    borderColor: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     borderRadius: theme.borderRadiusSmall,
     borderStyle: 'solid',
     borderWidth: 1,
     background: 'none',
-    color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     marginLeft: 15,
     padding: [4, 10],
     fontSize: theme.uiFontSize,
@@ -113,9 +116,7 @@ class InfoboxComponent extends Component<IProps, IState> {
   };
 
   dismiss() {
-    const {
-      onDismiss,
-    } = this.props;
+    const { onDismiss } = this.props;
 
     this.setState({
       isDismissing: true,
@@ -129,7 +130,7 @@ class InfoboxComponent extends Component<IProps, IState> {
       this.setState({
         dismissed: true,
       });
-    },         3000);
+    }, 3000);
   }
 
   componentWillUnmount(): void {
@@ -144,26 +145,24 @@ class InfoboxComponent extends Component<IProps, IState> {
       icon,
       type,
       ctaLabel,
-      ctaLoading,
       ctaOnClick,
       dismissable,
       className,
     } = this.props;
 
-    const {
-      isDismissing,
-      dismissed,
-    } = this.state;
+    const { isDismissing, dismissed } = this.state;
 
     if (dismissed) {
       return null;
     }
 
     return (
-      <div className={classnames({
-        [classes.wrapper]: true,
-        [`${className}`]: className,
-      })}>
+      <div
+        className={classnames({
+          [classes.wrapper]: true,
+          [`${className}`]: className,
+        })}
+      >
         <div
           className={classnames({
             [classes.infobox]: true,
@@ -172,18 +171,10 @@ class InfoboxComponent extends Component<IProps, IState> {
           })}
           data-type="franz-infobox"
         >
-          {icon && (
-            <Icon icon={icon} className={classes.icon} />
-          )}
-          <div className={classes.content}>
-            {children}
-          </div>
+          {icon && <Icon icon={icon} className={classes.icon} />}
+          <div className={classes.content}>{children}</div>
           {ctaLabel && (
-            <button
-              className={classes.cta}
-              onClick={ctaOnClick}
-              type="button"
-            >
+            <button className={classes.cta} onClick={ctaOnClick} type="button">
               {ctaLabel}
             </button>
           )}
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx
index e2701a8e9..244aa9dc9 100644
--- a/packages/ui/src/loader/index.tsx
+++ b/packages/ui/src/loader/index.tsx
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import ReactLoader from 'react-loader';
 
-import { Theme } from '../../../theme';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -11,7 +10,7 @@ interface IProps extends IWithStyle {
   color?: string;
 }
 
-const styles = (theme: Theme) => ({
+const styles = () => ({
   container: {
     position: 'relative',
     height: 60,
@@ -20,12 +19,7 @@ const styles = (theme: Theme) => ({
 
 class LoaderComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      className,
-      color,
-      theme,
-    } = this.props;
+    const { classes, className, color, theme } = this.props;
 
     return (
       <div
diff --git a/packages/ui/tslint.json b/packages/ui/tslint.json
deleted file mode 100644
index 0946f2096..000000000
--- a/packages/ui/tslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../tslint.json"
-}
diff --git a/src/actions/lib/actions.js b/src/actions/lib/actions.js
index b38db9946..7be40f1cf 100644
--- a/src/actions/lib/actions.js
+++ b/src/actions/lib/actions.js
@@ -8,12 +8,12 @@ export const createActionsFromDefinitions = (actionDefinitions, validate) => {
     };
     actions[actionName] = action;
     action.listeners = [];
-    action.listen = listener => action.listeners.push(listener);
+    action.listen = (listener) => action.listeners.push(listener);
     action.off = (listener) => {
       const { listeners } = action;
       listeners.splice(listeners.indexOf(listener), 1);
     };
-    action.notify = params => action.listeners.forEach(listener => listener(params));
+    action.notify = (params) => action.listeners.forEach((listener) => listener(params));
   });
   return actions;
 };
diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js
index 4b1f03f22..2d5bd8b80 100644
--- a/src/api/server/LocalApi.js
+++ b/src/api/server/LocalApi.js
@@ -2,7 +2,7 @@ import { ipcRenderer } from 'electron';
 import { session } from '@electron/remote';
 import du from 'du';
 
-import { getServicePartitionsDirectory } from '../../helpers/service-helpers.js';
+import { getServicePartitionsDirectory } from '../../helpers/service-helpers';
 
 const debug = require('debug')('Ferdi:LocalApi');
 
@@ -41,11 +41,23 @@ export default class LocalApi {
   }
 
   async clearCache(serviceId = null) {
-    const s = serviceId ? session.fromPartition(`persist:service-${serviceId}`) : session.defaultSession;
+    const s = serviceId
+      ? session.fromPartition(`persist:service-${serviceId}`)
+      : session.defaultSession;
 
-    debug('LocalApi::clearCache resolves', (serviceId || 'clearAppCache'));
+    debug('LocalApi::clearCache resolves', serviceId || 'clearAppCache');
     await s.clearStorageData({
-      storages: ['appcache', 'cookies', 'filesystem', 'indexdb', 'localstorage', 'shadercache', 'websql', 'serviceworkers', 'cachestorage'],
+      storages: [
+        'appcache',
+        'cookies',
+        'filesystem',
+        'indexdb',
+        'localstorage',
+        'shadercache',
+        'websql',
+        'serviceworkers',
+        'cachestorage',
+      ],
       quotas: ['temporary', 'persistent', 'syncable'],
     });
     return s.clearCache();
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index 78a98e544..bc1d665b1 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -23,16 +23,11 @@ import {
   loadRecipeConfig,
 } from '../../helpers/recipe-helpers';
 
-import {
-  removeServicePartitionDirectory,
-} from '../../helpers/service-helpers.js';
+import { removeServicePartitionDirectory } from '../../helpers/service-helpers';
 
 const debug = require('debug')('Ferdi:ServerApi');
 
-module.paths.unshift(
-  getDevRecipeDirectory(),
-  getRecipeDirectory(),
-);
+module.paths.unshift(getDevRecipeDirectory(), getRecipeDirectory());
 
 const { default: fetch } = remoteRequire('electron-fetch');
 
@@ -43,12 +38,16 @@ export default class ServerApi {
 
   // User
   async login(email, passwordHash) {
-    const request = await sendAuthRequest(`${apiBase()}/auth/login`, {
-      method: 'POST',
-      headers: {
-        Authorization: `Basic ${window.btoa(`${email}:${passwordHash}`)}`,
+    const request = await sendAuthRequest(
+      `${apiBase()}/auth/login`,
+      {
+        method: 'POST',
+        headers: {
+          Authorization: `Basic ${window.btoa(`${email}:${passwordHash}`)}`,
+        },
       },
-    }, false);
+      false,
+    );
     if (!request.ok) {
       throw request;
     }
@@ -59,10 +58,14 @@ export default class ServerApi {
   }
 
   async signup(data) {
-    const request = await sendAuthRequest(`${apiBase()}/auth/signup`, {
-      method: 'POST',
-      body: JSON.stringify(data),
-    }, false);
+    const request = await sendAuthRequest(
+      `${apiBase()}/auth/signup`,
+      {
+        method: 'POST',
+        body: JSON.stringify(data),
+      },
+      false,
+    );
     if (!request.ok) {
       throw request;
     }
@@ -86,12 +89,16 @@ export default class ServerApi {
   }
 
   async retrievePassword(email) {
-    const request = await sendAuthRequest(`${apiBase()}/auth/password`, {
-      method: 'POST',
-      body: JSON.stringify({
-        email,
-      }),
-    }, false);
+    const request = await sendAuthRequest(
+      `${apiBase()}/auth/password`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          email,
+        }),
+      },
+      false,
+    );
     if (!request.ok) {
       throw request;
     }
@@ -128,7 +135,9 @@ export default class ServerApi {
     }
     const updatedData = await request.json();
 
-    const user = Object.assign(updatedData, { data: new UserModel(updatedData.data) });
+    const user = Object.assign(updatedData, {
+      data: new UserModel(updatedData.data),
+    });
     debug('ServerApi::updateUserInfo resolves', user);
     return user;
   }
@@ -159,7 +168,7 @@ export default class ServerApi {
     const data = await request.json();
 
     let services = await this._mapServiceModels(data);
-    services = services.filter(service => service !== null);
+    services = services.filter((service) => service !== null);
     debug('ServerApi::getServices resolves', services);
     return services;
   }
@@ -175,12 +184,17 @@ export default class ServerApi {
     const serviceData = await request.json();
 
     if (data.iconFile) {
-      const iconData = await this.uploadServiceIcon(serviceData.data.id, data.iconFile);
+      const iconData = await this.uploadServiceIcon(
+        serviceData.data.id,
+        data.iconFile,
+      );
 
       serviceData.data = iconData;
     }
 
-    const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) });
+    const service = Object.assign(serviceData, {
+      data: await this._prepareServiceModel(serviceData.data),
+    });
 
     debug('ServerApi::createService resolves', service);
     return service;
@@ -204,7 +218,9 @@ export default class ServerApi {
 
     const serviceData = await request.json();
 
-    const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) });
+    const service = Object.assign(serviceData, {
+      data: await this._prepareServiceModel(serviceData.data),
+    });
 
     debug('ServerApi::updateService resolves', service);
     return service;
@@ -221,7 +237,10 @@ export default class ServerApi {
 
     delete requestData.headers['Content-Type'];
 
-    const request = await window.fetch(`${apiBase()}/service/${serviceId}`, requestData);
+    const request = await window.fetch(
+      `${apiBase()}/service/${serviceId}`,
+      requestData,
+    );
 
     if (!request.ok) {
       throw request;
@@ -292,18 +311,21 @@ export default class ServerApi {
   // Recipes
   async getInstalledRecipes() {
     const recipesDirectory = getRecipeDirectory();
-    const paths = fs.readdirSync(recipesDirectory)
-      .filter(file => (
-        fs.statSync(path.join(recipesDirectory, file)).isDirectory()
-        && file !== 'temp'
-        && file !== 'dev'
-      ));
-
-    this.recipes = paths.map((id) => {
-      // eslint-disable-next-line
-      const Recipe = require(id)(RecipeModel);
-      return new Recipe(loadRecipeConfig(id));
-    }).filter(recipe => recipe.id);
+    const paths = fs
+      .readdirSync(recipesDirectory)
+      .filter(
+        (file) => fs.statSync(path.join(recipesDirectory, file)).isDirectory()
+          && file !== 'temp'
+          && file !== 'dev',
+      );
+
+    this.recipes = paths
+      .map((id) => {
+        // eslint-disable-next-line
+        const Recipe = require(id)(RecipeModel);
+        return new Recipe(loadRecipeConfig(id));
+      })
+      .filter((recipe) => recipe.id);
 
     this.recipes = this.recipes.concat(this._getDevRecipes());
 
@@ -373,7 +395,9 @@ export default class ServerApi {
         console.log('[ServerApi::getRecipePackage] Using internal recipe file');
         archivePath = internalRecipeFile;
       } else {
-        console.log('[ServerApi::getRecipePackage] Downloading recipe from server');
+        console.log(
+          '[ServerApi::getRecipePackage] Downloading recipe from server',
+        );
         archivePath = tempArchivePath;
 
         const packageUrl = `${apiBase()}/recipes/download/${recipeId}`;
@@ -393,12 +417,14 @@ export default class ServerApi {
         preservePaths: true,
         unlink: true,
         preserveOwner: false,
-        onwarn: x => console.log('warn', recipeId, x),
+        onwarn: (x) => console.log('warn', recipeId, x),
       });
 
       await sleep(10);
 
-      const { id } = fs.readJsonSync(path.join(recipeTempDirectory, 'package.json'));
+      const { id } = fs.readJsonSync(
+        path.join(recipeTempDirectory, 'package.json'),
+      );
       const recipeDirectory = path.join(recipesDirectory, id);
       fs.copySync(recipeTempDirectory, recipeDirectory);
       fs.remove(recipeTempDirectory);
@@ -414,7 +440,9 @@ export default class ServerApi {
 
   // News
   async getLatestNews() {
-    const url = `${apiBase(true)}/news?platform=${osPlatform}&arch=${osArch}&version=${app.getVersion()}`;
+    const url = `${apiBase(
+      true,
+    )}/news?platform=${osPlatform}&arch=${osArch}&version=${app.getVersion()}`;
     const request = await sendAuthRequest(url);
     if (!request.ok) throw request;
     const data = await request.json();
@@ -435,9 +463,13 @@ export default class ServerApi {
       throw new Error('Server not loaded');
     }
 
-    const request = await sendAuthRequest(`${apiBase(false)}/health`, {
-      method: 'GET',
-    }, false);
+    const request = await sendAuthRequest(
+      `${apiBase(false)}/health`,
+      {
+        method: 'GET',
+      },
+      false,
+    );
     if (!request.ok) {
       throw request;
     }
@@ -445,23 +477,31 @@ export default class ServerApi {
   }
 
   async getLegacyServices() {
-    const file = path.join(app.getPath('userData'), 'settings', 'services.json');
+    const file = path.join(
+      app.getPath('userData'),
+      'settings',
+      'services.json',
+    );
 
     try {
       const config = fs.readJsonSync(file);
 
       if (Object.prototype.hasOwnProperty.call(config, 'services')) {
-        const services = await Promise.all(config.services.map(async (s) => {
-          const service = s;
-          const request = await sendAuthRequest(`${apiBase()}/recipes/${s.service}`);
-
-          if (request.status === 200) {
-            const data = await request.json();
-            service.recipe = new RecipePreviewModel(data);
-          }
-
-          return service;
-        }));
+        const services = await Promise.all(
+          config.services.map(async (s) => {
+            const service = s;
+            const request = await sendAuthRequest(
+              `${apiBase()}/recipes/${s.service}`,
+            );
+
+            if (request.status === 200) {
+              const data = await request.json();
+              service.recipe = new RecipePreviewModel(data);
+            }
+
+            return service;
+          }),
+        );
 
         debug('ServerApi::getLegacyServices resolves', services);
         return services;
@@ -475,17 +515,19 @@ export default class ServerApi {
 
   // Helper
   async _mapServiceModels(services) {
-    const recipes = services.map(s => s.recipeId);
+    const recipes = services.map((s) => s.recipeId);
     await this._bulkRecipeCheck(recipes);
     /* eslint-disable no-return-await */
-    return Promise.all(services.map(async service => await this._prepareServiceModel(service)));
+    return Promise.all(
+      services.map(async (service) => await this._prepareServiceModel(service)),
+    );
     /* eslint-enable no-return-await */
   }
 
   async _prepareServiceModel(service) {
     let recipe;
     try {
-      recipe = this.recipes.find(r => r.id === service.recipeId);
+      recipe = this.recipes.find((r) => r.id === service.recipeId);
 
       if (!recipe) {
         console.warn(`Recipe ${service.recipeId} not loaded`);
@@ -501,21 +543,25 @@ export default class ServerApi {
 
   async _bulkRecipeCheck(unfilteredRecipes) {
     // Filter recipe duplicates as we don't need to download 3 Slack recipes
-    const recipes = unfilteredRecipes.filter((elem, pos, arr) => arr.indexOf(elem) === pos);
+    const recipes = unfilteredRecipes.filter(
+      (elem, pos, arr) => arr.indexOf(elem) === pos,
+    );
 
-    return Promise.all(recipes
-      .map(async (recipeId) => {
-        let recipe = this.recipes.find(r => r.id === recipeId);
+    return Promise.all(
+      recipes.map(async (recipeId) => {
+        let recipe = this.recipes.find((r) => r.id === recipeId);
 
         if (!recipe) {
-          console.warn(`Recipe '${recipeId}' not installed, trying to fetch from server`);
+          console.warn(
+            `Recipe '${recipeId}' not installed, trying to fetch from server`,
+          );
 
           await this.getRecipePackage(recipeId);
 
           debug('Rerun ServerAPI::getInstalledRecipes');
           await this.getInstalledRecipes();
 
-          recipe = this.recipes.find(r => r.id === recipeId);
+          recipe = this.recipes.find((r) => r.id === recipeId);
 
           if (!recipe) {
             console.warn(`Could not load recipe ${recipeId}`);
@@ -524,69 +570,83 @@ export default class ServerApi {
         }
 
         return recipe;
-      })).catch(err => console.error('Can\'t load recipe', err));
+      }),
+    ).catch((err) => console.error("Can't load recipe", err));
   }
 
   _mapRecipePreviewModel(recipes) {
-    return recipes.map((recipe) => {
-      try {
-        return new RecipePreviewModel(recipe);
-      } catch (e) {
-        console.error(e);
-        return null;
-      }
-    }).filter(recipe => recipe !== null);
+    return recipes
+      .map((recipe) => {
+        try {
+          return new RecipePreviewModel(recipe);
+        } catch (e) {
+          console.error(e);
+          return null;
+        }
+      })
+      .filter((recipe) => recipe !== null);
   }
 
   _mapNewsModels(news) {
-    return news.map((newsItem) => {
-      try {
-        return new NewsModel(newsItem);
-      } catch (e) {
-        console.error(e);
-        return null;
-      }
-    }).filter(newsItem => newsItem !== null);
+    return news
+      .map((newsItem) => {
+        try {
+          return new NewsModel(newsItem);
+        } catch (e) {
+          console.error(e);
+          return null;
+        }
+      })
+      .filter((newsItem) => newsItem !== null);
   }
 
   _mapOrderModels(orders) {
-    return orders.map((orderItem) => {
-      try {
-        return new OrderModel(orderItem);
-      } catch (e) {
-        console.error(e);
-        return null;
-      }
-    }).filter(orderItem => orderItem !== null);
+    return orders
+      .map((orderItem) => {
+        try {
+          return new OrderModel(orderItem);
+        } catch (e) {
+          console.error(e);
+          return null;
+        }
+      })
+      .filter((orderItem) => orderItem !== null);
   }
 
   _getDevRecipes() {
     const recipesDirectory = getDevRecipeDirectory();
     try {
-      const paths = fs.readdirSync(recipesDirectory)
-        .filter(file => fs.statSync(path.join(recipesDirectory, file)).isDirectory() && file !== 'temp');
-
-      const recipes = paths.map((id) => {
-        let Recipe;
-        try {
-          // eslint-disable-next-line
-          Recipe = require(id)(RecipeModel);
-          return new Recipe(loadRecipeConfig(id));
-        } catch (err) {
-          console.error(err);
-        }
+      const paths = fs
+        .readdirSync(recipesDirectory)
+        .filter(
+          (file) => fs.statSync(path.join(recipesDirectory, file)).isDirectory()
+            && file !== 'temp',
+        );
+
+      const recipes = paths
+        .map((id) => {
+          let Recipe;
+          try {
+            // eslint-disable-next-line
+            Recipe = require(id)(RecipeModel);
+            return new Recipe(loadRecipeConfig(id));
+          } catch (err) {
+            console.error(err);
+          }
 
-        return false;
-      }).filter(recipe => recipe.id).map((data) => {
-        const recipe = data;
+          return false;
+        })
+        .filter((recipe) => recipe.id)
+        .map((data) => {
+          const recipe = data;
 
-        recipe.icons = {
-          svg: `${recipe.path}/icon.svg`,
-        };
-        recipe.local = true;
+          recipe.icons = {
+            svg: `${recipe.path}/icon.svg`,
+          };
+          recipe.local = true;
 
-        return data;
-      });
+          return data;
+        });
 
       return recipes;
     } catch (err) {
diff --git a/src/app.js b/src/app.js
index aab1729d7..a2d60dbe4 100644
--- a/src/app.js
+++ b/src/app.js
@@ -59,7 +59,7 @@ window.addEventListener('load', () => {
 });
 
 // Prevent drag and drop into window from redirecting
-window.addEventListener('dragover', event => event.preventDefault());
-window.addEventListener('drop', event => event.preventDefault());
-window.addEventListener('dragover', event => event.stopPropagation());
-window.addEventListener('drop', event => event.stopPropagation());
+window.addEventListener('dragover', (event) => event.preventDefault());
+window.addEventListener('drop', (event) => event.preventDefault());
+window.addEventListener('dragover', (event) => event.stopPropagation());
+window.addEventListener('drop', (event) => event.stopPropagation());
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 6fa3adf92..c0e6b982b 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -7,14 +7,19 @@ import { TitleBar } from 'electron-react-titlebar';
 import Link from '../ui/Link';
 import InfoBar from '../ui/InfoBar';
 
-import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types';
+import {
+  oneOrManyChildElements,
+  globalError as globalErrorPropType,
+} from '../../prop-types';
 import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import { GITHUB_FERDI_URL } from '../../config';
 
-export default @observer class AuthLayout extends Component {
+export default
+@observer
+class AuthLayout extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
     error: globalErrorPropType.isRequired,
@@ -30,7 +35,7 @@ export default @observer class AuthLayout extends Component {
 
   state = {
     shouldShowAppUpdateInfoBar: true,
-  }
+  };
 
   static defaultProps = {
     nextAppReleaseVersion: null,
@@ -57,12 +62,15 @@ export default @observer class AuthLayout extends Component {
 
     return (
       <>
-        {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="auth">
           {!isOnline && (
-            <InfoBar
-              type="warning"
-            >
+            <InfoBar type="warning">
               <span className="mdi mdi-flash" />
               {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
             </InfoBar>
@@ -95,7 +103,11 @@ export default @observer class AuthLayout extends Component {
             })}
           </div>
           {/* </div> */}
-          <Link to={`${GITHUB_FERDI_URL}/ferdi`} className="auth__adlk" target="_blank">
+          <Link
+            to={`${GITHUB_FERDI_URL}/ferdi`}
+            className="auth__adlk"
+            target="_blank"
+          >
             <img src="./assets/images/adlk.svg" alt="" />
           </Link>
         </div>
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index 0dedd825a..7bab80280 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -100,7 +100,7 @@ export default @observer class ChangeServer extends Component {
     const { intl } = this.context;
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <h1>{intl.formatMessage(messages.headline)}</h1>
           {form.$('server').value === this.franzServer
           && (
@@ -113,7 +113,7 @@ export default @observer class ChangeServer extends Component {
           && (
             <Input
               placeholder="Custom Server"
-              onChange={e => this.submit(e)}
+              onChange={(e) => this.submit(e)}
               field={form.$('customServer')}
             />
           )}
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index 1fdbea595..2ad8a2409 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -102,7 +102,7 @@ export default @observer class Locked extends Component {
 
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <img
             src="./assets/images/logo.svg"
             className="auth__logo"
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 52b09eab6..9e6a8d046 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -135,7 +135,7 @@ export default @inject('actions') @observer class Login extends Component {
 
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <img
             src="./assets/images/logo.svg"
             className="auth__logo"
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index ad34e39af..eafc48502 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -86,7 +86,7 @@ export default @observer class Password extends Component {
 
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
           <img
             src="./assets/images/logo.svg"
             className="auth__logo"
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index e03cf9101..bd9069eb7 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -34,7 +34,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     width: '500px !important',
     textAlign: 'center',
@@ -161,7 +161,7 @@ class SetupAssistant extends Component {
     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;
@@ -215,11 +215,11 @@ class SetupAssistant extends Component {
               <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 });
@@ -283,7 +283,7 @@ class SetupAssistant extends Component {
               <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}>
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 140867ea1..411b6697b 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -138,7 +138,7 @@ export default @inject('actions') @observer class Signup extends Component {
     return (
       <div className="auth__scroll-container">
         <div className="auth__container auth__container--signup">
-          <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
             <img
               src="./assets/images/logo.svg"
               className="auth__logo"
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 5f2fac64b..cb522e26e 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -84,7 +84,7 @@ export default @inject('actions') @observer class Login extends Component {
           </Link>
         </div>
         <div className="welcome__featured-services">
-          {recipes.map(recipe => (
+          {recipes.map((recipe) => (
             <div
               key={recipe.id}
               className="welcome__featured-service"
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 7e4d0e53e..6e1d7c9a0 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -44,7 +44,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   appContent: {
     // width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
     width: '100%',
@@ -124,7 +124,7 @@ class AppLayout extends Component {
             {sidebar}
             <div className="app__service">
               <WorkspaceSwitchingIndicator />
-              {news.length > 0 && news.map(item => (
+              {news.length > 0 && news.map((item) => (
                 <InfoBar
                   key={item.id}
                   position="top"
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index e54a88faa..0b9d3122c 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -26,7 +26,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     background: theme.colorBackground,
     borderRadius: theme.borderRadius,
diff --git a/src/components/services/content/ErrorHandlers/styles.js b/src/components/services/content/ErrorHandlers/styles.js
index 9e2509ee5..72d62f5e3 100644
--- a/src/components/services/content/ErrorHandlers/styles.js
+++ b/src/components/services/content/ErrorHandlers/styles.js
@@ -1,4 +1,4 @@
-export default theme => ({
+export default (theme) => ({
   component: {
     left: 0,
     position: 'absolute',
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 6e46a60d2..fbf884f0a 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -167,7 +167,7 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
             </div>
           </Appear>
         )}
-        {services.filter(service => !service.isTodosService).map(service => (
+        {services.filter((service) => !service.isTodosService).map((service) => (
           <ServiceView
             key={service.id}
             service={service}
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index b62940c06..10ff0bbbb 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -47,7 +47,7 @@ export default @observer class WebviewCrashHandler extends Component {
     const { reload } = this.props;
 
     this.countdownInterval = setInterval(() => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         countdown: prevState.countdown - this.countdownIntervalTimeout,
       }));
 
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index db7a69bfc..0f608c415 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -33,7 +33,7 @@ export default @observer class TabBar extends Component {
     reorder({ oldIndex, newIndex });
   };
 
-  shouldPreventSorting = event => event.target.tagName !== 'LI';
+  shouldPreventSorting = (event) => event.target.tagName !== 'LI';
 
   toggleService = ({ serviceId, isEnabled }) => {
     const { updateService } = this.props;
@@ -95,10 +95,10 @@ export default @observer class TabBar extends Component {
           toggleNotifications={toggleNotifications}
           toggleAudio={toggleAudio}
           deleteService={deleteService}
-          disableService={args => this.disableService(args)}
-          enableService={args => this.enableService(args)}
-          hibernateService={args => this.hibernateService(args)}
-          wakeUpService={args => this.wakeUpService(args)}
+          disableService={(args) => this.disableService(args)}
+          enableService={(args) => this.enableService(args)}
+          hibernateService={(args) => this.hibernateService(args)}
+          wakeUpService={(args) => this.wakeUpService(args)}
           openSettings={openSettings}
           distance={20}
           axis="y"
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 56e5f9c94..5e424fdd5 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -266,7 +266,7 @@ export default @observer class EditServiceForm extends Component {
           </span>
         </div>
         <div className="settings__body">
-          <form onSubmit={e => this.submit(e)} id="form">
+          <form onSubmit={(e) => this.submit(e)} id="form">
             <div className="service-name">
               <Input field={form.$('name')} focus />
             </div>
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index a05af5da0..11d3eaa79 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -96,7 +96,7 @@ export default @observer class ServicesDashboard extends Component {
           {(services.length !== 0 || searchNeedle) && !isLoading && (
             <SearchInput
               placeholder={intl.formatMessage(messages.searchService)}
-              onChange={needle => filterServices({ needle })}
+              onChange={(needle) => filterServices({ needle })}
               onReset={() => resetFilter()}
               autoFocus
             />
@@ -163,7 +163,7 @@ export default @observer class ServicesDashboard extends Component {
           ) : (
             <table className="service-table">
               <tbody>
-                {services.map(service => (
+                {services.map((service) => (
                   <ServiceItem
                     key={service.id}
                     service={service}
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 7ac644446..339e2dff6 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -266,8 +266,8 @@ export default @observer class EditSettingsForm extends Component {
         </div>
         <div className="settings__body">
           <form
-            onSubmit={e => this.submit(e)}
-            onChange={e => this.submit(e)}
+            onSubmit={(e) => this.submit(e)}
+            onChange={(e) => this.submit(e)}
             id="form"
           >
             {/* Titles */}
@@ -367,7 +367,7 @@ export default @observer class EditSettingsForm extends Component {
                           <div>
                             <Input
                               placeholder="Todo Server"
-                              onChange={e => this.submit(e)}
+                              onChange={(e) => this.submit(e)}
                               field={form.$('customTodoServer')}
                             />
                             <p
@@ -401,7 +401,7 @@ export default @observer class EditSettingsForm extends Component {
                       >
                         <Input
                           placeholder="17:00"
-                          onChange={e => this.submit(e)}
+                          onChange={(e) => this.submit(e)}
                           field={form.$('scheduledDNDStart')}
                           type="time"
                         />
@@ -413,7 +413,7 @@ export default @observer class EditSettingsForm extends Component {
                       >
                         <Input
                           placeholder="09:00"
-                          onChange={e => this.submit(e)}
+                          onChange={(e) => this.submit(e)}
                           field={form.$('scheduledDNDEnd')}
                           type="time"
                         />
@@ -480,7 +480,7 @@ export default @observer class EditSettingsForm extends Component {
 
                 <Input
                   placeholder="Accent Color"
-                  onChange={e => this.submit(e)}
+                  onChange={(e) => this.submit(e)}
                   field={form.$('accentColor')}
                 />
                 <p>
@@ -515,7 +515,7 @@ export default @observer class EditSettingsForm extends Component {
 
                     <Input
                       placeholder={intl.formatMessage(messages.lockedPassword)}
-                      onChange={e => this.submit(e)}
+                      onChange={(e) => this.submit(e)}
                       field={form.$('lockedPassword')}
                       type="password"
                       scorePassword
@@ -527,7 +527,7 @@ export default @observer class EditSettingsForm extends Component {
 
                     <Input
                       placeholder="Lock after inactivity"
-                      onChange={e => this.submit(e)}
+                      onChange={(e) => this.submit(e)}
                       field={form.$('inactivityLock')}
                       autoFocus
                     />
@@ -570,6 +570,7 @@ export default @observer class EditSettingsForm extends Component {
                   href={FRANZ_TRANSLATION}
                   target="_blank"
                   className="link"
+                  rel="noreferrer"
                 >
                   {intl.formatMessage(messages.translationHelp)}
                   {' '}
@@ -588,7 +589,7 @@ export default @observer class EditSettingsForm extends Component {
 
                 <Input
                   placeholder="User Agent"
-                  onChange={e => this.submit(e)}
+                  onChange={(e) => this.submit(e)}
                   field={form.$('userAgentPref')}
                 />
                 <p className="settings__help">{intl.formatMessage(globalMessages.userAgentHelp)}</p>
@@ -674,12 +675,12 @@ export default @observer class EditSettingsForm extends Component {
 
                   Ferdi is based on
                   {' '}
-                  <a href={`${GITHUB_FRANZ_URL}/franz`} target="_blank">Franz</a>
+                  <a href={`${GITHUB_FRANZ_URL}/franz`} target="_blank" rel="noreferrer">Franz</a>
 
                   , a project published
                   under the
                   {' '}
-                  <a href={`${GITHUB_FRANZ_URL}/franz/blob/master/LICENSE`} target="_blank">Apache-2.0 License</a>
+                  <a href={`${GITHUB_FRANZ_URL}/franz/blob/master/LICENSE`} target="_blank" rel="noreferrer">Apache-2.0 License</a>
                 </span>
                 <br />
                 <span className="mdi mdi-information" />
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
index 36c126565..b84e06739 100644
--- a/src/components/settings/supportFerdi/SupportFerdiDashboard.js
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
@@ -94,10 +94,10 @@ class SupportFerdiDashboard extends Component {
           <h1>{intl.formatMessage(messages.title)}</h1>
           <div>
             <p className="settings__support-badges">
-              <a href="https://github.com/getferdi/ferdi" target="_blank"><img alt="GitHub Stars" src="https://img.shields.io/github/stars/getferdi/ferdi?style=social" /></a>
-              <a href="https://twitter.com/getferdi/" target="_blank"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social" /></a>
-              <a href="https://opencollective.com/getferdi#section-contributors" target="_blank"><img alt="Open Collective backers" src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective" /></a>
-              <a href="https://opencollective.com/getferdi#section-contributors" target="_blank"><img alt="Open Collective sponsors" src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective" /></a>
+              <a href="https://github.com/getferdi/ferdi" target="_blank" rel="noreferrer"><img alt="GitHub Stars" src="https://img.shields.io/github/stars/getferdi/ferdi?style=social" /></a>
+              <a href="https://twitter.com/getferdi/" target="_blank" rel="noreferrer"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social" /></a>
+              <a href="https://opencollective.com/getferdi#section-contributors" target="_blank" rel="noreferrer"><img alt="Open Collective backers" src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective" /></a>
+              <a href="https://opencollective.com/getferdi#section-contributors" target="_blank" rel="noreferrer"><img alt="Open Collective sponsors" src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective" /></a>
             </p>
             <FormattedHTMLMessage {...messages.aboutIntro} />
             <br />
@@ -109,7 +109,7 @@ class SupportFerdiDashboard extends Component {
             </p>
             <p>
               {intl.formatMessage(messages.textListContributors)}
-              <a href="https://github.com/getferdi/ferdi#contributors-" target="_blank" className="link">
+              <a href="https://github.com/getferdi/ferdi#contributors-" target="_blank" className="link" rel="noreferrer">
                 {' '}
                 {intl.formatMessage(messages.textListContributorsHere)}
                 <i className="mdi mdi-open-in-new" />
@@ -122,7 +122,7 @@ class SupportFerdiDashboard extends Component {
             </p>
             <p>
               {intl.formatMessage(messages.textSupportWelcome)}
-              <a href="https://help.getferdi.com/general/support" target="_blank" className="link">
+              <a href="https://help.getferdi.com/general/support" target="_blank" className="link" rel="noreferrer">
                 {' '}
                 {intl.formatMessage(messages.textSupportWelcomeHere)}
                 <i className="mdi mdi-open-in-new" />
@@ -130,7 +130,7 @@ class SupportFerdiDashboard extends Component {
             </p>
             <p>
               {intl.formatMessage(messages.textExpenses)}
-              <a href="https://opencollective.com/getferdi#section-budget" target="_blank" className="link">
+              <a href="https://opencollective.com/getferdi#section-budget" target="_blank" className="link" rel="noreferrer">
                 {' '}
                 {intl.formatMessage(messages.textOpenCollective)}
                 <i className="mdi mdi-open-in-new" />
@@ -138,14 +138,14 @@ class SupportFerdiDashboard extends Component {
             </p>
             <p>
               {intl.formatMessage(messages.textDonation)}
-              <a href="https://opencollective.com/getferdi#section-contribute" target="_blank" className="link">
+              <a href="https://opencollective.com/getferdi#section-contribute" target="_blank" className="link" rel="noreferrer">
                 {' '}
                 {intl.formatMessage(messages.textOpenCollective)}
                 <i className="mdi mdi-open-in-new" />
               </a>
               {' '}
               {intl.formatMessage(messages.textDonationAnd)}
-              <a href="https://github.com/sponsors/getferdi" target="_blank" className="link">
+              <a href="https://github.com/sponsors/getferdi" target="_blank" className="link" rel="noreferrer">
                 {' '}
                 {intl.formatMessage(messages.textGitHubSponsors)}
                 <i className="mdi mdi-open-in-new" />
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index a1a353e57..db78acb69 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -84,7 +84,7 @@ export default @observer class EditUserForm extends Component {
           </span>
         </div>
         <div className="settings__body">
-          <form onSubmit={e => this.submit(e)} id="form">
+          <form onSubmit={(e) => this.submit(e)} id="form">
             {status.length > 0 && status.includes('data-updated') && (
               <Infobox
                 type="success"
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index a7f6f4545..31d7ca249 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -37,7 +37,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
 
   componentDidMount() {
     this.interval = setInterval(() => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1,
       }));
     }, 2500);
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
index 4926df470..646cf56ca 100644
--- a/src/components/ui/FeatureItem.js
+++ b/src/components/ui/FeatureItem.js
@@ -4,7 +4,7 @@ import { Icon } from '@meetfranz/ui';
 import classnames from 'classnames';
 import { mdiCheckCircle } from '@mdi/js';
 
-const styles = theme => ({
+const styles = (theme) => ({
   featureItem: {
     borderBottom: [1, 'solid', theme.defaultContentBorder],
     padding: [8, 0],
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
index ada15244b..cf2664830 100644
--- a/src/components/ui/FeatureList.js
+++ b/src/components/ui/FeatureList.js
@@ -92,7 +92,7 @@ export class FeatureList extends Component {
 
     return (
       <ul className={className}>
-        {features.map(feature => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)}
+        {features.map((feature) => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)}
       </ul>
     );
   }
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 7930d98b4..fd14b7018 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -48,7 +48,7 @@ export default @inject('stores') @observer class Link extends Component {
         href={router.history.createHref(to)}
         className={linkClasses}
         style={style}
-        onClick={e => this.onClick(e)}
+        onClick={(e) => this.onClick(e)}
       >
         {children}
       </a>
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js
index c2bebf9bb..f32c075ce 100644
--- a/src/components/ui/Modal/styles.js
+++ b/src/components/ui/Modal/styles.js
@@ -1,4 +1,4 @@
-export default theme => ({
+export default (theme) => ({
   component: {
     zIndex: 500,
     position: 'absolute',
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js
index ba13aca63..e77714eb7 100644
--- a/src/components/ui/Radio.js
+++ b/src/components/ui/Radio.js
@@ -54,7 +54,7 @@ export default @observer class Radio extends Component {
           </label>
         )}
         <div className="franz-form__radio-wrapper">
-          {field.options.map(type => (
+          {field.options.map((type) => (
             <label
               key={type.value}
               htmlFor={`${field.id}-${type.value}`}
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index 78d6aae8b..0b25734dd 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -96,7 +96,7 @@ export default @observer class SearchInput extends Component {
             type="text"
             placeholder={placeholder}
             value={value}
-            onChange={e => this.onChange(e)}
+            onChange={(e) => this.onChange(e)}
             ref={(ref) => { this.input = ref; }}
           />
         </label>
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index b4511433c..e7a5eafa8 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -82,7 +82,7 @@ export default @observer class Select extends Component {
           </label>
         )}
         <select
-          onChange={multiple ? e => this.multipleChange(e) : field.onChange}
+          onChange={multiple ? (e) => this.multipleChange(e) : field.onChange}
           id={field.id}
           defaultValue={selected}
           className="franz-form__select"
@@ -90,7 +90,7 @@ export default @observer class Select extends Component {
           multiple={multiple}
           ref={this.element}
         >
-          {field.options.map(type => (
+          {field.options.map((type) => (
             <option
               key={type.value}
               value={type.value}
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js
index 0b9155a4e..b2dadeac3 100644
--- a/src/components/ui/ServiceIcon.js
+++ b/src/components/ui/ServiceIcon.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 
 import ServiceModel from '../../models/Service';
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     height: 'auto',
   },
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js
index b00a6a3f8..f344449a0 100644
--- a/src/components/ui/Slider.js
+++ b/src/components/ui/Slider.js
@@ -53,7 +53,7 @@ export default @observer class Slider extends Component {
               value={field.value}
               min="1"
               max="100"
-              onChange={e => (!disabled ? this.onChange(e) : null)}
+              onChange={(e) => (!disabled ? this.onChange(e) : null)}
             />
           </div>
 
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
index 546b05a4e..d0ef4e798 100644
--- a/src/components/ui/Tabs/TabItem.js
+++ b/src/components/ui/Tabs/TabItem.js
@@ -1,17 +1,15 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
 export default class TabItem extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
-  }
+  };
 
   render() {
     const { children } = this.props;
 
-    return (
-      <>{children}</>
-    );
+    return <>{children}</>;
   }
 }
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index e68dc3a1d..56c76f215 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -28,7 +28,7 @@ class Tab extends Component {
 
   render() {
     const { children: childElements } = this.props;
-    const children = childElements.filter(c => !!c);
+    const children = childElements.filter((c) => !!c);
 
     if (children.length === 1) {
       return <div>{children}</div>;
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
index 78fb77cbe..14330e5c7 100644
--- a/src/components/ui/Toggle.js
+++ b/src/components/ui/Toggle.js
@@ -59,7 +59,7 @@ export default @observer class Toggle extends Component {
             name={field.name}
             value={field.name}
             checked={field.value}
-            onChange={e => (!disabled ? this.onChange(e) : null)}
+            onChange={(e) => (!disabled ? this.onChange(e) : null)}
           />
         </label>
         {field.error && <div className={field.error}>{field.error}</div>}
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js
index dcaf664e1..4700127d4 100644
--- a/src/components/ui/ToggleRaw.js
+++ b/src/components/ui/ToggleRaw.js
@@ -64,7 +64,7 @@ export default @observer class ToggleRaw extends Component {
             name={field.name}
             value={field.name}
             checked={field.value}
-            onChange={e => (!disabled ? this.onChange(e) : null)}
+            onChange={(e) => (!disabled ? this.onChange(e) : null)}
           />
         </label>
         {field.error && <div className={field.error}>{field.error}</div>}
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.js
index dbd75db8a..5d58011fe 100644
--- a/src/components/ui/WebviewLoader/styles.js
+++ b/src/components/ui/WebviewLoader/styles.js
@@ -1,4 +1,4 @@
-export default theme => ({
+export default (theme) => ({
   component: {
     background: theme.colorWebviewLoaderBackground,
     padding: 20,
diff --git a/src/components/util/ErrorBoundary/styles.js b/src/components/util/ErrorBoundary/styles.js
index 0960546ff..51b36fdf3 100644
--- a/src/components/util/ErrorBoundary/styles.js
+++ b/src/components/util/ErrorBoundary/styles.js
@@ -1,4 +1,4 @@
-export default theme => ({
+export default (theme) => ({
   component: {
     display: 'flex',
     width: '100%',
diff --git a/src/containers/auth/SetupAssistantScreen.js b/src/containers/auth/SetupAssistantScreen.js
index eaf3fda8a..d14085f63 100644
--- a/src/containers/auth/SetupAssistantScreen.js
+++ b/src/containers/auth/SetupAssistantScreen.js
@@ -102,7 +102,7 @@ export default @inject('stores', 'actions') @observer class SetupAssistantScreen
   render() {
     return (
       <SetupAssistant
-        onSubmit={config => this.setupServices(config)}
+        onSubmit={(config) => this.setupServices(config)}
         services={this.services}
         embed={false}
         isSettingUpServices={this.state.isSettingUpServices}
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
index eeab63a0c..38c5dfb43 100644
--- a/src/containers/auth/SignupScreen.js
+++ b/src/containers/auth/SignupScreen.js
@@ -24,7 +24,7 @@ export default @inject('stores', 'actions') @observer class SignupScreen extends
 
     return (
       <Signup
-        onSubmit={values => this.onSignup(values)}
+        onSubmit={(values) => this.onSignup(values)}
         isSubmitting={stores.user.signupRequest.isExecuting}
         loginRoute={stores.user.loginRoute}
         changeServerRoute={stores.user.changeServerRoute}
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 21be9d9d1..fff628946 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -92,8 +92,8 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
 
     const workspacesDrawer = (
       <WorkspaceDrawer
-        getServicesForWorkspace={workspace => (
-          workspace ? workspaceStore.getWorkspaceServices(workspace).map(s => s.name) : services.all.map(s => s.name)
+        getServicesForWorkspace={(workspace) => (
+          workspace ? workspaceStore.getWorkspaceServices(workspace).map((s) => s.name) : services.all.map((s) => s.name)
         )}
       />
     );
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 4ee932895..8d92b01be 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -46,10 +46,7 @@ class AccountScreen extends Component {
   }
 
   render() {
-    const {
-      user,
-      settings,
-    } = this.props.stores;
+    const { user, settings } = this.props.stores;
     const { user: userActions } = this.props.actions;
 
     const isLoadingUserInfo = user.getUserInfoRequest.isExecuting;
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 0fe84792f..c880e97ae 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -394,9 +394,9 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           status={services.actionStatus}
           isSaving={services.updateServiceRequest.isExecuting || services.createServiceRequest.isExecuting}
           isDeleting={services.deleteServiceRequest.isExecuting}
-          onSubmit={d => this.onSubmit(d)}
+          onSubmit={(d) => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
-          openRecipeFile={file => this.openRecipeFile(file)}
+          openRecipeFile={(file) => this.openRecipeFile(file)}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
         />
       </ErrorBoundary>
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 764078cb8..e0a648095 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -652,7 +652,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           isUpdateAvailable={updateStatus === updateStatusTypes.AVAILABLE}
           noUpdateAvailable={updateStatus === updateStatusTypes.NOT_AVAILABLE}
           updateIsReadyToInstall={updateStatus === updateStatusTypes.DOWNLOADED}
-          onSubmit={d => this.onSubmit(d)}
+          onSubmit={(d) => this.onSubmit(d)}
           getCacheSize={() => app.cacheSize}
           isClearingAllCache={isClearingAllCache}
           onClearAllCache={clearAllCache}
diff --git a/src/containers/settings/EditUserScreen.js b/src/containers/settings/EditUserScreen.js
index 8e93164de..820b5e4d3 100644
--- a/src/containers/settings/EditUserScreen.js
+++ b/src/containers/settings/EditUserScreen.js
@@ -141,7 +141,7 @@ export default @inject('stores', 'actions') @observer class EditUserScreen exten
           status={user.actionStatus}
           form={form}
           isSaving={user.updateUserInfoRequest.isExecuting}
-          onSubmit={d => this.onSubmit(d)}
+          onSubmit={(d) => this.onSubmit(d)}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index 9a16fd064..0d6506705 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -82,7 +82,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
     return recipes
     // Filter out duplicate recipes
       .filter((recipe, index, self) => {
-        const ids = self.map(rec => rec.id);
+        const ids = self.map((rec) => rec.id);
         return ids.indexOf(recipe.id) === index;
 
         // Sort alphabetically
@@ -95,7 +95,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
 
   // Create an array of RecipePreviews from an array of recipe objects
   createPreviews(recipes) {
-    return recipes.map(recipe => new RecipePreview(recipe));
+    return recipes.map((recipe) => new RecipePreview(recipe));
   }
 
   resetSearch() {
@@ -134,11 +134,11 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
       // All search recipes from local recipes
       ...this.createPreviews(
         this.customRecipes
-          .filter(service => service.name.toLowerCase().includes(this.state.needle.toLowerCase())),
+          .filter((service) => service.name.toLowerCase().includes(this.state.needle.toLowerCase())),
       ),
     ]) : recipeFilter;
 
-    const customWebsiteRecipe = recipePreviews.all.find(service => service.id === CUSTOM_WEBSITE_RECIPE_ID);
+    const customWebsiteRecipe = recipePreviews.all.find((service) => service.id === CUSTOM_WEBSITE_RECIPE_ID);
 
     const isLoading = recipePreviews.featuredRecipePreviewsRequest.isExecuting
       || recipePreviews.allRecipePreviewsRequest.isExecuting
@@ -156,7 +156,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
           addedServiceCount={services.all.length}
           hasLoadedRecipes={recipePreviews.featuredRecipePreviewsRequest.wasExecuted}
           showAddServiceInterface={serviceActions.showAddServiceInterface}
-          searchRecipes={e => this.searchRecipes(e)}
+          searchRecipes={(e) => this.searchRecipes(e)}
           resetSearch={() => this.resetSearch()}
           searchNeedle={this.state.needle}
           serviceStatus={services.actionStatus}
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
index 21964b108..315843db3 100644
--- a/src/features/announcements/components/AnnouncementScreen.js
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -25,7 +25,7 @@ const messages = defineMessages({
 
 const smallScreen = '1000px';
 
-const styles = theme => ({
+const styles = (theme) => ({
   container: {
     background: theme.colorBackground,
     position: 'relative',
diff --git a/src/features/communityRecipes/store.js b/src/features/communityRecipes/store.js
index acc1e52f6..b115a53e1 100644
--- a/src/features/communityRecipes/store.js
+++ b/src/features/communityRecipes/store.js
@@ -19,7 +19,7 @@ export class CommunityRecipesStore extends FeatureStore {
     if (!this.stores) return [];
 
     return this.stores.recipePreviews.dev.map((r) => {
-      r.isDevRecipe = !!r.author.find(a => a.email === this.stores.user.data.email);
+      r.isDevRecipe = !!r.author.find((a) => a.email === this.stores.user.data.email);
 
       return r;
     });
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
index f97a7c750..5387bd358 100644
--- a/src/features/publishDebugInfo/Component.js
+++ b/src/features/publishDebugInfo/Component.js
@@ -46,7 +46,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   container: {
     minWidth: '70vw',
   },
@@ -186,10 +186,10 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
             <>
               <p className={classes.info}>{intl.formatMessage(messages.info)}</p>
 
-              <a href={`${DEBUG_API}/privacy.html`} target="_blank" className={classes.link}>
+              <a href={`${DEBUG_API}/privacy.html`} target="_blank" className={classes.link} rel="noreferrer">
                 {intl.formatMessage(messages.privacy)}
               </a>
-              <a href={`${DEBUG_API}/terms.html`} target="_blank" className={classes.link}>
+              <a href={`${DEBUG_API}/terms.html`} target="_blank" className={classes.link} rel="noreferrer">
                 {intl.formatMessage(messages.terms)}
               </a>
 
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index 04822db71..812f2c04b 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -28,7 +28,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   modal: {
     width: '80%',
     maxWidth: 600,
@@ -139,7 +139,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
     if (this.state.search && compact(invoke(this.state.search, 'match', /^[a-z0-9]/i)).length > 0) {
       // Apply simple search algorythm to list of all services
       services = this.props.stores.services.allDisplayed;
-      services = services.filter(service => service.name.toLowerCase().search(this.state.search.toLowerCase()) !== -1);
+      services = services.filter((service) => service.name.toLowerCase().search(this.state.search.toLowerCase()) !== -1);
     } else {
       // Add the currently active service first
       const currentService = this.props.stores.services.active;
diff --git a/src/features/shareFranz/Component.js b/src/features/shareFranz/Component.js
index b66375453..cc2e81b70 100644
--- a/src/features/shareFranz/Component.js
+++ b/src/features/shareFranz/Component.js
@@ -44,7 +44,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   modal: {
     width: '80%',
     maxWidth: 600,
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index 6425746e6..d05e24e56 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -24,10 +24,10 @@ class TodosScreen extends Component {
           isVisible={todosStore.isTodosPanelVisible}
           togglePanel={todoActions.toggleTodosPanel}
           handleClientMessage={todoActions.handleClientMessage}
-          setTodosWebview={webview => todoActions.setTodosWebview({ webview })}
+          setTodosWebview={(webview) => todoActions.setTodosWebview({ webview })}
           width={todosStore.width}
           minWidth={TODOS_MIN_WIDTH}
-          resize={width => todoActions.resize({ width })}
+          resize={(width) => todoActions.resize({ width })}
           userAgent={todosStore.userAgent}
           todoUrl={todosStore.todoUrl}
           isTodoUrlValid={todosStore.isTodoUrlValid}
diff --git a/src/features/utils/ActionBinding.js b/src/features/utils/ActionBinding.js
index 497aa071b..787166d44 100644
--- a/src/features/utils/ActionBinding.js
+++ b/src/features/utils/ActionBinding.js
@@ -24,6 +24,6 @@ export default class ActionBinding {
   }
 }
 
-export const createActionBindings = actions => (
-  actions.map(a => new ActionBinding(a))
+export const createActionBindings = (actions) => (
+  actions.map((a) => new ActionBinding(a))
 );
diff --git a/src/features/utils/FeatureStore.js b/src/features/utils/FeatureStore.js
index 0bc10e176..4d4e217a9 100644
--- a/src/features/utils/FeatureStore.js
+++ b/src/features/utils/FeatureStore.js
@@ -16,11 +16,11 @@ export class FeatureStore {
   }
 
   _startActions(actions = this._actions) {
-    actions.forEach(a => a.start());
+    actions.forEach((a) => a.start());
   }
 
   _stopActions(actions = this._actions) {
-    actions.forEach(a => a.stop());
+    actions.forEach((a) => a.stop());
   }
 
   // REACTIONS
@@ -31,10 +31,10 @@ export class FeatureStore {
   }
 
   _startReactions(reactions = this._reactions) {
-    reactions.forEach(r => r.start());
+    reactions.forEach((r) => r.start());
   }
 
   _stopReactions(reactions = this._reactions) {
-    reactions.forEach(r => r.stop());
+    reactions.forEach((r) => r.stop());
   }
 }
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
index b9403bd0d..1cdd14e55 100644
--- a/src/features/webControls/components/WebControls.js
+++ b/src/features/webControls/components/WebControls.js
@@ -32,7 +32,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     background: theme.colorBackground,
     position: 'relative',
@@ -197,7 +197,7 @@ class WebControls extends Component {
         <input
           value={editUrl ? inputUrl : url}
           className={classes.input}
-          onChange={event => this.setState({
+          onChange={(event) => this.setState({
             inputUrl: event.target.value,
           })}
           onFocus={(event) => {
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
index d638b831c..e1e1b9991 100644
--- a/src/features/webControls/containers/WebControlsScreen.js
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -114,7 +114,7 @@ class WebControlsScreen extends Component {
         goBack={() => this.goBack()}
         canGoForward={this.canGoForward}
         goForward={() => this.goForward()}
-        navigate={url => this.navigate(url)}
+        navigate={(url) => this.navigate(url)}
         url={this.url}
       />
     );
diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.js
index 30fbd84be..322695ed2 100644
--- a/src/features/workspaces/api.js
+++ b/src/features/workspaces/api.js
@@ -14,7 +14,7 @@ export const workspaceApi = {
     debug('getUserWorkspaces RESULT', result);
     if (!result.ok) throw result;
     const workspaces = await result.json();
-    return workspaces.map(data => new Workspace(data));
+    return workspaces.map((data) => new Workspace(data));
   },
 
   createWorkspace: async (name) => {
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 3ddc9cf16..1138f23d7 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -34,7 +34,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   drawer: {
     background: theme.workspaces.drawer.background,
     width: `${theme.workspaces.drawer.width}px`,
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 2e58b70d6..a3fdf4f47 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -18,7 +18,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   item: {
     height: '67px',
     padding: `15px ${theme.workspaces.drawer.padding}px`,
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
index cc4b1a3ba..85fc02d51 100644
--- a/src/features/workspaces/components/WorkspaceItem.js
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -6,7 +6,7 @@ import injectSheet from 'react-jss';
 
 import Workspace from '../models/Workspace';
 
-const styles = theme => ({
+const styles = (theme) => ({
   row: {
     height: theme.workspaces.settings.listItems.height,
     borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.js
index e05b21440..f6e2a2786 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.js
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.js
@@ -8,7 +8,7 @@ import { Toggle } from '@meetfranz/forms';
 import Service from '../../../models/Service';
 import ServiceIcon from '../../../components/ui/ServiceIcon';
 
-const styles = theme => ({
+const styles = (theme) => ({
   listItem: {
     height: theme.workspaces.settings.listItems.height,
     borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index a70d1d66f..b46959e91 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -15,7 +15,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = (theme) => ({
   wrapper: {
     display: 'flex',
     alignItems: 'flex-start',
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 0c2588c42..8319d3bc6 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -175,11 +175,11 @@ class WorkspacesDashboard extends Component {
                     <table className={classes.table}>
                       {/* ===== Workspaces list ===== */}
                       <tbody>
-                        {workspaces.map(workspace => (
+                        {workspaces.map((workspace) => (
                           <WorkspaceItem
                             key={workspace.id}
                             workspace={workspace}
-                            onItemClick={w => onWorkspaceClick(w)}
+                            onItemClick={(w) => onWorkspaceClick(w)}
                           />
                         ))}
                       </tbody>
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index c241cd622..4828658f9 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -30,8 +30,8 @@ class WorkspacesScreen extends Component {
           createWorkspaceRequest={createWorkspaceRequest}
           deleteWorkspaceRequest={deleteWorkspaceRequest}
           updateWorkspaceRequest={updateWorkspaceRequest}
-          onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
-          onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
+          onCreateWorkspaceSubmit={(data) => actions.workspaces.create(data)}
+          onWorkspaceClick={(w) => actions.workspaces.edit({ workspace: w })}
         />
       </ErrorBoundary>
     );
diff --git a/src/features/workspaces/models/Workspace.js b/src/features/workspaces/models/Workspace.js
index 77c4e05f4..11ee377cd 100644
--- a/src/features/workspaces/models/Workspace.js
+++ b/src/features/workspaces/models/Workspace.js
@@ -22,13 +22,13 @@ export default class Workspace {
     this.name = data.name;
     this.order = data.order;
 
-    let services = data.services;
+    let { services } = data;
     if (data.saving && data.keepLoaded) {
       // Keep workspaces loaded
       services.push(KEEP_WS_LOADED_USID);
     } else if (data.saving && data.services.includes(KEEP_WS_LOADED_USID)) {
       // Don't keep loaded
-      services = services.filter(e => e !== KEEP_WS_LOADED_USID);
+      services = services.filter((e) => e !== KEEP_WS_LOADED_USID);
     }
     this.services.replace(services);
 
diff --git a/src/helpers/array-helpers.js b/src/helpers/array-helpers.js
index ffb3b63dc..5e592b7f7 100644
--- a/src/helpers/array-helpers.js
+++ b/src/helpers/array-helpers.js
@@ -1,4 +1,4 @@
-export const shuffleArray = arr => arr
-  .map(a => [Math.random(), a])
+export const shuffleArray = (arr) => arr
+  .map((a) => [Math.random(), a])
   .sort((a, b) => a[0] - b[0])
-  .map(a => a[1]);
+  .map((a) => a[1]);
diff --git a/src/helpers/async-helpers.js b/src/helpers/async-helpers.js
index 2ef01ee09..c6c57e28e 100644
--- a/src/helpers/async-helpers.js
+++ b/src/helpers/async-helpers.js
@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
 
 export function sleep(ms = 0) {
-  return new Promise(r => setTimeout(r, ms));
+  return new Promise((r) => setTimeout(r, ms));
 }
diff --git a/src/helpers/service-helpers.js b/src/helpers/service-helpers.js
index f6363aca8..28d483182 100644
--- a/src/helpers/service-helpers.js
+++ b/src/helpers/service-helpers.js
@@ -14,5 +14,5 @@ export function removeServicePartitionDirectory(id = '', addServicePrefix = fals
 
 export async function getServiceIdsFromPartitions() {
   const files = await fs.readdir(getServicePartitionsDirectory());
-  return files.filter(n => n !== '__chrome_extension');
+  return files.filter((n) => n !== '__chrome_extension');
 }
diff --git a/src/helpers/validation-helpers.js b/src/helpers/validation-helpers.js
index f489ec65e..116f19905 100644
--- a/src/helpers/validation-helpers.js
+++ b/src/helpers/validation-helpers.js
@@ -61,7 +61,7 @@ export function minLength(length) {
 
 export function oneRequired(targets) {
   return ({ field, form }) => {
-    const invalidFields = targets.filter(target => form.$(target).value === '');
+    const invalidFields = targets.filter((target) => form.$(target).value === '');
     return [targets.length !== invalidFields.length, window.ferdi.intl.formatMessage(messages.required, { field: field.label })];
   };
 }
diff --git a/src/models/Recipe.js b/src/models/Recipe.js
index 4db056f26..106b4a56a 100644
--- a/src/models/Recipe.js
+++ b/src/models/Recipe.js
@@ -89,7 +89,7 @@ export default class Recipe {
   get author() {
     try {
       const addresses = emailParser.parse(this.rawAuthor);
-      return addresses.map(a => ({ email: a.address, name: a.phrase }));
+      return addresses.map((a) => ({ email: a.address, name: a.phrase }));
     } catch (err) {
       console.warn(`Not a valid author for ${this.name}`);
     }
diff --git a/src/models/Service.js b/src/models/Service.js
index 36b310da1..79181186a 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -277,7 +277,7 @@ export default class Service {
 
     this.webview.addEventListener('ipc-message', async (e) => {
       if (e.channel === 'inject-js-unsafe') {
-        await Promise.all(e.args.map(script => this.webview.executeJavaScript(`"use strict"; (() => { ${script} })();`)));
+        await Promise.all(e.args.map((script) => this.webview.executeJavaScript(`"use strict"; (() => { ${script} })();`)));
       } else {
         handleIPCMessage({
           serviceId: this.id,
diff --git a/src/models/UserAgent.js b/src/models/UserAgent.js
index 6f91d4ed0..930ae19ef 100644
--- a/src/models/UserAgent.js
+++ b/src/models/UserAgent.js
@@ -95,10 +95,10 @@ export default class UserAgent {
   _addWebviewEvents(webview) {
     debug('Adding event handlers');
 
-    this._willNavigateListener = event => this._handleNavigate(event.url, true);
+    this._willNavigateListener = (event) => this._handleNavigate(event.url, true);
     webview.addEventListener('will-navigate', this._willNavigateListener);
 
-    this._didNavigateListener = event => this._handleNavigate(event.url);
+    this._didNavigateListener = (event) => this._handleNavigate(event.url);
     webview.addEventListener('did-navigate', this._didNavigateListener);
   }
 
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index bbb5e6305..6b5ca7c9a 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -1,6 +1,11 @@
 import { ipcRenderer, shell } from 'electron';
 import {
-  app, screen, powerMonitor, nativeTheme, getCurrentWindow, process as remoteProcess,
+  app,
+  screen,
+  powerMonitor,
+  nativeTheme,
+  getCurrentWindow,
+  process as remoteProcess,
 } from '@electron/remote';
 import { action, computed, observable } from 'mobx';
 import moment from 'moment';
@@ -14,13 +19,20 @@ import Store from './lib/Store';
 import Request from './lib/Request';
 import { CHECK_INTERVAL } from '../config';
 import {
-  DEFAULT_APP_SETTINGS, isMac, ferdiVersion, electronVersion, osRelease,
+  DEFAULT_APP_SETTINGS,
+  isMac,
+  ferdiVersion,
+  electronVersion,
+  osRelease,
 } from '../environment';
 import locales from '../i18n/translations';
 import { onVisibilityChange } from '../helpers/visibility-helper';
 import { getLocale } from '../helpers/i18n-helpers';
 
-import { getServiceIdsFromPartitions, removeServicePartitionDirectory } from '../helpers/service-helpers.js';
+import {
+  getServiceIdsFromPartitions,
+  removeServicePartitionDirectory,
+} from '../helpers/service-helpers';
 import { isValidExternalURL } from '../helpers/url-helpers';
 import { sleep } from '../helpers/async-helpers';
 
@@ -49,7 +61,10 @@ export default class AppStore extends Store {
 
   @observable healthCheckRequest = new Request(this.api.app, 'health');
 
-  @observable getAppCacheSizeRequest = new Request(this.api.local, 'getAppCacheSize');
+  @observable getAppCacheSizeRequest = new Request(
+    this.api.local,
+    'getAppCacheSize',
+  );
 
   @observable clearAppCacheRequest = new Request(this.api.local, 'clearCache');
 
@@ -93,7 +108,9 @@ export default class AppStore extends Store {
     this.actions.app.openExternalUrl.listen(this._openExternalUrl.bind(this));
     this.actions.app.checkForUpdates.listen(this._checkForUpdates.bind(this));
     this.actions.app.installUpdate.listen(this._installUpdate.bind(this));
-    this.actions.app.resetUpdateStatus.listen(this._resetUpdateStatus.bind(this));
+    this.actions.app.resetUpdateStatus.listen(
+      this._resetUpdateStatus.bind(this),
+    );
     this.actions.app.healthCheck.listen(this._healthCheck.bind(this));
     this.actions.app.muteApp.listen(this._muteApp.bind(this));
     this.actions.app.toggleMuteApp.listen(this._toggleMuteApp.bind(this));
@@ -183,9 +200,7 @@ export default class AppStore extends Store {
     // Handle deep linking (ferdi://)
     ipcRenderer.on('navigateFromDeepLink', (event, data) => {
       debug('Navigate from deep link', data);
-      let {
-        url,
-      } = data;
+      let { url } = data;
       if (!url) return;
 
       url = url.replace(/\/$/, '');
@@ -221,7 +236,10 @@ export default class AppStore extends Store {
       debug('System resumed, last suspended on', this.timeSuspensionStart);
       this.actions.service.resetLastPollTimer();
 
-      if (this.timeSuspensionStart.add(10, 'm').isBefore(moment()) && this.stores.settings.app.get('reloadAfterResume')) {
+      if (
+        this.timeSuspensionStart.add(10, 'm').isBefore(moment())
+        && this.stores.settings.app.get('reloadAfterResume')
+      ) {
         debug('Reloading services, user info and features');
 
         setInterval(() => {
@@ -266,15 +284,15 @@ export default class AppStore extends Store {
       ferdi: {
         version: ferdiVersion,
         electron: electronVersion,
-        installedRecipes: this.stores.recipes.all.map(recipe => ({
+        installedRecipes: this.stores.recipes.all.map((recipe) => ({
           id: recipe.id,
           version: recipe.version,
         })),
-        devRecipes: this.stores.recipePreviews.dev.map(recipe => ({
+        devRecipes: this.stores.recipePreviews.dev.map((recipe) => ({
           id: recipe.id,
           version: recipe.version,
         })),
-        services: this.stores.services.all.map(service => ({
+        services: this.stores.services.all.map((service) => ({
           id: service.id,
           recipe: service.recipe.id,
           isAttached: service.isAttached,
@@ -285,11 +303,13 @@ export default class AppStore extends Store {
           isDarkModeEnabled: service.isDarkModeEnabled,
         })),
         messages: this.stores.globalError.messages,
-        workspaces: this.stores.workspaces.workspaces.map(workspace => ({
+        workspaces: this.stores.workspaces.workspaces.map((workspace) => ({
           id: workspace.id,
           services: workspace.services,
         })),
-        windowSettings: readJsonSync(path.join(app.getPath('userData'), 'window-state.json')),
+        windowSettings: readJsonSync(
+          path.join(app.getPath('userData'), 'window-state.json'),
+        ),
         settings,
         features: this.stores.features.features,
         user: this.stores.user.data.id,
@@ -299,10 +319,7 @@ export default class AppStore extends Store {
 
   // Actions
   @action _notify({
-    title,
-    options,
-    notificationId,
-    serviceId = null,
+    title, options, notificationId, serviceId = null,
   }) {
     if (this.stores.settings.all.app.isAppMuted) return;
 
@@ -339,15 +356,15 @@ export default class AppStore extends Store {
     };
   }
 
-  @action _setBadge({
-    unreadDirectMessageCount,
-    unreadIndirectMessageCount,
-  }) {
+  @action _setBadge({ unreadDirectMessageCount, unreadIndirectMessageCount }) {
     let indicator = unreadDirectMessageCount;
 
     if (indicator === 0 && unreadIndirectMessageCount !== 0) {
       indicator = '•';
-    } else if (unreadDirectMessageCount === 0 && unreadIndirectMessageCount === 0) {
+    } else if (
+      unreadDirectMessageCount === 0
+      && unreadIndirectMessageCount === 0
+    ) {
       indicator = 0;
     } else {
       indicator = parseInt(indicator, 10);
@@ -358,9 +375,7 @@ export default class AppStore extends Store {
     });
   }
 
-  @action _launchOnStartup({
-    enable,
-  }) {
+  @action _launchOnStartup({ enable }) {
     this.autoLaunchOnStart = enable;
 
     try {
@@ -376,9 +391,7 @@ export default class AppStore extends Store {
     }
   }
 
-  @action _openExternalUrl({
-    url,
-  }) {
+  @action _openExternalUrl({ url }) {
     const parsedUrl = new URL(url);
     debug('open external url', parsedUrl);
 
@@ -414,10 +427,7 @@ export default class AppStore extends Store {
     this.healthCheckRequest.execute();
   }
 
-  @action _muteApp({
-    isMuted,
-    overrideSystemMute = true,
-  }) {
+  @action _muteApp({ isMuted, overrideSystemMute = true }) {
     this.isSystemMuteOverridden = overrideSystemMute;
     this.actions.settings.update({
       type: 'app',
@@ -437,16 +447,24 @@ export default class AppStore extends Store {
     this.isClearingAllCache = true;
     const clearAppCache = this.clearAppCacheRequest.execute();
     const allServiceIds = await getServiceIdsFromPartitions();
-    const allOrphanedServiceIds = allServiceIds.filter(id => !this.stores.services.all.find(s => id.replace('service-', '') === s.id));
+    const allOrphanedServiceIds = allServiceIds.filter(
+      (id) => !this.stores.services.all.find(
+        (s) => id.replace('service-', '') === s.id,
+      ),
+    );
 
     try {
-      await Promise.all(allOrphanedServiceIds.map(id => removeServicePartitionDirectory(id)));
+      await Promise.all(
+        allOrphanedServiceIds.map((id) => removeServicePartitionDirectory(id)),
+      );
     } catch (ex) {
       console.log('Error while deleting service partition directory - ', ex);
     }
-    await Promise.all(this.stores.services.all.map(s => this.actions.service.clearCache({
-      serviceId: s.id,
-    })));
+    await Promise.all(
+      this.stores.services.all.map((s) => this.actions.service.clearCache({
+        serviceId: s.id,
+      })),
+    );
 
     await clearAppCache._promise;
 
@@ -476,7 +494,11 @@ export default class AppStore extends Store {
       locale = this.stores.user.data.locale;
     }
 
-    if (locale && Object.prototype.hasOwnProperty.call(locales, locale) && locale !== this.locale) {
+    if (
+      locale
+      && Object.prototype.hasOwnProperty.call(locales, locale)
+      && locale !== this.locale
+    ) {
       this.locale = locale;
     } else if (!locale) {
       this.locale = this._getDefaultLocale();
@@ -553,7 +575,10 @@ export default class AppStore extends Store {
     const dnd = await ipcRenderer.invoke('get-dnd');
     debug('Do not disturb mode is', dnd);
     // ipcRenderer.on('autoUpdate', (event, data) => {
-    if (dnd !== this.stores.settings.all.app.isAppMuted && !this.isSystemMuteOverridden) {
+    if (
+      dnd !== this.stores.settings.all.app.isAppMuted
+      && !this.isSystemMuteOverridden
+    ) {
       this.actions.app.muteApp({
         isMuted: dnd,
         overrideSystemMute: false,
diff --git a/src/stores/NewsStore.js b/src/stores/NewsStore.js
index 86e092592..66a17cb29 100644
--- a/src/stores/NewsStore.js
+++ b/src/stores/NewsStore.js
@@ -38,7 +38,7 @@ export default class NewsStore extends Store {
 
     this.latestNewsRequest.invalidate().patch((result) => {
       // TODO: check if we can use mobx.array remove
-      remove(result, n => n.id === newsId);
+      remove(result, (n) => n.id === newsId);
     });
   }
 
diff --git a/src/stores/RecipePreviewsStore.js b/src/stores/RecipePreviewsStore.js
index 989e1124a..10c170e81 100644
--- a/src/stores/RecipePreviewsStore.js
+++ b/src/stores/RecipePreviewsStore.js
@@ -31,7 +31,7 @@ export default class RecipePreviewsStore extends Store {
   }
 
   @computed get dev() {
-    return this.stores.recipes.all.filter(r => r.local);
+    return this.stores.recipes.all.filter((r) => r.local);
   }
 
   // Actions
diff --git a/src/stores/RecipesStore.js b/src/stores/RecipesStore.js
index b49fb72d9..c7c4c1deb 100644
--- a/src/stores/RecipesStore.js
+++ b/src/stores/RecipesStore.js
@@ -54,11 +54,11 @@ export default class RecipesStore extends Store {
   }
 
   @computed get recipeIdForServices() {
-    return this.stores.services.all.map(s => s.recipe.id);
+    return this.stores.services.all.map((s) => s.recipe.id);
   }
 
   one(id) {
-    return this.all.find(recipe => recipe.id === id);
+    return this.all.find((recipe) => recipe.id === id);
   }
 
   isInstalled(id) {
@@ -78,7 +78,7 @@ export default class RecipesStore extends Store {
     const recipes = {};
 
     // Hackfix, reference this.all to fetch services
-    debug(`Check Recipe updates for ${this.all.map(recipe => recipe.id)}`);
+    debug(`Check Recipe updates for ${this.all.map((recipe) => recipe.id)}`);
 
     recipeIds.forEach((r) => {
       const recipe = this.one(r);
@@ -98,7 +98,7 @@ export default class RecipesStore extends Store {
       const version = recipes[recipe];
 
       // Find recipe in local recipe repository
-      const localRecipe = allJson.find(r => r.id === recipe);
+      const localRecipe = allJson.find((r) => r.id === recipe);
 
       if (localRecipe && semver.lt(version, localRecipe.version)) {
         localUpdates.push(recipe);
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index fa31dc292..fefcb5080 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -216,7 +216,7 @@ export default class ServicesStore extends Store {
   }
 
   @computed get enabled() {
-    return this.all.filter(service => service.isEnabled);
+    return this.all.filter((service) => service.isEnabled);
   }
 
   @computed get allDisplayed() {
@@ -229,7 +229,7 @@ export default class ServicesStore extends Store {
     const { showDisabledServices } = this.stores.settings.all.app;
     const { keepAllWorkspacesLoaded } = this.stores.workspaces.settings;
     const services = this.allServicesRequest.execute().result || [];
-    const filteredServices = showDisabledServices ? services : services.filter(service => service.isEnabled);
+    const filteredServices = showDisabledServices ? services : services.filter((service) => service.isEnabled);
 
     let displayedServices;
     if (keepAllWorkspacesLoaded) {
@@ -244,8 +244,8 @@ export default class ServicesStore extends Store {
         // Check if workspace needs to be kept loaded
         if (workspace.services.includes(KEEP_WS_LOADED_USID)) {
           // Get services for workspace
-          const serviceIDs = workspace.services.filter(i => i !== KEEP_WS_LOADED_USID);
-          const wsServices = filteredServices.filter(service => serviceIDs.includes(service.id));
+          const serviceIDs = workspace.services.filter((i) => i !== KEEP_WS_LOADED_USID);
+          const wsServices = filteredServices.filter((service) => serviceIDs.includes(service.id));
 
           displayedServices = [
             ...displayedServices,
@@ -262,11 +262,11 @@ export default class ServicesStore extends Store {
   }
 
   @computed get filtered() {
-    return this.all.filter(service => service.name.toLowerCase().includes(this.filterNeedle.toLowerCase()));
+    return this.all.filter((service) => service.name.toLowerCase().includes(this.filterNeedle.toLowerCase()));
   }
 
   @computed get active() {
-    return this.all.find(service => service.isActive);
+    return this.all.find((service) => service.isActive);
   }
 
   @computed get activeSettings() {
@@ -284,7 +284,7 @@ export default class ServicesStore extends Store {
   }
 
   @computed get isTodosServiceAdded() {
-    return this.allDisplayed.find(service => service.isTodosService && service.isEnabled) || false;
+    return this.allDisplayed.find((service) => service.isTodosService && service.isEnabled) || false;
   }
 
   @computed get isTodosServiceActive() {
@@ -292,7 +292,7 @@ export default class ServicesStore extends Store {
   }
 
   one(id) {
-    return this.all.find(service => service.id === id);
+    return this.all.find((service) => service.id === id);
   }
 
   async _showAddServiceInterface({ recipeId }) {
@@ -400,7 +400,7 @@ export default class ServicesStore extends Store {
         newData.iconUrl = data.customIconUrl;
       }
 
-      Object.assign(result.find(c => c.id === serviceId), newData);
+      Object.assign(result.find((c) => c.id === serviceId), newData);
     });
 
     await request._promise;
@@ -434,7 +434,7 @@ export default class ServicesStore extends Store {
     }
 
     this.allServicesRequest.patch((result) => {
-      remove(result, c => c.id === serviceId);
+      remove(result, (c) => c.id === serviceId);
     });
 
     await request._promise;
@@ -493,7 +493,7 @@ export default class ServicesStore extends Store {
     }
 
     // Update list of last used services
-    this.lastUsedServices = this.lastUsedServices.filter(id => id !== serviceId);
+    this.lastUsedServices = this.lastUsedServices.filter((id) => id !== serviceId);
     this.lastUsedServices.unshift(serviceId);
 
     this._focusActiveService();
@@ -505,7 +505,7 @@ export default class ServicesStore extends Store {
   }
 
   @action _setActiveNext() {
-    const nextIndex = this._wrapIndex(this.allDisplayed.findIndex(service => service.isActive), 1, this.allDisplayed.length);
+    const nextIndex = this._wrapIndex(this.allDisplayed.findIndex((service) => service.isActive), 1, this.allDisplayed.length);
 
     // TODO: simplify this;
     this.all.forEach((s, index) => {
@@ -515,7 +515,7 @@ export default class ServicesStore extends Store {
   }
 
   @action _setActivePrev() {
-    const prevIndex = this._wrapIndex(this.allDisplayed.findIndex(service => service.isActive), -1, this.allDisplayed.length);
+    const prevIndex = this._wrapIndex(this.allDisplayed.findIndex((service) => service.isActive), -1, this.allDisplayed.length);
 
     // TODO: simplify this;
     this.all.forEach((s, index) => {
@@ -689,7 +689,7 @@ export default class ServicesStore extends Store {
   }
 
   @action _sendIPCMessageToAllServices({ channel, args }) {
-    this.all.forEach(s => this.actions.service.sendIPCMessage({
+    this.all.forEach((s) => this.actions.service.sendIPCMessage({
       serviceId: s.id,
       channel,
       args,
@@ -740,7 +740,7 @@ export default class ServicesStore extends Store {
   }
 
   @action _reloadAll() {
-    this.enabled.forEach(s => this._reload({
+    this.enabled.forEach((s) => this._reload({
       serviceId: s.id,
     }));
   }
@@ -859,7 +859,7 @@ export default class ServicesStore extends Store {
     };
 
     if (!serviceId) {
-      this.allDisplayed.forEach(service => resetTimer(service));
+      this.allDisplayed.forEach((service) => resetTimer(service));
     } else {
       const service = this.one(serviceId);
       if (service) {
@@ -893,7 +893,7 @@ export default class ServicesStore extends Store {
   _mapActiveServiceToServiceModelReaction() {
     const { activeService } = this.stores.settings.all.service;
     if (this.allDisplayed.length) {
-      this.allDisplayed.map(service => Object.assign(service, {
+      this.allDisplayed.map((service) => Object.assign(service, {
         isActive: activeService ? activeService === service.id : this.allDisplayed[0].id === service.id,
       }));
     }
@@ -904,13 +904,13 @@ export default class ServicesStore extends Store {
     const { showMessageBadgesEvenWhenMuted } = this.stores.ui;
 
     const unreadDirectMessageCount = this.allDisplayed
-      .filter(s => (showMessageBadgeWhenMuted || s.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && s.isBadgeEnabled)
-      .map(s => s.unreadDirectMessageCount)
+      .filter((s) => (showMessageBadgeWhenMuted || s.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && s.isBadgeEnabled)
+      .map((s) => s.unreadDirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
     const unreadIndirectMessageCount = this.allDisplayed
-      .filter(s => (showMessageBadgeWhenMuted && showMessageBadgesEvenWhenMuted) && (s.isBadgeEnabled && s.isIndirectMessageBadgeEnabled))
-      .map(s => s.unreadIndirectMessageCount)
+      .filter((s) => (showMessageBadgeWhenMuted && showMessageBadgesEvenWhenMuted) && (s.isBadgeEnabled && s.isIndirectMessageBadgeEnabled))
+      .map((s) => s.unreadIndirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
     // We can't just block this earlier, otherwise the mobx reaction won't be aware of the vars to watch in some cases
@@ -975,7 +975,7 @@ export default class ServicesStore extends Store {
       return;
     }
 
-    if (this.allDisplayed.findIndex(service => service.isActive) === -1 && this.allDisplayed.length !== 0) {
+    if (this.allDisplayed.findIndex((service) => service.isActive) === -1 && this.allDisplayed.length !== 0) {
       debug('No active service found, setting active service to index 0');
 
       this._setActive({ serviceId: this.allDisplayed[0].id });
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index 0ca61046a..adcd776c1 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -71,7 +71,7 @@ export default class UIStore extends Store {
 
   @computed get theme() {
     const themeId = (this.isDarkThemeActive || this.stores.settings.app.darkMode) ? 'dark' : 'default';
-    const accentColor = this.stores.settings.app.accentColor;
+    const { accentColor } = this.stores.settings.app;
     return theme(themeId, accentColor);
   }
 
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 8a525c2ef..2e009893a 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -205,7 +205,7 @@ export default class UserStore extends Store {
   }
 
   @action async _invite({ invites }) {
-    const data = invites.filter(invite => invite.email !== '');
+    const data = invites.filter((invite) => invite.email !== '');
 
     const response = await this.inviteRequest.execute(data)._promise;
 
@@ -250,7 +250,7 @@ export default class UserStore extends Store {
     this.isImportLegacyServicesExecuting = true;
 
     // Reduces recipe duplicates
-    const recipes = services.filter((obj, pos, arr) => arr.map(mapObj => mapObj.recipe.id).indexOf(obj.recipe.id) === pos).map(s => s.recipe.id);
+    const recipes = services.filter((obj, pos, arr) => arr.map((mapObj) => mapObj.recipe.id).indexOf(obj.recipe.id) === pos).map((s) => s.recipe.id);
 
     // Install recipes
     for (const recipe of recipes) { // eslint-disable-line no-unused-vars
diff --git a/src/stores/lib/CachedRequest.js b/src/stores/lib/CachedRequest.js
index 31c7ce241..94f615144 100644
--- a/src/stores/lib/CachedRequest.js
+++ b/src/stores/lib/CachedRequest.js
@@ -92,7 +92,7 @@ export default class CachedRequest extends Request {
   }
 
   removeCacheForCallWith(...args) {
-    remove(this._apiCalls, c => isEqual(c.args, args));
+    remove(this._apiCalls, (c) => isEqual(c.args, args));
   }
 
   _addApiCall(args) {
@@ -102,6 +102,6 @@ export default class CachedRequest extends Request {
   }
 
   _findApiCall(args) {
-    return this._apiCalls.find(c => isEqual(c.args, args));
+    return this._apiCalls.find((c) => isEqual(c.args, args));
   }
 }
diff --git a/src/stores/lib/Reaction.js b/src/stores/lib/Reaction.js
index f8009b7f6..7e1bc685e 100644
--- a/src/stores/lib/Reaction.js
+++ b/src/stores/lib/Reaction.js
@@ -26,6 +26,6 @@ export default class Reaction {
   }
 }
 
-export const createReactions = reactions => (
-  reactions.map(r => new Reaction(r))
+export const createReactions = (reactions) => (
+  reactions.map((r) => new Reaction(r))
 );
diff --git a/src/stores/lib/Request.js b/src/stores/lib/Request.js
index cfc857c2e..32ffe4367 100644
--- a/src/stores/lib/Request.js
+++ b/src/stores/lib/Request.js
@@ -107,7 +107,7 @@ export default class Request {
   }
 
   _triggerHooks() {
-    Request._hooks.forEach(hook => hook(this));
+    Request._hooks.forEach((hook) => hook(this));
   }
 
   reset = () => {
diff --git a/src/stores/lib/Store.js b/src/stores/lib/Store.js
index 8d2fb4066..b03a7e725 100644
--- a/src/stores/lib/Store.js
+++ b/src/stores/lib/Store.js
@@ -28,18 +28,18 @@ export default class Store {
   }
 
   registerReactions(reactions) {
-    reactions.forEach(reaction => this._reactions.push(new Reaction(reaction)));
+    reactions.forEach((reaction) => this._reactions.push(new Reaction(reaction)));
   }
 
   setup() {}
 
   initialize() {
     this.setup();
-    this._reactions.forEach(reaction => reaction.start());
+    this._reactions.forEach((reaction) => reaction.start());
   }
 
   teardown() {
-    this._reactions.forEach(reaction => reaction.stop());
+    this._reactions.forEach((reaction) => reaction.stop());
   }
 
   resetStatus() {
diff --git a/src/webview/contextMenuBuilder.js b/src/webview/contextMenuBuilder.js
index 63eed2ebe..2598dbf03 100644
--- a/src/webview/contextMenuBuilder.js
+++ b/src/webview/contextMenuBuilder.js
@@ -61,7 +61,7 @@ module.exports = class ContextMenuBuilder {
    * @param  {function} processMenu If passed, this method will be passed the menu to change
    *                                it prior to display. Signature: (menu, info) => menu
    */
-  constructor(webContents, debugMode = false, processMenu = m => m) {
+  constructor(webContents, debugMode = false, processMenu = (m) => m) {
     this.debugMode = debugMode;
     this.processMenu = processMenu;
     this.menu = null;
@@ -320,7 +320,7 @@ module.exports = class ContextMenuBuilder {
       label: this.stringTable.copyImage(),
       click: () => {
         const result = this.convertImageToBase64(menuInfo.srcURL,
-          dataURL => clipboard.writeImage(nativeImage.createFromDataURL(dataURL)));
+          (dataURL) => clipboard.writeImage(nativeImage.createFromDataURL(dataURL)));
 
         this._sendNotificationOnClipboardEvent(menuInfo.clipboardNotifications, () => `Image copied from URL: ${menuInfo.srcURL}`);
         return result;
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index 3bb9352f6..305e79882 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -75,7 +75,7 @@ class RecipeWebview {
       debug('Script not found', file);
       return null;
     })).then(async (scripts) => {
-      const scriptsFound = scripts.filter(script => script !== null);
+      const scriptsFound = scripts.filter((script) => script !== null);
       if (scriptsFound.length > 0) {
         debug('Inject scripts to main world', scriptsFound);
         ipcRenderer.sendToHost('inject-js-unsafe', ...scriptsFound);
diff --git a/src/webview/notifications.js b/src/webview/notifications.js
index 39a515143..205a3220c 100644
--- a/src/webview/notifications.js
+++ b/src/webview/notifications.js
@@ -4,7 +4,7 @@ import uuidV1 from 'uuid/v1';
 const debug = require('debug')('Ferdi:Notifications');
 
 export class NotificationsHandler {
-  onNotify = data => data;
+  onNotify = (data) => data;
 
   displayNotification(title, options) {
     return new Promise((resolve) => {
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 58a04b728..b59319495 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -9,7 +9,7 @@ const [defaultLocale] = webContents.session.getSpellCheckerLanguages();
 debug('Spellchecker default locale is', defaultLocale);
 
 export function getSpellcheckerLocaleByFuzzyIdentifier(identifier) {
-  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(key => key.toLocaleLowerCase() === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
+  const locales = Object.keys(SPELLCHECKER_LOCALES).filter((key) => key.toLocaleLowerCase() === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
 
   if (locales.length >= 1) {
     return locales[0];
diff --git a/tsconfig.settings.json b/tsconfig.settings.json
index 35f2cd80e..8fb9ab041 100644
--- a/tsconfig.settings.json
+++ b/tsconfig.settings.json
@@ -12,6 +12,9 @@
     "experimentalDecorators": true,
     "composite": true,
     "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "importHelpers": true,
+    "removeComments": true,
     "typeRoots": ["packages/typings/types", "node_modules/@types"],
     "paths": {
       "@types/*": ["packages/typings/types/*.d.ts"],
diff --git a/tslint.json b/tslint.json
deleted file mode 100644
index 975089ab0..000000000
--- a/tslint.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": ["tslint-config-airbnb"],
-  "rules": {
-    "import-name": false,
-    "variable-name": false,
-    "class-name": false,
-    "prefer-array-literal": false,
-    "semicolon": [true, "always"],
-    "max-line-length": false,
-    "ordered-imports": true
-  }
-}
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx
index 41930e805..ecc7020c1 100644
--- a/uidev/src/app.tsx
+++ b/uidev/src/app.tsx
@@ -5,6 +5,7 @@ import DevTools from 'mobx-react-devtools';
 import React from 'react';
 import injectSheet from 'react-jss';
 
+import { theme, ThemeType } from '@meetfranz/theme';
 import { WithTheme } from './withTheme';
 
 import './stories/badge.stories';
@@ -20,7 +21,6 @@ import './stories/toggle.stories';
 
 import { store } from './stores';
 
-import { theme, ThemeType } from '@meetfranz/theme';
 const defaultTheme = theme(ThemeType.default);
 
 const styles = {
diff --git a/uidev/src/stores/stories.ts b/uidev/src/stores/stories.ts
index 6a98c9fd3..12bacdd59 100644
--- a/uidev/src/stores/stories.ts
+++ b/uidev/src/stores/stories.ts
@@ -1,5 +1,3 @@
-import { store } from './index';
-
 export type StorySectionName = string;
 export type StoryName = string;
 export type StoryComponent = () => JSX.Element;
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
index 5c1c9246d..5ca657238 100644
--- a/uidev/src/stories/button.stories.tsx
+++ b/uidev/src/stories/button.stories.tsx
@@ -27,20 +27,18 @@ const styles = {
   },
 };
 
-const createStore = (args?: any) => {
-  return observable(Object.assign({}, defaultProps, args));
-};
+const createStore = (args?: any) => observable({ ...defaultProps, ...args });
 
 const WithStoreButton = observer(({ store }: { store: any }) => (
   <>
     <Button
-      {...Object.assign({}, defaultProps, store)}
+      {...({ ...defaultProps, ...store })}
       onClick={!store.onClick ? () => {
         store.busy = !store.busy;
 
         window.setTimeout(() => {
           store.busy = !store.busy;
-        },                1000);
+        }, 1000);
       } : store.onClick}
     />
   </>
@@ -53,58 +51,69 @@ storiesOf('Button')
   .add('Secondary', () => (
     <WithStoreButton store={createStore({
       buttonType: 'secondary',
-    })} />
+    })}
+    />
   ))
   .add('Success', () => (
     <WithStoreButton store={createStore({
       buttonType: 'success',
-    })} />
+    })}
+    />
   ))
   .add('Warning', () => (
     <WithStoreButton store={createStore({
       buttonType: 'warning',
-    })} />
+    })}
+    />
   ))
   .add('Danger', () => (
     <WithStoreButton store={createStore({
       buttonType: 'danger',
-    })} />
+    })}
+    />
   ))
   .add('Inverted', () => (
     <WithStoreButton store={createStore({
       buttonType: 'inverted',
-    })} />
+    })}
+    />
   ))
   .add('Full width', () => (
     <WithStoreButton store={createStore({
       stretch: true,
-    })} />
+    })}
+    />
   ))
   .add('Disabled', () => (
     <WithStoreButton store={createStore({
       disabled: true,
-    })} />
+    })}
+    />
   ))
   .add('With loader', () => (
     <WithStoreButton store={createStore({
       busy: true,
-    })} />
+    })}
+    />
   ))
   .add('With icon', () => (
     <WithStoreButton store={createStore({
       icon: mdiInformation,
-    })} />
+    })}
+    />
   ))
   .add('As link', () => (
     <WithStoreButton store={createStore({
       href: 'https://meetfranz.com',
-    })} />
+    })}
+    />
   ))
   .add('As link (target=_blank)', () => (
     <WithStoreButton store={createStore({
       href: 'https://meetfranz.com',
       target: '_blank',
-    })} />
+    })}
+    />
   ))
   .add('As link (with onClick)', () => (
     <WithStoreButton store={createStore({
@@ -113,26 +122,27 @@ storiesOf('Button')
         e.preventDefault();
         alert('Click event');
       },
-    })}/>
+    })}
+    />
   ))
   .add('Long multi-line button', () => (
     <WithStoreButton store={createStore({
       label: 'But there is something that I must say to my people, who stand on the warm threshold which leads into the palace of justice: In the process of gaining our rightful place, we must not be guilty of wrongful deeds. Let us not seek to satisfy our thirst for freedom by drinking from the cup of bitterness and hatred. We must forever conduct our struggle on the high plane of dignity and discipline. We must not allow our creative protest to degenerate into physical violence. Again and again, we must rise to the majestic heights of meeting physical force with soul force.',
-    })} />
+    })}
+    />
   ))
   .add('Button with Input', injectSheet(styles)(observer(({ classes }: { classes: Classes }) => (
-      <div className={classes.combinedElements}>
-        <Input showLabel={false} className={classes.input} noMargin />
-        <WithStoreButton store={createStore({})} />
-      </div>
-    )),
-  ))
+    <div className={classes.combinedElements}>
+      <Input showLabel={false} className={classes.input} noMargin />
+      <WithStoreButton store={createStore({})} />
+    </div>
+    ))))
   .add('Icon Button with Input', injectSheet(styles)(observer(({ classes }: { classes: Classes }) => (
-      <div className={classes.combinedElements}>
-        <Input showLabel={false} className={classes.input} noMargin />
-        <WithStoreButton store={createStore({
+    <div className={classes.combinedElements}>
+      <Input showLabel={false} className={classes.input} noMargin />
+      <WithStoreButton store={createStore({
           icon: mdiInformation,
-        })} />
-      </div>
-    )),
-  ));
+        })}
+      />
+    </div>
+    ))));
diff --git a/uidev/src/stories/headline.stories.tsx b/uidev/src/stories/headline.stories.tsx
index f42771cae..320ac832f 100644
--- a/uidev/src/stories/headline.stories.tsx
+++ b/uidev/src/stories/headline.stories.tsx
@@ -1,7 +1,4 @@
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
 import React from 'react';
-import uuid from 'uuid/v4';
 
 import { H1, H2, H3, H4 } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
index b0416b844..fe4aaab06 100644
--- a/uidev/src/stories/infobox.stories.tsx
+++ b/uidev/src/stories/infobox.stories.tsx
@@ -14,14 +14,11 @@ interface IStoreArgs {
   className?: string;
 }
 
-const createStore = (args?: IStoreArgs) => {
-  return observable(Object.assign({
-    type: 'primary',
+const createStore = (args?: IStoreArgs) => observable({ type: 'primary',
     ctaOnClick: () => {
       alert('on click handler');
     },
-  },                              args));
-};
+...args });
 
 const WithStoreInfobox = observer(({ store, children }: { store: any, children: string | React.ReactNode }) => (
   <>
@@ -130,7 +127,8 @@ storiesOf('Infobox')
   .add('With className', () => (
     <WithStoreInfobox store={createStore({
       className: 'franz-is-awesome',
-    })}>
+    })}
+    >
       Welcome to the world of tomorrow
     </WithStoreInfobox>
   ));
diff --git a/uidev/src/stories/input.stories.tsx b/uidev/src/stories/input.stories.tsx
index af5e791d0..889539266 100644
--- a/uidev/src/stories/input.stories.tsx
+++ b/uidev/src/stories/input.stories.tsx
@@ -10,7 +10,7 @@ const defaultProps = () => {
     label: 'Label',
     id: `test-${id}`,
     name: `test-${id}`,
-    onChange: (e: React.ChangeEvent<HTMLInputElement>)  => console.log('changed event', e),
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e),
   };
 };
 
@@ -21,7 +21,7 @@ const defaultPasswordProps = () => {
     id: `test-${id}`,
     name: `test-${id}`,
     type: 'password',
-    onChange: (e: React.ChangeEvent<HTMLInputElement>)  => console.log('changed event', e),
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e),
   };
 };
 
diff --git a/uidev/src/stories/loader.stories.tsx b/uidev/src/stories/loader.stories.tsx
index 84e813c04..50eb7b9e1 100644
--- a/uidev/src/stories/loader.stories.tsx
+++ b/uidev/src/stories/loader.stories.tsx
@@ -1,7 +1,4 @@
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
 import React from 'react';
-import uuid from 'uuid/v4';
 
 import { Loader } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
diff --git a/uidev/src/stories/select.stories.tsx b/uidev/src/stories/select.stories.tsx
index 81f7f08a6..51ec6ed88 100644
--- a/uidev/src/stories/select.stories.tsx
+++ b/uidev/src/stories/select.stories.tsx
@@ -282,7 +282,7 @@ const defaultProps = () => {
     },
     actionText: 'Select country',
     // defaultValue: 'AT',
-    onChange: (e: React.ChangeEvent<HTMLInputElement>)  => console.log('changed event', e),
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e),
   };
 };
 
diff --git a/uidev/src/stories/textarea.stories.tsx b/uidev/src/stories/textarea.stories.tsx
index c2dd74e24..1ab21820b 100644
--- a/uidev/src/stories/textarea.stories.tsx
+++ b/uidev/src/stories/textarea.stories.tsx
@@ -11,7 +11,7 @@ const defaultProps = () => {
     id: `test-${id}`,
     name: `test-${id}`,
     rows: 5,
-    onChange: (e: React.ChangeEvent<HTMLInputElement>)  => console.log('changed event', e),
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log('changed event', e),
   };
 };
 
diff --git a/uidev/src/stories/toggle.stories.tsx b/uidev/src/stories/toggle.stories.tsx
index 091342496..af6b282bc 100644
--- a/uidev/src/stories/toggle.stories.tsx
+++ b/uidev/src/stories/toggle.stories.tsx
@@ -16,17 +16,14 @@ interface IStoreArgs {
   error?: string;
 }
 
-const createStore = (args?: IStoreArgs) => {
-  return observable(Object.assign({
-    id: `element-${uuid()}`,
+const createStore = (args?: IStoreArgs) => observable({ id: `element-${uuid()}`,
     name: 'toggle',
     label: 'Label',
     value: true,
     checked: false,
     disabled: false,
     error: '',
-  },                              args));
-};
+...args });
 
 const WithStoreToggle = observer(({ store }: { store: any }) => (
   <>
@@ -50,21 +47,25 @@ storiesOf('Toggle')
   .add('Checked', () => (
     <WithStoreToggle store={createStore({
       checked: true,
-    })} />
+    })}
+    />
   ))
   .add('Disabled', () => (
     <WithStoreToggle store={createStore({
       checked: true,
       disabled: true,
-    })} />
+    })}
+    />
   ))
   .add('Long label', () => (
     <WithStoreToggle store={createStore({
       label: 'Hello world, this is an insanely long label for this toggle. We need to make sure that it will be displayed correctly.',
-    })} />
+    })}
+    />
   ))
   .add('With error', () => (
     <WithStoreToggle store={createStore({
       error: 'Something went wrong',
-    })} />
+    })}
+    />
   ));
diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx
index 17a1074d3..4ef649367 100644
--- a/uidev/src/withTheme/index.tsx
+++ b/uidev/src/withTheme/index.tsx
@@ -37,14 +37,12 @@ const Container = injectSheet(styles)(({ name, classes, story }: { name: string,
   </article>
 ));
 
-export const WithTheme = ({ children }: {children: React.ReactChild}) => {
-  return (
-      <>
-        {themes.map((theme, key) => (
-          <ThemeProvider key={key} theme={theme.variables}>
-            <Container story={children} name={theme.name} />
-          </ThemeProvider>
+export const WithTheme = ({ children }: { children: React.ReactChild }) => (
+  <>
+    {themes.map((theme, key) => (
+      <ThemeProvider key={key} theme={theme.variables}>
+        <Container story={children} name={theme.name} />
+      </ThemeProvider>
         ))}
-      </>
+  </>
   );
-};
diff --git a/uidev/tslint.json b/uidev/tslint.json
deleted file mode 100644
index ec365f164..000000000
--- a/uidev/tslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../tslint.json"
-}
-- 
cgit v1.2.3-70-g09d2


From 97d51a7763b14c92ee71ff9a012311dd9498d803 Mon Sep 17 00:00:00 2001
From: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>
Date: Sun, 8 Aug 2021 00:01:37 +0000
Subject: refactor: path-references refactoring and using 'import' instead of
 'require' (#1752)

* refactor references to 'userData' and 'appData' directories to move hardcoding into single location
* convert to es6 for lower memory usage as per https://codesource.io/the-difference-between-import-and-require-in-javascript/
---
 src/api/server/ServerApi.js                        | 50 +++++++++-------------
 src/components/services/content/ServiceWebview.js  |  4 +-
 src/components/services/tabs/TabBarSortableList.js |  9 ----
 src/containers/settings/RecipesScreen.js           | 12 +++---
 src/electron/Settings.js                           |  6 +--
 src/electron/ipc-api/appIndicator.js               |  4 +-
 src/electron/ipc-api/download.js                   |  4 +-
 src/electron/ipc-api/localServer.js                |  5 ++-
 src/electron/macOSPermissions.js                   | 46 +++++++++++---------
 src/electron/webview-ime-focus.js                  |  4 +-
 src/environment.js                                 | 25 +++++++----
 src/helpers/recipe-helpers.js                      | 11 +++--
 src/helpers/service-helpers.js                     | 16 +++----
 src/helpers/userAgent-helpers.js                   |  5 +--
 src/index.js                                       | 14 +++---
 src/internal-server/start.js                       |  4 +-
 src/lib/Tray.js                                    |  4 +-
 src/models/Recipe.js                               |  6 +--
 src/models/Service.js                              |  4 +-
 src/scripts/add-crowdin-contributors.js            |  2 +-
 src/scripts/build-theme-info.js                    |  4 +-
 src/scripts/link-readme.js                         |  2 +-
 src/stores/AppStore.js                             |  6 +--
 src/stores/RecipesStore.js                         |  9 ++--
 src/stores/ServicesStore.js                        | 21 +++++----
 src/webview/darkmode.js                            | 10 ++---
 src/webview/lib/RecipeWebview.js                   |  8 ++--
 src/webview/recipe.js                              | 20 ++++-----
 28 files changed, 149 insertions(+), 166 deletions(-)

(limited to 'src/components/services')

diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index f91aeb23a..2111eb80b 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -1,6 +1,6 @@
-import path from 'path';
+import { join } from 'path';
 import tar from 'tar';
-import fs from 'fs-extra';
+import { readdirSync, statSync, writeFileSync, copySync, ensureDirSync, pathExistsSync, readJsonSync, removeSync } from 'fs-extra';
 import { app, require as remoteRequire } from '@electron/remote';
 
 import ServiceModel from '../../models/Service';
@@ -13,7 +13,7 @@ import OrderModel from '../../models/Order';
 import { sleep } from '../../helpers/async-helpers';
 
 import { SERVER_NOT_LOADED } from '../../config';
-import { osArch, osPlatform, RECIPES_PATH } from '../../environment';
+import { osArch, osPlatform, asarRecipesPath, userDataRecipesPath, userDataPath } from '../../environment';
 import apiBase from '../apiBase';
 import { prepareAuthRequest, sendAuthRequest } from '../utils/auth';
 
@@ -311,11 +311,10 @@ export default class ServerApi {
   // Recipes
   async getInstalledRecipes() {
     const recipesDirectory = getRecipeDirectory();
-    const paths = fs
-      .readdirSync(recipesDirectory)
+    const paths = readdirSync(recipesDirectory)
       .filter(
         file =>
-          fs.statSync(path.join(recipesDirectory, file)).isDirectory() &&
+          statSync(join(recipesDirectory, file)).isDirectory() &&
           file !== 'temp' &&
           file !== 'dev',
       );
@@ -381,17 +380,17 @@ export default class ServerApi {
 
   async getRecipePackage(recipeId) {
     try {
-      const recipesDirectory = path.join(app.getPath('userData'), 'recipes');
-      const recipeTempDirectory = path.join(recipesDirectory, 'temp', recipeId);
-      const tempArchivePath = path.join(recipeTempDirectory, 'recipe.tar.gz');
+      const recipesDirectory = userDataRecipesPath();
+      const recipeTempDirectory = join(recipesDirectory, 'temp', recipeId);
+      const tempArchivePath = join(recipeTempDirectory, 'recipe.tar.gz');
 
-      const internalRecipeFile = path.join(RECIPES_PATH, `${recipeId}.tar.gz`);
+      const internalRecipeFile = asarRecipesPath(`${recipeId}.tar.gz`);
 
-      fs.ensureDirSync(recipeTempDirectory);
+      ensureDirSync(recipeTempDirectory);
 
       let archivePath;
 
-      if (fs.existsSync(internalRecipeFile)) {
+      if (pathExistsSync(internalRecipeFile)) {
         debug('[ServerApi::getRecipePackage] Using internal recipe file');
         archivePath = internalRecipeFile;
       } else {
@@ -403,7 +402,7 @@ export default class ServerApi {
         const res = await fetch(packageUrl);
         debug('Recipe downloaded', recipeId);
         const buffer = await res.buffer();
-        fs.writeFileSync(archivePath, buffer);
+        writeFileSync(archivePath, buffer);
       }
       debug(archivePath);
 
@@ -420,13 +419,11 @@ export default class ServerApi {
 
       await sleep(10);
 
-      const { id } = fs.readJsonSync(
-        path.join(recipeTempDirectory, 'package.json'),
-      );
-      const recipeDirectory = path.join(recipesDirectory, id);
-      fs.copySync(recipeTempDirectory, recipeDirectory);
-      fs.remove(recipeTempDirectory);
-      fs.remove(path.join(recipesDirectory, recipeId, 'recipe.tar.gz'));
+      const { id } = readJsonSync(join(recipeTempDirectory, 'package.json'));
+      const recipeDirectory = join(recipesDirectory, id);
+      copySync(recipeTempDirectory, recipeDirectory);
+      removeSync(recipeTempDirectory);
+      removeSync(join(recipesDirectory, recipeId, 'recipe.tar.gz'));
 
       return id;
     } catch (err) {
@@ -475,14 +472,10 @@ export default class ServerApi {
   }
 
   async getLegacyServices() {
-    const file = path.join(
-      app.getPath('userData'),
-      'settings',
-      'services.json',
-    );
+    const file = userDataPath('settings', 'services.json');
 
     try {
-      const config = fs.readJsonSync(file);
+      const config = readJsonSync(file);
 
       if (Object.prototype.hasOwnProperty.call(config, 'services')) {
         const services = await Promise.all(
@@ -614,11 +607,10 @@ export default class ServerApi {
   _getDevRecipes() {
     const recipesDirectory = getDevRecipeDirectory();
     try {
-      const paths = fs
-        .readdirSync(recipesDirectory)
+      const paths = readdirSync(recipesDirectory)
         .filter(
           file =>
-            fs.statSync(path.join(recipesDirectory, file)).isDirectory() &&
+            statSync(join(recipesDirectory, file)).isDirectory() &&
             file !== 'temp',
         );
 
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 4edbde5e2..3b499a5db 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { observable, reaction } from 'mobx';
 import ElectronWebView from 'react-electron-web-view';
-import path from 'path';
+import { join } from 'path';
 
 import ServiceModel from '../../../models/Service';
 
@@ -59,7 +59,7 @@ class ServiceWebview extends Component {
       isSpellcheckerEnabled,
     } = this.props;
 
-    const preloadScript = path.join(__dirname, '../../../', 'webview', 'recipe.js');
+    const preloadScript = join(__dirname, '..', '..', '..', 'webview', 'recipe.js');
 
     return (
       <ElectronWebView
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index f12d90602..117d799d7 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -64,15 +64,6 @@ class TabBarSortableList extends Component {
             showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
           />
         ))}
-        {/* <li>
-          <button
-            className="sidebar__add-service"
-            onClick={() => openSettings({ path: 'recipes' })}
-            data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
-          >
-            <span className="mdi mdi-plus" />
-          </button>
-        </li> */}
       </ul>
     );
   }
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index 93503fb0e..ff3c688fa 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -1,11 +1,9 @@
 import { shell } from 'electron';
-import { app } from '@electron/remote';
-import fs from 'fs-extra';
+import { ensureDirSync, readJsonSync } from 'fs-extra';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { inject, observer } from 'mobx-react';
-import path from 'path';
 
 import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 import RecipeStore from '../../stores/RecipesStore';
@@ -15,7 +13,7 @@ import UserStore from '../../stores/UserStore';
 import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 import { CUSTOM_WEBSITE_RECIPE_ID, FRANZ_DEV_DOCS } from '../../config';
-import { RECIPES_PATH } from '../../environment';
+import { asarRecipesPath, userDataRecipesPath } from '../../environment';
 import { communityRecipesStore } from '../../features/communityRecipes';
 import RecipePreview from '../../models/RecipePreview';
 import AppStore from '../../stores/AppStore';
@@ -45,7 +43,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
   constructor(props) {
     super(props);
 
-    this.customRecipes = fs.readJsonSync(path.join(RECIPES_PATH, 'all.json'));
+    this.customRecipes = readJsonSync(asarRecipesPath('all.json'));
   }
 
   componentDidMount() {
@@ -140,7 +138,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
       || recipes.installRecipeRequest.isExecuting
       || recipePreviews.searchRecipePreviewsRequest.isExecuting;
 
-    const recipeDirectory = path.join(app.getPath('userData'), 'recipes', 'dev');
+    const recipeDirectory = userDataRecipesPath('dev');
 
     return (
       <ErrorBoundary>
@@ -157,7 +155,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
           recipeFilter={filter}
           recipeDirectory={recipeDirectory}
           openRecipeDirectory={async () => {
-            await fs.ensureDir(recipeDirectory);
+            ensureDirSync(recipeDirectory);
             shell.openExternal(`file://${recipeDirectory}`);
           }}
           openDevDocs={() => {
diff --git a/src/electron/Settings.js b/src/electron/Settings.js
index 2f3f8261a..4dd9f8245 100644
--- a/src/electron/Settings.js
+++ b/src/electron/Settings.js
@@ -1,8 +1,6 @@
 import { observable, toJS } from 'mobx';
 import { pathExistsSync, outputJsonSync, readJsonSync } from 'fs-extra';
-import path from 'path';
-
-import { SETTINGS_PATH } from '../environment';
+import { userDataPath } from '../environment';
 
 const debug = require('debug')('Ferdi:Settings');
 
@@ -58,6 +56,6 @@ export default class Settings {
   }
 
   get settingsFile() {
-    return path.join(SETTINGS_PATH, `${this.type === 'app' ? 'settings' : this.type}.json`);
+    return userDataPath('config', `${this.type === 'app' ? 'settings' : this.type}.json`);
   }
 }
diff --git a/src/electron/ipc-api/appIndicator.js b/src/electron/ipc-api/appIndicator.js
index 0691e5170..c6c261d0f 100644
--- a/src/electron/ipc-api/appIndicator.js
+++ b/src/electron/ipc-api/appIndicator.js
@@ -1,5 +1,5 @@
 import { app, ipcMain } from 'electron';
-import path from 'path';
+import { join } from 'path';
 import { autorun } from 'mobx';
 import { isMac, isWindows, isLinux } from '../../environment';
 
@@ -9,7 +9,7 @@ const FILE_EXTENSION = isWindows ? 'ico' : 'png';
 let isTrayIconEnabled;
 
 function getAsset(type, asset) {
-  return path.join(
+  return join(
     __dirname, '..', '..', 'assets', 'images', type, process.platform, `${asset}.${FILE_EXTENSION}`,
   );
 }
diff --git a/src/electron/ipc-api/download.js b/src/electron/ipc-api/download.js
index 7f8718924..ba261ba1e 100644
--- a/src/electron/ipc-api/download.js
+++ b/src/electron/ipc-api/download.js
@@ -1,7 +1,7 @@
 import { ipcMain, dialog, BrowserWindow } from 'electron';
 import { download } from 'electron-dl';
 import mime from 'mime-types';
-import fs from 'fs-extra';
+import { writeFileSync } from 'fs-extra';
 
 const debug = require('debug')('Ferdi:ipcApi:download');
 
@@ -37,7 +37,7 @@ export default (params) => {
           if (saveDialog.canceled) return;
 
           const binaryImage = decodeBase64Image(content);
-          fs.writeFileSync(saveDialog.filePath, binaryImage, 'binary');
+          writeFileSync(saveDialog.filePath, binaryImage, 'binary');
 
           debug('File blob saved to', saveDialog.filePath);
         } catch (err) {
diff --git a/src/electron/ipc-api/localServer.js b/src/electron/ipc-api/localServer.js
index 493253e17..1ed4b7167 100644
--- a/src/electron/ipc-api/localServer.js
+++ b/src/electron/ipc-api/localServer.js
@@ -1,6 +1,7 @@
-import { ipcMain, app } from 'electron';
+import { ipcMain } from 'electron';
 import net from 'net';
 import { LOCAL_HOSTNAME } from '../../config';
+import { userDataPath } from '../../environment';
 import startServer from '../../internal-server/start';
 
 const DEFAULT_PORT = 45569;
@@ -37,7 +38,7 @@ export default (params) => {
         }
         console.log('Starting local server on port', port);
 
-        startServer(app.getPath('userData'), port);
+        startServer(userDataPath(), port);
 
         params.mainWindow.webContents.send('localServerPort', {
           port,
diff --git a/src/electron/macOSPermissions.js b/src/electron/macOSPermissions.js
index c114f4843..887af2903 100644
--- a/src/electron/macOSPermissions.js
+++ b/src/electron/macOSPermissions.js
@@ -1,45 +1,43 @@
-import { app, systemPreferences, dialog } from 'electron';
-import fs from 'fs';
+import { systemPreferences, dialog } from 'electron';
+import { pathExistsSync, mkdirSync, writeFileSync } from 'fs-extra';
 import macosVersion from 'macos-version';
-import path from 'path';
+import { dirname } from 'path';
 import { askForScreenCaptureAccess } from 'node-mac-permissions';
+import { userDataPath } from '../environment';
 
 const debug = require('debug')('Ferdi:macOSPermissions');
 
-const permissionExists = macosVersion.isGreaterThanOrEqualTo('10.15');
-const filePath = path.join(
-  app.getPath('userData'),
-  '.has-app-requested-screen-capture-permissions',
-);
+const isExplicitScreenCapturePermissionReqd = macosVersion.isGreaterThanOrEqualTo('10.15');
+debug(`Should check explicitly for screen-capture permissions: ${isExplicitScreenCapturePermissionReqd}`);
 
-function hasPromptedForPermission() {
-  if (!permissionExists) {
-    return false;
-  }
+const filePath = userDataPath('.has-app-requested-screen-capture-permissions');
 
-  if (filePath && fs.existsSync(filePath)) {
-    return true;
+function hasPromptedForScreenCapturePermission() {
+  if (!isExplicitScreenCapturePermissionReqd) {
+    return false;
   }
 
-  return false;
+  debug('Checking if status file exists');
+  return filePath && pathExistsSync(filePath);
 }
 
-function hasScreenCapturePermission() {
-  if (!permissionExists) {
+function hasScreenCapturePermissionAlreadyBeenGranted() {
+  if (!isExplicitScreenCapturePermissionReqd) {
     return true;
   }
 
   const screenCaptureStatus = systemPreferences.getMediaAccessStatus('screen');
+  debug(`screen-capture permissions status: ${screenCaptureStatus}`);
   return screenCaptureStatus === 'granted';
 }
 
 function createStatusFile() {
   try {
-    fs.writeFileSync(filePath, '');
+    writeFileSync(filePath, '');
   } catch (error) {
     if (error.code === 'ENOENT') {
-      fs.mkdirSync(path.dirname(filePath));
-      fs.writeFileSync(filePath, '');
+      mkdirSync(dirname(filePath));
+      writeFileSync(filePath, '');
     }
 
     throw error;
@@ -51,7 +49,13 @@ export const askFormacOSPermissions = async mainWindow => {
   systemPreferences.askForMediaAccess('camera');
   systemPreferences.askForMediaAccess('microphone');
 
-  if (!hasPromptedForPermission() && !hasScreenCapturePermission()) {
+  if (hasScreenCapturePermissionAlreadyBeenGranted()) {
+    debug('Already obtained screen-capture permissions - writing status file');
+    createStatusFile();
+    return;
+  }
+
+  if (!hasPromptedForScreenCapturePermission()) {
     debug('Checking screen capture permissions');
 
     const { response } = await dialog.showMessageBox(mainWindow, {
diff --git a/src/electron/webview-ime-focus.js b/src/electron/webview-ime-focus.js
index b9421eb06..e187ee0b4 100644
--- a/src/electron/webview-ime-focus.js
+++ b/src/electron/webview-ime-focus.js
@@ -1,5 +1,5 @@
-const { webContents } = require('@electron/remote');
-const { releaseDocumentFocus } = require('./webview-ime-focus-helpers');
+import { webContents } from '@electron/remote';
+import { releaseDocumentFocus } from './webview-ime-focus-helpers';
 
 function giveWebviewDocumentFocus(element) {
   releaseDocumentFocus();
diff --git a/src/environment.js b/src/environment.js
index 7b560acb6..7267f93a6 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -1,10 +1,11 @@
 import os from 'os';
-import path from 'path';
+import { join } from 'path';
 
 import { is, api as electronApi } from 'electron-util';
 
 import { DEFAULT_ACCENT_COLOR } from '@meetfranz/theme';
 
+import osName from 'os-name';
 import {
   LIVE_FERDI_API,
   DEV_FRANZ_API,
@@ -25,8 +26,6 @@ import {
 import { asarPath } from './helpers/asar-helpers';
 import * as buildInfo from './buildInfo.json'; // eslint-disable-line import/no-unresolved
 
-const osName = require('os-name');
-
 export const { app } = electronApi;
 export const ferdiVersion = app.getVersion();
 export const electronVersion = process.versions.electron;
@@ -36,24 +35,32 @@ export const nodeVersion = process.versions.node;
 // Set app directory before loading user modules
 if (process.env.FERDI_APPDATA_DIR != null) {
   app.setPath('appData', process.env.FERDI_APPDATA_DIR);
-  app.setPath('userData', path.join(app.getPath('appData')));
+  app.setPath('userData', join(app.getPath('appData')));
 } else if (process.env.PORTABLE_EXECUTABLE_DIR != null) {
   app.setPath('appData', process.env.PORTABLE_EXECUTABLE_DIR, `${app.name}AppData`);
-  app.setPath('userData', path.join(app.getPath('appData'), `${app.name}AppData`));
+  app.setPath('userData', join(app.getPath('appData'), `${app.name}AppData`));
 } else if (is.windows) {
   app.setPath('appData', process.env.APPDATA);
-  app.setPath('userData', path.join(app.getPath('appData'), app.name));
+  app.setPath('userData', join(app.getPath('appData'), app.name));
 }
 
 export const isDevMode = is.development;
 if (isDevMode) {
-  app.setPath('userData', path.join(app.getPath('appData'), `${app.name}Dev`));
+  app.setPath('userData', join(app.getPath('appData'), `${app.name}Dev`));
 }
 
-export const SETTINGS_PATH = path.join(app.getPath('userData'), 'config');
+export function userDataPath(...segments) {
+  return join(app.getPath('userData'), ...([segments].flat()));
+}
+
+export function userDataRecipesPath(...segments) {
+  return userDataPath('recipes', ...([segments].flat()));
+}
 
 // Replacing app.asar is not beautiful but unfortunately necessary
-export const RECIPES_PATH = asarPath(path.join(__dirname, 'recipes'));
+export function asarRecipesPath(...segments) {
+  return join(asarPath(join(__dirname, 'recipes')), ...([segments].flat()));
+}
 
 export const useLiveAPI = process.env.USE_LIVE_API;
 const useLocalAPI = process.env.USE_LOCAL_API;
diff --git a/src/helpers/recipe-helpers.js b/src/helpers/recipe-helpers.js
index 7daa0aaab..7e4bfa85a 100644
--- a/src/helpers/recipe-helpers.js
+++ b/src/helpers/recipe-helpers.js
@@ -1,12 +1,12 @@
-import path from 'path';
-import { app } from '@electron/remote';
+import { parse } from 'path';
+import { userDataRecipesPath } from '../environment';
 
 export function getRecipeDirectory(id = '') {
-  return path.join(app.getPath('userData'), 'recipes', id);
+  return userDataRecipesPath(id);
 }
 
 export function getDevRecipeDirectory(id = '') {
-  return path.join(app.getPath('userData'), 'recipes', 'dev', id);
+  return userDataRecipesPath('dev', id);
 }
 
 export function loadRecipeConfig(recipeId) {
@@ -19,8 +19,7 @@ export function loadRecipeConfig(recipeId) {
     let config = require(configPath);
 
     const moduleConfigPath = require.resolve(configPath);
-    const paths = path.parse(moduleConfigPath);
-    config.path = paths.dir;
+    config.path = parse(moduleConfigPath).dir;
 
     return config;
   } catch (e) {
diff --git a/src/helpers/service-helpers.js b/src/helpers/service-helpers.js
index 28d483182..745f40dd9 100644
--- a/src/helpers/service-helpers.js
+++ b/src/helpers/service-helpers.js
@@ -1,18 +1,16 @@
-import path from 'path';
-import { app } from '@electron/remote';
-import fs from 'fs-extra';
+import { readdirSync, removeSync } from 'fs-extra';
+import { userDataPath } from '../environment';
 
-export function getServicePartitionsDirectory() {
-  return path.join(app.getPath('userData'), 'Partitions');
+export function getServicePartitionsDirectory(...segments) {
+  return userDataPath('Partitions', ...([segments].flat()));
 }
 
 export function removeServicePartitionDirectory(id = '', addServicePrefix = false) {
-  const servicePartition = path.join(getServicePartitionsDirectory(), `${addServicePrefix ? 'service-' : ''}${id}`);
-
-  return fs.remove(servicePartition);
+  const servicePartition = getServicePartitionsDirectory(`${addServicePrefix ? 'service-' : ''}${id}`);
+  return removeSync(servicePartition);
 }
 
 export async function getServiceIdsFromPartitions() {
-  const files = await fs.readdir(getServicePartitionsDirectory());
+  const files = readdirSync(getServicePartitionsDirectory());
   return files.filter((n) => n !== '__chrome_extension');
 }
diff --git a/src/helpers/userAgent-helpers.js b/src/helpers/userAgent-helpers.js
index 9c9c8f132..ede5e6dc4 100644
--- a/src/helpers/userAgent-helpers.js
+++ b/src/helpers/userAgent-helpers.js
@@ -1,11 +1,10 @@
 import os from 'os';
 import macosVersion from 'macos-version';
+import { chrome } from 'useragent-generator';
 import {
   chromeVersion, isMac, isWindows, is64Bit, osArch, osRelease,
 } from '../environment';
 
-const uaGenerator = require('useragent-generator');
-
 function macOS() {
   const version = macosVersion();
   let cpuName = os.cpus()[0].model.split(' ')[0];
@@ -38,5 +37,5 @@ export default function userAgent() {
     platformString = linux();
   }
 
-  return uaGenerator.chrome({ os: platformString, version: chromeVersion });
+  return chrome({ os: platformString, version: chromeVersion });
 }
diff --git a/src/index.js b/src/index.js
index 78ab9bef2..3264fdc63 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,8 +2,8 @@
 
 import { app, BrowserWindow, shell, ipcMain, session } from 'electron';
 
-import fs from 'fs-extra';
-import path from 'path';
+import { emptyDirSync, ensureFileSync } from 'fs-extra';
+import { join } from 'path';
 import windowStateKeeper from 'electron-window-state';
 import { enforceMacOSAppLocation } from 'electron-util';
 import ms from 'ms';
@@ -19,6 +19,8 @@ import {
   isWindows,
   isLinux,
   aboutAppDetails,
+  userDataRecipesPath,
+  userDataPath,
 } from './environment';
 
 import { mainIpcHandler as basicAuthHandler } from './features/basicAuth';
@@ -63,8 +65,8 @@ function onDidLoad(fn) {
 }
 
 // Ensure that the recipe directory exists
-fs.emptyDirSync(path.join(app.getPath('userData'), 'recipes', 'temp'));
-fs.ensureFileSync(path.join(app.getPath('userData'), 'window-state.json'));
+emptyDirSync(userDataRecipesPath('temp'));
+ensureFileSync(userDataPath('window-state.json'));
 
 // Set App ID for Windows
 if (isWindows) {
@@ -193,7 +195,7 @@ const createWindow = () => {
       nodeIntegration: true,
       contextIsolation: false,
       webviewTag: true,
-      preload: path.join(__dirname, 'sentry.js'),
+      preload: join(__dirname, 'sentry.js'),
       enableRemoteModule: true,
     },
   });
@@ -401,7 +403,7 @@ app.on('ready', () => {
         program: process.execPath,
         arguments: `${isDevMode ? `${__dirname} ` : ''}--reset-window`,
         iconPath: asarPath(
-          path.join(
+          join(
             isDevMode ? `${__dirname}../src/` : __dirname,
             'assets/images/taskbar/win32/display.ico',
           ),
diff --git a/src/internal-server/start.js b/src/internal-server/start.js
index cb8ef56c8..5ccc1330e 100644
--- a/src/internal-server/start.js
+++ b/src/internal-server/start.js
@@ -18,9 +18,9 @@
 const fold = require('@adonisjs/fold');
 const { Ignitor } = require('@adonisjs/ignitor');
 const fs = require('fs-extra');
-const os = require('os');
 const path = require('path');
 const { LOCAL_HOSTNAME } = require('../config');
+const { isWindows } = require('../environment');
 
 process.env.ENV_PATH = path.join(__dirname, 'env.ini');
 
@@ -35,7 +35,7 @@ module.exports = async (userPath, port) => {
     await fs.writeFile(dbPath, dbTemplate);
 
     // Change permissions to ensure to file is not read-only
-    if (os.platform() === 'win32') {
+    if (isWindows) {
       // eslint-disable-next-line no-bitwise
       fs.chmodSync(dbPath, fs.statSync(dbPath).mode | 146);
     }
diff --git a/src/lib/Tray.js b/src/lib/Tray.js
index f37b4eb7b..f5970f7e7 100644
--- a/src/lib/Tray.js
+++ b/src/lib/Tray.js
@@ -1,7 +1,7 @@
 import {
   app, Menu, nativeImage, nativeTheme, systemPreferences, Tray, ipcMain,
 } from 'electron';
-import path from 'path';
+import { join } from 'path';
 import macosVersion from 'macos-version';
 import { isMac, isWindows, isLinux } from '../environment';
 
@@ -174,7 +174,7 @@ export default class TrayIcon {
       platform = `${platform}-dark`;
     }
 
-    return nativeImage.createFromPath(path.join(
+    return nativeImage.createFromPath(join(
       __dirname, '..', 'assets', 'images', type, platform, `${asset}.${FILE_EXTENSION}`,
     ));
   }
diff --git a/src/models/Recipe.js b/src/models/Recipe.js
index 106b4a56a..92ff0d67d 100644
--- a/src/models/Recipe.js
+++ b/src/models/Recipe.js
@@ -1,7 +1,7 @@
 import emailParser from 'address-rfc2822';
 import semver from 'semver';
-import fs from 'fs-extra';
-import path from 'path';
+import { pathExistsSync } from 'fs-extra';
+import { join } from 'path';
 
 export default class Recipe {
   id = '';
@@ -98,6 +98,6 @@ export default class Recipe {
   }
 
   get hasDarkMode() {
-    return fs.pathExistsSync(path.join(this.path, 'darkmode.css'));
+    return pathExistsSync(join(this.path, 'darkmode.css'));
   }
 }
diff --git a/src/models/Service.js b/src/models/Service.js
index 79181186a..fe56e5a76 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -2,7 +2,7 @@ import { autorun, computed, observable } from 'mobx';
 import { ipcRenderer } from 'electron';
 import { webContents } from '@electron/remote';
 import normalizeUrl from 'normalize-url';
-import path from 'path';
+import { join } from 'path';
 
 import { todosStore } from '../features/todos';
 import { isValidExternalURL } from '../helpers/url-helpers';
@@ -230,7 +230,7 @@ export default class Service {
       return this.iconUrl;
     }
 
-    return path.join(this.recipe.path, 'icon.svg');
+    return join(this.recipe.path, 'icon.svg');
   }
 
   @computed get hasCustomIcon() {
diff --git a/src/scripts/add-crowdin-contributors.js b/src/scripts/add-crowdin-contributors.js
index efe981b6e..ed29a0daf 100644
--- a/src/scripts/add-crowdin-contributors.js
+++ b/src/scripts/add-crowdin-contributors.js
@@ -58,7 +58,7 @@ const fs = require('fs-extra');
 const path = require('path');
 const allContributors = require('all-contributors-cli');
 
-const infoPath = path.join(__dirname, '../../.all-contributorsrc');
+const infoPath = path.join(__dirname, '..', '..', '.all-contributorsrc');
 
 (async () => {
   const info = await fs.readJSON(infoPath);
diff --git a/src/scripts/build-theme-info.js b/src/scripts/build-theme-info.js
index cff33e3c4..4058be942 100644
--- a/src/scripts/build-theme-info.js
+++ b/src/scripts/build-theme-info.js
@@ -15,8 +15,8 @@ const accentColors = [
   '#5e50ee',
 ];
 
-const cssFile = path.join(__dirname, '../../', 'build', 'styles', 'main.css');
-const outputFile = path.join(__dirname, '../', 'assets', 'themeInfo.json');
+const cssFile = path.join(__dirname, '..', '..', 'build', 'styles', 'main.css');
+const outputFile = path.join(__dirname, '..', 'assets', 'themeInfo.json');
 
 // Parse and extract the rules from a CSS stylesheet file
 async function getRulesFromCssFile(file) {
diff --git a/src/scripts/link-readme.js b/src/scripts/link-readme.js
index 694b89700..1e47cddf8 100644
--- a/src/scripts/link-readme.js
+++ b/src/scripts/link-readme.js
@@ -11,7 +11,7 @@ const path = require('path');
 
 console.log('Linking issues and PRs in README.md');
 
-const readmepath = path.join(__dirname, '../../', 'README.md');
+const readmepath = path.join(__dirname, '..', '..', 'README.md');
 
 // Read README.md
 let readme = fs.readFileSync(readmepath, 'utf-8');
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 6b5ca7c9a..1d706f1ef 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -12,7 +12,6 @@ import moment from 'moment';
 import AutoLaunch from 'auto-launch';
 import ms from 'ms';
 import { URL } from 'url';
-import path from 'path';
 import { readJsonSync } from 'fs-extra';
 
 import Store from './lib/Store';
@@ -24,6 +23,7 @@ import {
   ferdiVersion,
   electronVersion,
   osRelease,
+  userDataPath,
 } from '../environment';
 import locales from '../i18n/translations';
 import { onVisibilityChange } from '../helpers/visibility-helper';
@@ -307,9 +307,7 @@ export default class AppStore extends Store {
           id: workspace.id,
           services: workspace.services,
         })),
-        windowSettings: readJsonSync(
-          path.join(app.getPath('userData'), 'window-state.json'),
-        ),
+        windowSettings: readJsonSync(userDataPath('window-state.json')),
         settings,
         features: this.stores.features.features,
         user: this.stores.user.data.id,
diff --git a/src/stores/RecipesStore.js b/src/stores/RecipesStore.js
index c7c4c1deb..d2acebb75 100644
--- a/src/stores/RecipesStore.js
+++ b/src/stores/RecipesStore.js
@@ -1,13 +1,12 @@
 import { action, computed, observable } from 'mobx';
-import fs from 'fs-extra';
-import path from 'path';
+import { readJSONSync } from 'fs-extra';
 import semver from 'semver';
 
 import Store from './lib/Store';
 import CachedRequest from './lib/CachedRequest';
 import Request from './lib/Request';
 import { matchRoute } from '../helpers/routing-helpers';
-import { RECIPES_PATH } from '../environment';
+import { asarRecipesPath } from '../environment';
 
 const debug = require('debug')('Ferdi:RecipeStore');
 
@@ -90,8 +89,8 @@ export default class RecipesStore extends Store {
     const remoteUpdates = await this.getRecipeUpdatesRequest.execute(recipes)._promise;
 
     // Check for local updates
-    const allJsonFile = path.join(RECIPES_PATH, 'all.json');
-    const allJson = await fs.readJSON(allJsonFile);
+    const allJsonFile = asarRecipesPath('all.json');
+    const allJson = readJSONSync(allJsonFile);
     const localUpdates = [];
 
     Object.keys(recipes).forEach((recipe) => {
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 829797930..499495d08 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -3,8 +3,8 @@ import { action, reaction, computed, observable } from 'mobx';
 import { debounce, remove } from 'lodash';
 import ms from 'ms';
 import { app } from '@electron/remote';
-import fs from 'fs-extra';
-import path from 'path';
+import { ensureFileSync, pathExistsSync, writeFileSync } from 'fs-extra';
+import { join } from 'path';
 
 import Store from './lib/Store';
 import Request from './lib/Request';
@@ -524,9 +524,9 @@ export default class ServicesStore extends Store {
     const devDirectory = getDevRecipeDirectory(recipe);
     let directory;
 
-    if (await fs.pathExists(normalDirectory)) {
+    if (pathExistsSync(normalDirectory)) {
       directory = normalDirectory;
-    } else if (await fs.pathExists(devDirectory)) {
+    } else if (pathExistsSync(devDirectory)) {
       directory = devDirectory;
     } else {
       // Recipe cannot be found on drive
@@ -534,20 +534,19 @@ export default class ServicesStore extends Store {
     }
 
     // Create and open file
-    const filePath = path.join(directory, file);
+    const filePath = join(directory, file);
     if (file === 'user.js') {
-      if (!fs.existsSync(filePath)) {
-        await fs.writeFile(
+      if (!pathExistsSync(filePath)) {
+        writeFileSync(
           filePath,
           `module.exports = (config, Ferdi) => {
   // Write your scripts here
   console.log("Hello, World!", config);
-}
-`,
-        );
+};
+`);
       }
     } else {
-      await fs.ensureFile(filePath);
+      ensureFileSync(filePath);
     }
     shell.showItemInFolder(filePath);
   }
diff --git a/src/webview/darkmode.js b/src/webview/darkmode.js
index ab629435c..7435d6404 100644
--- a/src/webview/darkmode.js
+++ b/src/webview/darkmode.js
@@ -1,7 +1,7 @@
 /* eslint no-bitwise: ["error", { "int32Hint": true }] */
 
-import path from 'path';
-import fs from 'fs-extra';
+import { join } from 'path';
+import { pathExistsSync, readFileSync } from 'fs-extra';
 
 const debug = require('debug')('Ferdi:DarkMode');
 
@@ -10,9 +10,9 @@ const chars = [...'abcdefghijklmnopqrstuvwxyz'];
 const ID = [...Array(20)].map(() => chars[Math.random() * chars.length | 0]).join``;
 
 export function injectDarkModeStyle(recipePath) {
-  const darkModeStyle = path.join(recipePath, 'darkmode.css');
-  if (fs.pathExistsSync(darkModeStyle)) {
-    const data = fs.readFileSync(darkModeStyle);
+  const darkModeStyle = join(recipePath, 'darkmode.css');
+  if (pathExistsSync(darkModeStyle)) {
+    const data = readFileSync(darkModeStyle);
     const styles = document.createElement('style');
     styles.id = ID;
     styles.innerHTML = data.toString();
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index 305e79882..96caa125e 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -1,5 +1,5 @@
 import { ipcRenderer } from 'electron';
-import { exists, pathExistsSync, readFile } from 'fs-extra';
+import { exists, pathExistsSync, readFileSync } from 'fs-extra';
 
 const debug = require('debug')('Ferdi:Plugin:RecipeWebview');
 
@@ -55,9 +55,8 @@ class RecipeWebview {
   injectCSS(...files) {
     files.forEach(async (file) => {
       if (pathExistsSync(file)) {
-        const data = await readFile(file, 'utf8');
         const styles = document.createElement('style');
-        styles.innerHTML = data;
+        styles.innerHTML = readFileSync(file, 'utf8');
 
         document.querySelector('head').appendChild(styles);
 
@@ -69,8 +68,7 @@ class RecipeWebview {
   injectJSUnsafe(...files) {
     Promise.all(files.map(async (file) => {
       if (await exists(file)) {
-        const data = await readFile(file, 'utf8');
-        return data;
+        return readFileSync(file, 'utf8');
       }
       debug('Script not found', file);
       return null;
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 598c3eb9a..a45c34002 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -1,8 +1,8 @@
 /* eslint-disable import/first */
 import { contextBridge, ipcRenderer } from 'electron';
-import path from 'path';
+import { join } from 'path';
 import { autorun, computed, observable } from 'mobx';
-import fs from 'fs-extra';
+import { pathExistsSync, readFileSync } from 'fs-extra';
 import { debounce } from 'lodash';
 
 // For some services darkreader tries to use the chrome extension message API
@@ -189,7 +189,7 @@ class RecipeController {
 
   loadRecipeModule(event, config, recipe) {
     debug('loadRecipeModule');
-    const modulePath = path.join(recipe.path, 'webview.js');
+    const modulePath = join(recipe.path, 'webview.js');
     debug('module path', modulePath);
     // Delete module from cache
     delete require.cache[require.resolve(modulePath)];
@@ -214,15 +214,15 @@ class RecipeController {
     const styles = document.createElement('style');
     styles.innerHTML = screenShareCss;
 
-    const userCss = path.join(recipe.path, 'user.css');
-    if (fs.existsSync(userCss)) {
-      const data = await fs.readFile(userCss);
+    const userCss = join(recipe.path, 'user.css');
+    if (pathExistsSync(userCss)) {
+      const data = readFileSync(userCss);
       styles.innerHTML += data.toString();
     }
     document.querySelector('head').appendChild(styles);
 
-    const userJs = path.join(recipe.path, 'user.js');
-    if (fs.existsSync(userJs)) {
+    const userJs = join(recipe.path, 'user.js');
+    if (pathExistsSync(userJs)) {
       const loadUserJs = () => {
         // eslint-disable-next-line
         const userJsModule = require(userJs);
@@ -308,11 +308,11 @@ class RecipeController {
       debug('Enable dark mode');
 
       // Check if recipe has a darkmode.css
-      const darkModeStyle = path.join(
+      const darkModeStyle = join(
         this.settings.service.recipe.path,
         'darkmode.css',
       );
-      const darkModeExists = fs.pathExistsSync(darkModeStyle);
+      const darkModeExists = pathExistsSync(darkModeStyle);
 
       debug('darkmode.css exists? ', darkModeExists ? 'Yes' : 'No');
 
-- 
cgit v1.2.3-70-g09d2


From 8b2d3db622d1087d0e2e6dee4f1ee202bd6bd767 Mon Sep 17 00:00:00 2001
From: Vijay A <avijayr@protonmail.com>
Date: Mon, 9 Aug 2021 21:31:46 +0530
Subject: feat: added new Help menu item to allow easy import/export of config
 data

---
 CHANGELOG.md                                       |   9 +-
 src/components/services/content/Services.js        |   2 +-
 src/config.js                                      |   1 +
 src/electron/ipc-api/localServer.js                |   8 +-
 src/i18n/locales/af.json                           |   2 +-
 src/i18n/locales/be.json                           |   2 +-
 src/i18n/locales/bs.json                           |   2 +-
 src/i18n/locales/ca.json                           |   2 +-
 src/i18n/locales/cs.json                           |   2 +-
 src/i18n/locales/defaultMessages.json              | 167 +++++++++++----------
 src/i18n/locales/el.json                           |   2 +-
 src/i18n/locales/en-US.json                        |   3 +-
 src/i18n/locales/ga.json                           |   2 +-
 src/i18n/locales/he.json                           |   2 +-
 src/i18n/locales/hr.json                           |   2 +-
 src/i18n/locales/hu.json                           |   2 +-
 src/i18n/locales/id.json                           |   2 +-
 src/i18n/locales/ka.json                           |   2 +-
 src/i18n/locales/ko.json                           |   2 +-
 src/i18n/locales/nl-BE.json                        |   2 +-
 src/i18n/locales/nl.json                           |   2 +-
 src/i18n/locales/pl.json                           |   2 +-
 src/i18n/locales/ro.json                           |   2 +-
 src/i18n/locales/ru.json                           |   2 +-
 src/i18n/locales/sk.json                           |   2 +-
 src/i18n/locales/sl.json                           |   2 +-
 src/i18n/locales/sr.json                           |   2 +-
 src/i18n/locales/tr.json                           |   2 +-
 src/i18n/locales/uk.json                           |   2 +-
 src/i18n/locales/vi.json                           |   2 +-
 src/i18n/locales/zh-CN.json                        |   2 +-
 src/i18n/locales/zh-HANT.json                      |   2 +-
 src/i18n/locales/zh.json                           |   2 +-
 .../src/components/services/content/Services.json  |   2 +-
 src/i18n/messages/src/lib/Menu.json                | 165 ++++++++++----------
 src/internal-server/env.ini                        |   6 +-
 src/lib/Menu.js                                    |  11 +-
 37 files changed, 232 insertions(+), 196 deletions(-)

(limited to 'src/components/services')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bc004ca30..d145a6b38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,12 @@
 # [v5.6.1-nightly.20](https://github.com/getferdi/ferdi/compare/v5.6.1-nightly.19...v5.6.1-nightly.20) (2021-08-10)
 
+- Added a new menu entry (Help > Browse Server) to allow the user to quickly navigate and import/export configuration data 💖 @vraravam
+
 ### Bug Fixes
 
 - Use electron's API to enable/disable spell-check when the app starts up (#1743) 💖 @vraravam
 
-### Internal Changes
+### Internal
 
 - Upgraded `electron-builder` to `22.12.0` 💖 @vraravam
 
@@ -14,7 +16,7 @@
 
 - Fix the changelog api to handle nightly builds 💖 @vraravam
 
-### Internal Changes
+### Internal
 
 - Remove unused setting, add debug stmt. 💖 @vraravam
 - Fix issue with hidden db migration 💖 @vraravam
@@ -23,7 +25,7 @@
 
 # [v5.6.1-nightly.18](https://github.com/getferdi/ferdi/compare/v5.6.1-nightly.17...v5.6.1-nightly.18) (2021-08-08)
 
-### Internal Changes
+### Internal
 
 [Perf] Path-references refactoring and using 'import' instead of 'require' 💖 @vraravam
 
@@ -70,7 +72,6 @@
 - Minor visual refactoring to hide double separator. [skip ci] 💖 @vraravam
 - Fixed #1717: Turned on ToDo feature. 💖 @vraravam
 
-
 ## [5.6.1-nightly.10](https://github.com/getferdi/ferdi/compare/v5.6.1-nightly.9...v5.6.1-nightly.10) (2021-08-01)
 
 - Moved 'jss' to a runtime dependency from a dev dependency. 💖 @vraravam
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index fbf884f0a..bb93ff7d4 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -30,7 +30,7 @@ const messages = defineMessages({
   },
   serverInfo: {
     id: 'services.serverInfo',
-    defaultMessage: '!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.',
+    defaultMessage: '!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!',
   },
 });
 
diff --git a/src/config.js b/src/config.js
index 3598fa5d5..aeaec1089 100644
--- a/src/config.js
+++ b/src/config.js
@@ -5,6 +5,7 @@ import ms from 'ms';
 export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks
 
 export const LOCAL_HOSTNAME = 'localhost';
+export const LOCAL_PORT = 45569;
 export const LOCAL_API = 'http://localhost:3000';
 export const DEV_FRANZ_API = 'https://dev.franzinfra.com';
 
diff --git a/src/electron/ipc-api/localServer.js b/src/electron/ipc-api/localServer.js
index 1ed4b7167..591e70504 100644
--- a/src/electron/ipc-api/localServer.js
+++ b/src/electron/ipc-api/localServer.js
@@ -1,11 +1,9 @@
 import { ipcMain } from 'electron';
 import net from 'net';
-import { LOCAL_HOSTNAME } from '../../config';
+import { LOCAL_HOSTNAME, LOCAL_PORT } from '../../config';
 import { userDataPath } from '../../environment';
 import startServer from '../../internal-server/start';
 
-const DEFAULT_PORT = 45569;
-
 const portInUse = function (port) {
   return new Promise((resolve) => {
     const server = net.createServer((socket) => {
@@ -30,10 +28,10 @@ export default (params) => {
   ipcMain.on('startLocalServer', () => {
     if (!localServerStarted) {
       // Find next unused port for server
-      let port = DEFAULT_PORT;
+      let port = LOCAL_PORT;
       (async () => {
         // eslint-disable-next-line no-await-in-loop
-        while ((await portInUse(port)) && port < DEFAULT_PORT + 10) {
+        while ((await portInUse(port)) && port < LOCAL_PORT + 10) {
           port += 1;
         }
         console.log('Starting local server on port', port);
diff --git a/src/i18n/locales/af.json b/src/i18n/locales/af.json
index af5dcbb94..e4a32c5a9 100644
--- a/src/i18n/locales/af.json
+++ b/src/i18n/locales/af.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Get started",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Welcome to Ferdi",
   "settings.account.account.editButton": "Edit account",
diff --git a/src/i18n/locales/be.json b/src/i18n/locales/be.json
index 0c81f4508..4e2ad5482 100644
--- a/src/i18n/locales/be.json
+++ b/src/i18n/locales/be.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Get started",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Welcome to Ferdi",
   "settings.account.account.editButton": "Edit account",
diff --git a/src/i18n/locales/bs.json b/src/i18n/locales/bs.json
index af5dcbb94..e4a32c5a9 100644
--- a/src/i18n/locales/bs.json
+++ b/src/i18n/locales/bs.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Get started",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Welcome to Ferdi",
   "settings.account.account.editButton": "Edit account",
diff --git a/src/i18n/locales/ca.json b/src/i18n/locales/ca.json
index 22f122448..25ca64be1 100644
--- a/src/i18n/locales/ca.json
+++ b/src/i18n/locales/ca.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Introducció",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Benvingut a Ferdi",
   "settings.account.account.editButton": "Editar Compte",
diff --git a/src/i18n/locales/cs.json b/src/i18n/locales/cs.json
index 8c7b6fd18..9872fa9d0 100644
--- a/src/i18n/locales/cs.json
+++ b/src/i18n/locales/cs.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Začněme",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Vítejte v programu Ferdi",
   "settings.account.account.editButton": "Upravit účet",
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index f431930f8..95913363e 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1548,7 +1548,7 @@
         }
       },
       {
-        "defaultMessage": "!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+        "defaultMessage": "!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
         "end": {
           "column": 3,
           "line": 34
@@ -6368,497 +6368,510 @@
         }
       },
       {
-        "defaultMessage": "!!!Support",
+        "defaultMessage": "!!!Import/Export Configuration Data",
         "end": {
           "column": 3,
           "line": 159
         },
         "file": "src/lib/Menu.js",
+        "id": "menu.help.importExportData",
+        "start": {
+          "column": 20,
+          "line": 156
+        }
+      },
+      {
+        "defaultMessage": "!!!Support",
+        "end": {
+          "column": 3,
+          "line": 163
+        },
+        "file": "src/lib/Menu.js",
         "id": "menu.help.support",
         "start": {
           "column": 11,
-          "line": 156
+          "line": 160
         }
       },
       {
         "defaultMessage": "!!!Copy Debug Information",
         "end": {
           "column": 3,
-          "line": 163
+          "line": 167
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.debugInfo",
         "start": {
           "column": 13,
-          "line": 160
+          "line": 164
         }
       },
       {
         "defaultMessage": "!!!Publish Debug Information",
         "end": {
           "column": 3,
-          "line": 167
+          "line": 171
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.publishDebugInfo",
         "start": {
           "column": 20,
-          "line": 164
+          "line": 168
         }
       },
       {
         "defaultMessage": "!!!Ferdi Debug Information",
         "end": {
           "column": 3,
-          "line": 171
+          "line": 175
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.debugInfoCopiedHeadline",
         "start": {
           "column": 27,
-          "line": 168
+          "line": 172
         }
       },
       {
         "defaultMessage": "!!!Your Debug Information has been copied to your clipboard.",
         "end": {
           "column": 3,
-          "line": 175
+          "line": 179
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.debugInfoCopiedBody",
         "start": {
           "column": 23,
-          "line": 172
+          "line": 176
         }
       },
       {
         "defaultMessage": "!!!Unlock with Touch ID",
         "end": {
           "column": 3,
-          "line": 179
+          "line": 183
         },
         "file": "src/lib/Menu.js",
         "id": "locked.touchId",
         "start": {
           "column": 11,
-          "line": 176
+          "line": 180
         }
       },
       {
         "defaultMessage": "!!!unlock via Touch ID",
         "end": {
           "column": 3,
-          "line": 183
+          "line": 187
         },
         "file": "src/lib/Menu.js",
         "id": "locked.touchIdPrompt",
         "start": {
           "column": 17,
-          "line": 180
+          "line": 184
         }
       },
       {
         "defaultMessage": "!!!Terms of Service",
         "end": {
           "column": 3,
-          "line": 187
+          "line": 191
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.tos",
         "start": {
           "column": 7,
-          "line": 184
+          "line": 188
         }
       },
       {
         "defaultMessage": "!!!Privacy Statement",
         "end": {
           "column": 3,
-          "line": 191
+          "line": 195
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.privacy",
         "start": {
           "column": 11,
-          "line": 188
+          "line": 192
         }
       },
       {
         "defaultMessage": "!!!File",
         "end": {
           "column": 3,
-          "line": 195
+          "line": 199
         },
         "file": "src/lib/Menu.js",
         "id": "menu.file",
         "start": {
           "column": 8,
-          "line": 192
+          "line": 196
         }
       },
       {
         "defaultMessage": "!!!View",
         "end": {
           "column": 3,
-          "line": 199
+          "line": 203
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view",
         "start": {
           "column": 8,
-          "line": 196
+          "line": 200
         }
       },
       {
         "defaultMessage": "!!!Services",
         "end": {
           "column": 3,
-          "line": 203
+          "line": 207
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services",
         "start": {
           "column": 12,
-          "line": 200
+          "line": 204
         }
       },
       {
         "defaultMessage": "!!!Window",
         "end": {
           "column": 3,
-          "line": 207
+          "line": 211
         },
         "file": "src/lib/Menu.js",
         "id": "menu.window",
         "start": {
           "column": 10,
-          "line": 204
+          "line": 208
         }
       },
       {
         "defaultMessage": "!!!Help",
         "end": {
           "column": 3,
-          "line": 211
+          "line": 215
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help",
         "start": {
           "column": 8,
-          "line": 208
+          "line": 212
         }
       },
       {
         "defaultMessage": "!!!About Ferdi",
         "end": {
           "column": 3,
-          "line": 215
+          "line": 219
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.about",
         "start": {
           "column": 9,
-          "line": 212
+          "line": 216
         }
       },
       {
         "defaultMessage": "!!!What's new?",
         "end": {
           "column": 3,
-          "line": 219
+          "line": 223
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.announcement",
         "start": {
           "column": 16,
-          "line": 216
+          "line": 220
         }
       },
       {
         "defaultMessage": "!!!Settings",
         "end": {
           "column": 3,
-          "line": 223
+          "line": 227
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.settings",
         "start": {
           "column": 12,
-          "line": 220
+          "line": 224
         }
       },
       {
         "defaultMessage": "!!!Check for updates",
         "end": {
           "column": 3,
-          "line": 227
+          "line": 231
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.checkForUpdates",
         "start": {
           "column": 19,
-          "line": 224
+          "line": 228
         }
       },
       {
         "defaultMessage": "!!!Hide",
         "end": {
           "column": 3,
-          "line": 231
+          "line": 235
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.hide",
         "start": {
           "column": 8,
-          "line": 228
+          "line": 232
         }
       },
       {
         "defaultMessage": "!!!Hide Others",
         "end": {
           "column": 3,
-          "line": 235
+          "line": 239
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.hideOthers",
         "start": {
           "column": 14,
-          "line": 232
+          "line": 236
         }
       },
       {
         "defaultMessage": "!!!Unhide",
         "end": {
           "column": 3,
-          "line": 239
+          "line": 243
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.unhide",
         "start": {
           "column": 10,
-          "line": 236
+          "line": 240
         }
       },
       {
         "defaultMessage": "!!!Auto-hide menu bar",
         "end": {
           "column": 3,
-          "line": 243
+          "line": 247
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.autohideMenuBar",
         "start": {
           "column": 19,
-          "line": 240
+          "line": 244
         }
       },
       {
         "defaultMessage": "!!!Quit",
         "end": {
           "column": 3,
-          "line": 247
+          "line": 251
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.quit",
         "start": {
           "column": 8,
-          "line": 244
+          "line": 248
         }
       },
       {
         "defaultMessage": "!!!Add New Service...",
         "end": {
           "column": 3,
-          "line": 251
+          "line": 255
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.addNewService",
         "start": {
           "column": 17,
-          "line": 248
+          "line": 252
         }
       },
       {
         "defaultMessage": "!!!Add New Workspace...",
         "end": {
           "column": 3,
-          "line": 255
+          "line": 259
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.addNewWorkspace",
         "start": {
           "column": 19,
-          "line": 252
+          "line": 256
         }
       },
       {
         "defaultMessage": "!!!Open workspace drawer",
         "end": {
           "column": 3,
-          "line": 259
+          "line": 263
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.openWorkspaceDrawer",
         "start": {
           "column": 23,
-          "line": 256
+          "line": 260
         }
       },
       {
         "defaultMessage": "!!!Close workspace drawer",
         "end": {
           "column": 3,
-          "line": 263
+          "line": 267
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.closeWorkspaceDrawer",
         "start": {
           "column": 24,
-          "line": 260
+          "line": 264
         }
       },
       {
         "defaultMessage": "!!!Activate next service...",
         "end": {
           "column": 3,
-          "line": 267
+          "line": 271
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.setNextServiceActive",
         "start": {
           "column": 23,
-          "line": 264
+          "line": 268
         }
       },
       {
         "defaultMessage": "!!!Activate previous service...",
         "end": {
           "column": 3,
-          "line": 271
+          "line": 275
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.activatePreviousService",
         "start": {
           "column": 27,
-          "line": 268
+          "line": 272
         }
       },
       {
         "defaultMessage": "!!!Disable notifications & audio",
         "end": {
           "column": 3,
-          "line": 275
+          "line": 279
         },
         "file": "src/lib/Menu.js",
         "id": "sidebar.muteApp",
         "start": {
           "column": 11,
-          "line": 272
+          "line": 276
         }
       },
       {
         "defaultMessage": "!!!Enable notifications & audio",
         "end": {
           "column": 3,
-          "line": 279
+          "line": 283
         },
         "file": "src/lib/Menu.js",
         "id": "sidebar.unmuteApp",
         "start": {
           "column": 13,
-          "line": 276
+          "line": 280
         }
       },
       {
         "defaultMessage": "!!!Workspaces",
         "end": {
           "column": 3,
-          "line": 283
+          "line": 287
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces",
         "start": {
           "column": 14,
-          "line": 280
+          "line": 284
         }
       },
       {
         "defaultMessage": "!!!Default",
         "end": {
           "column": 3,
-          "line": 287
+          "line": 291
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.defaultWorkspace",
         "start": {
           "column": 20,
-          "line": 284
+          "line": 288
         }
       },
       {
         "defaultMessage": "!!!Todos",
         "end": {
           "column": 3,
-          "line": 291
+          "line": 295
         },
         "file": "src/lib/Menu.js",
         "id": "menu.todos",
         "start": {
           "column": 9,
-          "line": 288
+          "line": 292
         }
       },
       {
         "defaultMessage": "!!!Open Todos drawer",
         "end": {
           "column": 3,
-          "line": 295
+          "line": 299
         },
         "file": "src/lib/Menu.js",
         "id": "menu.Todoss.openTodosDrawer",
         "start": {
           "column": 19,
-          "line": 292
+          "line": 296
         }
       },
       {
         "defaultMessage": "!!!Close Todos drawer",
         "end": {
           "column": 3,
-          "line": 299
+          "line": 303
         },
         "file": "src/lib/Menu.js",
         "id": "menu.Todoss.closeTodosDrawer",
         "start": {
           "column": 20,
-          "line": 296
+          "line": 300
         }
       },
       {
         "defaultMessage": "!!!Enable Todos",
         "end": {
           "column": 3,
-          "line": 303
+          "line": 307
         },
         "file": "src/lib/Menu.js",
         "id": "menu.todos.enableTodos",
         "start": {
           "column": 15,
-          "line": 300
+          "line": 304
         }
       },
       {
         "defaultMessage": "!!!Home",
         "end": {
           "column": 3,
-          "line": 307
+          "line": 311
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.goHome",
         "start": {
           "column": 17,
-          "line": 304
+          "line": 308
         }
       }
     ],
diff --git a/src/i18n/locales/el.json b/src/i18n/locales/el.json
index 2ce8c363d..a76bceb64 100644
--- a/src/i18n/locales/el.json
+++ b/src/i18n/locales/el.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Ξεκινήστε",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Καλώς ορίσατε στον Ferdi",
   "settings.account.account.editButton": "Επεξεργασία λογαριασμού",
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 60a3b4d86..37a801b39 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -112,6 +112,7 @@
   "menu.help.debugInfo": "Copy Debug Information",
   "menu.help.debugInfoCopiedBody": "Your Debug Information has been copied to your clipboard.",
   "menu.help.debugInfoCopiedHeadline": "Ferdi Debug Information",
+  "menu.help.importExportData": "Import/Export Configuration Data",
   "menu.help.learnMore": "Learn More",
   "menu.help.privacy": "Privacy Statement",
   "menu.help.publishDebugInfo": "Publish Debug Information",
@@ -180,7 +181,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Get started",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Welcome to Ferdi",
   "settings.account.account.editButton": "Edit account",
diff --git a/src/i18n/locales/ga.json b/src/i18n/locales/ga.json
index 0bd9dbb1d..533ec0891 100644
--- a/src/i18n/locales/ga.json
+++ b/src/i18n/locales/ga.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Cuir tús",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Fáilte go Ferdi",
   "settings.account.account.editButton": "Cuir cuntas in eagar",
diff --git a/src/i18n/locales/he.json b/src/i18n/locales/he.json
index 5c1964dba..d5155a35a 100644
--- a/src/i18n/locales/he.json
+++ b/src/i18n/locales/he.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "טוען את {service}",
   "services.getStarted": "התחל",
   "services.login": "אנא התחבר כדי להשתמש בפרדי.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "השתמש בפרדי ללא חשבון",
   "services.welcome": "ברוך הבא לפרדי",
   "settings.account.account.editButton": "ערוך את החשבון",
diff --git a/src/i18n/locales/hr.json b/src/i18n/locales/hr.json
index 983bedb2e..65af07ac9 100644
--- a/src/i18n/locales/hr.json
+++ b/src/i18n/locales/hr.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Započnimo!",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Dobrodošli u Ferdi",
   "settings.account.account.editButton": "Uredi račun",
diff --git a/src/i18n/locales/hu.json b/src/i18n/locales/hu.json
index 334cccc23..4f5dc0c12 100644
--- a/src/i18n/locales/hu.json
+++ b/src/i18n/locales/hu.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Kezdj hozzá",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Üdvözöl a Ferdi",
   "settings.account.account.editButton": "Fiók szerkesztése",
diff --git a/src/i18n/locales/id.json b/src/i18n/locales/id.json
index d41890007..f78588044 100644
--- a/src/i18n/locales/id.json
+++ b/src/i18n/locales/id.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Memulai",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Selamat datang di Ferdi",
   "settings.account.account.editButton": "Edit akun",
diff --git a/src/i18n/locales/ka.json b/src/i18n/locales/ka.json
index 0db4abdf1..e628816e5 100644
--- a/src/i18n/locales/ka.json
+++ b/src/i18n/locales/ka.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "დაწყება",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "მოგესალმებით Ferdi-ზე",
   "settings.account.account.editButton": "ანგარიშის მართვა",
diff --git a/src/i18n/locales/ko.json b/src/i18n/locales/ko.json
index aad99ac6e..d070d99f3 100644
--- a/src/i18n/locales/ko.json
+++ b/src/i18n/locales/ko.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "{service} 로딩 중",
   "services.getStarted": "시작하기",
   "services.login": "Ferdi를 사용해 로그인하세요.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "계정없이 Ferdi 사용하기",
   "services.welcome": "Ferdi에 오신 것을 환영합니다.",
   "settings.account.account.editButton": "계정 편집",
diff --git a/src/i18n/locales/nl-BE.json b/src/i18n/locales/nl-BE.json
index 6918e3c7b..308212e98 100644
--- a/src/i18n/locales/nl-BE.json
+++ b/src/i18n/locales/nl-BE.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Beginnen",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Welkom bij Ferdi",
   "settings.account.account.editButton": "Account bewerken",
diff --git a/src/i18n/locales/nl.json b/src/i18n/locales/nl.json
index a40ff2812..aa45ba95e 100644
--- a/src/i18n/locales/nl.json
+++ b/src/i18n/locales/nl.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "{service} wordt geladen",
   "services.getStarted": "Begin",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Welkom bij Ferdi",
   "settings.account.account.editButton": "Bewerk account",
diff --git a/src/i18n/locales/pl.json b/src/i18n/locales/pl.json
index 8c520fc09..7eccc8fa2 100644
--- a/src/i18n/locales/pl.json
+++ b/src/i18n/locales/pl.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Wczytywanie {service}",
   "services.getStarted": "Zacznij",
   "services.login": "Zaloguj się, aby używać Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Używaj Ferdi bez konta",
   "services.welcome": "Witaj w programie Ferdi",
   "settings.account.account.editButton": "Modyfikuj konta",
diff --git a/src/i18n/locales/ro.json b/src/i18n/locales/ro.json
index 500192dc1..84e559cde 100644
--- a/src/i18n/locales/ro.json
+++ b/src/i18n/locales/ro.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Get started",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Welcome to Ferdi",
   "settings.account.account.editButton": "Edit account",
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index 91b91c1d1..0c9e65c70 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Начать работу",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Добро пожаловать во Ferdi",
   "settings.account.account.editButton": "Редактировать аккаунт",
diff --git a/src/i18n/locales/sk.json b/src/i18n/locales/sk.json
index d7a003ddf..6ca3f6f57 100644
--- a/src/i18n/locales/sk.json
+++ b/src/i18n/locales/sk.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Načítavam {service}",
   "services.getStarted": "Začíname",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Vítajte v aplikácii Ferdi",
   "settings.account.account.editButton": "Upraviť účet",
diff --git a/src/i18n/locales/sl.json b/src/i18n/locales/sl.json
index af5dcbb94..e4a32c5a9 100644
--- a/src/i18n/locales/sl.json
+++ b/src/i18n/locales/sl.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Get started",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Welcome to Ferdi",
   "settings.account.account.editButton": "Edit account",
diff --git a/src/i18n/locales/sr.json b/src/i18n/locales/sr.json
index a5ea130d0..9a27c47d6 100644
--- a/src/i18n/locales/sr.json
+++ b/src/i18n/locales/sr.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Započnimo! ",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Dobrodošli u Ferdi",
   "settings.account.account.editButton": "Uredi račun",
diff --git a/src/i18n/locales/tr.json b/src/i18n/locales/tr.json
index 744cfefb0..799956ec8 100644
--- a/src/i18n/locales/tr.json
+++ b/src/i18n/locales/tr.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Haydi başlayalım",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Ferdi'yi bir hesap olmadan kullan",
   "services.welcome": "Ferdi'a Hoşgeldiniz",
   "settings.account.account.editButton": "Hesabı düzenle",
diff --git a/src/i18n/locales/uk.json b/src/i18n/locales/uk.json
index 3298c9299..2ae980a7a 100644
--- a/src/i18n/locales/uk.json
+++ b/src/i18n/locales/uk.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Завантаження {service}",
   "services.getStarted": "Почати",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Ласкаво просимо в Ferdi",
   "settings.account.account.editButton": "Редагувати акаунт",
diff --git a/src/i18n/locales/vi.json b/src/i18n/locales/vi.json
index fe5647753..5da234822 100644
--- a/src/i18n/locales/vi.json
+++ b/src/i18n/locales/vi.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Đang tải {service}",
   "services.getStarted": "Bắt đầu",
   "services.login": "Vui lòng đăng nhập để sử dụng Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Sử dụng Ferdi không cần Đăng nhập Tài khoản",
   "services.welcome": "Chào mừng bạn đến với Ferdi",
   "settings.account.account.editButton": "Chỉnh sửa Tài khoản",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 4f97bfe72..8d1813cde 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -163,7 +163,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Get started",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Welcome to Ferdi",
   "settings.account.account.editButton": "Edit account",
diff --git a/src/i18n/locales/zh-HANT.json b/src/i18n/locales/zh-HANT.json
index 23b9f5798..fdfb70b5f 100644
--- a/src/i18n/locales/zh-HANT.json
+++ b/src/i18n/locales/zh-HANT.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "正在載入 {service}",
   "services.getStarted": "開始使用",
   "services.login": "登入至 Ferdi",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "歡迎使用 Ferdi",
   "settings.account.account.editButton": "更改帳戶資訊",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index a46783b24..94a36c56a 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -180,7 +180,7 @@
   "service.webviewLoader.loading": "Loading {service}",
   "services.getStarted": "Get started",
   "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "Welcome to Ferdi",
   "settings.account.account.editButton": "Edit account",
diff --git a/src/i18n/messages/src/components/services/content/Services.json b/src/i18n/messages/src/components/services/content/Services.json
index 6a5eb052e..304c93f3c 100644
--- a/src/i18n/messages/src/components/services/content/Services.json
+++ b/src/i18n/messages/src/components/services/content/Services.json
@@ -53,7 +53,7 @@
   },
   {
     "id": "services.serverInfo",
-    "defaultMessage": "!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
+    "defaultMessage": "!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
     "file": "src/components/services/content/Services.js",
     "start": {
       "line": 31,
diff --git a/src/i18n/messages/src/lib/Menu.json b/src/i18n/messages/src/lib/Menu.json
index a42859f96..e8fa0d10b 100644
--- a/src/i18n/messages/src/lib/Menu.json
+++ b/src/i18n/messages/src/lib/Menu.json
@@ -441,16 +441,29 @@
       "column": 3
     }
   },
+  {
+    "id": "menu.help.importExportData",
+    "defaultMessage": "!!!Import/Export Configuration Data",
+    "file": "src/lib/Menu.js",
+    "start": {
+      "line": 156,
+      "column": 20
+    },
+    "end": {
+      "line": 159,
+      "column": 3
+    }
+  },
   {
     "id": "menu.help.support",
     "defaultMessage": "!!!Support",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 156,
+      "line": 160,
       "column": 11
     },
     "end": {
-      "line": 159,
+      "line": 163,
       "column": 3
     }
   },
@@ -459,11 +472,11 @@
     "defaultMessage": "!!!Copy Debug Information",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 160,
+      "line": 164,
       "column": 13
     },
     "end": {
-      "line": 163,
+      "line": 167,
       "column": 3
     }
   },
@@ -472,11 +485,11 @@
     "defaultMessage": "!!!Publish Debug Information",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 164,
+      "line": 168,
       "column": 20
     },
     "end": {
-      "line": 167,
+      "line": 171,
       "column": 3
     }
   },
@@ -485,11 +498,11 @@
     "defaultMessage": "!!!Ferdi Debug Information",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 168,
+      "line": 172,
       "column": 27
     },
     "end": {
-      "line": 171,
+      "line": 175,
       "column": 3
     }
   },
@@ -498,11 +511,11 @@
     "defaultMessage": "!!!Your Debug Information has been copied to your clipboard.",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 172,
+      "line": 176,
       "column": 23
     },
     "end": {
-      "line": 175,
+      "line": 179,
       "column": 3
     }
   },
@@ -511,11 +524,11 @@
     "defaultMessage": "!!!Unlock with Touch ID",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 176,
+      "line": 180,
       "column": 11
     },
     "end": {
-      "line": 179,
+      "line": 183,
       "column": 3
     }
   },
@@ -524,11 +537,11 @@
     "defaultMessage": "!!!unlock via Touch ID",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 180,
+      "line": 184,
       "column": 17
     },
     "end": {
-      "line": 183,
+      "line": 187,
       "column": 3
     }
   },
@@ -537,11 +550,11 @@
     "defaultMessage": "!!!Terms of Service",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 184,
+      "line": 188,
       "column": 7
     },
     "end": {
-      "line": 187,
+      "line": 191,
       "column": 3
     }
   },
@@ -550,11 +563,11 @@
     "defaultMessage": "!!!Privacy Statement",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 188,
+      "line": 192,
       "column": 11
     },
     "end": {
-      "line": 191,
+      "line": 195,
       "column": 3
     }
   },
@@ -563,11 +576,11 @@
     "defaultMessage": "!!!File",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 192,
+      "line": 196,
       "column": 8
     },
     "end": {
-      "line": 195,
+      "line": 199,
       "column": 3
     }
   },
@@ -576,11 +589,11 @@
     "defaultMessage": "!!!View",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 196,
+      "line": 200,
       "column": 8
     },
     "end": {
-      "line": 199,
+      "line": 203,
       "column": 3
     }
   },
@@ -589,11 +602,11 @@
     "defaultMessage": "!!!Services",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 200,
+      "line": 204,
       "column": 12
     },
     "end": {
-      "line": 203,
+      "line": 207,
       "column": 3
     }
   },
@@ -602,11 +615,11 @@
     "defaultMessage": "!!!Window",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 204,
+      "line": 208,
       "column": 10
     },
     "end": {
-      "line": 207,
+      "line": 211,
       "column": 3
     }
   },
@@ -615,11 +628,11 @@
     "defaultMessage": "!!!Help",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 208,
+      "line": 212,
       "column": 8
     },
     "end": {
-      "line": 211,
+      "line": 215,
       "column": 3
     }
   },
@@ -628,11 +641,11 @@
     "defaultMessage": "!!!About Ferdi",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 212,
+      "line": 216,
       "column": 9
     },
     "end": {
-      "line": 215,
+      "line": 219,
       "column": 3
     }
   },
@@ -641,11 +654,11 @@
     "defaultMessage": "!!!What's new?",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 216,
+      "line": 220,
       "column": 16
     },
     "end": {
-      "line": 219,
+      "line": 223,
       "column": 3
     }
   },
@@ -654,11 +667,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 220,
+      "line": 224,
       "column": 12
     },
     "end": {
-      "line": 223,
+      "line": 227,
       "column": 3
     }
   },
@@ -667,11 +680,11 @@
     "defaultMessage": "!!!Check for updates",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 224,
+      "line": 228,
       "column": 19
     },
     "end": {
-      "line": 227,
+      "line": 231,
       "column": 3
     }
   },
@@ -680,11 +693,11 @@
     "defaultMessage": "!!!Hide",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 228,
+      "line": 232,
       "column": 8
     },
     "end": {
-      "line": 231,
+      "line": 235,
       "column": 3
     }
   },
@@ -693,11 +706,11 @@
     "defaultMessage": "!!!Hide Others",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 232,
+      "line": 236,
       "column": 14
     },
     "end": {
-      "line": 235,
+      "line": 239,
       "column": 3
     }
   },
@@ -706,11 +719,11 @@
     "defaultMessage": "!!!Unhide",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 236,
+      "line": 240,
       "column": 10
     },
     "end": {
-      "line": 239,
+      "line": 243,
       "column": 3
     }
   },
@@ -719,11 +732,11 @@
     "defaultMessage": "!!!Auto-hide menu bar",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 240,
+      "line": 244,
       "column": 19
     },
     "end": {
-      "line": 243,
+      "line": 247,
       "column": 3
     }
   },
@@ -732,11 +745,11 @@
     "defaultMessage": "!!!Quit",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 244,
+      "line": 248,
       "column": 8
     },
     "end": {
-      "line": 247,
+      "line": 251,
       "column": 3
     }
   },
@@ -745,11 +758,11 @@
     "defaultMessage": "!!!Add New Service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 248,
+      "line": 252,
       "column": 17
     },
     "end": {
-      "line": 251,
+      "line": 255,
       "column": 3
     }
   },
@@ -758,11 +771,11 @@
     "defaultMessage": "!!!Add New Workspace...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 252,
+      "line": 256,
       "column": 19
     },
     "end": {
-      "line": 255,
+      "line": 259,
       "column": 3
     }
   },
@@ -771,11 +784,11 @@
     "defaultMessage": "!!!Open workspace drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 256,
+      "line": 260,
       "column": 23
     },
     "end": {
-      "line": 259,
+      "line": 263,
       "column": 3
     }
   },
@@ -784,11 +797,11 @@
     "defaultMessage": "!!!Close workspace drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 260,
+      "line": 264,
       "column": 24
     },
     "end": {
-      "line": 263,
+      "line": 267,
       "column": 3
     }
   },
@@ -797,11 +810,11 @@
     "defaultMessage": "!!!Activate next service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 264,
+      "line": 268,
       "column": 23
     },
     "end": {
-      "line": 267,
+      "line": 271,
       "column": 3
     }
   },
@@ -810,11 +823,11 @@
     "defaultMessage": "!!!Activate previous service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 268,
+      "line": 272,
       "column": 27
     },
     "end": {
-      "line": 271,
+      "line": 275,
       "column": 3
     }
   },
@@ -823,11 +836,11 @@
     "defaultMessage": "!!!Disable notifications & audio",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 272,
+      "line": 276,
       "column": 11
     },
     "end": {
-      "line": 275,
+      "line": 279,
       "column": 3
     }
   },
@@ -836,11 +849,11 @@
     "defaultMessage": "!!!Enable notifications & audio",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 276,
+      "line": 280,
       "column": 13
     },
     "end": {
-      "line": 279,
+      "line": 283,
       "column": 3
     }
   },
@@ -849,11 +862,11 @@
     "defaultMessage": "!!!Workspaces",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 280,
+      "line": 284,
       "column": 14
     },
     "end": {
-      "line": 283,
+      "line": 287,
       "column": 3
     }
   },
@@ -862,11 +875,11 @@
     "defaultMessage": "!!!Default",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 284,
+      "line": 288,
       "column": 20
     },
     "end": {
-      "line": 287,
+      "line": 291,
       "column": 3
     }
   },
@@ -875,11 +888,11 @@
     "defaultMessage": "!!!Todos",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 288,
+      "line": 292,
       "column": 9
     },
     "end": {
-      "line": 291,
+      "line": 295,
       "column": 3
     }
   },
@@ -888,11 +901,11 @@
     "defaultMessage": "!!!Open Todos drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 292,
+      "line": 296,
       "column": 19
     },
     "end": {
-      "line": 295,
+      "line": 299,
       "column": 3
     }
   },
@@ -901,11 +914,11 @@
     "defaultMessage": "!!!Close Todos drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 296,
+      "line": 300,
       "column": 20
     },
     "end": {
-      "line": 299,
+      "line": 303,
       "column": 3
     }
   },
@@ -914,11 +927,11 @@
     "defaultMessage": "!!!Enable Todos",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 300,
+      "line": 304,
       "column": 15
     },
     "end": {
-      "line": 303,
+      "line": 307,
       "column": 3
     }
   },
@@ -927,11 +940,11 @@
     "defaultMessage": "!!!Home",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 304,
+      "line": 308,
       "column": 17
     },
     "end": {
-      "line": 307,
+      "line": 311,
       "column": 3
     }
   }
diff --git a/src/internal-server/env.ini b/src/internal-server/env.ini
index 902e8e4c8..8df57db66 100644
--- a/src/internal-server/env.ini
+++ b/src/internal-server/env.ini
@@ -1,4 +1,4 @@
-HOST=127.0.0.1
+HOST=localhost
 PORT=45569
 NODE_ENV=development
 APP_NAME=Ferdi Internal Server
@@ -6,11 +6,11 @@ APP_URL=http://${HOST}:${PORT}
 CACHE_VIEWS=false
 APP_KEY=FERDIINTERNALSERVER
 DB_CONNECTION=sqlite
-DB_HOST=127.0.0.1
+DB_HOST=localhost
 DB_PORT=3306
 DB_USER=root
 DB_PASSWORD=
 DB_DATABASE=ferdi
 HASH_DRIVER=bcrypt
 IS_CREATION_ENABLED=true
-CONNECT_WITH_FRANZ=true
\ No newline at end of file
+CONNECT_WITH_FRANZ=true
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index e26c50e1e..db592b478 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -14,7 +14,7 @@ import { todosStore } from '../features/todos';
 import { todoActions } from '../features/todos/actions';
 import { workspaceActions } from '../features/workspaces/actions';
 import { workspaceStore } from '../features/workspaces/index';
-import { termsBase } from '../api/apiBase';
+import apiBase, { termsBase } from '../api/apiBase';
 
 const menuItems = defineMessages({
   edit: {
@@ -153,6 +153,10 @@ const menuItems = defineMessages({
     id: 'menu.help.changelog',
     defaultMessage: '!!!Changelog',
   },
+  importExportData: {
+    id: 'menu.help.importExportData',
+    defaultMessage: '!!!Import/Export Configuration Data',
+  },
   support: {
     id: 'menu.help.support',
     defaultMessage: '!!!Support',
@@ -516,6 +520,11 @@ const _titleBarTemplateFactory = (intl, locked) => [
         label: intl.formatMessage(menuItems.changelog),
         click() { shell.openExternal(`${GITHUB_FERDI_URL}/ferdi/blob/master/CHANGELOG.md`); },
       },
+      {
+        label: intl.formatMessage(menuItems.importExportData),
+        click() { shell.openExternal(apiBase(false)); },
+        enabled: !locked,
+      },
       {
         type: 'separator',
       },
-- 
cgit v1.2.3-70-g09d2


From 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 Mon Sep 17 00:00:00 2001
From: Markus Hatvan <markus_hatvan@aon.at>
Date: Tue, 10 Aug 2021 19:04:54 +0200
Subject: 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>
---
 .eslintrc                                          |   1 +
 packages/forms/src/button/index.tsx                |  13 +-
 packages/forms/src/select/index.tsx                |  12 +-
 packages/forms/src/toggle/index.tsx                |   8 +-
 packages/ui/src/infobox/index.tsx                  |  12 +-
 src/components/auth/SetupAssistant.js              | 110 ++++++-----
 src/components/layout/AppLayout.js                 |  86 +++++----
 .../services/content/ConnectionLostBanner.js       |  36 ++--
 src/components/services/tabs/TabItem.js            | 193 +++++++++++--------
 src/components/ui/AppLoader/styles.js              |   8 +-
 src/features/webControls/components/WebControls.js |  65 +++----
 .../workspaces/components/WorkspaceDrawerItem.js   |  47 +++--
 .../components/WorkspaceSwitchingIndicator.js      |  23 ++-
 src/i18n/locales/defaultMessages.json              |  46 ++---
 .../src/components/auth/SetupAssistant.json        |  10 +-
 .../messages/src/components/layout/AppLayout.json  |   2 +-
 .../services/content/ConnectionLostBanner.json     |  12 +-
 .../src/components/services/tabs/TabItem.json      |   2 +-
 .../webControls/components/WebControls.json        |  20 +-
 src/index.html                                     | 122 +++++++-----
 src/internal-server/public/css/main.css            |  11 +-
 src/styles/button.scss                             |  91 ++++++---
 src/styles/content-tabs.scss                       |  29 ++-
 src/styles/fonts.scss                              |   6 +
 src/styles/image-upload.scss                       |  32 +++-
 src/styles/layout.scss                             |  70 +++++--
 src/styles/main.scss                               |   1 -
 src/styles/radio.scss                              |  19 +-
 src/styles/recipes.scss                            |  36 ++--
 src/styles/settings.scss                           | 213 +++++++++++++++------
 src/styles/slider.scss                             |  29 +--
 src/styles/tabs.scss                               |  58 ++++--
 src/styles/toggle.scss                             |   4 +-
 src/styles/type.scss                               |  46 +++--
 src/styles/welcome.scss                            |  36 ++--
 src/webview/screenshare.js                         |  16 +-
 36 files changed, 962 insertions(+), 563 deletions(-)

(limited to 'src/components/services')

diff --git a/.eslintrc b/.eslintrc
index c74b43cf5..3aae0e438 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -119,6 +119,7 @@
     // eslint-plugin-react
     "react/forbid-prop-types": 1,
     "react/destructuring-assignment": 0,
+    "react/jsx-curly-newline": 0,
     "react/jsx-filename-extension": 1,
     "react/jsx-no-bind": 1,
     "react/jsx-props-no-spreading": 0,
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index c08c4e97d..0aef04a6c 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -35,13 +35,21 @@ interface IProps extends IFormField, IWithStyle {
   target?: string;
 }
 
+let buttonTransition: string = 'none';
+let loaderContainerTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'background .5s, opacity 0.3s';
+  loaderContainerTransition = 'all 0.3s';
+}
+
 const styles = (theme: Theme) => ({
   button: {
     borderRadius: theme.borderRadiusSmall,
     border: 'none',
     display: 'inline-flex',
     position: 'relative' as Property.Position,
-    transition: 'background .5s, opacity 0.3s',
+    transition: buttonTransition,
     textAlign: 'center' as Property.TextAlign,
     outline: 'none',
     alignItems: 'center',
@@ -50,7 +58,6 @@ const styles = (theme: Theme) => ({
       (props.stretch ? '100%' : 'auto') as Property.Width<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
-    // height: theme.buttonHeight,
 
     '&:hover': {
       opacity: 0.8,
@@ -129,7 +136,7 @@ const styles = (theme: Theme) => ({
     width: (props: IProps): string => (!props.busy ? '0' : '40px'),
     height: 20,
     overflow: 'hidden',
-    transition: 'all 0.3s',
+    transition: loaderContainerTransition,
     marginLeft: (props: IProps): number => (!props.busy ? 10 : 20),
     marginRight: (props: IProps): number => (!props.busy ? -10 : -20),
     position: (props: IProps): Property.Position =>
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index 4a5775579..ef3e70ddb 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -46,6 +46,14 @@ interface IState {
   options: IOptions;
 }
 
+let popupTransition: string = 'none';
+let toggleTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  popupTransition = 'all 0.3s';
+  toggleTransition = 'transform 0.3s';
+}
+
 const styles = (theme: Theme) => ({
   select: {
     background: theme.selectBackground,
@@ -70,7 +78,7 @@ const styles = (theme: Theme) => ({
     overflowX: 'scroll',
     border: theme.selectBorder,
     borderTop: 0,
-    transition: 'all 0.3s',
+    transition: popupTransition,
   },
   open: {
     opacity: 1,
@@ -98,7 +106,7 @@ const styles = (theme: Theme) => ({
   toggle: {
     marginLeft: 'auto',
     fill: theme.selectToggleColor,
-    transition: 'transform 0.3s',
+    transition: toggleTransition,
   },
   toggleOpened: {
     transform: 'rotateZ(90deg)',
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index a9970c8f1..e525d2906 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -17,6 +17,12 @@ interface IProps
   className?: string;
 }
 
+let buttonTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'all .5s';
+}
+
 const styles = (theme: Theme) => ({
   toggle: {
     background: theme.toggleBackground,
@@ -34,7 +40,7 @@ const styles = (theme: Theme) => ({
     left: 1,
     top: 1,
     position: 'absolute' as Property.Position,
-    transition: 'all .5s',
+    transition: buttonTransition,
   },
   buttonActive: {
     background: theme.toggleButtonActive,
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 961262001..a6e4b3240 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -44,6 +44,14 @@ const buttonStyles = (theme: Theme) => {
   return styles;
 };
 
+let infoBoxTransition: string = 'none';
+let ctaTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  infoBoxTransition = 'all 0.5s';
+  ctaTransition = 'opacity 0.3s';
+}
+
 const styles = (theme: Theme) => ({
   wrapper: {
     position: 'relative',
@@ -58,7 +66,7 @@ const styles = (theme: Theme) => ({
     height: 'auto',
     padding: '15px 20px',
     top: 0,
-    transition: 'all 0.5s',
+    transition: infoBoxTransition,
     opacity: 1,
   },
   dismissing: {
@@ -91,7 +99,7 @@ const styles = (theme: Theme) => ({
     marginLeft: 15,
     padding: [4, 10],
     fontSize: theme.uiFontSize,
-    transition: 'opacity 0.3s',
+    transition: ctaTransition,
 
     '&:hover': {
       opacity: 0.6,
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%',
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}
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 99f450c23..4279ba079 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -773,7 +773,7 @@
         "defaultMessage": "!!!Choose from our most used services and get back on top of your messaging now.",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 27
         },
         "file": "src/components/auth/SetupAssistant.js",
         "id": "setupAssistant.subheadline",
@@ -786,26 +786,26 @@
         "defaultMessage": "!!!Let's go",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 31
         },
         "file": "src/components/auth/SetupAssistant.js",
         "id": "setupAssistant.submit.label",
         "start": {
           "column": 21,
-          "line": 27
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Invitations sent successfully",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 35
         },
         "file": "src/components/auth/SetupAssistant.js",
         "id": "invite.successInfo",
         "start": {
           "column": 21,
-          "line": 31
+          "line": 32
         }
       }
     ],
@@ -1074,7 +1074,7 @@
         "defaultMessage": "!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.",
         "end": {
           "column": 3,
-          "line": 44
+          "line": 45
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.authRequestFailed",
@@ -1354,39 +1354,39 @@
         "defaultMessage": "!!!Oh no! Ferdi lost the connection to {name}.",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 16
         },
         "file": "src/components/services/content/ConnectionLostBanner.js",
         "id": "connectionLostBanner.message",
         "start": {
           "column": 8,
-          "line": 15
+          "line": 13
         }
       },
       {
         "defaultMessage": "!!!What happened?",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 20
         },
         "file": "src/components/services/content/ConnectionLostBanner.js",
         "id": "connectionLostBanner.informationLink",
         "start": {
           "column": 19,
-          "line": 19
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!Reload Service",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 24
         },
         "file": "src/components/services/content/ConnectionLostBanner.js",
         "id": "connectionLostBanner.cta",
         "start": {
           "column": 7,
-          "line": 23
+          "line": 21
         }
       }
     ],
@@ -1839,7 +1839,7 @@
         "defaultMessage": "!!!Do you really want to delete the {serviceName} service?",
         "end": {
           "column": 3,
-          "line": 67
+          "line": 68
         },
         "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.confirmDeleteService",
@@ -5299,65 +5299,65 @@
         "defaultMessage": "!!!Home",
         "end": {
           "column": 3,
-          "line": 16
+          "line": 20
         },
         "file": "src/features/webControls/components/WebControls.js",
         "id": "webControls.goHome",
         "start": {
           "column": 10,
-          "line": 13
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!Open in Browser",
         "end": {
           "column": 3,
-          "line": 20
+          "line": 24
         },
         "file": "src/features/webControls/components/WebControls.js",
         "id": "webControls.openInBrowser",
         "start": {
           "column": 17,
-          "line": 17
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Back",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 28
         },
         "file": "src/features/webControls/components/WebControls.js",
         "id": "webControls.back",
         "start": {
           "column": 8,
-          "line": 21
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!Forward",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 32
         },
         "file": "src/features/webControls/components/WebControls.js",
         "id": "webControls.forward",
         "start": {
           "column": 11,
-          "line": 25
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Reload",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 36
         },
         "file": "src/features/webControls/components/WebControls.js",
         "id": "webControls.reload",
         "start": {
           "column": 10,
-          "line": 29
+          "line": 33
         }
       }
     ],
diff --git a/src/i18n/messages/src/components/auth/SetupAssistant.json b/src/i18n/messages/src/components/auth/SetupAssistant.json
index 03593cfbc..f950228b7 100644
--- a/src/i18n/messages/src/components/auth/SetupAssistant.json
+++ b/src/i18n/messages/src/components/auth/SetupAssistant.json
@@ -21,7 +21,7 @@
       "column": 15
     },
     "end": {
-      "line": 26,
+      "line": 27,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Let's go",
     "file": "src/components/auth/SetupAssistant.js",
     "start": {
-      "line": 27,
+      "line": 28,
       "column": 21
     },
     "end": {
-      "line": 30,
+      "line": 31,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Invitations sent successfully",
     "file": "src/components/auth/SetupAssistant.js",
     "start": {
-      "line": 31,
+      "line": 32,
       "column": 21
     },
     "end": {
-      "line": 34,
+      "line": 35,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index d14c30077..e3f5658b2 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -47,7 +47,7 @@
       "column": 21
     },
     "end": {
-      "line": 44,
+      "line": 45,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/services/content/ConnectionLostBanner.json b/src/i18n/messages/src/components/services/content/ConnectionLostBanner.json
index bcfb6ab94..6805b4d67 100644
--- a/src/i18n/messages/src/components/services/content/ConnectionLostBanner.json
+++ b/src/i18n/messages/src/components/services/content/ConnectionLostBanner.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Oh no! Ferdi lost the connection to {name}.",
     "file": "src/components/services/content/ConnectionLostBanner.js",
     "start": {
-      "line": 15,
+      "line": 13,
       "column": 8
     },
     "end": {
-      "line": 18,
+      "line": 16,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!What happened?",
     "file": "src/components/services/content/ConnectionLostBanner.js",
     "start": {
-      "line": 19,
+      "line": 17,
       "column": 19
     },
     "end": {
-      "line": 22,
+      "line": 20,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Reload Service",
     "file": "src/components/services/content/ConnectionLostBanner.js",
     "start": {
-      "line": 23,
+      "line": 21,
       "column": 7
     },
     "end": {
-      "line": 26,
+      "line": 24,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/services/tabs/TabItem.json b/src/i18n/messages/src/components/services/tabs/TabItem.json
index 6d4d5f6fd..60cfde52d 100644
--- a/src/i18n/messages/src/components/services/tabs/TabItem.json
+++ b/src/i18n/messages/src/components/services/tabs/TabItem.json
@@ -151,7 +151,7 @@
       "column": 24
     },
     "end": {
-      "line": 67,
+      "line": 68,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/webControls/components/WebControls.json b/src/i18n/messages/src/features/webControls/components/WebControls.json
index 969437e98..7676ec0b1 100644
--- a/src/i18n/messages/src/features/webControls/components/WebControls.json
+++ b/src/i18n/messages/src/features/webControls/components/WebControls.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Home",
     "file": "src/features/webControls/components/WebControls.js",
     "start": {
-      "line": 13,
+      "line": 17,
       "column": 10
     },
     "end": {
-      "line": 16,
+      "line": 20,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Open in Browser",
     "file": "src/features/webControls/components/WebControls.js",
     "start": {
-      "line": 17,
+      "line": 21,
       "column": 17
     },
     "end": {
-      "line": 20,
+      "line": 24,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Back",
     "file": "src/features/webControls/components/WebControls.js",
     "start": {
-      "line": 21,
+      "line": 25,
       "column": 8
     },
     "end": {
-      "line": 24,
+      "line": 28,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Forward",
     "file": "src/features/webControls/components/WebControls.js",
     "start": {
-      "line": 25,
+      "line": 29,
       "column": 11
     },
     "end": {
-      "line": 28,
+      "line": 32,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Reload",
     "file": "src/features/webControls/components/WebControls.js",
     "start": {
-      "line": 29,
+      "line": 33,
       "column": 10
     },
     "end": {
-      "line": 32,
+      "line": 36,
       "column": 3
     }
   }
diff --git a/src/index.html b/src/index.html
index 6b67cc248..929aec3ad 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,60 +1,84 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <title>Ferdi</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link rel="stylesheet" type="text/css" href="./styles/main.css" />
-  <script type="text/javascript" src="./app.js"></script>
-</head>
-<body>
-  <div class="window-draggable"></div>
-  <div class="dev-warning">DEV MODE</div>
-  <div id="root"></div>
-  <div id="portalContainer"></div>
-  <script>
-    document.querySelector('body').classList.add(process.env.OS_PLATFORM ? process.env.OS_PLATFORM : process.platform);
+  <head>
+    <title>Ferdi</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" type="text/css" href="./styles/main.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="./styles/animations.css"
+      media="(prefers-reduced-motion: no-preference)"
+    />
+    <script type="text/javascript" src="./app.js"></script>
+  </head>
+  <body>
+    <div class="window-draggable"></div>
+    <div class="dev-warning">DEV MODE</div>
+    <div id="root"></div>
+    <div id="portalContainer"></div>
+    <script>
+      document
+        .querySelector('body')
+        .classList.add(
+          process.env.OS_PLATFORM ? process.env.OS_PLATFORM : process.platform,
+        );
 
-    require('./sentry')
-    const { isDevMode } = require('./environment');
-    if (isDevMode) {
-      const debugging = require('debug');
-      debugging.enable(process.env.DEBUG);
+      require('./sentry');
+      const { isDevMode } = require('./environment');
+      if (isDevMode) {
+        const debugging = require('debug');
+        debugging.enable(process.env.DEBUG);
 
-      const debug = debugging('Index');
+        const debug = debugging('Index');
 
-      document.querySelector('body').classList.add('isDevMode');
+        document.querySelector('body').classList.add('isDevMode');
 
-      (function() {
-        const lrHost = 'http://localhost:35729';
-        const s = document.createElement('script');
-        s.async = true;
-        s.setAttribute('src', lrHost + '/livereload.js');
-        document.body.appendChild(s);
+        (function () {
+          const lrHost = 'http://localhost:35729';
+          const s = document.createElement('script');
+          s.async = true;
+          s.setAttribute('src', lrHost + '/livereload.js');
+          document.body.appendChild(s);
 
-        s.onload = () => {
-          debug('livereload loaded');
-          const originalReloadBehaviour = window._onLiveReloadFileChanged;
+          s.onload = () => {
+            debug('livereload loaded');
+            const originalReloadBehaviour = window._onLiveReloadFileChanged;
 
-          window._onLiveReloadFileChanged = (file) => {
-            const isTodoPreloadPath = file.path.includes('/build/features/todos/preload.js');
-            if (!file.path.includes('/build/webview/') && !file.path.includes('/build/index.js') && !file.path.includes('/build/electron/') && !isTodoPreloadPath) {
-              originalReloadBehaviour(file);
-            } else {
-              if (isTodoPreloadPath) {
-                debug('Livereload: Reloading all webviews');
-                const webview = document.querySelector('webview[partition="persist:todos"]');
-                if (webview) webview.reload();
-              } else if (file.path.includes('/build/webview/')) {
-                debug('Livereload: Reloading all webviews');
-                const webviews = document.querySelectorAll('webview').forEach(webview => webview.reload());
+            window._onLiveReloadFileChanged = file => {
+              const isTodoPreloadPath = file.path.includes(
+                '/build/features/todos/preload.js',
+              );
+              if (
+                !file.path.includes('/build/webview/') &&
+                !file.path.includes('/build/index.js') &&
+                !file.path.includes('/build/electron/') &&
+                !isTodoPreloadPath
+              ) {
+                originalReloadBehaviour(file);
               } else {
-                debug('Livereload: skip reload as only main process files have changed');
+                if (isTodoPreloadPath) {
+                  debug('Livereload: Reloading all webviews');
+                  const webview = document.querySelector(
+                    'webview[partition="persist:todos"]',
+                  );
+                  if (webview) webview.reload();
+                } else if (file.path.includes('/build/webview/')) {
+                  debug('Livereload: Reloading all webviews');
+                  const webviews = document
+                    .querySelectorAll('webview')
+                    .forEach(webview => webview.reload());
+                } else {
+                  debug(
+                    'Livereload: skip reload as only main process files have changed',
+                  );
+                }
               }
-            }
-          }
-        }
-      })();
-    }
-  </script>
-</body>
+            };
+          };
+        })();
+      }
+    </script>
+  </body>
 </html>
diff --git a/src/internal-server/public/css/main.css b/src/internal-server/public/css/main.css
index a1c5653d7..b20b67922 100644
--- a/src/internal-server/public/css/main.css
+++ b/src/internal-server/public/css/main.css
@@ -4,7 +4,8 @@ input {
   padding: 0.5rem;
 }
 
-button, .button {
+button,
+.button {
   display: flex;
   overflow: hidden;
   padding: 12px 12px;
@@ -14,7 +15,9 @@ button, .button {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  transition: all 150ms linear;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: all 150ms linear;
+  }
   text-align: center;
   white-space: nowrap;
   text-decoration: none !important;
@@ -33,7 +36,7 @@ button, .button {
   align-items: center;
   flex: 0 0 160px;
   box-shadow: 2px 5px 10px #e4e4e4;
-  color: #FFFFFF;
+  color: #ffffff;
   background: #161616;
 }
 
@@ -66,4 +69,4 @@ button, .button {
 
 td {
   word-break: break-all;
-}
\ No newline at end of file
+}
diff --git a/src/styles/button.scss b/src/styles/button.scss
index d18b683d5..86b3501f0 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -4,29 +4,45 @@
   background: $theme-brand-primary;
   color: $dark-theme-text-color;
 
-  &:hover { background: darken($theme-brand-primary, 5%); }
-  &:active { background: lighten($theme-brand-primary, 5%); }
+  &:hover {
+    background: darken($theme-brand-primary, 5%);
+  }
+  &:active {
+    background: lighten($theme-brand-primary, 5%);
+  }
 
   &.franz-form__button--secondary {
     background: $dark-theme-gray-dark;
     color: $dark-theme-text-color;
 
-    &:hover { background: lighten($dark-theme-gray-dark, 10%); }
-    &:active { background: lighten($dark-theme-gray-dark, 20%); }
+    &:hover {
+      background: lighten($dark-theme-gray-dark, 10%);
+    }
+    &:active {
+      background: lighten($dark-theme-gray-dark, 20%);
+    }
   }
 
   &.franz-form__button--danger {
     background: $theme-brand-danger;
 
-    &:hover { background: darken($theme-brand-danger, 5%); }
-    &:active { background: lighten($theme-brand-danger, 5%); }
+    &:hover {
+      background: darken($theme-brand-danger, 5%);
+    }
+    &:active {
+      background: lighten($theme-brand-danger, 5%);
+    }
   }
 
   &.franz-form__button--warning {
     background: $theme-brand-warning;
 
-    &:hover { background: darken($theme-brand-warning, 5%); }
-    &:active { background: lighten($theme-brand-warning, 5%); }
+    &:hover {
+      background: darken($theme-brand-warning, 5%);
+    }
+    &:active {
+      background: lighten($theme-brand-warning, 5%);
+    }
   }
 
   &.franz-form__button--inverted {
@@ -39,27 +55,35 @@
     }
   }
 
-  &:disabled { opacity: .5; }
+  &:disabled {
+    opacity: 0.5;
+  }
 }
 
 .franz-form__button {
   background: $theme-brand-primary;
   border-radius: 3px;
   display: block;
-  color: #FFF;
+  color: #fff;
   padding: 10px 20px;
   position: relative;
-  transition: background .5s;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background 0.5s;
+  }
   text-align: center;
 
-  &:hover { background: darken($theme-brand-primary, 5%) }
+  &:hover {
+    background: darken($theme-brand-primary, 5%);
+  }
 
   &:active {
     background: lighten($theme-brand-primary, 5%);
     transition: none;
   }
 
-  &:disabled { opacity: .2; }
+  &:disabled {
+    opacity: 0.2;
+  }
 
   &.franz-form__button--large {
     width: 100%;
@@ -70,22 +94,34 @@
     background: $theme-gray-lighter;
     color: $theme-gray;
 
-    &:hover { background: darken($theme-gray-lighter, 5%); }
-    &:active { background: lighten($theme-gray-lighter, 5%); }
+    &:hover {
+      background: darken($theme-gray-lighter, 5%);
+    }
+    &:active {
+      background: lighten($theme-gray-lighter, 5%);
+    }
   }
 
   &.franz-form__button--danger {
     background: $theme-brand-danger;
 
-    &:hover { background: darken($theme-brand-danger, 5%); }
-    &:active { background: lighten($theme-brand-danger, 5%); }
+    &:hover {
+      background: darken($theme-brand-danger, 5%);
+    }
+    &:active {
+      background: lighten($theme-brand-danger, 5%);
+    }
   }
 
   &.franz-form__button--warning {
     background: $theme-brand-warning;
 
-    &:hover { background: darken($theme-brand-warning, 5%); }
-    &:active { background: lighten($theme-brand-warning, 5%); }
+    &:hover {
+      background: darken($theme-brand-warning, 5%);
+    }
+    &:active {
+      background: lighten($theme-brand-warning, 5%);
+    }
   }
 
   &.franz-form__button--inverted {
@@ -93,11 +129,12 @@
     border: 2px solid $theme-brand-primary;
     color: $theme-brand-primary;
     padding: 10px 20px;
-    transition: background .5s, color .5s;
-
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background 0.5s, color 0.5s;
+    }
     &:hover {
       background: darken($theme-brand-primary, 5%);
-      color: #FFF;
+      color: #fff;
     }
   }
 
@@ -122,20 +159,20 @@
   z-index: 9998;
   list-style: none;
   background: $theme-brand-primary;
-  
+
   position: absolute;
   bottom: 20px;
   right: 20px;
 
   cursor: pointer;
-  
+
   display: flex;
   justify-content: center;
   align-items: center;
-  
+
   a {
     font-size: 30px;
-    color: #FFFFFF;
-    cursor: pointer;  
+    color: #ffffff;
+    cursor: pointer;
   }
 }
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss
index 03befedcb..41bd2c251 100644
--- a/src/styles/content-tabs.scss
+++ b/src/styles/content-tabs.scss
@@ -9,7 +9,7 @@
     .content-tabs__tabs {
       .content-tabs__item {
         background: $dark-theme-gray;
-        color: #FFF;
+        color: #fff;
         border: 0;
       }
     }
@@ -24,19 +24,26 @@
     overflow: hidden;
 
     .content-tabs__item {
-      background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%));
+      background: linear-gradient(
+        $theme-gray-lightest 80%,
+        darken($theme-gray-lightest, 3%)
+      );
       border-right: 1px solid $theme-gray-lighter;
       color: $theme-gray-dark;
       flex: 1;
       padding: 10px;
-      transition: background $theme-transition-time;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: background $theme-transition-time;
+      }
 
-      &:last-of-type { border-right: 0; }
+      &:last-of-type {
+        border-right: 0;
+      }
 
       &.is-active {
         background: $theme-brand-primary;
         box-shadow: none;
-        color: #FFF;
+        color: #fff;
       }
     }
   }
@@ -51,10 +58,16 @@
       display: none;
       top: 0;
 
-      &.is-active { display: block; }
+      &.is-active {
+        display: block;
+      }
     }
 
-    .franz-form__input-wrapper { background: #FFF; }
-    .franz-form__field:last-of-type { margin-bottom: 0; }
+    .franz-form__input-wrapper {
+      background: #fff;
+    }
+    .franz-form__field:last-of-type {
+      margin-bottom: 0;
+    }
   }
 }
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 432332b49..1b2c99945 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -5,6 +5,7 @@
   src: url('../assets/fonts/OpenSans-Light.ttf');
   font-weight: 300;
   font-style: normal;
+  display: swap;
 }
 
 @font-face {
@@ -12,6 +13,7 @@
   src: url('../assets/fonts/OpenSans-Regular.ttf');
   font-weight: normal;
   font-style: normal;
+  display: swap;
 }
 
 @font-face {
@@ -19,6 +21,7 @@
   src: url('../assets/fonts/OpenSans-Bold.ttf');
   font-weight: bold;
   font-style: normal;
+  display: swap;
 }
 
 @font-face {
@@ -26,6 +29,7 @@
   src: url('../assets/fonts/OpenSans-BoldItalic.ttf');
   font-weight: bold;
   font-style: italic;
+  display: swap;
 }
 
 @font-face {
@@ -33,6 +37,7 @@
   src: url('../assets/fonts/OpenSans-ExtraBold.ttf');
   font-weight: 800;
   font-style: normal;
+  display: swap;
 }
 
 @font-face {
@@ -40,4 +45,5 @@
   src: url('../assets/fonts/OpenSans-ExtraBoldItalic.ttf');
   font-weight: 800;
   font-style: italic;
+  display: swap;
 }
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 {
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index acbd65ad1..49e041022 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -1,6 +1,8 @@
 @import './config.scss';
 
-html { overflow: hidden; }
+html {
+  overflow: hidden;
+}
 
 @keyframes pulse-danger {
   0% {
@@ -21,7 +23,7 @@ html { overflow: hidden; }
 
     &::after {
       box-shadow: inset 0 0 5px 0 $dark-theme-black,
-                  inset 0 0 2px 0 rgba(0, 0, 0, 0.4);
+        inset 0 0 2px 0 rgba(0, 0, 0, 0.4);
     }
 
     .sidebar__add-service {
@@ -48,12 +50,12 @@ html { overflow: hidden; }
         filter: grayscale(1);
       }
 
-      .update-available { 
+      .update-available {
         align-items: center;
         background: $theme-brand-danger;
         border-radius: 20px;
         bottom: 5px;
-        color: #FFF;
+        color: #fff;
         display: flex;
         justify-content: center;
         padding: 0px 5px;
@@ -71,7 +73,9 @@ html { overflow: hidden; }
     }
   }
 
-  .app-loader .app-loader__title { color: $dark-theme-gray-lightest; }
+  .app-loader .app-loader__title {
+    color: $dark-theme-gray-lightest;
+  }
 }
 
 body.win32:not(.isFullScreen) .app .app__content {
@@ -96,7 +100,9 @@ body.win32:not(.isFullScreen) .app .app__content {
   }
 }
 
-.electron-app-title-bar { z-index: 99999999; }
+.electron-app-title-bar {
+  z-index: 99999999;
+}
 
 .window-draggable {
   height: 22px;
@@ -109,7 +115,9 @@ body.win32:not(.isFullScreen) .app .app__content {
   -webkit-app-region: drag;
 }
 
-.darwin .sidebar { padding-top: 23px; }
+.darwin .sidebar {
+  padding-top: 23px;
+}
 
 .sidebar {
   position: relative;
@@ -133,8 +141,8 @@ body.win32:not(.isFullScreen) .app .app__content {
     z-index: 1000;
     pointer-events: none;
     clip-path: inset(10px 0 10px 10px);
-    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, .12),
-                inset 0 0 2px 0 rgba(0, 0, 0, 0.24);
+    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.12),
+      inset 0 0 2px 0 rgba(0, 0, 0, 0.24);
   }
 
   .sidebar__add-service {
@@ -154,16 +162,25 @@ body.win32:not(.isFullScreen) .app .app__content {
     width: $theme-sidebar-width;
 
     &:hover,
-    &:active { color: lighten($theme-gray-light, 10%); }
-    &.is-muted, &.is-active { color: $theme-brand-primary; }
-    &--new-service { padding-bottom: 6px; }
+    &:active {
+      color: lighten($theme-gray-light, 10%);
+    }
+    &.is-muted,
+    &.is-active {
+      color: $theme-brand-primary;
+    }
+    &--new-service {
+      padding-bottom: 6px;
+    }
   }
 
   & > div {
     display: flex;
     overflow-y: scroll;
 
-    &::-webkit-scrollbar { display: none; }
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 }
 
@@ -171,8 +188,12 @@ body.win32:not(.isFullScreen) .app .app__content {
   display: flex;
   flex-direction: row;
 
-  & > * { margin-right: 20px; }
-  & :last-child { margin-right: 0; }
+  & > * {
+    margin-right: 20px;
+  }
+  & :last-child {
+    margin-right: 0;
+  }
 }
 
 .app-loader {
@@ -181,19 +202,23 @@ body.win32:not(.isFullScreen) .app .app__content {
   justify-content: center;
 
   .app-loader__title {
-    color: #FFF;
+    color: #fff;
     font-size: 40px;
   }
 
-  & > span { height: auto; }
+  & > span {
+    height: auto;
+  }
 }
 
-.dev-warning { display: none; }
+.dev-warning {
+  display: none;
+}
 
 .isDevMode .dev-warning {
   border-radius: 3px;
   background: $theme-brand-warning;
-  color: #FFF;
+  color: #fff;
   display: block;
   font-size: 8px;
   height: auto;
@@ -201,12 +226,15 @@ body.win32:not(.isFullScreen) .app .app__content {
   position: fixed;
   left: 9px;
   bottom: 0px;
-  transition: opacity .5s ease;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 0.5s ease;
+  }
   width: auto;
   z-index: 999999999;
   pointer-events: none;
 }
 
-a, button {
+a,
+button {
   cursor: pointer;
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 4cc996785..b0815e086 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -22,7 +22,6 @@ $mdi-font-path: '../node_modules/@mdi/font/fonts';
 @import './tooltip.scss';
 @import './info-bar.scss';
 @import './status-bar-target-url.scss';
-@import './animations.scss';
 @import './infobox.scss';
 @import './badge.scss';
 @import './content-tabs.scss';
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index b1e148ca0..e8297408d 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -11,9 +11,10 @@
   }
 }
 
-
 .franz-form {
-  .franz-form__radio-wrapper { display: flex; }
+  .franz-form__radio-wrapper {
+    display: flex;
+  }
 
   .franz-form__radio {
     border: 2px solid $theme-gray-lighter;
@@ -24,18 +25,24 @@
     margin-right: 20px;
     padding: 11px;
     text-align: center;
-    transition: background $theme-transition-time;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background $theme-transition-time;
+    }
 
-    &:last-of-type { margin-right: 0; }
+    &:last-of-type {
+      margin-right: 0;
+    }
 
     &.is-selected {
-      background: #FFF;
+      background: #fff;
       border-width: 2px;
       border-style: solid;
       border-color: $theme-brand-primary;
       color: $theme-brand-primary;
     }
 
-    input { display: none; }
+    input {
+      display: none;
+    }
   }
 }
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
index 5bdc60a57..37c2febf6 100644
--- a/src/styles/recipes.scss
+++ b/src/styles/recipes.scss
@@ -4,7 +4,9 @@
   background-color: $dark-theme-gray-dark;
   color: $dark-theme-text-color;
 
-  &:hover { background-color: $dark-theme-gray; }
+  &:hover {
+    background-color: $dark-theme-gray;
+  }
 }
 
 .recipes {
@@ -17,7 +19,7 @@
 
     &.recipes__list--disabled {
       filter: grayscale(100%);
-      opacity: .3;
+      opacity: 0.3;
       pointer-events: none;
     }
   }
@@ -26,16 +28,20 @@
     height: auto;
     margin-bottom: 35px;
 
-    .badge { margin-right: 10px; }
+    .badge {
+      margin-right: 10px;
+    }
 
     &.recipes__navigation--disabled {
       filter: grayscale(100%);
-      opacity: .3;
+      opacity: 0.3;
       pointer-events: none;
     }
   }
 
-  &__service-request { float: right; }
+  &__service-request {
+    float: right;
+  }
 }
 
 .recipe-teaser {
@@ -45,24 +51,32 @@
   margin: 0 20px 20px 0;
   overflow: hidden;
   position: relative;
-  transition: background $theme-transition-time;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background $theme-transition-time;
+  }
   width: calc(25% - 20px);
 
-  &:hover { background-color: $theme-gray-lighter; }
+  &:hover {
+    background-color: $theme-gray-lighter;
+  }
 
   .recipe-teaser__icon {
     margin-bottom: 10px;
     width: 50px;
   }
 
-  .recipe-teaser__label { display: block; }
+  .recipe-teaser__label {
+    display: block;
+  }
 
-  h2 { z-index: 10; }
+  h2 {
+    z-index: 10;
+  }
 
   &__dev-badge {
     background: $theme-brand-warning;
-    box-shadow: 0 0 4px rgba(black, .2);
-    color: #FFF;
+    box-shadow: 0 0 4px rgba(black, 0.2);
+    color: #fff;
     font-size: 10px;
     position: absolute;
     right: -13px;
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 5d4e81a4f..501f97b98 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,63 +1,85 @@
 @import './config.scss';
 
 %headline {
-  color: #FFF;
+  color: #fff;
   font-size: 20px;
   font-weight: 400;
   letter-spacing: -1px;
 
-  a { color: #FFF }
+  a {
+    color: #fff;
+  }
 }
 
 %headline__dark {
-  color: #FFF;
+  color: #fff;
   font-size: 20px;
   font-weight: 400;
   letter-spacing: -1px;
 
-  a { color: #FFF }
+  a {
+    color: #fff;
+  }
 }
 
 .theme__dark {
-  .settings-wrapper { background: rgba($dark-theme-black, .8); }
+  .settings-wrapper {
+    background: rgba($dark-theme-black, 0.8);
+  }
 
   .settings {
     .settings__header {
-      .mdi { color: #FFF }
+      .mdi {
+        color: #fff;
+      }
     }
 
     .settings__main {
       background: $dark-theme-gray-darkest;
     }
 
-    .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; }
+    .settings__body::-webkit-scrollbar-thumb {
+      background: $dark-theme-gray;
+    }
 
     .settings__close {
-      color: #FFF;
+      color: #fff;
     }
 
-    &__settings-group h3 { color: $dark-theme-gray-lightest; }
+    &__settings-group h3 {
+      color: $dark-theme-gray-lightest;
+    }
 
     .settings__message {
       border-top: 1px solid $theme-gray-lighter;
       color: $dark-theme-gray-lightest;
 
-      .mdi { color: $dark-theme-gray-lightest; }
+      .mdi {
+        color: $dark-theme-gray-lightest;
+      }
     }
 
-    .settings__help { color: $dark-theme-gray-lightest; }
+    .settings__help {
+      color: $dark-theme-gray-lightest;
+    }
 
     .settings__controls {
       background: $dark-theme-gray-darker;
 
-      .franz-form__button.franz-form__button--secondary { background: $theme-gray-light; }
+      .franz-form__button.franz-form__button--secondary {
+        background: $theme-gray-light;
+      }
     }
 
     .account {
-      .account__box { background: $dark-theme-gray-darker; }
+      .account__box {
+        background: $dark-theme-gray-darker;
+      }
     }
 
-    .legal { color: $theme-gray-light; }
+    .legal {
+      color: $theme-gray-light;
+    }
   }
 
   .settings-navigation {
@@ -69,7 +91,7 @@
       border-bottom: 1px solid darken($dark-theme-gray-darker, 3%);
 
       &:last-child {
-        border: 0,
+        border: 0;
       }
 
       .badge {
@@ -87,7 +109,7 @@
       }
 
       &.is-disabled {
-        filter: grayscale(100%) opacity(.2);
+        filter: grayscale(100%) opacity(0.2);
       }
 
       &.is-active {
@@ -101,13 +123,15 @@
       }
     }
 
-    .settings-navigation__action-badge { background: $theme-brand-danger; }
+    .settings-navigation__action-badge {
+      background: $theme-brand-danger;
+    }
   }
 }
 
 .settings-wrapper {
   align-items: center;
-  background: rgba(black, .5);
+  background: rgba(black, 0.5);
   display: flex;
   height: 100%;
   left: 0;
@@ -129,7 +153,7 @@
 
 .settings {
   border-radius: $theme-border-radius;
-  box-shadow: 0 20px 50px rgba($dark-theme-black, .5);
+  box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5);
   display: flex;
   height: 100%;
   max-height: 720px;
@@ -147,7 +171,7 @@
     height: auto;
     border-radius: 0 $theme-border-radius $theme-border-radius 0;
     overflow: hidden;
-    background: #FFF;
+    background: #fff;
   }
 
   .settings__header {
@@ -157,7 +181,7 @@
     height: 50px;
     padding: 0 40px;
     width: calc(100% - 60px);
-    color: #FFF;
+    color: #fff;
 
     h1 {
       @extend %headline;
@@ -177,11 +201,13 @@
       transform: skew(15deg) rotate(2deg);
     }
 
-    .mdi { color: $theme-gray-light; }
+    .mdi {
+      color: $theme-gray-light;
+    }
   }
 
   .settings_titles {
-    display:inline-block;
+    display: inline-block;
   }
 
   .settings__body {
@@ -190,9 +216,13 @@
     overflow-y: scroll;
     padding: 25px 15px 15px 25px;
 
-    .badge { margin-right: 10px; }
+    .badge {
+      margin-right: 10px;
+    }
 
-    &::-webkit-scrollbar { width: 8px; }
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
 
     /* Track */
     &::-webkit-scrollbar-track {
@@ -208,9 +238,16 @@
       -webkit-border-radius: 10px;
     }
 
-    &::-webkit-scrollbar-thumb:window-inactive { background: none; }
-    .service-flex-grid { display: flex; }
-    .service-name,.user-agent { flex: 1px; }
+    &::-webkit-scrollbar-thumb:window-inactive {
+      background: none;
+    }
+    .service-flex-grid {
+      display: flex;
+    }
+    .service-name,
+    .user-agent {
+      flex: 1px;
+    }
 
     .service-icon {
       float: right;
@@ -232,20 +269,28 @@
   .settings__close {
     background: $theme-brand-primary;
     // border-left: 1px solid darken($theme-brand-primary, 8%);
-    color: #FFF;
+    color: #fff;
     font-size: 20px;
     height: 50px;
     padding: 0 20px;
     position: absolute;
     right: 0;
-    transition: background $theme-transition-time;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background $theme-transition-time;
+    }
     cursor: pointer;
 
-    &::before { cursor: pointer; }
-    &:hover { background: darken($theme-brand-primary, 5%); }
+    &::before {
+      cursor: pointer;
+    }
+    &:hover {
+      background: darken($theme-brand-primary, 5%);
+    }
   }
 
-  .search-input { margin-bottom: 30px; }
+  .search-input {
+    margin-bottom: 30px;
+  }
 
   &__options {
     flex: 1;
@@ -258,10 +303,12 @@
     h3 {
       color: $theme-gray-light;
       font-weight: bold;
-      letter-spacing: -.1px;
+      letter-spacing: -0.1px;
       margin: 25px 0 15px;
 
-      &:first-of-type { margin-top: 0; }
+      &:first-of-type {
+        margin-top: 0;
+      }
 
       .badge {
         font-weight: normal;
@@ -302,14 +349,20 @@
     padding: 10px 20px;
 
     .franz-form__button {
-      &[type='submit'] { margin-left: auto; }
-      &.franz-form__button--secondary { background: $theme-gray-light; }
+      &[type='submit'] {
+        margin-left: auto;
+      }
+      &.franz-form__button--secondary {
+        background: $theme-gray-light;
+      }
     }
   }
 
-  .settings__delete-button { right: 0; }
+  .settings__delete-button {
+    right: 0;
+  }
   .settings__open-recipe-file-button {
-    cursor:pointer;
+    cursor: pointer;
     margin-right: 10px;
   }
   .settings__open-recipe-file-container {
@@ -330,7 +383,9 @@
       margin-bottom: 1em;
     }
 
-    a.button { margin-top: 40px; }
+    a.button {
+      margin-top: 40px;
+    }
   }
 
   .account {
@@ -343,8 +398,12 @@
       margin-bottom: 40px;
       padding: 20px;
 
-      &.account__box--flex { display: flex; }
-      &.account__box--last { margin-bottom: 0; }
+      &.account__box--flex {
+        display: flex;
+      }
+      &.account__box--last {
+        margin-bottom: 0;
+      }
 
       .auth__button {
         margin-top: 10px;
@@ -360,16 +419,24 @@
     .account__info {
       flex: 1;
 
-      h2 { margin-bottom: 5px; }
-      .badge { margin-top: 5px; }
-      .username { margin-right: 10 }
+      h2 {
+        margin-bottom: 5px;
+      }
+      .badge {
+        margin-top: 5px;
+      }
+      .username {
+        margin-right: 10;
+      }
     }
 
     .account__subscription {
       align-items: center;
       display: flex;
 
-      .badge { margin-left: 10px; }
+      .badge {
+        margin-left: 10px;
+      }
     }
 
     .manage-user-links {
@@ -378,10 +445,18 @@
       justify-content: space-between;
     }
 
-    .account__subscription-button { margin-left: auto; }
-    .franz-form__button { white-space: nowrap; }
-    div { height: auto; }
-    [data-type="franz-button"] div { height: 20px }
+    .account__subscription-button {
+      margin-left: auto;
+    }
+    .franz-form__button {
+      white-space: nowrap;
+    }
+    div {
+      height: auto;
+    }
+    [data-type='franz-button'] div {
+      height: 20px;
+    }
 
     .invoices {
       width: 100%;
@@ -399,7 +474,9 @@
       .invoices__action {
         text-align: right;
 
-        button { color: $theme-brand-primary; }
+        button {
+          color: $theme-brand-primary;
+        }
       }
     }
   }
@@ -409,7 +486,9 @@
     font-size: 40px;
     margin-bottom: 20px;
 
-    img { width: 40px; }
+    img {
+      width: 40px;
+    }
   }
 
   .content-tabs {
@@ -432,8 +511,8 @@
   width: 240px;
   height: 100%;
   align-self: center;
-  border-top-left-radius: $theme-border-radius;;
-  border-bottom-left-radius: $theme-border-radius;;
+  border-top-left-radius: $theme-border-radius;
+  border-bottom-left-radius: $theme-border-radius;
   overflow: hidden;
 
   .settings-navigation__link {
@@ -445,12 +524,15 @@
     height: 51px;
     padding: 0 20px;
     text-decoration: none;
-    transition: background $theme-transition-time, color $theme-transition-time;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background $theme-transition-time,
+        color $theme-transition-time;
+    }
     border-bottom: 1px solid darken($theme-gray-lightest, 3%);
 
     .badge {
       background: $theme-gray-light;
-      color: #FFF;
+      color: #fff;
     }
 
     &:hover {
@@ -458,26 +540,31 @@
 
       .badge {
         background: $theme-gray-light;
-        color: #FFF;
+        color: #fff;
       }
     }
 
     &.is-active {
       background: $theme-brand-primary;
-      color: #FFF;
+      color: #fff;
 
       .badge {
-        background: #FFF;
+        background: #fff;
         color: $theme-brand-primary;
       }
     }
   }
 
-  .settings-navigation__expander { flex: 1; }
+  .settings-navigation__expander {
+    flex: 1;
+  }
 
   .badge {
     display: initial;
-    transition: background $theme-transition-time, color $theme-transition-time;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background $theme-transition-time,
+        color $theme-transition-time;
+    }
   }
 
   .settings-navigation__action-badge {
@@ -491,5 +578,7 @@
 }
 
 .settings__support-badges {
-  a { margin-right: 10px }
+  a {
+    margin-right: 10px;
+  }
 }
diff --git a/src/styles/slider.scss b/src/styles/slider.scss
index 8bb771586..85b31660f 100644
--- a/src/styles/slider.scss
+++ b/src/styles/slider.scss
@@ -3,43 +3,44 @@
 .theme__dark .franz-form .franz-form__slider-wrapper .slider {
   border: 1px solid $dark-theme-gray;
   background: $dark-theme-gray;
-
 }
 
-
 .franz-form {
-  .franz-form__slider-wrapper { 
+  .franz-form__slider-wrapper {
     display: flex;
     flex-direction: row;
 
-    .franz-form__label { margin-left: 20px; }
+    .franz-form__label {
+      margin-left: 20px;
+    }
 
     .slider-container {
-      width: 100%; /* Width of the outside container */ 
+      width: 100%; /* Width of the outside container */
     }
-      
+
     /* The slider itself */
     .slider {
       -webkit-appearance: none;
       width: 100%;
       height: 14px;
-      border-radius: $theme-border-radius;  
+      border-radius: $theme-border-radius;
       background: $theme-gray-lighter;
       outline: none;
-      opacity: 1.0;
-      -webkit-transition: .2s;
-      transition: opacity .2s;
+      opacity: 1;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: opacity 0.2s;
+      }
     }
-    
+
     .slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
       width: 14px;
       height: 14px;
-      border-radius: 50%; 
+      border-radius: 50%;
       background: $theme-brand-primary;
-      box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
       cursor: pointer;
     }
-    }
+  }
 }
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 31a239387..df10da77c 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -4,11 +4,17 @@
   &.is-active {
     background: $dark-theme-gray;
 
-    .tab-item__icon { margin-left: -4px; }
+    .tab-item__icon {
+      margin-left: -4px;
+    }
   }
 
-  &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); }
-  .tab-item__icon { width: 34px; }
+  &.is-disabled .tab-item__icon {
+    filter: grayscale(100%) opacity(0.2);
+  }
+  .tab-item__icon {
+    width: 34px;
+  }
 }
 
 .tabs {
@@ -29,22 +35,34 @@
   justify-content: center;
   min-height: 50px;
   position: relative;
-  transition: background $theme-transition-time;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background $theme-transition-time;
+  }
   width: $theme-sidebar-width;
 
   &.is-active {
-    background: change-color($theme-brand-primary,
-                             $lightness: min(lightness($theme-brand-primary) * 1.35, 100));
+    background: change-color(
+      $theme-brand-primary,
+      $lightness: min(lightness($theme-brand-primary) * 1.35, 100)
+    );
     border-left-width: 4px;
     border-left-style: solid;
     color: $theme-brand-primary;
 
-    .tab-item__icon { margin-left: -4px; }
+    .tab-item__icon {
+      margin-left: -4px;
+    }
   }
 
-  &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); }
-  &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; }
-  &:active .tab-item__icon { opacity: .7; }
+  &.is-disabled .tab-item__icon {
+    filter: grayscale(100%) opacity(0.2);
+  }
+  &.has-custom-icon .tab-item__icon {
+    border-radius: $theme-border-radius;
+  }
+  &:active .tab-item__icon {
+    opacity: 0.7;
+  }
 
   .tab-item__icon {
     height: auto;
@@ -56,7 +74,7 @@
     background: $theme-brand-danger;
     border-radius: 20px;
     bottom: 8px;
-    color: #FFF;
+    color: #fff;
     display: flex;
     font-size: 11px;
     justify-content: center;
@@ -66,13 +84,13 @@
     position: absolute;
     right: 8px;
 
-    &.is-indirect { 
+    &.is-indirect {
       padding-top: 0;
       background: #0088cc;
-	}
-    &.hibernating { 
-      padding-top: 0; 
-      background: $theme-gray; 
+    }
+    &.hibernating {
+      padding-top: 0;
+      background: $theme-gray;
       font-size: 0px;
       min-height: 10px;
       min-width: 10px;
@@ -96,11 +114,13 @@
     right: 8px;
     width: 17px;
 
-    &.is-indirect { 
+    &.is-indirect {
       padding-top: 0;
       background: #0088cc;
-	}
+    }
   }
 
-  &.is-reordering { z-index: 99999; }
+  &.is-reordering {
+    z-index: 99999;
+  }
 }
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss
index 5cd9e4526..ed4c0d11b 100644
--- a/src/styles/toggle.scss
+++ b/src/styles/toggle.scss
@@ -39,7 +39,9 @@ $toggle-button-size: 22px;
       left: 1px;
       top: 1px;
       position: absolute;
-      transition: all 0.5s;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: all 0.5s;
+      }
       width: $toggle-size - 2;
     }
 
diff --git a/src/styles/type.scss b/src/styles/type.scss
index 37ec0bcca..234c4d5c4 100644
--- a/src/styles/type.scss
+++ b/src/styles/type.scss
@@ -2,9 +2,15 @@
 @import './mixins.scss';
 
 .theme__dark {
-  a { color: $dark-theme-gray-smoke; }
-  .label { color: $dark-theme-gray-lightest; }
-  .footnote { color: $dark-theme-gray-lightest; }
+  a {
+    color: $dark-theme-gray-smoke;
+  }
+  .label {
+    color: $dark-theme-gray-lightest;
+  }
+  .footnote {
+    color: $dark-theme-gray-lightest;
+  }
 }
 
 h1 {
@@ -21,36 +27,45 @@ h2 {
   margin-bottom: 25px;
   margin-top: 5px;
 
-  &:first-of-type { margin-top: 0; }
+  &:first-of-type {
+    margin-top: 0;
+  }
 }
 
 p {
   margin-bottom: 10px;
   line-height: 1.7rem;
 
-  &:last-of-type { margin-bottom: 0; }
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
-strong { font-weight: bold; }
+strong {
+  font-weight: bold;
+}
 
-a, button {
+a,
+button {
   color: $theme-text-color;
   text-decoration: none;
 
   &.button {
     background: $theme-brand-primary;
-    color: #FFF;
+    color: #fff;
     border-radius: 3px;
     display: inline-block;
     padding: 10px 20px;
     position: relative;
     text-align: center;
-    transition: background .5s, color .5s;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background 0.5s, color 0.5s;
+    }
     cursor: pointer;
 
     &:hover {
       background: darken($theme-brand-primary, 10%);
-      color: #FFF;
+      color: #fff;
     }
   }
 
@@ -60,14 +75,19 @@ a, button {
   }
 }
 
-.error-message, .error-message:last-of-type {
+.error-message,
+.error-message:last-of-type {
   color: $theme-brand-danger;
   margin: 10px 0;
 }
 
-.center { text-align: center; }
+.center {
+  text-align: center;
+}
 
-.label { @include formLabel(); }
+.label {
+  @include formLabel();
+}
 
 .footnote {
   color: $theme-gray-light;
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
index c1f85391e..7202fe148 100644
--- a/src/styles/welcome.scss
+++ b/src/styles/welcome.scss
@@ -1,24 +1,26 @@
 .auth .welcome {
   height: auto;
-  
+
   &__content {
     align-items: center;
-    color: #FFF;
+    color: #fff;
     display: flex;
     justify-content: center;
     height: auto;
   }
 
-  &__logo { width: 100px; }
+  &__logo {
+    width: 100px;
+  }
 
   &__text {
-    border-left: 1px solid #FFF;
+    border-left: 1px solid #fff;
     margin-left: 40px;
     padding-left: 40px;
 
     h1 {
       font-size: 60px;
-      letter-spacing: -.4rem;
+      letter-spacing: -0.4rem;
       margin-bottom: 5px;
     }
 
@@ -42,33 +44,35 @@
     text-align: center;
     height: auto;
 
-    .button:first-of-type { margin-right: 25px; }
+    .button:first-of-type {
+      margin-right: 25px;
+    }
   }
 
   .button {
-    border-color: #FFF;
-    color: #FFF;
+    border-color: #fff;
+    color: #fff;
     cursor: pointer;
 
     &:hover {
-      background: #FFF;
+      background: #fff;
       color: $theme-brand-primary;
     }
 
     &__inverted {
-      background: #FFF;
+      background: #fff;
       color: $theme-brand-primary;
     }
 
     &__inverted:hover {
       background: none;
-      color: #FFF;
+      color: #fff;
     }
   }
 
   &__featured-services {
     align-items: center;
-    background: #FFF;
+    background: #fff;
     border-radius: 6px;
     display: flex;
     flex-wrap: wrap;
@@ -82,9 +86,13 @@
   &__featured-service {
     margin: 0 10px 15px;
     height: 35px;
-    transition: .5s filter, .5s opacity;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: 0.5s filter, 0.5s opacity;
+    }
     width: 35px;
 
-    img { width: 35px; }
+    img {
+      width: 35px;
+    }
   }
 }
diff --git a/src/webview/screenshare.js b/src/webview/screenshare.js
index ab548a625..e7e43c04e 100644
--- a/src/webview/screenshare.js
+++ b/src/webview/screenshare.js
@@ -3,17 +3,23 @@ import { desktopCapturer } from 'electron';
 const CANCEL_ID = 'desktop-capturer-selection__cancel';
 
 export async function getDisplayMediaSelector() {
-  const sources = await desktopCapturer.getSources({ types: ['screen', 'window'] });
+  const sources = await desktopCapturer.getSources({
+    types: ['screen', 'window'],
+  });
   return `<div class="desktop-capturer-selection__scroller">
   <ul class="desktop-capturer-selection__list">
-    ${sources.map(({ id, name, thumbnail }) => `
+    ${sources
+    .map(
+      ({ id, name, thumbnail }) => `
       <li class="desktop-capturer-selection__item">
         <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
           <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
           <span class="desktop-capturer-selection__name">${name}</span>
         </button>
       </li>
-    `).join('')}
+    `,
+    )
+    .join('')}
     <li class="desktop-capturer-selection__item">
       <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
         <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
@@ -67,7 +73,9 @@ export const screenShareCss = `
   padding: 4px;
   background: #252626;
   text-align: left;
-  transition: background-color .15s, box-shadow .15s, color .15s;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color .15s, box-shadow .15s, color .15s;
+  }
   color: #dedede;
 }
 .desktop-capturer-selection__btn:hover,
-- 
cgit v1.2.3-70-g09d2


From 11c2b649388687570851fcb58ab59f5daaa3f194 Mon Sep 17 00:00:00 2001
From: Vijay A <avijayr@protonmail.com>
Date: Wed, 11 Aug 2021 18:50:42 +0530
Subject: revert: fixing #1757 by commenting out partial fix

- Fixes issue with ferdi not starting up.
- Also adds some defensive checks for the same code in other
repeated locations.
---
 packages/forms/src/button/index.tsx                       |  2 +-
 packages/forms/src/select/index.tsx                       |  2 +-
 packages/forms/src/toggle/index.tsx                       |  2 +-
 packages/ui/src/infobox/index.tsx                         | 15 ++++++++-------
 src/components/auth/SetupAssistant.js                     |  2 +-
 src/components/layout/AppLayout.js                        |  2 +-
 src/components/services/content/ConnectionLostBanner.js   |  2 +-
 src/components/services/tabs/TabItem.js                   |  2 +-
 src/components/ui/AppLoader/styles.js                     |  2 +-
 src/features/webControls/components/WebControls.js        |  2 +-
 src/features/workspaces/components/WorkspaceDrawerItem.js |  2 +-
 .../workspaces/components/WorkspaceSwitchingIndicator.js  |  2 +-
 12 files changed, 19 insertions(+), 18 deletions(-)

(limited to 'src/components/services')

diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index 0aef04a6c..48fb61635 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -38,7 +38,7 @@ interface IProps extends IFormField, IWithStyle {
 let buttonTransition: string = 'none';
 let loaderContainerTransition: string = 'none';
 
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   buttonTransition = 'background .5s, opacity 0.3s';
   loaderContainerTransition = 'all 0.3s';
 }
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index ef3e70ddb..d7479f63e 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -49,7 +49,7 @@ interface IState {
 let popupTransition: string = 'none';
 let toggleTransition: string = 'none';
 
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   popupTransition = 'all 0.3s';
   toggleTransition = 'transform 0.3s';
 }
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index e525d2906..bdf1d22cf 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -19,7 +19,7 @@ interface IProps
 
 let buttonTransition: string = 'none';
 
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   buttonTransition = 'all .5s';
 }
 
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index a6e4b3240..88cfdb620 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -44,13 +44,14 @@ const buttonStyles = (theme: Theme) => {
   return styles;
 };
 
-let infoBoxTransition: string = 'none';
-let ctaTransition: string = 'none';
-
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
-  infoBoxTransition = 'all 0.5s';
-  ctaTransition = 'opacity 0.3s';
-}
+const infoBoxTransition: string = 'none';
+const ctaTransition: string = 'none';
+
+// TODO: Not sure why, but this location alone, the `dinwo` is not defined - and it throws an error thus aborting the startup sequence of ferdi
+// if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+//   infoBoxTransition = 'all 0.5s';
+//   ctaTransition = 'opacity 0.3s';
+// }
 
 const styles = (theme: Theme) => ({
   wrapper: {
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index 06ab09892..0f821d4fc 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -37,7 +37,7 @@ const messages = defineMessages({
 
 let transition = 'none';
 
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   transition = 'all 0.25s';
 }
 
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index de962cc12..d5e1deb39 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -47,7 +47,7 @@ const messages = defineMessages({
 
 let transition = 'none';
 
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   transition = 'transform 0.5s ease';
 }
 
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index 343ddf8b4..ebe863333 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -26,7 +26,7 @@ const messages = defineMessages({
 
 let buttonTransition = 'none';
 
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   buttonTransition = 'opacity 0.25s';
 }
 
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 023e152c7..d4a4048eb 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -72,7 +72,7 @@ let pollIndicatorTransition = 'none';
 let polledTransition = 'none';
 let pollAnsweredTransition = 'none';
 
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   pollIndicatorTransition = 'background 0.5s';
   polledTransition = 'background 0.1s';
   pollAnsweredTransition = 'background 0.1s';
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js
index 011f6282d..9891e0387 100644
--- a/src/components/ui/AppLoader/styles.js
+++ b/src/components/ui/AppLoader/styles.js
@@ -1,6 +1,6 @@
 let sloganTransition = 'none';
 
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   sloganTransition = 'opacity 1s ease';
 }
 
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
index 417ebb0b0..9a95eb2d2 100644
--- a/src/features/webControls/components/WebControls.js
+++ b/src/features/webControls/components/WebControls.js
@@ -38,7 +38,7 @@ const messages = defineMessages({
 
 let buttonTransition = 'none';
 
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   buttonTransition = 'opacity 0.25s';
 }
 
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index c3f9fcb19..f08e87bd7 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -20,7 +20,7 @@ const messages = defineMessages({
 
 let itemTransition = 'none';
 
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   itemTransition = 'background-color 300ms ease-out';
 }
 
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index 613075c4a..c8ec0bc4c 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -17,7 +17,7 @@ const messages = defineMessages({
 
 let wrapperTransition = 'none';
 
-if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
   wrapperTransition = 'width 0.5s ease';
 }
 
-- 
cgit v1.2.3-70-g09d2


From 3405e22bf2bcddef2de0d59453c978fd1ea03836 Mon Sep 17 00:00:00 2001
From: Vijay A <avijayr@protonmail.com>
Date: Wed, 11 Aug 2021 22:32:58 +0530
Subject: feat: allow the user to enable/disable dark mode (from the sidebar
 context menu)

---
 src/actions/service.js                             |  3 ++
 src/components/layout/Sidebar.js                   |  1 +
 src/components/services/tabs/TabBarSortableList.js |  3 ++
 src/components/services/tabs/TabItem.js            | 16 +++++++
 src/components/services/tabs/Tabbar.js             |  3 ++
 src/containers/layout/AppLayoutContainer.js        |  2 +
 src/i18n/locales/defaultMessages.json              | 50 ++++++++++++++++------
 src/i18n/locales/en-US.json                        |  2 +
 .../src/components/services/tabs/TabItem.json      | 50 ++++++++++++++++------
 .../app/Controllers/Http/ServiceController.js      |  6 +--
 src/stores/ServicesStore.js                        | 13 ++++++
 11 files changed, 122 insertions(+), 27 deletions(-)

(limited to 'src/components/services')

diff --git a/src/actions/service.js b/src/actions/service.js
index 578fdeca8..e56513f8f 100644
--- a/src/actions/service.js
+++ b/src/actions/service.js
@@ -91,6 +91,9 @@ export default {
   toggleAudio: {
     serviceId: PropTypes.string.isRequired,
   },
+  toggleDarkMode: {
+    serviceId: PropTypes.string.isRequired,
+  },
   openDevTools: {
     serviceId: PropTypes.string.isRequired,
   },
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index a3dbc3539..daa5642c3 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -61,6 +61,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
     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,
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 117d799d7..1a389991d 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -14,6 +14,7 @@ class TabBarSortableList extends Component {
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
     toggleAudio: PropTypes.func.isRequired,
+    toggleDarkMode: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
@@ -30,6 +31,7 @@ class TabBarSortableList extends Component {
       reload,
       toggleNotifications,
       toggleAudio,
+      toggleDarkMode,
       deleteService,
       disableService,
       enableService,
@@ -54,6 +56,7 @@ class TabBarSortableList extends Component {
             reload={() => reload({ serviceId: service.id })}
             toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
             toggleAudio={() => toggleAudio({ serviceId: service.id })}
+            toggleDarkMode={() => toggleDarkMode({ serviceId: service.id })}
             deleteService={() => deleteService({ serviceId: service.id })}
             disableService={() => disableService({ serviceId: service.id })}
             enableService={() => enableService({ serviceId: service.id })}
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index d4a4048eb..3c27cca73 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -41,6 +41,14 @@ const messages = defineMessages({
     id: 'tabs.item.enableAudio',
     defaultMessage: '!!!Enable audio',
   },
+  enableDarkMode: {
+    id: 'tabs.item.enableDarkMode',
+    defaultMessage: '!!!Enable Dark mode',
+  },
+  disableDarkMode: {
+    id: 'tabs.item.disableDarkMode',
+    defaultMessage: '!!!Disable Dark mode',
+  },
   disableService: {
     id: 'tabs.item.disableService',
     defaultMessage: '!!!Disable Service',
@@ -118,6 +126,7 @@ class TabItem extends Component {
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
     toggleAudio: PropTypes.func.isRequired,
+    toggleDarkMode: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
@@ -169,6 +178,7 @@ class TabItem extends Component {
       reload,
       toggleNotifications,
       toggleAudio,
+      toggleDarkMode,
       deleteService,
       disableService,
       enableService,
@@ -215,6 +225,12 @@ class TabItem extends Component {
           : intl.formatMessage(messages.disableAudio),
         click: () => toggleAudio(),
       },
+      {
+        label: service.isDarkModeEnabled
+          ? intl.formatMessage(messages.enableDarkMode)
+          : intl.formatMessage(messages.disableDarkMode),
+        click: () => toggleDarkMode(),
+      },
       {
         label: intl.formatMessage(
           service.isEnabled ? messages.disableService : messages.enableService,
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index 0f608c415..ab1e46c9f 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -15,6 +15,7 @@ export default @observer class TabBar extends Component {
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
     toggleAudio: PropTypes.func.isRequired,
+    toggleDarkMode: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     updateService: PropTypes.func.isRequired,
     hibernateService: PropTypes.func.isRequired,
@@ -78,6 +79,7 @@ export default @observer class TabBar extends Component {
       reload,
       toggleNotifications,
       toggleAudio,
+      toggleDarkMode,
       deleteService,
       showMessageBadgeWhenMutedSetting,
       showMessageBadgesEvenWhenMuted,
@@ -94,6 +96,7 @@ export default @observer class TabBar extends Component {
           reload={reload}
           toggleNotifications={toggleNotifications}
           toggleAudio={toggleAudio}
+          toggleDarkMode={toggleDarkMode}
           deleteService={deleteService}
           disableService={(args) => this.disableService(args)}
           enableService={(args) => this.enableService(args)}
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index fff628946..32b1f1cf7 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -54,6 +54,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       reload,
       toggleNotifications,
       toggleAudio,
+      toggleDarkMode,
       deleteService,
       updateService,
       hibernate,
@@ -109,6 +110,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         reload={reload}
         toggleNotifications={toggleNotifications}
         toggleAudio={toggleAudio}
+        toggleDarkMode={toggleDarkMode}
         deleteService={deleteService}
         updateService={updateService}
         hibernateService={hibernate}
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 4279ba079..683ec4628 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1771,81 +1771,107 @@
         }
       },
       {
-        "defaultMessage": "!!!Disable Service",
+        "defaultMessage": "!!!Enable Dark mode",
         "end": {
           "column": 3,
           "line": 47
         },
         "file": "src/components/services/tabs/TabItem.js",
-        "id": "tabs.item.disableService",
+        "id": "tabs.item.enableDarkMode",
         "start": {
           "column": 18,
           "line": 44
         }
       },
       {
-        "defaultMessage": "!!!Enable Service",
+        "defaultMessage": "!!!Disable Dark mode",
         "end": {
           "column": 3,
           "line": 51
         },
         "file": "src/components/services/tabs/TabItem.js",
+        "id": "tabs.item.disableDarkMode",
+        "start": {
+          "column": 19,
+          "line": 48
+        }
+      },
+      {
+        "defaultMessage": "!!!Disable Service",
+        "end": {
+          "column": 3,
+          "line": 55
+        },
+        "file": "src/components/services/tabs/TabItem.js",
+        "id": "tabs.item.disableService",
+        "start": {
+          "column": 18,
+          "line": 52
+        }
+      },
+      {
+        "defaultMessage": "!!!Enable Service",
+        "end": {
+          "column": 3,
+          "line": 59
+        },
+        "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.enableService",
         "start": {
           "column": 17,
-          "line": 48
+          "line": 56
         }
       },
       {
         "defaultMessage": "!!!Hibernate Service",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 63
         },
         "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.hibernateService",
         "start": {
           "column": 20,
-          "line": 52
+          "line": 60
         }
       },
       {
         "defaultMessage": "!!!Wake Up Service",
         "end": {
           "column": 3,
-          "line": 59
+          "line": 67
         },
         "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.wakeUpService",
         "start": {
           "column": 17,
-          "line": 56
+          "line": 64
         }
       },
       {
         "defaultMessage": "!!!Delete Service",
         "end": {
           "column": 3,
-          "line": 63
+          "line": 71
         },
         "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.deleteService",
         "start": {
           "column": 17,
-          "line": 60
+          "line": 68
         }
       },
       {
         "defaultMessage": "!!!Do you really want to delete the {serviceName} service?",
         "end": {
           "column": 3,
-          "line": 68
+          "line": 76
         },
         "file": "src/components/services/tabs/TabItem.js",
         "id": "tabs.item.confirmDeleteService",
         "start": {
           "column": 24,
-          "line": 64
+          "line": 72
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 1705d20e8..002ea5655 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -434,10 +434,12 @@
   "tabs.item.confirmDeleteService": "Do you really want to delete the {serviceName} service?",
   "tabs.item.deleteService": "Delete service",
   "tabs.item.disableAudio": "Disable audio",
+  "tabs.item.disableDarkMode": "Disable Dark mode",
   "tabs.item.disableNotifications": "Disable notifications",
   "tabs.item.disableService": "Disable service",
   "tabs.item.edit": "Edit",
   "tabs.item.enableAudio": "Enable audio",
+  "tabs.item.enableDarkMode": "Enable Dark mode",
   "tabs.item.enableNotification": "Enable notifications",
   "tabs.item.enableService": "Enable service",
   "tabs.item.hibernateService": "Hibernate service",
diff --git a/src/i18n/messages/src/components/services/tabs/TabItem.json b/src/i18n/messages/src/components/services/tabs/TabItem.json
index 60cfde52d..92ff6fb14 100644
--- a/src/i18n/messages/src/components/services/tabs/TabItem.json
+++ b/src/i18n/messages/src/components/services/tabs/TabItem.json
@@ -78,8 +78,8 @@
     }
   },
   {
-    "id": "tabs.item.disableService",
-    "defaultMessage": "!!!Disable Service",
+    "id": "tabs.item.enableDarkMode",
+    "defaultMessage": "!!!Enable Dark mode",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
       "line": 44,
@@ -90,16 +90,42 @@
       "column": 3
     }
   },
+  {
+    "id": "tabs.item.disableDarkMode",
+    "defaultMessage": "!!!Disable Dark mode",
+    "file": "src/components/services/tabs/TabItem.js",
+    "start": {
+      "line": 48,
+      "column": 19
+    },
+    "end": {
+      "line": 51,
+      "column": 3
+    }
+  },
+  {
+    "id": "tabs.item.disableService",
+    "defaultMessage": "!!!Disable Service",
+    "file": "src/components/services/tabs/TabItem.js",
+    "start": {
+      "line": 52,
+      "column": 18
+    },
+    "end": {
+      "line": 55,
+      "column": 3
+    }
+  },
   {
     "id": "tabs.item.enableService",
     "defaultMessage": "!!!Enable Service",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 48,
+      "line": 56,
       "column": 17
     },
     "end": {
-      "line": 51,
+      "line": 59,
       "column": 3
     }
   },
@@ -108,11 +134,11 @@
     "defaultMessage": "!!!Hibernate Service",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 52,
+      "line": 60,
       "column": 20
     },
     "end": {
-      "line": 55,
+      "line": 63,
       "column": 3
     }
   },
@@ -121,11 +147,11 @@
     "defaultMessage": "!!!Wake Up Service",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 56,
+      "line": 64,
       "column": 17
     },
     "end": {
-      "line": 59,
+      "line": 67,
       "column": 3
     }
   },
@@ -134,11 +160,11 @@
     "defaultMessage": "!!!Delete Service",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 60,
+      "line": 68,
       "column": 17
     },
     "end": {
-      "line": 63,
+      "line": 71,
       "column": 3
     }
   },
@@ -147,11 +173,11 @@
     "defaultMessage": "!!!Do you really want to delete the {serviceName} service?",
     "file": "src/components/services/tabs/TabItem.js",
     "start": {
-      "line": 64,
+      "line": 72,
       "column": 24
     },
     "end": {
-      "line": 68,
+      "line": 76,
       "column": 3
     }
   }
diff --git a/src/internal-server/app/Controllers/Http/ServiceController.js b/src/internal-server/app/Controllers/Http/ServiceController.js
index e4a7f0295..d98ba146e 100644
--- a/src/internal-server/app/Controllers/Http/ServiceController.js
+++ b/src/internal-server/app/Controllers/Http/ServiceController.js
@@ -52,7 +52,7 @@ class ServiceController {
         isNotificationEnabled: true,
         isBadgeEnabled: true,
         isMuted: false,
-        isDarkModeEnabled: '',
+        isDarkModeEnabled: false,
         spellcheckerLanguage: '',
         order: 1,
         customRecipe: false,
@@ -79,7 +79,7 @@ class ServiceController {
         customRecipe: false,
         hasCustomIcon: false,
         isBadgeEnabled: true,
-        isDarkModeEnabled: '',
+        isDarkModeEnabled: false,
         isEnabled: true,
         isMuted: false,
         isNotificationEnabled: true,
@@ -253,7 +253,7 @@ class ServiceController {
         customRecipe: false,
         hasCustomIcon: false,
         isBadgeEnabled: true,
-        isDarkModeEnabled: '',
+        isDarkModeEnabled: false,
         isEnabled: true,
         isMuted: false,
         isNotificationEnabled: true,
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 499495d08..4ccb995ae 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -97,6 +97,7 @@ export default class ServicesStore extends Store {
       this._toggleNotifications.bind(this),
     );
     this.actions.service.toggleAudio.listen(this._toggleAudio.bind(this));
+    this.actions.service.toggleDarkMode.listen(this._toggleDarkMode.bind(this));
     this.actions.service.openDevTools.listen(this._openDevTools.bind(this));
     this.actions.service.openDevToolsForActiveService.listen(
       this._openDevToolsForActiveService.bind(this),
@@ -916,6 +917,18 @@ export default class ServicesStore extends Store {
     });
   }
 
+  @action _toggleDarkMode({ serviceId }) {
+    const service = this.one(serviceId);
+
+    this.actions.service.updateService({
+      serviceId,
+      serviceData: {
+        isDarkModeEnabled: !service.isDarkModeEnabled,
+      },
+      redirect: false,
+    });
+  }
+
   @action _openDevTools({ serviceId }) {
     const service = this.one(serviceId);
     if (service.isTodosService) {
-- 
cgit v1.2.3-70-g09d2


From 52dba987668f4962895e8298d8d32fe877240a76 Mon Sep 17 00:00:00 2001
From: Vijay A <avijayr@protonmail.com>
Date: Fri, 13 Aug 2021 00:24:40 +0530
Subject: refactor: Use the 'shortcutKey' function without exposing the
 'ctrlKey' or the 'cmdKey'

---
 src/components/services/tabs/TabItem.js            |  6 +--
 src/environment.js                                 |  6 +--
 .../workspaces/components/WorkspaceDrawerItem.js   |  4 +-
 src/lib/Menu.js                                    | 60 +++++++++++-----------
 src/webview/contextMenuBuilder.js                  | 16 +++---
 5 files changed, 46 insertions(+), 46 deletions(-)

(limited to 'src/components/services')

diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 3c27cca73..6a6d2c8c5 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -10,7 +10,7 @@ import ms from 'ms';
 
 import { observable, autorun } from 'mobx';
 import ServiceModel from '../../../models/Service';
-import { ctrlKey, cmdKey } from '../../../environment';
+import { shortcutKey } from '../../../environment';
 
 const IS_SERVICE_DEBUGGING_ENABLED = (
   localStorage.getItem('debug') || ''
@@ -201,7 +201,7 @@ class TabItem extends Component {
       {
         label: intl.formatMessage(messages.reload),
         click: reload,
-        accelerator: `${cmdKey}+R`,
+        accelerator: `${shortcutKey()}+R`,
       },
       {
         label: intl.formatMessage(messages.edit),
@@ -307,7 +307,7 @@ class TabItem extends Component {
         onClick={clickHandler}
         onContextMenu={() => menu.popup(getCurrentWindow())}
         data-tip={`${service.name} ${
-          shortcutIndex <= 9 ? `(${ctrlKey}+${shortcutIndex})` : ''
+          shortcutIndex <= 9 ? `(${shortcutKey(false)}+${shortcutIndex})` : ''
         }`}
       >
         <img src={service.icon} className="tab-item__icon" alt="" />
diff --git a/src/environment.js b/src/environment.js
index 39b854db4..42c6b2927 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -75,14 +75,14 @@ export const is64Bit = osArch.match(/64/);
 
 // for accelerator, show the shortform that electron/OS understands
 // for tooltip, show symbol
-export const ctrlKey = isMac ? '⌘' : 'Ctrl';
-export const cmdKey = isMac ? 'Cmd' : 'Ctrl';
+const ctrlKey = isMac ? '⌘' : 'Ctrl';
+const cmdKey = isMac ? 'Cmd' : 'Ctrl';
 
 export const altKey = isMac ? '⌥' : 'Alt';
 export const shiftKey = isMac ? '⇧' : 'Shift';
 
 // Platform specific shortcut keys
-const shortcutKey = (isAccelerator) => `${isAccelerator ? cmdKey : ctrlKey}`;
+export const shortcutKey = (isAccelerator = true) => (isAccelerator ? cmdKey : ctrlKey);
 export const lockFerdiShortcutKey = (isAccelerator = true) => `${shortcutKey(isAccelerator)}+${shiftKey}+L`;
 export const todosToggleShortcutKey = (isAccelerator = true) => `${shortcutKey(isAccelerator)}+T`;
 export const workspaceToggleShortcutKey = (isAccelerator = true) => `${shortcutKey(isAccelerator)}+D`;
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index f08e87bd7..fff607330 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
 import { defineMessages, intlShape } from 'react-intl';
-import { altKey, ctrlKey } from '../../../environment';
+import { altKey, shortcutKey } from '../../../environment';
 
 const messages = defineMessages({
   noServicesAddedYet: {
@@ -125,7 +125,7 @@ class WorkspaceDrawerItem extends Component {
           onContextMenuEditClick && contextMenu.popup(getCurrentWindow())
         }
         data-tip={`${
-          shortcutIndex <= 9 ? `(${ctrlKey}+${altKey}+${shortcutIndex})` : ''
+          shortcutIndex <= 9 ? `(${shortcutKey(false)}+${altKey}+${shortcutIndex})` : ''
         }`}
       >
         <span
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 21133bfde..e4056e536 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -6,7 +6,7 @@ import { autorun, observable } from 'mobx';
 import { defineMessages } from 'react-intl';
 import { CUSTOM_WEBSITE_RECIPE_ID, GITHUB_FERDI_URL, LIVE_API_FERDI_WEBSITE } from '../config';
 import {
-  cmdKey, altKey, shiftKey, settingsShortcutKey, isLinux, isMac, aboutAppDetails, lockFerdiShortcutKey, todosToggleShortcutKey, workspaceToggleShortcutKey, addNewServiceShortcutKey, muteFerdiShortcutKey,
+  shortcutKey, altKey, shiftKey, settingsShortcutKey, isLinux, isMac, aboutAppDetails, lockFerdiShortcutKey, todosToggleShortcutKey, workspaceToggleShortcutKey, addNewServiceShortcutKey, muteFerdiShortcutKey,
 } from '../environment';
 import { announcementsStore } from '../features/announcements';
 import { announcementActions } from '../features/announcements/actions';
@@ -333,22 +333,22 @@ const _titleBarTemplateFactory = (intl, locked) => [
       },
       {
         label: intl.formatMessage(menuItems.cut),
-        accelerator: `${cmdKey}+X`,
+        accelerator: `${shortcutKey()}+X`,
         role: 'cut',
       },
       {
         label: intl.formatMessage(menuItems.copy),
-        accelerator: `${cmdKey}+C`,
+        accelerator: `${shortcutKey()}+C`,
         role: 'copy',
       },
       {
         label: intl.formatMessage(menuItems.paste),
-        accelerator: `${cmdKey}+V`,
+        accelerator: `${shortcutKey()}+V`,
         role: 'paste',
       },
       {
         label: intl.formatMessage(menuItems.pasteAndMatchStyle),
-        accelerator: `${cmdKey}+${shiftKey}+V`, // Override the accelerator since this adds new key combo in macos
+        accelerator: `${shortcutKey()}+${shiftKey}+V`, // Override the accelerator since this adds new key combo in macos
         role: 'pasteAndMatchStyle',
         click() {
           getActiveWebview().pasteAndMatchStyle();
@@ -360,7 +360,7 @@ const _titleBarTemplateFactory = (intl, locked) => [
       },
       {
         label: intl.formatMessage(menuItems.selectAll),
-        accelerator: `${cmdKey}+A`,
+        accelerator: `${shortcutKey()}+A`,
         role: 'selectall',
       },
     ],
@@ -375,7 +375,7 @@ const _titleBarTemplateFactory = (intl, locked) => [
       },
       {
         label: intl.formatMessage(menuItems.openQuickSwitch),
-        accelerator: `${cmdKey}+S`,
+        accelerator: `${shortcutKey()}+S`,
         click() {
           window.ferdi.features.quickSwitch.state.isModalVisible = true;
         },
@@ -385,7 +385,7 @@ const _titleBarTemplateFactory = (intl, locked) => [
       },
       {
         label: intl.formatMessage(menuItems.findInPage),
-        accelerator: `${cmdKey}+F`,
+        accelerator: `${shortcutKey()}+F`,
         click() {
           // Check if there is a service active
           if (!window.ferdi.stores.services.active) return;
@@ -406,14 +406,14 @@ const _titleBarTemplateFactory = (intl, locked) => [
       },
       {
         label: intl.formatMessage(menuItems.back),
-        accelerator: `${cmdKey}+Left`,
+        accelerator: `${shortcutKey()}+Left`,
         click() {
           getActiveWebview().goBack();
         },
       },
       {
         label: intl.formatMessage(menuItems.forward),
-        accelerator: `${cmdKey}+Right`,
+        accelerator: `${shortcutKey()}+Right`,
         click() {
           getActiveWebview().goForward();
         },
@@ -423,7 +423,7 @@ const _titleBarTemplateFactory = (intl, locked) => [
       },
       {
         label: intl.formatMessage(menuItems.resetZoom),
-        accelerator: `${cmdKey}+0`,
+        accelerator: `${shortcutKey()}+0`,
         role: 'resetZoom',
         click() {
           getActiveWebview().setZoomLevel(0);
@@ -431,7 +431,7 @@ const _titleBarTemplateFactory = (intl, locked) => [
       },
       {
         label: intl.formatMessage(menuItems.zoomIn),
-        accelerator: `${cmdKey}+plus`,
+        accelerator: `${shortcutKey()}+plus`,
         role: 'zoomIn',
         click() {
           const activeService = getActiveWebview();
@@ -443,7 +443,7 @@ const _titleBarTemplateFactory = (intl, locked) => [
       },
       {
         label: intl.formatMessage(menuItems.zoomOut),
-        accelerator: `${cmdKey}+-`,
+        accelerator: `${shortcutKey()}+-`,
         role: 'zoomOut',
         click() {
           const activeService = getActiveWebview();
@@ -463,7 +463,7 @@ const _titleBarTemplateFactory = (intl, locked) => [
       {
         label: intl.formatMessage(menuItems.toggleDarkMode),
         type: 'checkbox',
-        accelerator: `${cmdKey}+${shiftKey}+D`,
+        accelerator: `${shortcutKey()}+${shiftKey}+D`,
         checked: window.ferdi.stores.settings.app.darkMode,
         click: () => {
           window.ferdi.actions.settings.update({
@@ -612,13 +612,13 @@ export default class FranzMenu {
         type: 'separator',
       }, {
         label: intl.formatMessage(menuItems.toggleDevTools),
-        accelerator: `${cmdKey}+${altKey}+I`,
+        accelerator: `${shortcutKey()}+${altKey}+I`,
         click: (menuItem, browserWindow) => {
           browserWindow.webContents.toggleDevTools();
         },
       }, {
         label: intl.formatMessage(menuItems.toggleServiceDevTools),
-        accelerator: `${cmdKey}+${shiftKey}+${altKey}+I`,
+        accelerator: `${shortcutKey()}+${shiftKey}+${altKey}+I`,
         click: () => {
           this.actions.service.openDevToolsForActiveService();
         },
@@ -628,7 +628,7 @@ export default class FranzMenu {
       if (this.stores.features.features.isTodosEnabled) {
         tpl[1].submenu.push({
           label: intl.formatMessage(menuItems.toggleTodosDevTools),
-          accelerator: `${cmdKey}+${shiftKey}+${altKey}+O`,
+          accelerator: `${shortcutKey()}+${shiftKey}+${altKey}+O`,
           click: () => {
             const webview = document.querySelector('#todos-panel webview');
             if (webview) this.actions.todos.openDevTools();
@@ -639,7 +639,7 @@ export default class FranzMenu {
       tpl[1].submenu.unshift({
         label: intl.formatMessage(menuItems.reloadService),
         id: 'reloadService', // TODO: needed?
-        accelerator: `${cmdKey}+R`,
+        accelerator: `${shortcutKey()}+R`,
         click: () => {
           if (this.stores.user.isLoggedIn
           && this.stores.services.enabled.length > 0) {
@@ -654,13 +654,13 @@ export default class FranzMenu {
         },
       }, {
         label: intl.formatMessage(menuItems.reloadFerdi),
-        accelerator: `${cmdKey}+${shiftKey}+R`,
+        accelerator: `${shortcutKey()}+${shiftKey}+R`,
         click: () => {
           window.location.reload();
         },
       }, {
         label: intl.formatMessage(menuItems.reloadTodos),
-        accelerator: `${cmdKey}+${shiftKey}+${altKey}+R`,
+        accelerator: `${shortcutKey()}+${shiftKey}+${altKey}+R`,
         click: () => {
           this.actions.todos.reload();
         },
@@ -832,7 +832,7 @@ export default class FranzMenu {
         {
           label: intl.formatMessage(menuItems.quit),
           role: 'quit',
-          accelerator: `${cmdKey}+Q`,
+          accelerator: `${shortcutKey()}+Q`,
           click() {
             app.quit();
           },
@@ -883,22 +883,22 @@ export default class FranzMenu {
       type: 'separator',
     }, {
       label: intl.formatMessage(menuItems.activateNextService),
-      accelerator: `${cmdKey}+tab`,
+      accelerator: `${shortcutKey()}+tab`,
       click: () => this.actions.service.setActiveNext(),
       visible: !cmdAltShortcutsVisibile,
     }, {
       label: intl.formatMessage(menuItems.activateNextService),
-      accelerator: `${cmdKey}+${altKey}+right`,
+      accelerator: `${shortcutKey()}+${altKey}+right`,
       click: () => this.actions.service.setActiveNext(),
       visible: cmdAltShortcutsVisibile,
     }, {
       label: intl.formatMessage(menuItems.activatePreviousService),
-      accelerator: `${cmdKey}+${shiftKey}+tab`,
+      accelerator: `${shortcutKey()}+${shiftKey}+tab`,
       click: () => this.actions.service.setActivePrev(),
       visible: !cmdAltShortcutsVisibile,
     }, {
       label: intl.formatMessage(menuItems.activatePreviousService),
-      accelerator: `${cmdKey}+${altKey}+left`,
+      accelerator: `${shortcutKey()}+${altKey}+left`,
       click: () => this.actions.service.setActivePrev(),
       visible: cmdAltShortcutsVisibile,
     }, {
@@ -913,7 +913,7 @@ export default class FranzMenu {
 
     services.allDisplayed.forEach((service, i) => (menu.push({
       label: this._getServiceName(service),
-      accelerator: i < 9 ? `${cmdKey}+${i + 1}` : null,
+      accelerator: i < 9 ? `${shortcutKey()}+${i + 1}` : null,
       type: 'radio',
       checked: service.isActive,
       click: () => {
@@ -930,7 +930,7 @@ export default class FranzMenu {
         type: 'separator',
       }, {
         label: intl.formatMessage(menuItems.serviceGoHome),
-        accelerator: `${cmdKey}+${shiftKey}+H`,
+        accelerator: `${shortcutKey()}+${shiftKey}+H`,
         click: () => this.actions.service.reloadActive(),
       });
     }
@@ -946,7 +946,7 @@ export default class FranzMenu {
     // Add new workspace item:
     menu.push({
       label: intl.formatMessage(menuItems.addNewWorkspace),
-      accelerator: `${cmdKey}+${shiftKey}+N`,
+      accelerator: `${shortcutKey()}+${shiftKey}+N`,
       click: () => {
         workspaceActions.openWorkspaceSettings();
       },
@@ -975,7 +975,7 @@ export default class FranzMenu {
     // Default workspace
     menu.push({
       label: intl.formatMessage(menuItems.defaultWorkspace),
-      accelerator: `${cmdKey}+${altKey}+0`,
+      accelerator: `${shortcutKey()}+${altKey}+0`,
       type: 'radio',
       checked: !activeWorkspace,
       click: () => {
@@ -986,7 +986,7 @@ export default class FranzMenu {
     // Workspace items
     workspaces.forEach((workspace, i) => menu.push({
       label: workspace.name,
-      accelerator: i < 9 ? `${cmdKey}+${altKey}+${i + 1}` : null,
+      accelerator: i < 9 ? `${shortcutKey()}+${altKey}+${i + 1}` : null,
       type: 'radio',
       checked: activeWorkspace ? workspace.id === activeWorkspace.id : false,
       click: () => {
diff --git a/src/webview/contextMenuBuilder.js b/src/webview/contextMenuBuilder.js
index ebf98ee76..602ce06f5 100644
--- a/src/webview/contextMenuBuilder.js
+++ b/src/webview/contextMenuBuilder.js
@@ -10,7 +10,7 @@ import {
   clipboard, ipcRenderer, nativeImage, shell,
 } from 'electron';
 import { Menu, MenuItem } from '@electron/remote';
-import { cmdKey, isMac } from '../environment';
+import { shortcutKey, isMac } from '../environment';
 
 import { SEARCH_ENGINE_NAMES, SEARCH_ENGINE_URLS } from '../config';
 
@@ -376,7 +376,7 @@ module.exports = class ContextMenuBuilder {
     const webContents = this.getWebContents();
     menu.append(new MenuItem({
       label: this.stringTable.cut(),
-      accelerator: `${cmdKey}+X`,
+      accelerator: `${shortcutKey()}+X`,
       enabled: menuInfo.editFlags.canCut,
       click: () => webContents.cut(),
     }));
@@ -391,7 +391,7 @@ module.exports = class ContextMenuBuilder {
     const webContents = this.getWebContents();
     menu.append(new MenuItem({
       label: this.stringTable.copy(),
-      accelerator: `${cmdKey}+C`,
+      accelerator: `${shortcutKey()}+C`,
       enabled: menuInfo.editFlags.canCopy,
       click: () => webContents.copy(),
     }));
@@ -406,7 +406,7 @@ module.exports = class ContextMenuBuilder {
     const webContents = this.getWebContents();
     menu.append(new MenuItem({
       label: this.stringTable.paste(),
-      accelerator: `${cmdKey}+V`,
+      accelerator: `${shortcutKey()}+V`,
       enabled: menuInfo.editFlags.canPaste,
       click: () => webContents.paste(),
     }));
@@ -424,7 +424,7 @@ module.exports = class ContextMenuBuilder {
       menu.append(
         new MenuItem({
           label: this.stringTable.pasteAndMatchStyle(),
-          accelerator: `${cmdKey}+Shift+V`,
+          accelerator: `${shortcutKey()}+Shift+V`,
           click: () => webContents.pasteAndMatchStyle(),
         }),
       );
@@ -490,7 +490,7 @@ module.exports = class ContextMenuBuilder {
     const webContents = this.getWebContents();
     menu.append(new MenuItem({
       label: this.stringTable.goBack(),
-      accelerator: `${cmdKey}+left`,
+      accelerator: `${shortcutKey()}+left`,
       enabled: webContents.canGoBack(),
       click: () => webContents.goBack(),
     }));
@@ -505,7 +505,7 @@ module.exports = class ContextMenuBuilder {
     const webContents = this.getWebContents();
     menu.append(new MenuItem({
       label: this.stringTable.goForward(),
-      accelerator: `${cmdKey}+right`,
+      accelerator: `${shortcutKey()}+right`,
       enabled: webContents.canGoForward(),
       click: () => webContents.goForward(),
     }));
@@ -536,7 +536,7 @@ module.exports = class ContextMenuBuilder {
     const baseURL = new URL(menuInfo.pageURL);
     menu.append(new MenuItem({
       label: this.stringTable.goToHomePage(),
-      accelerator: `${cmdKey}+Home`,
+      accelerator: `${shortcutKey()}+Home`,
       enabled: true,
       click: () => {
         // webContents.loadURL(baseURL.origin);
-- 
cgit v1.2.3-70-g09d2