62 files changed, 1602 insertions, 1552 deletions

diff --git a/src/components/AppUpdateInfoBar.js b/src/components/AppUpdateInfoBar.js
index 30804262a..47b730bde 100644
--- a/src/components/AppUpdateInfoBar.js
+++ b/src/components/AppUpdateInfoBar.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import InfoBar from './ui/InfoBar';
 import { GITHUB_FERDI_URL } from '../config';
@@ -9,15 +9,15 @@ import { openExternalUrl } from '../helpers/url-helpers';
 const messages = defineMessages({
   updateAvailable: {
     id: 'infobar.updateAvailable',
-    defaultMessage: '!!!A new update for Ferdi is available.',
+    defaultMessage: 'A new update for Ferdi is available.',
   },
   changelog: {
     id: 'infobar.buttonChangelog',
-    defaultMessage: '!!!Changelog',
+    defaultMessage: 'What is new?',
   },
   buttonInstallUpdate: {
     id: 'infobar.buttonInstallUpdate',
-    defaultMessage: '!!!Restart & install update',
+    defaultMessage: 'Restart & install update',
   },
 });
 
@@ -27,12 +27,8 @@ class AppUpdateInfoBar extends Component {
     onHide: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
     const { onInstallUpdate, onHide } = this.props;
 
     return (
@@ -61,4 +57,4 @@ class AppUpdateInfoBar extends Component {
   }
 }
 
-export default AppUpdateInfoBar;
+export default injectIntl(AppUpdateInfoBar);
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 8235932c2..17ac221a2 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { intlShape } from 'react-intl';
-import { TitleBar } from 'electron-react-titlebar';
+import { TitleBar } from 'electron-react-titlebar/renderer';
 
+import { injectIntl } from 'react-intl';
 import Link from '../ui/Link';
 import InfoBar from '../ui/InfoBar';
 
@@ -17,7 +17,6 @@ import { isWindows } from '../../environment';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import { GITHUB_FERDI_URL } from '../../config';
 
-export default
 @observer
 class AuthLayout extends Component {
   static propTypes = {
@@ -36,10 +35,6 @@ class AuthLayout extends Component {
     shouldShowAppUpdateInfoBar: true,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       children,
@@ -52,7 +47,8 @@ class AuthLayout extends Component {
       installAppUpdate,
       appUpdateIsDownloaded,
     } = this.props;
-    const { intl } = this.context;
+
+    const { intl } = this.props;
 
     return (
       <>
@@ -108,3 +104,5 @@ class AuthLayout extends Component {
     );
   }
 }
+
+export default injectIntl(AuthLayout);
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index 8e8a7af32..b98fb50f7 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import Form from '../../lib/Form';
 import Input from '../ui/Input';
 import Select from '../ui/Select';
@@ -14,56 +14,65 @@ import globalMessages from '../../i18n/globalMessages';
 const messages = defineMessages({
   headline: {
     id: 'changeserver.headline',
-    defaultMessage: '!!!Change server',
+    defaultMessage: 'Change server',
   },
   label: {
     id: 'changeserver.label',
-    defaultMessage: '!!!Server',
+    defaultMessage: 'Server',
   },
   warning: {
     id: 'changeserver.warning',
-    defaultMessage: '!!!Extra settings offered by Ferdi will not be saved',
+    defaultMessage: 'Extra settings offered by Ferdi will not be saved',
   },
   customServerLabel: {
     id: 'changeserver.customServerLabel',
-    defaultMessage: '!!!Custom server',
+    defaultMessage: 'Custom server',
   },
   urlError: {
     id: 'changeserver.urlError',
-    defaultMessage: '!!!Enter a valid URL',
+    defaultMessage: 'Enter a valid URL',
   },
 });
 
-export default @observer class ChangeServer extends Component {
+@observer
+class ChangeServer extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     server: PropTypes.string.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  ferdiServer=LIVE_FERDI_API;
+  ferdiServer = LIVE_FERDI_API;
 
-  franzServer=LIVE_FRANZ_API;
+  franzServer = LIVE_FRANZ_API;
 
-  defaultServers=[this.franzServer, this.ferdiServer];
+  defaultServers = [this.franzServer, this.ferdiServer];
 
-  form = new Form({
-    fields: {
-      server: {
-        label: this.context.intl.formatMessage(messages.label),
-        value: this.props.server,
-        options: [{ value: this.ferdiServer, label: 'Ferdi' }, { value: this.franzServer, label: 'Franz' }, { value: this.defaultServers.includes(this.props.server) ? '' : this.props.server, label: 'Custom' }],
-      },
-      customServer: {
-        label: this.context.intl.formatMessage(messages.customServerLabel),
-        value: '',
-        validators: [url, required],
+  form = new Form(
+    {
+      fields: {
+        server: {
+          label: this.props.intl.formatMessage(messages.label),
+          value: this.props.server,
+          options: [
+            { value: this.ferdiServer, label: 'Ferdi' },
+            { value: this.franzServer, label: 'Franz' },
+            {
+              value: this.defaultServers.includes(this.props.server)
+                ? ''
+                : this.props.server,
+              label: 'Custom',
+            },
+          ],
+        },
+        customServer: {
+          label: this.props.intl.formatMessage(messages.customServerLabel),
+          value: '',
+          validators: [url, required],
+        },
       },
     },
-  }, this.context.intl);
+    this.props.intl,
+  );
 
   componentDidMount() {
     if (this.defaultServers.includes(this.props.server)) {
@@ -77,13 +86,13 @@ export default @observer class ChangeServer extends Component {
   submit(e) {
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         if (!this.defaultServers.includes(form.values().server)) {
           form.$('server').onChange(form.values().customServer);
         }
         this.props.onSubmit(form.values());
       },
-      onError: (form) => {
+      onError: form => {
         if (this.defaultServers.includes(form.values().server)) {
           this.props.onSubmit(form.values());
         }
@@ -93,23 +102,21 @@ export default @observer class ChangeServer extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
+    const { intl } = this.props;
     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
-          && (
+          {form.$('server').value === this.franzServer && (
             <Infobox type="warning">
               {intl.formatMessage(messages.warning)}
             </Infobox>
           )}
           <Select field={form.$('server')} />
-          {!this.defaultServers.includes(form.$('server').value)
-          && (
+          {!this.defaultServers.includes(form.$('server').value) && (
             <Input
               placeholder="Custom Server"
-              onChange={(e) => this.submit(e)}
+              onChange={e => this.submit(e)}
               field={form.$('customServer')}
             />
           )}
@@ -123,3 +130,5 @@ export default @observer class ChangeServer extends Component {
     );
   }
 }
+
+export default injectIntl(ChangeServer);
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 3073cad73..44cb7e791 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router';
 import classnames from 'classnames';
 
@@ -12,23 +12,22 @@ import Button from '../ui/Button';
 const messages = defineMessages({
   headline: {
     id: 'import.headline',
-    defaultMessage: '!!!Import your Ferdi 4 services',
+    defaultMessage: 'Import your Ferdi 4 services',
   },
   notSupportedHeadline: {
     id: 'import.notSupportedHeadline',
-    defaultMessage: '!!!Services not yet supported in Ferdi 5',
+    defaultMessage: 'Services not yet supported in Ferdi 5',
   },
   submitButtonLabel: {
     id: 'import.submit.label',
-    defaultMessage: '!!!Import {count} services',
+    defaultMessage: 'Import {count} services',
   },
   skipButtonLabel: {
     id: 'import.skip.label',
-    defaultMessage: '!!!I want to add services manually',
+    defaultMessage: 'I want to add services manually',
   },
 });
 
-export default
 @observer
 class Import extends Component {
   static propTypes = {
@@ -38,17 +37,13 @@ class Import extends Component {
     inviteRoute: PropTypes.string.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   componentDidMount() {
     const config = {
       fields: {
         import: [
           ...this.props.services
-            .filter((s) => s.recipe)
-            .map((s) => ({
+            .filter(s => s.recipe)
+            .map(s => ({
               fields: {
                 add: {
                   default: true,
@@ -60,20 +55,20 @@ class Import extends Component {
       },
     };
 
-    this.form = new Form(config, this.context.intl);
+    this.form = new Form(config, this.props.intl);
   }
 
   submit(e) {
     const { services } = this.props;
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         const servicesImport = form
           .values()
           .import.map(
-            (value, i) => !value.add || services.filter((s) => s.recipe)[i],
+            (value, i) => !value.add || services.filter(s => s.recipe)[i],
           )
-          .filter((s) => typeof s !== 'boolean');
+          .filter(s => typeof s !== 'boolean');
 
         this.props.onSubmit({ services: servicesImport });
       },
@@ -82,18 +77,18 @@ class Import extends Component {
   }
 
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
     const { services, isSubmitting, inviteRoute } = this.props;
 
-    const availableServices = services.filter((s) => s.recipe);
-    const unavailableServices = services.filter((s) => !s.recipe);
+    const availableServices = services.filter(s => s.recipe);
+    const unavailableServices = services.filter(s => !s.recipe);
 
     return (
       <div className="auth__scroll-container">
         <div className="auth__container auth__container--signup">
           <form
             className="franz-form auth__form"
-            onSubmit={(e) => this.submit(e)}
+            onSubmit={e => this.submit(e)}
           >
             <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
             <h1>{intl.formatMessage(messages.headline)}</h1>
@@ -107,8 +102,8 @@ class Import extends Component {
                     <td className="service-table__column-icon">
                       <img
                         src={
-                          availableServices[i].custom_icon
-                          || availableServices[i].recipe.icons.svg
+                          availableServices[i].custom_icon ||
+                          availableServices[i].recipe.icons.svg
                         }
                         className={classnames({
                           'service-table__icon': true,
@@ -133,7 +128,7 @@ class Import extends Component {
                 </strong>
                 <p>
                   {services
-                    .filter((s) => !s.recipe)
+                    .filter(s => !s.recipe)
                     .map((service, i) => (
                       <span key={service.id}>
                         {service.name !== '' ? service.name : service.service}
@@ -170,3 +165,5 @@ class Import extends Component {
     );
   }
 }
+
+export default injectIntl(Import);
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index 4b4d63a6b..df8980314 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router';
 import classnames from 'classnames';
 
@@ -15,35 +15,34 @@ import Button from '../ui/Button';
 const messages = defineMessages({
   settingsHeadline: {
     id: 'settings.invite.headline',
-    defaultMessage: '!!!Invite Friends',
+    defaultMessage: 'Invite Friends',
   },
   headline: {
     id: 'invite.headline.friends',
-    defaultMessage: '!!!Invite 3 of your friends or colleagues',
+    defaultMessage: 'Invite 3 of your friends or colleagues',
   },
   nameLabel: {
     id: 'invite.name.label',
-    defaultMessage: '!!!Name',
+    defaultMessage: 'Name',
   },
   emailLabel: {
     id: 'invite.email.label',
-    defaultMessage: '!!!Email address',
+    defaultMessage: 'Email address',
   },
   submitButtonLabel: {
     id: 'invite.submit.label',
-    defaultMessage: '!!!Send invites',
+    defaultMessage: 'Send invites',
   },
   skipButtonLabel: {
     id: 'invite.skip.label',
-    defaultMessage: '!!!I want to do this later',
+    defaultMessage: 'I want to do this later',
   },
   inviteSuccessInfo: {
     id: 'invite.successInfo',
-    defaultMessage: '!!!Invitations sent successfully',
+    defaultMessage: 'Invitations sent successfully',
   },
 });
 
-export default
 @observer
 class Invite extends Component {
   static propTypes = {
@@ -59,10 +58,6 @@ class Invite extends Component {
     isLoadingInvite: false,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = { showSuccessInfo: false };
 
   componentDidMount() {
@@ -70,11 +65,11 @@ class Invite extends Component {
       {
         fields: {
           invite: [
-            ...Array(3).fill({
+            ...Array.from({ length: 3 }).fill({
               fields: {
                 name: {
-                  label: this.context.intl.formatMessage(messages.nameLabel),
-                  placeholder: this.context.intl.formatMessage(
+                  label: this.props.intl.formatMessage(messages.nameLabel),
+                  placeholder: this.props.intl.formatMessage(
                     messages.nameLabel,
                   ),
                   onChange: () => {
@@ -83,8 +78,8 @@ class Invite extends Component {
                   // related: ['invite.0.email'], // path accepted but does not work
                 },
                 email: {
-                  label: this.context.intl.formatMessage(messages.emailLabel),
-                  placeholder: this.context.intl.formatMessage(
+                  label: this.props.intl.formatMessage(messages.emailLabel),
+                  placeholder: this.props.intl.formatMessage(
                     messages.emailLabel,
                   ),
                   onChange: () => {
@@ -97,22 +92,22 @@ class Invite extends Component {
           ],
         },
       },
-      this.context.intl,
+      this.props.intl,
     );
 
-    document.querySelector('input:first-child').focus();
+    document.querySelector('input:first-child')?.focus();
   }
 
   submit(e) {
     e.preventDefault();
 
-    this.form.submit({
-      onSuccess: (form) => {
+    this.form?.submit({
+      onSuccess: form => {
         this.props.onSubmit({ invites: form.values().invite });
 
-        this.form.clear();
+        this.form?.clear();
         // this.form.$('invite.0.name').focus(); // path accepted but does not focus ;(
-        document.querySelector('input:first-child').focus();
+        document.querySelector('input:first-child')?.focus();
         this.setState({ showSuccessInfo: true });
       },
       onError: () => {},
@@ -121,13 +116,13 @@ class Invite extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
+    const { intl } = this.props;
     const { embed, isInviteSuccessful, isLoadingInvite } = this.props;
 
     const atLeastOneEmailAddress = form
       .$('invite')
-      .map((invite) => invite.$('email').value)
-      .some((emailValue) => emailValue.trim() !== '');
+      .map(invite => invite.$('email').value)
+      .some(emailValue => emailValue.trim() !== '');
 
     const sendButtonClassName = classnames({
       auth__button: true,
@@ -148,17 +143,14 @@ class Invite extends Component {
           </Appear>
         )}
 
-        <form
-          className="franz-form auth__form"
-          onSubmit={(e) => this.submit(e)}
-        >
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
           {!embed && (
             <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
           )}
           <h1 className={embed && 'invite__embed'}>
             {intl.formatMessage(messages.headline)}
           </h1>
-          {form.$('invite').map((invite) => (
+          {form.$('invite').map(invite => (
             <div className="grid" key={invite.key}>
               <div className="grid__row">
                 <Input field={invite.$('name')} showLabel={false} />
@@ -193,9 +185,7 @@ class Invite extends Component {
       >
         {embed && (
           <div className="settings__header">
-            <h1>
-              {this.context.intl.formatMessage(messages.settingsHeadline)}
-            </h1>
+            <h1>{this.props.intl.formatMessage(messages.settingsHeadline)}</h1>
           </div>
         )}
         {!embed ? (
@@ -207,3 +197,5 @@ class Invite extends Component {
     );
   }
 }
+
+export default injectIntl(Invite);
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index 2ad8a2409..a507ba140 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -2,7 +2,7 @@ import { systemPreferences } from '@electron/remote';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Form from '../../lib/Form';
 import Input from '../ui/Input';
@@ -15,39 +15,41 @@ import { globalError as globalErrorPropType } from '../../prop-types';
 const messages = defineMessages({
   headline: {
     id: 'locked.headline',
-    defaultMessage: '!!!Locked',
+    defaultMessage: 'Locked',
   },
   info: {
     id: 'locked.info',
-    defaultMessage: '!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.',
+    defaultMessage:
+      'Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.',
   },
   touchId: {
     id: 'locked.touchId',
-    defaultMessage: '!!!Unlock with Touch ID',
+    defaultMessage: 'Unlock with Touch ID',
   },
   touchIdPrompt: {
     id: 'locked.touchIdPrompt',
-    defaultMessage: '!!!unlock via Touch ID',
+    defaultMessage: 'unlock via Touch ID',
   },
   passwordLabel: {
     id: 'locked.password.label',
-    defaultMessage: '!!!Password',
+    defaultMessage: 'Password',
   },
   submitButtonLabel: {
     id: 'locked.submit.label',
-    defaultMessage: '!!!Unlock',
+    defaultMessage: 'Unlock',
   },
   unlockWithPassword: {
     id: 'locked.unlockWithPassword',
-    defaultMessage: '!!!Unlock with Password',
+    defaultMessage: 'Unlock with Password',
   },
   invalidCredentials: {
     id: 'locked.invalidCredentials',
-    defaultMessage: '!!!Password invalid',
+    defaultMessage: 'Password invalid',
   },
 });
 
-export default @observer class Locked extends Component {
+@observer
+class Locked extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     unlock: PropTypes.func.isRequired,
@@ -56,62 +58,57 @@ export default @observer class Locked extends Component {
     error: globalErrorPropType.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  form = new Form({
-    fields: {
-      password: {
-        label: this.context.intl.formatMessage(messages.passwordLabel),
-        value: '',
-        type: 'password',
+  form = new Form(
+    {
+      fields: {
+        password: {
+          label: this.props.intl.formatMessage(messages.passwordLabel),
+          value: '',
+          type: 'password',
+        },
       },
     },
-  }, this.context.intl);
+    this.props.intl,
+  );
 
   submit(e) {
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         this.props.onSubmit(form.values());
       },
-      onError: () => { },
+      onError: () => {},
     });
   }
 
   touchIdUnlock() {
-    const { intl } = this.context;
+    const { intl } = this.props;
 
-    systemPreferences.promptTouchID(intl.formatMessage(messages.touchIdPrompt)).then(() => {
-      this.props.unlock();
-    });
+    systemPreferences
+      .promptTouchID(intl.formatMessage(messages.touchIdPrompt))
+      .then(() => {
+        this.props.unlock();
+      });
   }
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
-    const {
-      isSubmitting,
-      error,
-      useTouchIdToUnlock,
-    } = this.props;
+    const { intl } = this.props;
+    const { isSubmitting, error, useTouchIdToUnlock } = this.props;
 
-    const touchIdEnabled = isMac ? (useTouchIdToUnlock && systemPreferences.canPromptTouchID()) : false;
-    const submitButtonLabel = touchIdEnabled ? intl.formatMessage(messages.unlockWithPassword) : intl.formatMessage(messages.submitButtonLabel);
+    const touchIdEnabled = isMac
+      ? useTouchIdToUnlock && systemPreferences.canPromptTouchID()
+      : false;
+    const submitButtonLabel = touchIdEnabled
+      ? intl.formatMessage(messages.unlockWithPassword)
+      : intl.formatMessage(messages.submitButtonLabel);
 
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
-          <img
-            src="./assets/images/logo.svg"
-            className="auth__logo"
-            alt=""
-          />
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
           <h1>{intl.formatMessage(messages.headline)}</h1>
-          <Infobox type="warning">
-            {intl.formatMessage(messages.info)}
-          </Infobox>
+          <Infobox type="warning">{intl.formatMessage(messages.info)}</Infobox>
 
           {touchIdEnabled && (
             <>
@@ -125,13 +122,11 @@ export default @observer class Locked extends Component {
             </>
           )}
 
-          <Input
-            field={form.$('password')}
-            showPasswordToggle
-            focus
-          />
+          <Input field={form.$('password')} showPasswordToggle focus />
           {error.code === 'invalid-credentials' && (
-            <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+            <p className="error-message center">
+              {intl.formatMessage(messages.invalidCredentials)}
+            </p>
           )}
           {isSubmitting ? (
             <Button
@@ -153,3 +148,5 @@ export default @observer class Locked extends Component {
     );
   }
 }
+
+export default injectIntl(Locked);
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 9e6a8d046..2f9986858 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -2,10 +2,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { LIVE_FRANZ_API } from '../../config';
-import { API_VERSION, isDevMode, useLiveAPI } from '../../environment';
+import { API_VERSION, isDevMode, useLiveAPI } from '../../environment-remote';
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
 import serverlessLogin from '../../helpers/serverless-helpers';
@@ -19,59 +19,61 @@ import { globalError as globalErrorPropType } from '../../prop-types';
 const messages = defineMessages({
   headline: {
     id: 'login.headline',
-    defaultMessage: '!!!Sign in',
+    defaultMessage: 'Sign in',
   },
   emailLabel: {
     id: 'login.email.label',
-    defaultMessage: '!!!Email address',
+    defaultMessage: 'Email address',
   },
   passwordLabel: {
     id: 'login.password.label',
-    defaultMessage: '!!!Password',
+    defaultMessage: 'Password',
   },
   submitButtonLabel: {
     id: 'login.submit.label',
-    defaultMessage: '!!!Sign in',
+    defaultMessage: 'Sign in',
   },
   invalidCredentials: {
     id: 'login.invalidCredentials',
-    defaultMessage: '!!!Email or password not valid',
+    defaultMessage: 'Email or password not valid',
   },
   customServerQuestion: {
     id: 'login.customServerQuestion',
-    defaultMessage: '!!!Using a Franz account to log in?',
+    defaultMessage: 'Using a Franz account to log in?',
   },
   customServerSuggestion: {
     id: 'login.customServerSuggestion',
-    defaultMessage: '!!!Try importing your Franz account into Ferdi',
+    defaultMessage: 'Try importing your Franz account into Ferdi',
   },
   tokenExpired: {
     id: 'login.tokenExpired',
-    defaultMessage: '!!!Your session expired, please login again.',
+    defaultMessage: 'Your session expired, please login again.',
   },
   serverLogout: {
     id: 'login.serverLogout',
-    defaultMessage: '!!!Your session expired, please login again.',
+    defaultMessage: 'Your session expired, please login again.',
   },
   signupLink: {
     id: 'login.link.signup',
-    defaultMessage: '!!!Create a free account',
+    defaultMessage: 'Create a free account',
   },
   changeServer: {
     id: 'login.changeServer',
-    defaultMessage: '!!!Change server',
+    defaultMessage: 'Change server',
   },
   serverless: {
     id: 'services.serverless',
-    defaultMessage: '!!!Use Ferdi without an Account',
+    defaultMessage: 'Use Ferdi without an Account',
   },
   passwordLink: {
     id: 'login.link.password',
-    defaultMessage: '!!!Forgot password',
+    defaultMessage: 'Reset password',
   },
 });
 
-export default @inject('actions') @observer class Login extends Component {
+@inject('actions')
+@observer
+class Login extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
@@ -84,35 +86,34 @@ export default @inject('actions') @observer class Login extends Component {
     actions: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  form = new Form({
-    fields: {
-      email: {
-        label: this.context.intl.formatMessage(messages.emailLabel),
-        value: '',
-        validators: [required, email],
-      },
-      password: {
-        label: this.context.intl.formatMessage(messages.passwordLabel),
-        value: '',
-        validators: [required],
-        type: 'password',
+  form = new Form(
+    {
+      fields: {
+        email: {
+          label: this.props.intl.formatMessage(messages.emailLabel),
+          value: '',
+          validators: [required, email],
+        },
+        password: {
+          label: this.props.intl.formatMessage(messages.passwordLabel),
+          value: '',
+          validators: [required],
+          type: 'password',
+        },
       },
     },
-  }, this.context.intl);
+    this.props.intl,
+  );
 
   emailField = null;
 
   submit(e) {
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         this.props.onSubmit(form.values());
       },
-      onError: () => { },
+      onError: () => {},
     });
   }
 
@@ -122,7 +123,7 @@ export default @inject('actions') @observer class Login extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
+    const { intl } = this.props;
     const {
       isSubmitting,
       isTokenExpired,
@@ -135,42 +136,47 @@ 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)}>
-          <img
-            src="./assets/images/logo.svg"
-            className="auth__logo"
-            alt=""
-          />
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
           <h1>{intl.formatMessage(messages.headline)}</h1>
           {isDevMode && !useLiveAPI && (
             <Infobox type="warning">
-              In Dev Mode your data is not persistent. Please use the live app for accessing the production API.
+              In Dev Mode your data is not persistent. Please use the live app
+              for accessing the production API.
             </Infobox>
           )}
           {isTokenExpired && (
-            <p className="error-message center">{intl.formatMessage(messages.tokenExpired)}</p>
+            <p className="error-message center">
+              {intl.formatMessage(messages.tokenExpired)}
+            </p>
           )}
           {isServerLogout && (
-            <p className="error-message center">{intl.formatMessage(messages.serverLogout)}</p>
+            <p className="error-message center">
+              {intl.formatMessage(messages.serverLogout)}
+            </p>
           )}
           <Input
             field={form.$('email')}
-            ref={(element) => { this.emailField = element; }}
+            ref={element => {
+              this.emailField = element;
+            }}
             focus
           />
-          <Input
-            field={form.$('password')}
-            showPasswordToggle
-          />
+          <Input field={form.$('password')} showPasswordToggle />
           {error.code === 'invalid-credentials' && (
             <>
-              <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
-              { window.ferdi.stores.settings.all.app.server !== LIVE_FRANZ_API && (
+              <p className="error-message center">
+                {intl.formatMessage(messages.invalidCredentials)}
+              </p>
+              {window.ferdi.stores.settings.all.app.server !==
+                LIVE_FRANZ_API && (
                 <p className="error-message center">
-                    {intl.formatMessage(messages.customServerQuestion)}
-                  {' '}
+                  {intl.formatMessage(messages.customServerQuestion)}{' '}
                   <Link
-                    to={`${window.ferdi.stores.settings.all.app.server.replace(API_VERSION, '')}/import`}
+                    to={`${window.ferdi.stores.settings.all.app.server.replace(
+                      API_VERSION,
+                      '',
+                    )}/import`}
                     target="_blank"
                     style={{ cursor: 'pointer', textDecoration: 'underline' }}
                   >
@@ -197,12 +203,22 @@ export default @inject('actions') @observer class Login extends Component {
           )}
         </form>
         <div className="auth__links">
-          <Link to={changeServerRoute}>{intl.formatMessage(messages.changeServer)}</Link>
-          <a onClick={this.useLocalServer.bind(this)}>{intl.formatMessage(messages.serverless)}</a>
-          <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link>
-          <Link to={passwordRoute}>{intl.formatMessage(messages.passwordLink)}</Link>
+          <Link to={changeServerRoute}>
+            {intl.formatMessage(messages.changeServer)}
+          </Link>
+          <a onClick={this.useLocalServer.bind(this)}>
+            {intl.formatMessage(messages.serverless)}
+          </a>
+          <Link to={signupRoute}>
+            {intl.formatMessage(messages.signupLink)}
+          </Link>
+          <Link to={passwordRoute}>
+            {intl.formatMessage(messages.passwordLink)}
+          </Link>
         </div>
       </div>
     );
   }
 }
+
+export default injectIntl(Login);
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index 1be2097bd..3e678f638 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
@@ -14,31 +14,32 @@ import globalMessages from '../../i18n/globalMessages';
 const messages = defineMessages({
   headline: {
     id: 'password.headline',
-    defaultMessage: '!!!Forgot password',
+    defaultMessage: 'Reset password',
   },
   emailLabel: {
     id: 'password.email.label',
-    defaultMessage: '!!!Email address',
+    defaultMessage: 'Email address',
   },
   successInfo: {
     id: 'password.successInfo',
-    defaultMessage: '!!!Your new password was sent to your email address',
+    defaultMessage: 'Your new password was sent to your email address',
   },
   noUser: {
     id: 'password.noUser',
-    defaultMessage: '!!!No user affiliated with that email address',
+    defaultMessage: 'No user with that email address was found',
   },
   signupLink: {
     id: 'password.link.signup',
-    defaultMessage: '!!!Create a free account',
+    defaultMessage: 'Create a free account',
   },
   loginLink: {
     id: 'password.link.login',
-    defaultMessage: '!!!Sign in to your account',
+    defaultMessage: 'Sign in to your account',
   },
 });
 
-export default @observer class Password extends Component {
+@observer
+class Password extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
@@ -47,24 +48,23 @@ export default @observer class Password extends Component {
     status: MobxPropTypes.arrayOrObservableArray.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  form = new Form({
-    fields: {
-      email: {
-        label: this.context.intl.formatMessage(messages.emailLabel),
-        value: '',
-        validators: [required, email],
+  form = new Form(
+    {
+      fields: {
+        email: {
+          label: this.props.intl.formatMessage(messages.emailLabel),
+          value: '',
+          validators: [required, email],
+        },
       },
     },
-  }, this.context.intl);
+    this.props.intl,
+  );
 
   submit(e) {
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         this.props.onSubmit(form.values());
       },
       onError: () => {},
@@ -73,37 +73,24 @@ export default @observer class Password extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
-    const {
-      isSubmitting,
-      signupRoute,
-      loginRoute,
-      status,
-    } = this.props;
+    const { intl } = this.props;
+    const { isSubmitting, signupRoute, loginRoute, status } = this.props;
 
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
-          <img
-            src="./assets/images/logo.svg"
-            className="auth__logo"
-            alt=""
-          />
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
           <h1>{intl.formatMessage(messages.headline)}</h1>
           {status.length > 0 && status.includes('sent') && (
-            <Infobox
-              type="success"
-              icon="checkbox-marked-circle-outline"
-            >
+            <Infobox type="success" icon="checkbox-marked-circle-outline">
               {intl.formatMessage(messages.successInfo)}
             </Infobox>
           )}
-          <Input
-            field={form.$('email')}
-            focus
-          />
+          <Input field={form.$('email')} focus />
           {status.length > 0 && status.includes('no-user') && (
-            <p className="error-message center">{intl.formatMessage(messages.noUser)}</p>
+            <p className="error-message center">
+              {intl.formatMessage(messages.noUser)}
+            </p>
           )}
           {isSubmitting ? (
             <Button
@@ -123,9 +110,13 @@ export default @observer class Password extends Component {
         </form>
         <div className="auth__links">
           <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link>
-          <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link>
+          <Link to={signupRoute}>
+            {intl.formatMessage(messages.signupLink)}
+          </Link>
         </div>
       </div>
     );
   }
 }
+
+export default injectIntl(Password);
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index ded36bbe7..299c40c63 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
 
@@ -19,20 +19,20 @@ 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.',
+      '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',
-    defaultMessage: '!!!Invitations sent successfully',
+    defaultMessage: 'Invitations sent successfully',
   },
 });
 
@@ -145,10 +145,6 @@ class SetupAssistant extends Component {
     isInviteSuccessful: false,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     services: [
       {
@@ -189,7 +185,7 @@ class SetupAssistant extends Component {
   }
 
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
     const {
       classes,
       isInviteSuccessful,
@@ -330,4 +326,4 @@ class SetupAssistant extends Component {
   }
 }
 
-export default SetupAssistant;
+export default injectIntl(SetupAssistant);
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 6fb41a164..816a49669 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -2,9 +2,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
-import { isDevMode, useLiveAPI } from '../../environment';
+import { isDevMode, useLiveAPI } from '../../environment-remote';
 import Form from '../../lib/Form';
 import { required, email, minLength } from '../../helpers/validation-helpers';
 import serverlessLogin from '../../helpers/serverless-helpers';
@@ -19,63 +19,65 @@ import { termsBase } from '../../api/apiBase';
 const messages = defineMessages({
   headline: {
     id: 'signup.headline',
-    defaultMessage: '!!!Sign up',
+    defaultMessage: 'Sign up',
   },
   firstnameLabel: {
     id: 'signup.firstname.label',
-    defaultMessage: '!!!Firstname',
+    defaultMessage: 'First Name',
   },
   lastnameLabel: {
     id: 'signup.lastname.label',
-    defaultMessage: '!!!Lastname',
+    defaultMessage: 'Last Name',
   },
   emailLabel: {
     id: 'signup.email.label',
-    defaultMessage: '!!!Email address',
+    defaultMessage: 'Email address',
   },
   // companyLabel: {
   //   id: 'signup.company.label',
-  //   defaultMessage: '!!!Company',
+  //   defaultMessage: 'Company',
   // },
   passwordLabel: {
     id: 'signup.password.label',
-    defaultMessage: '!!!Password',
+    defaultMessage: 'Password',
   },
   legalInfo: {
     id: 'signup.legal.info',
-    defaultMessage: '!!!By creating a Ferdi account you accept the',
+    defaultMessage: 'By creating a Ferdi account you accept the',
   },
   terms: {
     id: 'signup.legal.terms',
-    defaultMessage: '!!!Terms of service',
+    defaultMessage: 'Terms of service',
   },
   privacy: {
     id: 'signup.legal.privacy',
-    defaultMessage: '!!!Privacy Statement',
+    defaultMessage: 'Privacy Statement',
   },
   submitButtonLabel: {
     id: 'signup.submit.label',
-    defaultMessage: '!!!Create account',
+    defaultMessage: 'Create account',
   },
   loginLink: {
     id: 'signup.link.login',
-    defaultMessage: '!!!Already have an account, sign in?',
+    defaultMessage: 'Already have an account, sign in?',
   },
   changeServer: {
     id: 'login.changeServer',
-    defaultMessage: '!!!Change server',
+    defaultMessage: 'Change server',
   },
   serverless: {
     id: 'services.serverless',
-    defaultMessage: '!!!Use Ferdi without an Account',
+    defaultMessage: 'Use Ferdi without an Account',
   },
   emailDuplicate: {
     id: 'signup.emailDuplicate',
-    defaultMessage: '!!!A user with that email address already exists',
+    defaultMessage: 'A user with that email address already exists',
   },
 });
 
-export default @inject('actions') @observer class Signup extends Component {
+@inject('actions')
+@observer
+class Signup extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
@@ -85,40 +87,39 @@ export default @inject('actions') @observer class Signup extends Component {
     actions: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  form = new Form({
-    fields: {
-      firstname: {
-        label: this.context.intl.formatMessage(messages.firstnameLabel),
-        value: '',
-        validators: [required],
-      },
-      lastname: {
-        label: this.context.intl.formatMessage(messages.lastnameLabel),
-        value: '',
-        validators: [required],
-      },
-      email: {
-        label: this.context.intl.formatMessage(messages.emailLabel),
-        value: '',
-        validators: [required, email],
-      },
-      password: {
-        label: this.context.intl.formatMessage(messages.passwordLabel),
-        value: '',
-        validators: [required, minLength(6)],
-        type: 'password',
+  form = new Form(
+    {
+      fields: {
+        firstname: {
+          label: this.props.intl.formatMessage(messages.firstnameLabel),
+          value: '',
+          validators: [required],
+        },
+        lastname: {
+          label: this.props.intl.formatMessage(messages.lastnameLabel),
+          value: '',
+          validators: [required],
+        },
+        email: {
+          label: this.props.intl.formatMessage(messages.emailLabel),
+          value: '',
+          validators: [required, email],
+        },
+        password: {
+          label: this.props.intl.formatMessage(messages.passwordLabel),
+          value: '',
+          validators: [required, minLength(6)],
+          type: 'password',
+        },
       },
     },
-  }, this.context.intl);
+    this.props.intl,
+  );
 
   submit(e) {
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         this.props.onSubmit(form.values());
       },
       onError: () => {},
@@ -131,24 +132,22 @@ export default @inject('actions') @observer class Signup extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
-    const {
-      isSubmitting, loginRoute, error, changeServerRoute,
-    } = this.props;
+    const { intl } = this.props;
+    const { isSubmitting, loginRoute, error, changeServerRoute } = this.props;
 
     return (
       <div className="auth__scroll-container">
         <div className="auth__container auth__container--signup">
-          <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
-            <img
-              src="./assets/images/logo.svg"
-              className="auth__logo"
-              alt=""
-            />
+          <form
+            className="franz-form auth__form"
+            onSubmit={e => this.submit(e)}
+          >
+            <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
             <h1>{intl.formatMessage(messages.headline)}</h1>
             {isDevMode && !useLiveAPI && (
               <Infobox type="warning">
-                In Dev Mode your data is not persistent. Please use the live app for accesing the production API.
+                In Dev Mode your data is not persistent. Please use the live app
+                for accesing the production API.
               </Infobox>
             )}
             <div className="grid__row">
@@ -162,7 +161,9 @@ export default @inject('actions') @observer class Signup extends Component {
               scorePassword
             />
             {error.code === 'email-duplicate' && (
-              <p className="error-message center">{intl.formatMessage(messages.emailDuplicate)}</p>
+              <p className="error-message center">
+                {intl.formatMessage(messages.emailDuplicate)}
+              </p>
             )}
             {isSubmitting ? (
               <Button
@@ -200,12 +201,20 @@ export default @inject('actions') @observer class Signup extends Component {
             </p>
           </form>
           <div className="auth__links">
-            <Link to={changeServerRoute}>{intl.formatMessage(messages.changeServer)}</Link>
-            <a onClick={this.useLocalServer.bind(this)}>{intl.formatMessage(messages.serverless)}</a>
-            <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link>
+            <Link to={changeServerRoute}>
+              {intl.formatMessage(messages.changeServer)}
+            </Link>
+            <a onClick={this.useLocalServer.bind(this)}>
+              {intl.formatMessage(messages.serverless)}
+            </a>
+            <Link to={loginRoute}>
+              {intl.formatMessage(messages.loginLink)}
+            </Link>
           </div>
         </div>
       </div>
     );
   }
 }
+
+export default injectIntl(Signup);
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index cb522e26e..2d2e2ab28 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import serverlessLogin from '../../helpers/serverless-helpers';
 
 import Link from '../ui/Link';
@@ -10,19 +10,21 @@ import Link from '../ui/Link';
 const messages = defineMessages({
   signupButton: {
     id: 'welcome.signupButton',
-    defaultMessage: '!!!Create a free account',
+    defaultMessage: 'Create a free account',
   },
   loginButton: {
     id: 'welcome.loginButton',
-    defaultMessage: '!!!Login to your account',
+    defaultMessage: 'Login to your account',
   },
   serverless: {
     id: 'services.serverless',
-    defaultMessage: '!!!Use Ferdi without an Account',
+    defaultMessage: 'Use Ferdi without an Account',
   },
 });
 
-export default @inject('actions') @observer class Login extends Component {
+@inject('actions')
+@observer
+class Login extends Component {
   static propTypes = {
     loginRoute: PropTypes.string.isRequired,
     signupRoute: PropTypes.string.isRequired,
@@ -31,27 +33,22 @@ export default @inject('actions') @observer class Login extends Component {
     actions: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   useLocalServer() {
     serverlessLogin(this.props.actions);
   }
 
   render() {
-    const { intl } = this.context;
-    const {
-      loginRoute,
-      signupRoute,
-      changeServerRoute,
-      recipes,
-    } = this.props;
+    const { intl } = this.props;
+    const { loginRoute, signupRoute, changeServerRoute, recipes } = this.props;
 
     return (
       <div className="welcome">
         <div className="welcome__content">
-          <img src="./assets/images/logo.svg" className="welcome__logo" alt="" />
+          <img
+            src="./assets/images/logo.svg"
+            className="welcome__logo"
+            alt=""
+          />
           {/* <img src="./assets/images/welcome.png" className="welcome__services" alt="" /> */}
           <div className="welcome__text">
             <h1>Ferdi</h1>
@@ -73,27 +70,21 @@ export default @inject('actions') @observer class Login extends Component {
           <br />
 
           <Link to={changeServerRoute}>
-            <span style={{
-              textAlign: 'center',
-              width: '100%',
-              cursor: 'pointer',
-            }}
+            <span
+              style={{
+                textAlign: 'center',
+                width: '100%',
+                cursor: 'pointer',
+              }}
             >
               Change server
             </span>
           </Link>
         </div>
         <div className="welcome__featured-services">
-          {recipes.map((recipe) => (
-            <div
-              key={recipe.id}
-              className="welcome__featured-service"
-            >
-              <img
-                key={recipe.id}
-                src={recipe.icons.svg}
-                alt=""
-              />
+          {recipes.map(recipe => (
+            <div key={recipe.id} className="welcome__featured-service">
+              <img key={recipe.id} src={recipe.icons.svg} alt="" />
             </div>
           ))}
         </div>
@@ -101,3 +92,5 @@ export default @inject('actions') @observer class Login extends Component {
     );
   }
 }
+
+export default injectIntl(Login);
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index e6e5d40fe..0a65dcffa 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
-import { TitleBar } from 'electron-react-titlebar';
+import { defineMessages, injectIntl } from 'react-intl';
+import { TitleBar } from 'electron-react-titlebar/renderer';
 import injectSheet from 'react-jss';
 
 import InfoBar from '../ui/InfoBar';
@@ -27,20 +27,20 @@ function createMarkup(HTMLString) {
 const messages = defineMessages({
   servicesUpdated: {
     id: 'infobar.servicesUpdated',
-    defaultMessage: '!!!Your services have been updated.',
+    defaultMessage: 'Your services have been updated.',
   },
   buttonReloadServices: {
     id: 'infobar.buttonReloadServices',
-    defaultMessage: '!!!Reload services',
+    defaultMessage: 'Reload services',
   },
   requiredRequestsFailed: {
     id: 'infobar.requiredRequestsFailed',
-    defaultMessage: '!!!Could not load services and user information',
+    defaultMessage: 'Could not load services and user information',
   },
   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.',
+      'There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.',
   },
 });
 
@@ -88,16 +88,13 @@ class AppLayout extends Component {
 
   state = {
     shouldShowAppUpdateInfoBar: true,
+    shouldShowServicesUpdatedInfoBar: true,
   };
 
   static defaultProps = {
     children: [],
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       classes,
@@ -119,7 +116,7 @@ class AppLayout extends Component {
       areRequiredRequestsLoading,
     } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <ErrorBoundary>
@@ -179,12 +176,14 @@ class AppLayout extends Component {
                   {intl.formatMessage(messages.authRequestFailed)}
                 </InfoBar>
               )}
-              {showServicesUpdatedInfoBar && (
+              {showServicesUpdatedInfoBar && this.state.shouldShowServicesUpdatedInfoBar && (
                 <InfoBar
                   type="primary"
                   ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
                   onClick={reloadServicesAfterUpdate}
-                  sticky
+                  onHide={() => {
+                    this.setState({ shouldShowServicesUpdatedInfoBar: false });
+                  }}
                 >
                   <span className="mdi mdi-power-plug" />
                   {intl.formatMessage(messages.servicesUpdated)}
@@ -213,4 +212,4 @@ class AppLayout extends Component {
   }
 }
 
-export default AppLayout;
+export default injectIntl(AppLayout);
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 1ee7733b9..87233f7ca 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -1,12 +1,19 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router';
 
 import Tabbar from '../services/tabs/Tabbar';
-import { settingsShortcutKey, lockFerdiShortcutKey, todosToggleShortcutKey, workspaceToggleShortcutKey, addNewServiceShortcutKey, muteFerdiShortcutKey } from '../../environment';
+import {
+  settingsShortcutKey,
+  lockFerdiShortcutKey,
+  todosToggleShortcutKey,
+  workspaceToggleShortcutKey,
+  addNewServiceShortcutKey,
+  muteFerdiShortcutKey,
+} from '../../environment';
 import { workspaceStore } from '../../features/workspaces';
 import { todosStore } from '../../features/todos';
 import { todoActions } from '../../features/todos/actions';
@@ -17,39 +24,41 @@ import globalMessages from '../../i18n/globalMessages';
 const messages = defineMessages({
   addNewService: {
     id: 'sidebar.addNewService',
-    defaultMessage: '!!!Add new service',
+    defaultMessage: 'Add new service',
   },
   mute: {
     id: 'sidebar.muteApp',
-    defaultMessage: '!!!Disable notifications & audio',
+    defaultMessage: 'Disable notifications & audio',
   },
   unmute: {
     id: 'sidebar.unmuteApp',
-    defaultMessage: '!!!Enable notifications & audio',
+    defaultMessage: 'Enable notifications & audio',
   },
   openWorkspaceDrawer: {
     id: 'sidebar.openWorkspaceDrawer',
-    defaultMessage: '!!!Open workspace drawer',
+    defaultMessage: 'Open workspace drawer',
   },
   closeWorkspaceDrawer: {
     id: 'sidebar.closeWorkspaceDrawer',
-    defaultMessage: '!!!Close workspace drawer',
+    defaultMessage: 'Close workspace drawer',
   },
   openTodosDrawer: {
     id: 'sidebar.openTodosDrawer',
-    defaultMessage: '!!!Open Ferdi Todos',
+    defaultMessage: 'Open Ferdi Todos',
   },
   closeTodosDrawer: {
     id: 'sidebar.closeTodosDrawer',
-    defaultMessage: '!!!Close Ferdi Todos',
+    defaultMessage: 'Close Ferdi Todos',
   },
   lockFerdi: {
     id: 'sidebar.lockFerdi',
-    defaultMessage: '!!!Lock Ferdi',
+    defaultMessage: 'Lock Ferdi',
   },
 });
 
-export default @inject('stores', 'actions') @observer class Sidebar extends Component {
+@inject('stores', 'actions')
+@observer
+class Sidebar extends Component {
   static propTypes = {
     openSettings: PropTypes.func.isRequired,
     closeSettings: PropTypes.func.isRequired,
@@ -79,10 +88,6 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
     }).isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     tooltipEnabled: true,
   };
@@ -115,14 +120,14 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
       actions,
       isTodosServiceActive,
     } = this.props;
-    const { intl } = this.context;
-    const todosToggleMessage = (
-      todosStore.isTodosPanelVisible ? messages.closeTodosDrawer : messages.openTodosDrawer
-    );
+    const { intl } = this.props;
+    const todosToggleMessage = todosStore.isTodosPanelVisible
+      ? messages.closeTodosDrawer
+      : messages.openTodosDrawer;
 
-    const workspaceToggleMessage = (
-      isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer
-    );
+    const workspaceToggleMessage = isWorkspaceDrawerOpen
+      ? messages.closeWorkspaceDrawer
+      : messages.openWorkspaceDrawer;
     const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
@@ -133,9 +138,9 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
           disableToolTip={() => this.disableToolTip()}
           useVerticalStyle={stores.settings.all.app.useVerticalStyle}
         />
-        { isLoggedIn ? (
+        {isLoggedIn ? (
           <>
-            { stores.settings.all.app.lockingFeatureEnabled ? (
+            {stores.settings.all.app.lockingFeatureEnabled ? (
               <button
                 type="button"
                 className="sidebar__button"
@@ -147,12 +152,15 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
                     },
                   });
                 }}
-                data-tip={`${intl.formatMessage(messages.lockFerdi)} (${lockFerdiShortcutKey(false)})`}
+                data-tip={`${intl.formatMessage(
+                  messages.lockFerdi,
+                )} (${lockFerdiShortcutKey(false)})`}
               >
                 <i className="mdi mdi-lock" />
               </button>
             ) : null}
-            {todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? (
+            {todosStore.isFeatureEnabled &&
+            todosStore.isFeatureEnabledByUser ? (
               <button
                 type="button"
                 onClick={() => {
@@ -160,12 +168,16 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
                   this.updateToolTip();
                 }}
                 disabled={isTodosServiceActive}
-                className={`sidebar__button sidebar__button--todos ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`}
-                data-tip={`${intl.formatMessage(todosToggleMessage)} (${todosToggleShortcutKey(false)})`}
+                className={`sidebar__button sidebar__button--todos ${
+                  todosStore.isTodosPanelVisible ? 'is-active' : ''
+                }`}
+                data-tip={`${intl.formatMessage(
+                  todosToggleMessage,
+                )} (${todosToggleShortcutKey(false)})`}
               >
                 <i className="mdi mdi-check-all" />
               </button>
-            ) : null}
+              ) : null}
             {workspaceStore.isFeatureEnabled ? (
               <button
                 type="button"
@@ -173,8 +185,12 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
                   toggleWorkspaceDrawer();
                   this.updateToolTip();
                 }}
-                className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
-                data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${workspaceToggleShortcutKey(false)})`}
+                className={`sidebar__button sidebar__button--workspaces ${
+                  isWorkspaceDrawerOpen ? 'is-active' : ''
+                }`}
+                data-tip={`${intl.formatMessage(
+                  workspaceToggleMessage,
+                )} (${workspaceToggleShortcutKey(false)})`}
               >
                 <i className="mdi mdi-view-grid" />
               </button>
@@ -185,8 +201,12 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
                 toggleMuteApp();
                 this.updateToolTip();
               }}
-              className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
-              data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${muteFerdiShortcutKey(false)})`}
+              className={`sidebar__button sidebar__button--audio ${
+                isAppMuted ? 'is-muted' : ''
+              }`}
+              data-tip={`${intl.formatMessage(
+                isAppMuted ? messages.unmute : messages.mute,
+              )} (${muteFerdiShortcutKey(false)})`}
             >
               <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
             </button>
@@ -194,7 +214,9 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
               type="button"
               onClick={() => openSettings({ path: 'recipes' })}
               className="sidebar__button sidebar__button--new-service"
-              data-tip={`${intl.formatMessage(messages.addNewService)} (${addNewServiceShortcutKey(false)})`}
+              data-tip={`${intl.formatMessage(
+                messages.addNewService,
+              )} (${addNewServiceShortcutKey(false)})`}
             >
               <i className="mdi mdi-plus-box" />
             </button>
@@ -212,15 +234,17 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
           type="button"
           onClick={() => openSettings({ path: 'app' })}
           className="sidebar__button sidebar__button--settings"
-          data-tip={`${intl.formatMessage(globalMessages.settings)} (${settingsShortcutKey(false)})`}
+          data-tip={`${intl.formatMessage(
+            globalMessages.settings,
+          )} (${settingsShortcutKey(false)})`}
         >
           <i className="mdi mdi-cog" />
-          { (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE
-            || this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED) && (
-            <span className="update-available">
-              •
-            </span>
-          ) }
+          {(this.props.stores.app.updateStatus ===
+            this.props.stores.app.updateStatusTypes.AVAILABLE ||
+            this.props.stores.app.updateStatus ===
+              this.props.stores.app.updateStatusTypes.DOWNLOADED) && (
+              <span className="update-available">•</span>
+          )}
         </button>
         {this.state.tooltipEnabled && (
           <ReactTooltip place="right" type="dark" effect="solid" />
@@ -229,3 +253,5 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
     );
   }
 }
+
+export default injectIntl(Sidebar);
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index ebe863333..423edb3c7 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import { Icon } from '@meetfranz/ui';
-import { intlShape, defineMessages } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { mdiAlert } from '@mdi/js';
 import { LIVE_API_FERDI_WEBSITE } from '../../../config';
@@ -12,15 +12,15 @@ import { LIVE_API_FERDI_WEBSITE } from '../../../config';
 const messages = defineMessages({
   text: {
     id: 'connectionLostBanner.message',
-    defaultMessage: '!!!Oh no! Ferdi lost the connection to {name}.',
+    defaultMessage: 'Oh no! Ferdi lost the connection to {name}.',
   },
   moreInformation: {
     id: 'connectionLostBanner.informationLink',
-    defaultMessage: '!!!What happened?',
+    defaultMessage: 'What happened?',
   },
   cta: {
     id: 'connectionLostBanner.cta',
-    defaultMessage: '!!!Reload Service',
+    defaultMessage: 'Reload Service',
   },
 });
 
@@ -78,16 +78,12 @@ class ConnectionLostBanner extends Component {
     reload: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   inputRef = React.createRef();
 
   render() {
     const { classes, name, reload } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className={classes.root}>
@@ -110,4 +106,4 @@ class ConnectionLostBanner extends Component {
   }
 }
 
-export default ConnectionLostBanner;
+export default injectIntl(ConnectionLostBanner);
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
index 36e0ac418..b00db8c3f 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 
 import Button from '../../../ui/Button';
@@ -11,27 +11,29 @@ import styles from './styles';
 const messages = defineMessages({
   headline: {
     id: 'service.errorHandler.headline',
-    defaultMessage: '!!!Oh no!',
+    defaultMessage: 'Oh no!',
   },
   text: {
     id: 'service.errorHandler.text',
-    defaultMessage: '!!!{name} has failed to load.',
+    defaultMessage: '{name} has failed to load.',
   },
   action: {
     id: 'service.errorHandler.action',
-    defaultMessage: '!!!Reload {name}',
+    defaultMessage: 'Reload {name}',
   },
   editAction: {
     id: 'service.errorHandler.editAction',
-    defaultMessage: '!!!Edit {name}',
+    defaultMessage: 'Edit {name}',
   },
   errorMessage: {
     id: 'service.errorHandler.message',
-    defaultMessage: '!!!Error:',
+    defaultMessage: 'Error',
   },
 });
 
-export default @injectSheet(styles) @observer class WebviewErrorHandler extends Component {
+@injectSheet(styles)
+@observer
+class WebviewErrorHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     reload: PropTypes.func.isRequired,
@@ -40,30 +42,16 @@ export default @injectSheet(styles) @observer class WebviewErrorHandler extends
     classes: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
-    const {
-      name,
-      reload,
-      edit,
-      errorMessage,
-      classes,
-    } = this.props;
-    const { intl } = this.context;
+    const { name, reload, edit, errorMessage, classes } = this.props;
+    const { intl } = this.props;
 
     return (
       <div className={classes.component}>
         <h1>{intl.formatMessage(messages.headline)}</h1>
         <p>{intl.formatMessage(messages.text, { name })}</p>
         <p>
-          <strong>
-            {intl.formatMessage(messages.errorMessage)}
-            :
-          </strong>
-          {' '}
+          <strong>{intl.formatMessage(messages.errorMessage)}:</strong>{' '}
           {errorMessage}
         </p>
         <div className={classes.buttonContainer}>
@@ -82,3 +70,5 @@ export default @injectSheet(styles) @observer class WebviewErrorHandler extends
     );
   }
 }
+
+export default injectIntl(WebviewErrorHandler);
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index d0f12256e..e59ed58bd 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -1,38 +1,35 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Button from '../../ui/Button';
 
 const messages = defineMessages({
   headline: {
     id: 'service.disabledHandler.headline',
-    defaultMessage: '!!!{name} is disabled',
+    defaultMessage: '{name} is disabled',
   },
   action: {
     id: 'service.disabledHandler.action',
-    defaultMessage: '!!!Enable {name}',
+    defaultMessage: 'Enable {name}',
   },
 });
 
-export default @observer class ServiceDisabled extends Component {
+@observer
+class ServiceDisabled extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     enable: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   countdownInterval = null;
 
   countdownIntervalTimeout = 1000;
 
   render() {
     const { name, enable } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="services__info-layer">
@@ -46,3 +43,5 @@ export default @observer class ServiceDisabled extends Component {
     );
   }
 }
+
+export default injectIntl(ServiceDisabled);
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 3fc084ff0..81401b1d2 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -15,7 +15,9 @@ import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
 
-export default @inject('stores', 'actions') @observer class ServiceView extends Component {
+@inject('stores', 'actions')
+@observer
+class ServiceView extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
@@ -63,7 +65,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     clearTimeout(this.hibernationTimer);
   }
 
-  updateTargetUrl = (event) => {
+  updateTargetUrl = event => {
     let visible = true;
     if (event.url === '' || event.url === '#') {
       visible = false;
@@ -86,11 +88,12 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
       isSpellcheckerEnabled,
     } = this.props;
 
-    const {
-      navigationBarBehaviour,
-    } = stores.settings.app;
+    const { navigationBarBehaviour } = stores.settings.app;
 
-    const showNavBar = navigationBarBehaviour === 'always' || (navigationBarBehaviour === 'custom' && service.recipe.id === CUSTOM_WEBSITE_RECIPE_ID);
+    const showNavBar =
+      navigationBarBehaviour === 'always' ||
+      (navigationBarBehaviour === 'custom' &&
+        service.recipe.id === CUSTOM_WEBSITE_RECIPE_ID);
 
     const webviewClasses = classnames({
       services__webview: true,
@@ -101,13 +104,11 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
 
     let statusBar = null;
     if (this.state.statusBarVisible) {
-      statusBar = (
-        <StatusBarTargetUrl text={this.state.targetUrl} />
-      );
+      statusBar = <StatusBarTargetUrl text={this.state.targetUrl} />;
     }
 
     return (
-      <div className={webviewClasses}>
+      <div className={webviewClasses} data-name={service.name}>
         {service.isActive && service.isEnabled && (
           <>
             {service.hasCrashed && (
@@ -117,11 +118,11 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
                 reload={reload}
               />
             )}
-            {service.isEnabled && service.isLoading && service.isFirstLoad && !service.isServiceAccessRestricted && (
-              <WebviewLoader
-                loaded={false}
-                name={service.name}
-              />
+            {service.isEnabled &&
+              service.isLoading &&
+              service.isFirstLoad &&
+              !service.isServiceAccessRestricted && (
+                <WebviewLoader loaded={false} name={service.name} />
             )}
             {service.isError && (
               <WebviewErrorHandler
@@ -147,9 +148,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
           <>
             {!service.isHibernating ? (
               <>
-                {showNavBar && (
-                  <WebControlsScreen service={service} />
-                )}
+                {showNavBar && <WebControlsScreen service={service} />}
                 <ServiceWebview
                   service={service}
                   setWebviewReference={setWebviewReference}
@@ -159,9 +158,11 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
               </>
             ) : (
               <div>
-                <span role="img" aria-label="Sleeping Emoji">😴</span>
-                {' '}
-                This service is currently hibernating. If this page doesn&#x27;t close soon, please try reloading Ferdi.
+                <span role="img" aria-label="Sleeping Emoji">
+                  😴
+                </span>{' '}
+                This service is currently hibernating. If this page doesn&#x27;t
+                close soon, please try reloading Ferdi.
               </div>
             )}
           </>
@@ -171,3 +172,5 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     );
   }
 }
+
+export default ServiceView;
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index c0f48793a..d3170be53 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -85,7 +85,8 @@ class ServiceWebview extends Component {
         useragent={service.userAgent}
         disablewebsecurity={service.recipe.disablewebsecurity ? true : undefined}
         allowpopups
-        webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0}`}
+        nodeintegration
+        webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0}, contextIsolation=1, enableRemoteModule=1`}
       />
     );
   }
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index bb93ff7d4..fb43fb816 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { Link } from 'react-router';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import Confetti from 'react-confetti';
 import ms from 'ms';
 import injectSheet from 'react-jss';
@@ -14,23 +14,24 @@ import serverlessLogin from '../../../helpers/serverless-helpers';
 const messages = defineMessages({
   welcome: {
     id: 'services.welcome',
-    defaultMessage: '!!!Welcome to Ferdi',
+    defaultMessage: 'Welcome to Ferdi',
   },
   getStarted: {
     id: 'services.getStarted',
-    defaultMessage: '!!!Get started',
+    defaultMessage: 'Get started',
   },
   login: {
     id: 'services.login',
-    defaultMessage: '!!!Please login to use Ferdi.',
+    defaultMessage: 'Please login to use Ferdi.',
   },
   serverless: {
     id: 'services.serverless',
-    defaultMessage: '!!!Use Ferdi without an Account',
+    defaultMessage: 'Use Ferdi without an Account',
   },
   serverInfo: {
     id: 'services.serverInfo',
-    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!',
+    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!',
   },
 });
 
@@ -43,7 +44,10 @@ const styles = {
   },
 };
 
-export default @injectSheet(styles) @inject('actions') @observer class Services extends Component {
+@injectSheet(styles)
+@inject('actions')
+@observer
+class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
@@ -63,10 +67,6 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
     services: [],
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     showConfetti: true,
   };
@@ -112,11 +112,9 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
       isSpellcheckerEnabled,
     } = this.props;
 
-    const {
-      showConfetti,
-    } = this.state;
+    const { showConfetti } = this.state;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
     const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
@@ -131,25 +129,28 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
           </div>
         )}
         {services.length === 0 && (
-          <Appear
-            timeout={1500}
-            transitionName="slideUp"
-          >
+          <Appear timeout={1500} transitionName="slideUp">
             <div className="services__no-service">
-              <img src="./assets/images/logo.svg" alt="Logo" style={{ maxHeight: '50vh' }} />
+              <img
+                src="./assets/images/logo.svg"
+                alt="Logo"
+                style={{ maxHeight: '50vh' }}
+              />
               <h1>{intl.formatMessage(messages.welcome)}</h1>
-              { !isLoggedIn && (
+              {!isLoggedIn && (
                 <>
                   <p>{intl.formatMessage(messages.login)}</p>
                   <p>{intl.formatMessage(messages.serverInfo)}</p>
                 </>
-              ) }
-              <Appear
-                timeout={300}
-                transitionName="slideUp"
-              >
-                <Link to={isLoggedIn ? '/settings/recipes' : '/auth/welcome'} className="button">
-                  { isLoggedIn ? intl.formatMessage(messages.getStarted) : 'Login' }
+              )}
+              <Appear timeout={300} transitionName="slideUp">
+                <Link
+                  to={isLoggedIn ? '/settings/recipes' : '/auth/welcome'}
+                  className="button"
+                >
+                  {isLoggedIn
+                    ? intl.formatMessage(messages.getStarted)
+                    : 'Login'}
                 </Link>
                 {!isLoggedIn && (
                   <button
@@ -167,27 +168,33 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
             </div>
           </Appear>
         )}
-        {services.filter((service) => !service.isTodosService).map((service) => (
-          <ServiceView
-            key={service.id}
-            service={service}
-            handleIPCMessage={handleIPCMessage}
-            setWebviewReference={setWebviewReference}
-            detachService={detachService}
-            openWindow={openWindow}
-            reload={() => reload({ serviceId: service.id })}
-            edit={() => openSettings({ path: `services/edit/${service.id}` })}
-            enable={() => update({
-              serviceId: service.id,
-              serviceData: {
-                isEnabled: true,
-              },
-              redirect: false,
-            })}
-            isSpellcheckerEnabled={isSpellcheckerEnabled}
-          />
-        ))}
+        {services
+          .filter(service => !service.isTodosService)
+          .map(service => (
+            <ServiceView
+              key={service.id}
+              service={service}
+              handleIPCMessage={handleIPCMessage}
+              setWebviewReference={setWebviewReference}
+              detachService={detachService}
+              openWindow={openWindow}
+              reload={() => reload({ serviceId: service.id })}
+              edit={() => openSettings({ path: `services/edit/${service.id}` })}
+              enable={() =>
+                update({
+                  serviceId: service.id,
+                  serviceData: {
+                    isEnabled: true,
+                  },
+                  redirect: false,
+                })
+              }
+              isSpellcheckerEnabled={isSpellcheckerEnabled}
+            />
+          ))}
       </div>
     );
   }
 }
+
+export default injectIntl(Services);
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 10ff0bbbb..a332602be 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import ms from 'ms';
 
 import Button from '../../ui/Button';
@@ -9,35 +9,33 @@ import Button from '../../ui/Button';
 const messages = defineMessages({
   headline: {
     id: 'service.crashHandler.headline',
-    defaultMessage: '!!!Oh no!',
+    defaultMessage: 'Oh no!',
   },
   text: {
     id: 'service.crashHandler.text',
-    defaultMessage: '!!!{name} has caused an error.',
+    defaultMessage: '{name} has caused an error.',
   },
   action: {
     id: 'service.crashHandler.action',
-    defaultMessage: '!!!Reload {name}',
+    defaultMessage: 'Reload {name}',
   },
   autoReload: {
     id: 'service.crashHandler.autoReload',
-    defaultMessage: '!!!Trying to automatically restore {name} in {seconds} seconds',
+    defaultMessage:
+      'Trying to automatically restore {name} in {seconds} seconds',
   },
 });
 
-export default @observer class WebviewCrashHandler extends Component {
+@observer
+class WebviewCrashHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     reload: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     countdown: ms('10s'),
-  }
+  };
 
   countdownInterval = null;
 
@@ -47,7 +45,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,
       }));
 
@@ -60,7 +58,7 @@ export default @observer class WebviewCrashHandler extends Component {
 
   render() {
     const { name, reload } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="services__info-layer">
@@ -82,3 +80,5 @@ export default @observer class WebviewCrashHandler extends Component {
     );
   }
 }
+
+export default injectIntl(WebviewCrashHandler);
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index e5892be5d..2474682df 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -1,6 +1,6 @@
-import { Menu, dialog, app, getCurrentWindow } from '@electron/remote';
+import { Menu, dialog, app } from '@electron/remote';
 import React, { Component } from 'react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
@@ -20,56 +20,55 @@ const IS_SERVICE_DEBUGGING_ENABLED = (
 const messages = defineMessages({
   reload: {
     id: 'tabs.item.reload',
-    defaultMessage: '!!!Reload',
+    defaultMessage: 'Reload',
   },
   disableNotifications: {
     id: 'tabs.item.disableNotifications',
-    defaultMessage: '!!!Disable notifications',
+    defaultMessage: 'Disable notifications',
   },
   enableNotifications: {
     id: 'tabs.item.enableNotification',
-    defaultMessage: '!!!Enable notifications',
+    defaultMessage: 'Enable notifications',
   },
   disableAudio: {
     id: 'tabs.item.disableAudio',
-    defaultMessage: '!!!Disable audio',
+    defaultMessage: 'Disable audio',
   },
   enableAudio: {
     id: 'tabs.item.enableAudio',
-    defaultMessage: '!!!Enable audio',
+    defaultMessage: 'Enable audio',
   },
   enableDarkMode: {
     id: 'tabs.item.enableDarkMode',
-    defaultMessage: '!!!Enable Dark mode',
+    defaultMessage: 'Enable Dark mode',
   },
   disableDarkMode: {
     id: 'tabs.item.disableDarkMode',
-    defaultMessage: '!!!Disable Dark mode',
+    defaultMessage: 'Disable Dark mode',
   },
   disableService: {
     id: 'tabs.item.disableService',
-    defaultMessage: '!!!Disable Service',
+    defaultMessage: 'Disable service',
   },
   enableService: {
     id: 'tabs.item.enableService',
-    defaultMessage: '!!!Enable Service',
+    defaultMessage: 'Enable service',
   },
   hibernateService: {
     id: 'tabs.item.hibernateService',
-    defaultMessage: '!!!Hibernate Service',
+    defaultMessage: 'Hibernate service',
   },
   wakeUpService: {
     id: 'tabs.item.wakeUpService',
-    defaultMessage: '!!!Wake Up Service',
+    defaultMessage: 'Wake up service',
   },
   deleteService: {
     id: 'tabs.item.deleteService',
-    defaultMessage: '!!!Delete Service',
+    defaultMessage: 'Delete service',
   },
   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?',
   },
 });
 
@@ -134,14 +133,44 @@ class TabItem extends Component {
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   @observable isPolled = false;
 
   @observable isPollAnswered = false;
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      showShortcutIndex: false,
+    };
+  }
+
+  handleShowShortcutIndex = () => {
+    this.setState({ showShortcutIndex: true });
+  };
+
+  checkForLongPress = () => {
+    let longpressDelay = null;
+    const longpressDelayDuration = 1000;
+
+    document.addEventListener(
+      'keydown',
+      e => {
+        if (e.ctrlKey || e.metaKey) {
+          longpressDelay = setTimeout(
+            this.handleShowShortcutIndex,
+            longpressDelayDuration,
+          );
+        }
+      },
+      { capture: true },
+    );
+
+    document.addEventListener('keyup', () => {
+      clearTimeout(longpressDelay);
+      this.setState({ showShortcutIndex: false });
+    });
+  };
+
   componentDidMount() {
     const { service } = this.props;
 
@@ -164,6 +193,8 @@ class TabItem extends Component {
         }
       });
     }
+
+    this.checkForLongPress();
   }
 
   render() {
@@ -185,7 +216,7 @@ class TabItem extends Component {
       showMessageBadgeWhenMutedSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     const menuTemplate = [
       {
@@ -240,8 +271,9 @@ class TabItem extends Component {
             ? messages.wakeUpService
             : messages.hibernateService,
         ),
+        // eslint-disable-next-line no-confusing-arrow
         click: () =>
-          (service.isHibernating ? wakeUpService() : hibernateService()),
+          service.isHibernating ? wakeUpService() : hibernateService(),
         enabled: service.canHibernate,
       },
       {
@@ -256,7 +288,10 @@ class TabItem extends Component {
             detail: intl.formatMessage(messages.confirmDeleteService, {
               serviceName: service.name || service.recipe.name,
             }),
-            buttons: [intl.formatMessage(globalMessages.yes), intl.formatMessage(globalMessages.no)],
+            buttons: [
+              intl.formatMessage(globalMessages.yes),
+              intl.formatMessage(globalMessages.no),
+            ],
           });
           if (selection === 0) {
             deleteService();
@@ -283,7 +318,7 @@ class TabItem extends Component {
             service.unreadDirectMessageCount === 0 &&
             service.isIndirectMessageBadgeEnabled && (
               <span className="tab-item__message-count is-indirect">•</span>
-          )}
+            )}
           {service.isHibernating && (
             <span className="tab-item__message-count hibernating">•</span>
           )}
@@ -302,9 +337,11 @@ class TabItem extends Component {
           'is-disabled': !service.isEnabled,
         })}
         onClick={clickHandler}
-        onContextMenu={() => menu.popup(getCurrentWindow())}
+        onContextMenu={() => menu.popup()}
         data-tip={`${service.name} ${
-          shortcutIndex <= 9 ? `(${cmdOrCtrlShortcutKey(false)}+${shortcutIndex})` : ''
+          shortcutIndex <= 9
+            ? `(${cmdOrCtrlShortcutKey(false)}+${shortcutIndex})`
+            : ''
         }`}
       >
         <img src={service.icon} className="tab-item__icon" alt="" />
@@ -327,9 +364,12 @@ class TabItem extends Component {
             />
           </>
         )}
+        {shortcutIndex && this.state.showShortcutIndex && (
+          <span className="tab-item__shortcut-index">{shortcutIndex}</span>
+        )}
       </li>
     );
   }
 }
 
-export default SortableElement(TabItem);
+export default injectIntl(SortableElement(TabItem));
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index c1421a2b1..a77799819 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -4,7 +4,8 @@ import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 
 import TabBarSortableList from './TabBarSortableList';
 
-export default @observer class TabBar extends Component {
+@observer
+class TabBar extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
     setActive: PropTypes.func.isRequired,
@@ -26,16 +27,13 @@ export default @observer class TabBar extends Component {
   };
 
   onSortEnd = ({ oldIndex, newIndex }) => {
-    const {
-      enableToolTip,
-      reorder,
-    } = this.props;
+    const { enableToolTip, reorder } = this.props;
 
     enableToolTip();
     reorder({ oldIndex, newIndex });
   };
 
-  shouldPreventSorting = (event) => event.target.tagName !== 'LI';
+  shouldPreventSorting = event => event.target.tagName !== 'LI';
 
   toggleService = ({ serviceId, isEnabled }) => {
     const { updateService } = this.props;
@@ -102,10 +100,10 @@ export default @observer class TabBar extends Component {
           toggleAudio={toggleAudio}
           toggleDarkMode={toggleDarkMode}
           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={axis}
@@ -118,3 +116,5 @@ export default @observer class TabBar extends Component {
     );
   }
 }
+
+export default TabBar;
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index 5b3b754fa..71250bd4d 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import ErrorBoundary from '../util/ErrorBoundary';
 import { oneOrManyChildElements } from '../../prop-types';
@@ -10,11 +10,10 @@ import Appear from '../ui/effects/Appear';
 const messages = defineMessages({
   closeSettings: {
     id: 'settings.app.closeSettings',
-    defaultMessage: '!!!Close settings',
+    defaultMessage: 'Close settings',
   },
 });
 
-export default
 @observer
 class SettingsLayout extends Component {
   static propTypes = {
@@ -23,10 +22,6 @@ class SettingsLayout extends Component {
     closeSettings: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
   }
@@ -34,6 +29,7 @@ class SettingsLayout extends Component {
   componentWillUnmount() {
     document.removeEventListener(
       'keydown',
+      // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
       this.handleKeyDown.bind(this),
       false,
     );
@@ -49,7 +45,7 @@ class SettingsLayout extends Component {
   render() {
     const { navigation, children, closeSettings } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <Appear transitionName="fadeIn-fast">
@@ -77,3 +73,5 @@ class SettingsLayout extends Component {
     );
   }
 }
+
+export default injectIntl(SettingsLayout);
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index ef7748343..544821e9a 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import { H1, H2 } from '@meetfranz/ui';
 
@@ -13,45 +13,45 @@ import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config';
 const messages = defineMessages({
   headline: {
     id: 'settings.account.headline',
-    defaultMessage: '!!!Account',
+    defaultMessage: 'Account',
   },
   headlineDangerZone: {
     id: 'settings.account.headlineDangerZone',
-    defaultMessage: '!!Danger Zone',
+    defaultMessage: 'Danger Zone',
   },
   accountEditButton: {
     id: 'settings.account.account.editButton',
-    defaultMessage: '!!!Edit Account',
+    defaultMessage: 'Edit account',
   },
   invoicesButton: {
     id: 'settings.account.headlineInvoices',
-    defaultMessage: '!!Invoices',
+    defaultMessage: 'Invoices',
   },
   userInfoRequestFailed: {
     id: 'settings.account.userInfoRequestFailed',
-    defaultMessage: '!!!Could not load user information',
+    defaultMessage: 'Could not load user information',
   },
   tryReloadUserInfoRequest: {
     id: 'settings.account.tryReloadUserInfoRequest',
-    defaultMessage: '!!!Try again',
+    defaultMessage: 'Try again',
   },
   deleteAccount: {
     id: 'settings.account.deleteAccount',
-    defaultMessage: '!!!Delete account',
+    defaultMessage: 'Delete account',
   },
   deleteInfo: {
     id: 'settings.account.deleteInfo',
     defaultMessage:
-      "!!!If you don't need your Ferdi account any longer, you can delete your account and all related data here.",
+      "If you don't need your Ferdi account any longer, you can delete your account and all related data here.",
   },
   deleteEmailSent: {
     id: 'settings.account.deleteEmailSent',
     defaultMessage:
-      '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
+      'You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
   },
   yourLicense: {
     id: 'settings.account.yourLicense',
-    defaultMessage: '!!!Your Franz License:',
+    defaultMessage: 'Your Ferdi License:',
   },
   accountUnavailable: {
     id: 'settings.account.accountUnavailable',
@@ -59,7 +59,8 @@ const messages = defineMessages({
   },
   accountUnavailableInfo: {
     id: 'settings.account.accountUnavailableInfo',
-    defaultMessage: 'You are using Ferdi without an account. If you want to use Ferdi with an account and keep your services synchronized across installations, please select a server in the Settings tab then login.',
+    defaultMessage:
+      'You are using Ferdi without an account. If you want to use Ferdi with an account and keep your services synchronized across installations, please select a server in the Settings tab then login.',
   },
 });
 
@@ -78,10 +79,6 @@ class AccountDashboard extends Component {
     server: PropTypes.string.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       user,
@@ -95,7 +92,7 @@ class AccountDashboard extends Component {
       openInvoices,
       server,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     const isUsingWithoutAccount = server === LOCAL_SERVER;
     const isUsingFranzServer = server === LIVE_FRANZ_API;
@@ -182,9 +179,7 @@ class AccountDashboard extends Component {
                         <div className="account">
                           <div className="account__box">
                             <H2>{intl.formatMessage(messages.yourLicense)}</H2>
-                            <p>
-                              Franz
-                            </p>
+                            <p>Franz</p>
                             <div className="manage-user-links">
                               <Button
                                 label={intl.formatMessage(
@@ -203,7 +198,9 @@ class AccountDashboard extends Component {
                   {isUsingFranzServer && (
                     <div className="account franz-form">
                       <div className="account__box">
-                        <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2>
+                        <H2>
+                          {intl.formatMessage(messages.headlineDangerZone)}
+                        </H2>
                         {!isDeleteAccountSuccessful && (
                           <div className="account__subscription">
                             <p>{intl.formatMessage(messages.deleteInfo)}</p>
@@ -232,4 +229,4 @@ class AccountDashboard extends Component {
   }
 }
 
-export default AccountDashboard;
+export default injectIntl(AccountDashboard);
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 0a5ace586..72c7faa66 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { inject, observer } from 'mobx-react';
 import { RouterStore } from 'mobx-react-router';
 
@@ -15,35 +15,37 @@ import globalMessages from '../../../i18n/globalMessages';
 const messages = defineMessages({
   availableServices: {
     id: 'settings.navigation.availableServices',
-    defaultMessage: '!!!Available services',
+    defaultMessage: 'Available services',
   },
   yourServices: {
     id: 'settings.navigation.yourServices',
-    defaultMessage: '!!!Your services',
+    defaultMessage: 'Your services',
   },
   yourWorkspaces: {
     id: 'settings.navigation.yourWorkspaces',
-    defaultMessage: '!!!Your workspaces',
+    defaultMessage: 'Your workspaces',
   },
   account: {
     id: 'settings.navigation.account',
-    defaultMessage: '!!!Account',
+    defaultMessage: 'Account',
   },
   team: {
     id: 'settings.navigation.team',
-    defaultMessage: '!!!Manage Team',
+    defaultMessage: 'Manage Team',
   },
   supportFerdi: {
     id: 'settings.navigation.supportFerdi',
-    defaultMessage: '!!!About Ferdi',
+    defaultMessage: 'About Ferdi',
   },
   logout: {
     id: 'settings.navigation.logout',
-    defaultMessage: '!!!Logout',
+    defaultMessage: 'Logout',
   },
 });
 
-export default @inject('stores', 'actions') @observer class SettingsNavigation extends Component {
+@inject('stores', 'actions')
+@observer
+class SettingsNavigation extends Component {
   static propTypes = {
     stores: PropTypes.shape({
       ui: PropTypes.instanceOf(UIStore).isRequired,
@@ -58,13 +60,10 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
     workspaceCount: PropTypes.number.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   handleLoginLogout() {
     const isLoggedIn = Boolean(localStorage.getItem('authToken'));
-    const isUsingWithoutAccount = this.props.stores.settings.app.server === LOCAL_SERVER;
+    const isUsingWithoutAccount =
+      this.props.stores.settings.app.server === LOCAL_SERVER;
 
     if (isLoggedIn) {
       // Remove current auth token
@@ -82,7 +81,9 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
       this.props.stores.user.isLoggingOut = true;
     }
 
-    this.props.stores.router.push(isLoggedIn ? '/auth/logout' : '/auth/welcome');
+    this.props.stores.router.push(
+      isLoggedIn ? '/auth/logout' : '/auth/welcome',
+    );
 
     if (isLoggedIn) {
       // Reload Ferdi, otherwise many settings won't sync correctly with the server
@@ -93,7 +94,7 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
 
   render() {
     const { serviceCount, workspaceCount, stores } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
     const isLoggedIn = Boolean(localStorage.getItem('authToken'));
     const isUsingWithoutAccount = stores.settings.app.server === LOCAL_SERVER;
     const isUsingFranzServer = stores.settings.app.server === LIVE_FRANZ_API;
@@ -113,11 +114,8 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
           activeClassName="is-active"
           disabled={!isLoggedIn}
         >
-          {intl.formatMessage(messages.yourServices)}
-          {' '}
-          <span className="badge">
-            {serviceCount}
-          </span>
+          {intl.formatMessage(messages.yourServices)}{' '}
+          <span className="badge">{serviceCount}</span>
         </Link>
         {workspaceStore.isFeatureEnabled ? (
           <Link
@@ -126,8 +124,7 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
             activeClassName="is-active"
             disabled={!isLoggedIn}
           >
-            {intl.formatMessage(messages.yourWorkspaces)}
-            {' '}
+            {intl.formatMessage(messages.yourWorkspaces)}{' '}
             <span className="badge">{workspaceCount}</span>
           </Link>
         ) : null}
@@ -172,9 +169,13 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
           className="settings-navigation__link"
           onClick={this.handleLoginLogout.bind(this)}
         >
-          { isLoggedIn && !isUsingWithoutAccount ? intl.formatMessage(messages.logout) : 'Login'}
+          {isLoggedIn && !isUsingWithoutAccount
+            ? intl.formatMessage(messages.logout)
+            : 'Login'}
         </button>
       </div>
     );
   }
 }
+
+export default injectIntl(SettingsNavigation);
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js
index 55f415bd5..ca188aa99 100644
--- a/src/components/settings/recipes/RecipeItem.js
+++ b/src/components/settings/recipes/RecipeItem.js
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
 
 import RecipePreviewModel from '../../../models/RecipePreview';
 
-export default @observer class RecipeItem extends Component {
+@observer
+class RecipeItem extends Component {
   static propTypes = {
     recipe: PropTypes.instanceOf(RecipePreviewModel).isRequired,
     onClick: PropTypes.func.isRequired,
@@ -14,19 +15,11 @@ export default @observer class RecipeItem extends Component {
     const { recipe, onClick } = this.props;
 
     return (
-      <button
-        type="button"
-        className="recipe-teaser"
-        onClick={onClick}
-      >
+      <button type="button" className="recipe-teaser" onClick={onClick}>
         {recipe.isDevRecipe && (
           <span className="recipe-teaser__dev-badge">dev</span>
         )}
-        <img
-          src={recipe.icons.svg}
-          className="recipe-teaser__icon"
-          alt=""
-        />
+        <img src={recipe.icons.svg} className="recipe-teaser__icon" alt="" />
         <span className="recipe-teaser__label">{recipe.name}</span>
         {recipe.aliases && recipe.aliases.length > 0 && (
           <span className="recipe-teaser__alias_label">
@@ -37,3 +30,5 @@ export default @observer class RecipeItem extends Component {
     );
   }
 }
+
+export default RecipeItem;
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 44ff2d0d7..44f5bc39a 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router';
 
 import { Button, Input } from '@meetfranz/forms';
@@ -18,55 +18,56 @@ import RecipePreview from '../../../models/RecipePreview';
 const messages = defineMessages({
   headline: {
     id: 'settings.recipes.headline',
-    defaultMessage: '!!!Available Services',
+    defaultMessage: 'Available services',
   },
   searchService: {
     id: 'settings.searchService',
-    defaultMessage: '!!!Search service',
+    defaultMessage: 'Search service',
   },
   allRecipes: {
     id: 'settings.recipes.all',
-    defaultMessage: '!!!All services',
+    defaultMessage: 'All services',
   },
   customRecipes: {
     id: 'settings.recipes.custom',
-    defaultMessage: '!!!Custom Services',
+    defaultMessage: 'Custom Services',
   },
   nothingFound: {
     id: 'settings.recipes.nothingFound',
-    defaultMessage: '!!!Sorry, but no service matched your search term - but you can still probably add it using the "Custom Website" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.',
+    defaultMessage:
+      'Sorry, but no service matched your search term - but you can still probably add it using the "Custom Website" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.',
   },
   servicesSuccessfulAddedInfo: {
     id: 'settings.recipes.servicesSuccessfulAddedInfo',
-    defaultMessage: '!!!Service successfully added',
+    defaultMessage: 'Service successfully added',
   },
   missingService: {
     id: 'settings.recipes.missingService',
-    defaultMessage: '!!!Missing a service?',
+    defaultMessage: 'Missing a service?',
   },
   customRecipeIntro: {
     id: 'settings.recipes.customService.intro',
-    defaultMessage: '!!!To add a custom service, copy the recipe folder into:',
+    defaultMessage: 'To add a custom service, copy the service recipe to:',
   },
   openFolder: {
     id: 'settings.recipes.customService.openFolder',
-    defaultMessage: '!!!Open directory',
+    defaultMessage: 'Open folder',
   },
   openDevDocs: {
     id: 'settings.recipes.customService.openDevDocs',
-    defaultMessage: '!!!Developer Documentation',
+    defaultMessage: 'Developer Documentation',
   },
   headlineCustomRecipes: {
     id: 'settings.recipes.customService.headline.customRecipes',
-    defaultMessage: '!!!Custom 3rd Party Recipes',
+    defaultMessage: 'Custom 3rd Party Recipes',
   },
   headlineCommunityRecipes: {
     id: 'settings.recipes.customService.headline.communityRecipes',
-    defaultMessage: '!!!Community 3rd Party Recipes',
+    defaultMessage: 'Community 3rd Party Recipes',
   },
   headlineDevRecipes: {
     id: 'settings.recipes.customService.headline.devRecipes',
-    defaultMessage: '!!!Your Development Service Recipes',
+    defaultMessage: 'Your Development Service Recipes',
   },
 });
 
@@ -81,7 +82,8 @@ const styles = {
     marginTop: 20,
 
     '& > div': {
-      fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
+      fontFamily:
+        'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
     },
   },
   actionContainer: {
@@ -98,7 +100,9 @@ const styles = {
   },
 };
 
-export default @injectSheet(styles) @observer class RecipesDashboard extends Component {
+@injectSheet(styles)
+@observer
+class RecipesDashboard extends Component {
   static propTypes = {
     recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
     customWebsiteRecipe: PropTypes.instanceOf(RecipePreview).isRequired,
@@ -118,10 +122,6 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
   static defaultProps = {
     searchNeedle: '',
     recipeFilter: 'all',
-  }
-
-  static contextTypes = {
-    intl: intlShape,
   };
 
   render() {
@@ -140,7 +140,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
       openDevDocs,
       classes,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     const communityRecipes = recipes.filter(r => !r.isDevRecipe);
     const devRecipes = recipes.filter(r => r.isDevRecipe);
@@ -188,9 +188,13 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
             >
               {intl.formatMessage(messages.customRecipes)}
             </Link>
-            <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request" rel="noreferrer">
-              {intl.formatMessage(messages.missingService)}
-              {' '}
+            <a
+              href={FRANZ_SERVICE_REQUEST}
+              target="_blank"
+              className="link recipes__service-request"
+              rel="noreferrer"
+            >
+              {intl.formatMessage(messages.missingService)}{' '}
               <i className="mdi mdi-open-in-new" />
             </a>
           </div>
@@ -201,13 +205,9 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
             <>
               {recipeFilter === 'dev' && (
                 <>
-                  <H2>
-                    {intl.formatMessage(messages.headlineCustomRecipes)}
-                  </H2>
+                  <H2>{intl.formatMessage(messages.headlineCustomRecipes)}</H2>
                   <div className={classes.devRecipeIntroContainer}>
-                    <p>
-                      {intl.formatMessage(messages.customRecipeIntro)}
-                    </p>
+                    <p>{intl.formatMessage(messages.customRecipeIntro)}</p>
                     <Input
                       value={recipeDirectory}
                       className={classes.path}
@@ -238,12 +238,19 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                       <img src="./assets/images/emoji/dontknow.png" alt="" />
                     </span>
 
-                    <p className="settings__empty-state-text">{intl.formatMessage(messages.nothingFound)}</p>
+                    <p className="settings__empty-state-text">
+                      {intl.formatMessage(messages.nothingFound)}
+                    </p>
 
                     <RecipeItem
                       key={customWebsiteRecipe.id}
                       recipe={customWebsiteRecipe}
-                      onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: customWebsiteRecipe.id })}
+                      onClick={() =>
+                        isLoggedIn &&
+                        showAddServiceInterface({
+                          recipeId: customWebsiteRecipe.id,
+                        })
+                      }
                     />
                   </div>
                 )}
@@ -251,7 +258,10 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                   <RecipeItem
                     key={recipe.id}
                     recipe={recipe}
-                    onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: recipe.id })}
+                    onClick={() =>
+                      isLoggedIn &&
+                      showAddServiceInterface({ recipeId: recipe.id })
+                    }
                   />
                 ))}
               </div>
@@ -263,7 +273,10 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                       <RecipeItem
                         key={recipe.id}
                         recipe={recipe}
-                        onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: recipe.id })}
+                        onClick={() =>
+                          isLoggedIn &&
+                          showAddServiceInterface({ recipeId: recipe.id })
+                        }
                       />
                     ))}
                   </div>
@@ -276,3 +289,5 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
     );
   }
 }
+
+export default injectIntl(RecipesDashboard);
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index c41cdd56a..22089ec45 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -2,13 +2,14 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import normalizeUrl from 'normalize-url';
 
 import Form from '../../../lib/Form';
 import Recipe from '../../../models/Recipe';
 import Service from '../../../models/Service';
-import Tabs, { TabItem } from '../../ui/Tabs';
+import Tabs from '../../ui/Tabs/Tabs';
+import { TabItem } from '../../ui/Tabs/TabItem';
 import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
 import Slider from '../../ui/Slider';
@@ -22,111 +23,117 @@ import globalMessages from '../../../i18n/globalMessages';
 const messages = defineMessages({
   saveService: {
     id: 'settings.service.form.saveButton',
-    defaultMessage: '!!!Save service',
+    defaultMessage: 'Save service',
   },
   deleteService: {
     id: 'settings.service.form.deleteButton',
-    defaultMessage: '!!!Delete Service',
+    defaultMessage: 'Delete service',
   },
   openDarkmodeCss: {
     id: 'settings.service.form.openDarkmodeCss',
-    defaultMessage: '!!!Open darkmode.css',
+    defaultMessage: 'Open darkmode.css',
   },
   openUserCss: {
     id: 'settings.service.form.openUserCss',
-    defaultMessage: '!!!Open user.css',
+    defaultMessage: 'Open user.css',
   },
   openUserJs: {
     id: 'settings.service.form.openUserJs',
-    defaultMessage: '!!!Open user.js',
+    defaultMessage: 'Open user.js',
   },
   recipeFileInfo: {
     id: 'settings.service.form.recipeFileInfo',
-    defaultMessage: '!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.',
+    defaultMessage:
+      'Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.',
   },
   availableServices: {
     id: 'settings.service.form.availableServices',
-    defaultMessage: '!!!Available services',
+    defaultMessage: 'Available services',
   },
   yourServices: {
     id: 'settings.service.form.yourServices',
-    defaultMessage: '!!!Your services',
+    defaultMessage: 'Your services',
   },
   addServiceHeadline: {
     id: 'settings.service.form.addServiceHeadline',
-    defaultMessage: '!!!Add {name}',
+    defaultMessage: 'Add {name}',
   },
   editServiceHeadline: {
     id: 'settings.service.form.editServiceHeadline',
-    defaultMessage: '!!!Edit {name}',
+    defaultMessage: 'Edit {name}',
   },
   tabHosted: {
     id: 'settings.service.form.tabHosted',
-    defaultMessage: '!!!Hosted',
+    defaultMessage: 'Hosted',
   },
   tabOnPremise: {
     id: 'settings.service.form.tabOnPremise',
-    defaultMessage: '!!!Self hosted ⭐️',
+    defaultMessage: 'Self hosted ⭐️',
   },
   useHostedService: {
     id: 'settings.service.form.useHostedService',
-    defaultMessage: '!!!Use the hosted {name} service.',
+    defaultMessage: 'Use the hosted {name} service.',
   },
   customUrlValidationError: {
     id: 'settings.service.form.customUrlValidationError',
-    defaultMessage: '!!!Could not validate custom {name} server.',
+    defaultMessage: 'Could not validate custom {name} server.',
   },
   indirectMessageInfo: {
     id: 'settings.service.form.indirectMessageInfo',
-    defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...',
+    defaultMessage:
+      'You will be notified about all new messages in a channel, not just @username, @channel, @here, ...',
   },
   isMutedInfo: {
     id: 'settings.service.form.isMutedInfo',
-    defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
+    defaultMessage:
+      'When disabled, all notification sounds and audio playback are muted',
   },
   isHibernationEnabledInfo: {
     id: 'settings.service.form.isHibernatedEnabledInfo',
-    defaultMessage: '!!!When enabled, a service will be shut down after a period of time to save system resources.',
+    defaultMessage:
+      'When enabled, a service will be shut down after a period of time to save system resources.',
   },
   headlineNotifications: {
     id: 'settings.service.form.headlineNotifications',
-    defaultMessage: '!!!Notifications',
+    defaultMessage: 'Notifications',
   },
   headlineBadges: {
     id: 'settings.service.form.headlineBadges',
-    defaultMessage: '!!!Unread message badges',
+    defaultMessage: 'Unread message badges',
   },
   headlineGeneral: {
     id: 'settings.service.form.headlineGeneral',
-    defaultMessage: '!!!General',
+    defaultMessage: 'General',
   },
   headlineDarkReaderSettings: {
     id: 'settings.service.form.headlineDarkReaderSettings',
-    defaultMessage: '!!!Dark Reader Settings',
+    defaultMessage: 'Dark Reader Settings',
   },
   iconDelete: {
     id: 'settings.service.form.iconDelete',
-    defaultMessage: '!!!Delete',
+    defaultMessage: 'Delete',
   },
   iconUpload: {
     id: 'settings.service.form.iconUpload',
-    defaultMessage: '!!!Drop your image, or click here',
+    defaultMessage: 'Drop your image, or click here',
   },
   headlineProxy: {
     id: 'settings.service.form.proxy.headline',
-    defaultMessage: '!!!HTTP/HTTPS Proxy Settings',
+    defaultMessage: 'HTTP/HTTPS Proxy Settings',
   },
   proxyRestartInfo: {
     id: 'settings.service.form.proxy.restartInfo',
-    defaultMessage: '!!!Please restart Ferdi after changing proxy Settings.',
+    defaultMessage: 'Please restart Ferdi after changing proxy Settings.',
   },
   proxyInfo: {
     id: 'settings.service.form.proxy.info',
-    defaultMessage: '!!!Proxy settings will not be synchronized with the Ferdi servers.',
+    defaultMessage:
+      'Proxy settings will not be synchronized with the Ferdi servers.',
   },
 });
 
-export default @observer class EditServiceForm extends Component {
+@observer
+class EditServiceForm extends Component {
   static propTypes = {
     recipe: PropTypes.instanceOf(Recipe).isRequired,
     service(props, propName) {
@@ -151,20 +158,16 @@ export default @observer class EditServiceForm extends Component {
     service: {},
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     isValidatingCustomUrl: false,
-  }
+  };
 
   submit(e) {
     const { recipe } = this.props;
 
     e.preventDefault();
     this.props.form.submit({
-      onSuccess: async (form) => {
+      onSuccess: async form => {
         const values = form.values();
         let isValid = true;
 
@@ -176,10 +179,13 @@ export default @observer class EditServiceForm extends Component {
         if (recipe.validateUrl && values.customUrl) {
           this.setState({ isValidatingCustomUrl: true });
           try {
-            values.customUrl = normalizeUrl(values.customUrl, { stripWWW: false, removeTrailingSlash: false });
+            values.customUrl = normalizeUrl(values.customUrl, {
+              stripWWW: false,
+              removeTrailingSlash: false,
+            });
             isValid = await recipe.validateUrl(values.customUrl);
-          } catch (err) {
-            console.warn('ValidateURL', err);
+          } catch (error) {
+            console.warn('ValidateURL', error);
             isValid = false;
           }
         }
@@ -208,7 +214,7 @@ export default @observer class EditServiceForm extends Component {
       openRecipeFile,
       isProxyFeatureEnabled,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     const { isValidatingCustomUrl } = this.state;
 
@@ -236,7 +242,8 @@ export default @observer class EditServiceForm extends Component {
       activeTabIndex = 2;
     }
 
-    const requiresUserInput = !recipe.hasHostedOption && (recipe.hasTeamId || recipe.hasCustomUrl);
+    const requiresUserInput =
+      !recipe.hasHostedOption && (recipe.hasTeamId || recipe.hasCustomUrl);
 
     return (
       <div className="settings__main">
@@ -254,29 +261,27 @@ export default @observer class EditServiceForm extends Component {
           </span>
           <span className="separator" />
           <span className="settings__header-item">
-            {action === 'add' ? (
-              intl.formatMessage(messages.addServiceHeadline, {
-                name: recipe.name,
-              })
-            ) : (
-              intl.formatMessage(messages.editServiceHeadline, {
-                name: service.name !== '' ? service.name : recipe.name,
-              })
-            )}
+            {action === 'add'
+              ? intl.formatMessage(messages.addServiceHeadline, {
+                  name: recipe.name,
+                })
+              : intl.formatMessage(messages.editServiceHeadline, {
+                  name: service.name !== '' ? service.name : recipe.name,
+                })}
           </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>
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
-              <Tabs
-                active={activeTabIndex}
-              >
+              <Tabs active={activeTabIndex}>
                 {recipe.hasHostedOption && (
                   <TabItem title={recipe.name}>
-                    {intl.formatMessage(messages.useHostedService, { name: recipe.name })}
+                    {intl.formatMessage(messages.useHostedService, {
+                      name: recipe.name,
+                    })}
                   </TabItem>
                 )}
                 {recipe.hasTeamId && (
@@ -293,7 +298,9 @@ export default @observer class EditServiceForm extends Component {
                     <Input field={form.$('customUrl')} />
                     {form.error === 'url-validation-error' && (
                       <p className="franz-form__error">
-                        {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })}
+                        {intl.formatMessage(messages.customUrlValidationError, {
+                          name: recipe.name,
+                        })}
                       </p>
                     )}
                   </TabItem>
@@ -326,13 +333,19 @@ export default @observer class EditServiceForm extends Component {
                 <div className="settings__settings-group">
                   <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
                   <Toggle field={form.$('isBadgeEnabled')} />
-                  {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
-                    <>
-                      <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
-                      <p className="settings__help indented__help">
-                        {intl.formatMessage(messages.indirectMessageInfo)}
-                      </p>
-                    </>
+                  {recipe.hasIndirectMessages &&
+                    form.$('isBadgeEnabled').value && (
+                      <>
+                        <Toggle
+                          field={form.$('isIndirectMessageBadgeEnabled')}
+                        />
+                        <p className="settings__help indented__help">
+                          {intl.formatMessage(messages.indirectMessageInfo)}
+                        </p>
+                      </>
+                    )}
+                  {recipe.allowFavoritesDelineationInUnreadCount && (
+                    <Toggle field={form.$('onlyShowFavoritesInUnreadCount')} />
                   )}
                 </div>
 
@@ -344,15 +357,18 @@ export default @observer class EditServiceForm extends Component {
                     {intl.formatMessage(messages.isHibernationEnabledInfo)}
                   </p>
                   <Toggle field={form.$('isDarkModeEnabled')} />
-                  {form.$('isDarkModeEnabled').value
-                    && (
-                      <>
-                        <h3>{intl.formatMessage(messages.headlineDarkReaderSettings)}</h3>
-                        <Slider field={form.$('darkReaderBrightness')} />
-                        <Slider field={form.$('darkReaderContrast')} />
-                        <Slider field={form.$('darkReaderSepia')} />
-                      </>
-                    )}
+                  {form.$('isDarkModeEnabled').value && (
+                    <>
+                      <h3>
+                        {intl.formatMessage(
+                          messages.headlineDarkReaderSettings,
+                        )}
+                      </h3>
+                      <Slider field={form.$('darkReaderBrightness')} />
+                      <Slider field={form.$('darkReaderContrast')} />
+                      <Slider field={form.$('darkReaderSepia')} />
+                    </>
+                  )}
                 </div>
               </div>
               <div className="service-icon">
@@ -381,7 +397,10 @@ export default @observer class EditServiceForm extends Component {
                   <>
                     <div className="grid">
                       <div className="grid__row">
-                        <Input field={form.$('proxy.host')} className="proxyHost" />
+                        <Input
+                          field={form.$('proxy.host')}
+                          className="proxyHost"
+                        />
                         <Input field={form.$('proxy.port')} />
                       </div>
                     </div>
@@ -409,7 +428,9 @@ export default @observer class EditServiceForm extends Component {
 
             <div className="user-agent">
               <Input field={form.$('userAgentPref')} />
-              <p className="settings__help">{intl.formatMessage(globalMessages.userAgentHelp)}</p>
+              <p className="settings__help">
+                {intl.formatMessage(globalMessages.userAgentHelp)}
+              </p>
             </div>
           </form>
 
@@ -464,7 +485,9 @@ export default @observer class EditServiceForm extends Component {
               type="submit"
               label={intl.formatMessage(messages.saveService)}
               htmlForm="form"
-              disabled={action !== 'edit' && (form.isPristine && requiresUserInput)}
+              disabled={
+                action !== 'edit' && form.isPristine && requiresUserInput
+              }
             />
           )}
         </div>
@@ -472,3 +495,5 @@ export default @observer class EditServiceForm extends Component {
     );
   }
 }
+
+export default injectIntl(EditServiceForm);
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index 3cfc080d6..d16d76db2 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Infobox from '../../ui/Infobox';
 import Button from '../../ui/Button';
@@ -9,29 +9,26 @@ import Button from '../../ui/Button';
 const messages = defineMessages({
   headline: {
     id: 'settings.service.error.headline',
-    defaultMessage: '!!!Error',
+    defaultMessage: 'Error',
   },
   goBack: {
     id: 'settings.service.error.goBack',
-    defaultMessage: '!!!Back to services',
+    defaultMessage: 'Back to services',
   },
   availableServices: {
     id: 'settings.service.form.availableServices',
-    defaultMessage: '!!!Available services',
+    defaultMessage: 'Available services',
   },
   errorMessage: {
     id: 'settings.service.error.message',
-    defaultMessage: '!!!Could not load service recipe.',
+    defaultMessage: 'Could not load service recipe.',
   },
 });
 
-export default @observer class ServiceError extends Component {
-  static contextTypes = {
-    intl: intlShape,
-  };
-
+@observer
+class ServiceError extends Component {
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="settings__main">
@@ -47,10 +44,7 @@ export default @observer class ServiceError extends Component {
           </span>
         </div>
         <div className="settings__body">
-          <Infobox
-            type="danger"
-            icon="alert"
-          >
+          <Infobox type="danger" icon="alert">
             {intl.formatMessage(messages.errorMessage)}
           </Infobox>
         </div>
@@ -65,3 +59,5 @@ export default @observer class ServiceError extends Component {
     );
   }
 }
+
+export default injectIntl(ServiceError);
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index ebc618a00..4916e4ecc 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
@@ -10,35 +10,32 @@ import ServiceModel from '../../../models/Service';
 const messages = defineMessages({
   tooltipIsDisabled: {
     id: 'settings.services.tooltip.isDisabled',
-    defaultMessage: '!!!Service is disabled',
+    defaultMessage: 'Service is disabled',
   },
   tooltipNotificationsDisabled: {
     id: 'settings.services.tooltip.notificationsDisabled',
-    defaultMessage: '!!!Notifications are disabled',
+    defaultMessage: 'Notifications are disabled',
   },
   tooltipIsMuted: {
     id: 'settings.services.tooltip.isMuted',
-    defaultMessage: '!!!All sounds are muted',
+    defaultMessage: 'All sounds are muted',
   },
 });
 
-export default @observer class ServiceItem extends Component {
+@observer
+class ServiceItem extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     goToServiceForm: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       service,
       // toggleAction,
       goToServiceForm,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <tr
@@ -47,10 +44,7 @@ export default @observer class ServiceItem extends Component {
           'service-table__row--disabled': !service.isEnabled,
         })}
       >
-        <td
-          className="service-table__column-icon"
-          onClick={goToServiceForm}
-        >
+        <td className="service-table__column-icon" onClick={goToServiceForm}>
           <img
             src={service.icon}
             className={classnames({
@@ -60,16 +54,10 @@ export default @observer class ServiceItem extends Component {
             alt=""
           />
         </td>
-        <td
-          className="service-table__column-name"
-          onClick={goToServiceForm}
-        >
+        <td className="service-table__column-name" onClick={goToServiceForm}>
           {service.name !== '' ? service.name : service.recipe.name}
         </td>
-        <td
-          className="service-table__column-info"
-          onClick={goToServiceForm}
-        >
+        <td className="service-table__column-info" onClick={goToServiceForm}>
           {service.isMuted && (
             <span
               className="mdi mdi-bell-off"
@@ -77,10 +65,7 @@ export default @observer class ServiceItem extends Component {
             />
           )}
         </td>
-        <td
-          className="service-table__column-info"
-          onClick={goToServiceForm}
-        >
+        <td className="service-table__column-info" onClick={goToServiceForm}>
           {!service.isEnabled && (
             <span
               className="mdi mdi-power"
@@ -88,14 +73,13 @@ export default @observer class ServiceItem extends Component {
             />
           )}
         </td>
-        <td
-          className="service-table__column-info"
-          onClick={goToServiceForm}
-        >
+        <td className="service-table__column-info" onClick={goToServiceForm}>
           {!service.isNotificationEnabled && (
             <span
               className="mdi mdi-message-bulleted-off"
-              data-tip={intl.formatMessage(messages.tooltipNotificationsDisabled)}
+              data-tip={intl.formatMessage(
+                messages.tooltipNotificationsDisabled,
+              )}
             />
           )}
           <ReactTooltip place="top" type="dark" effect="solid" />
@@ -104,3 +88,5 @@ export default @observer class ServiceItem extends Component {
     );
   }
 }
+
+export default injectIntl(ServiceItem);
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index 11d3eaa79..bb52db97f 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
@@ -14,43 +14,45 @@ import Appear from '../../ui/effects/Appear';
 const messages = defineMessages({
   headline: {
     id: 'settings.services.headline',
-    defaultMessage: '!!!Your services',
+    defaultMessage: 'Your services',
   },
   searchService: {
     id: 'settings.searchService',
-    defaultMessage: '!!!Search service',
+    defaultMessage: 'Search service',
   },
   noServicesAdded: {
     id: 'settings.services.noServicesAdded',
-    defaultMessage: '!!!Start by adding a service.',
+    defaultMessage: 'Start by adding a service.',
   },
   noServiceFound: {
-    id: 'settings.recipes.nothingFound',
-    defaultMessage: '!!!Sorry, but no service matched your search term. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.',
+    id: 'settings.services.nothingFound',
+    defaultMessage:
+      'Sorry, but no service matched your search term - but you can still probably add it using the "Custom Website" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.',
   },
   discoverServices: {
     id: 'settings.services.discoverServices',
-    defaultMessage: '!!!Discover services',
+    defaultMessage: 'Discover services',
   },
   servicesRequestFailed: {
     id: 'settings.services.servicesRequestFailed',
-    defaultMessage: '!!!Could not load your services',
+    defaultMessage: 'Could not load your services',
   },
   tryReloadServices: {
     id: 'settings.account.tryReloadServices',
-    defaultMessage: '!!!Try again',
+    defaultMessage: 'Try again',
   },
   updatedInfo: {
     id: 'settings.services.updatedInfo',
-    defaultMessage: '!!!Your changes have been saved',
+    defaultMessage: 'Your changes have been saved',
   },
   deletedInfo: {
     id: 'settings.services.deletedInfo',
-    defaultMessage: '!!!Service has been deleted',
+    defaultMessage: 'Service has been deleted',
   },
 });
 
-export default @observer class ServicesDashboard extends Component {
+@observer
+class ServicesDashboard extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
     isLoading: PropTypes.bool.isRequired,
@@ -68,10 +70,6 @@ export default @observer class ServicesDashboard extends Component {
     searchNeedle: '',
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       services,
@@ -85,7 +83,7 @@ export default @observer class ServicesDashboard extends Component {
       status,
       searchNeedle,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="settings__main">
@@ -93,10 +91,10 @@ export default @observer class ServicesDashboard extends Component {
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body">
-          {(services.length !== 0 || searchNeedle) && !isLoading && (
+          {(services.length > 0 || searchNeedle) && !isLoading && (
             <SearchInput
               placeholder={intl.formatMessage(messages.searchService)}
-              onChange={(needle) => filterServices({ needle })}
+              onChange={needle => filterServices({ needle })}
               onReset={() => resetFilter()}
               autoFocus
             />
@@ -145,7 +143,9 @@ export default @observer class ServicesDashboard extends Component {
                 </span>
                 {intl.formatMessage(messages.noServicesAdded)}
               </p>
-              <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link>
+              <Link to="/settings/recipes" className="button">
+                {intl.formatMessage(messages.discoverServices)}
+              </Link>
             </div>
           )}
           {!isLoading && services.length === 0 && searchNeedle && (
@@ -163,12 +163,16 @@ export default @observer class ServicesDashboard extends Component {
           ) : (
             <table className="service-table">
               <tbody>
-                {services.map((service) => (
+                {services.map(service => (
                   <ServiceItem
                     key={service.id}
                     service={service}
-                    toggleAction={() => toggleService({ serviceId: service.id })}
-                    goToServiceForm={() => goTo(`/settings/services/edit/${service.id}`)}
+                    toggleAction={() =>
+                      toggleService({ serviceId: service.id })
+                    }
+                    goToServiceForm={() =>
+                      goTo(`/settings/services/edit/${service.id}`)
+                    }
                   />
                 ))}
               </tbody>
@@ -176,12 +180,12 @@ export default @observer class ServicesDashboard extends Component {
           )}
 
           <FAB>
-            <Link to="/settings/recipes">
-              +
-            </Link>
+            <Link to="/settings/recipes">+</Link>
           </FAB>
         </div>
       </div>
     );
   }
 }
+
+export default injectIntl(ServicesDashboard);
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 6a919b902..123ab4c2d 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import prettyBytes from 'pretty-bytes';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Form from '../../../lib/Form';
 import Button from '../../ui/Button';
@@ -12,155 +12,172 @@ import ToggleRaw from '../../ui/ToggleRaw';
 import Select from '../../ui/Select';
 import Input from '../../ui/Input';
 
-import { FRANZ_TRANSLATION, GITHUB_FRANZ_URL } from '../../../config';
-import { DEFAULT_APP_SETTINGS, ferdiVersion, isMac, isWindows, lockFerdiShortcutKey, userDataPath, userDataRecipesPath } from '../../../environment';
+import { DEFAULT_APP_SETTINGS, FRANZ_TRANSLATION, GITHUB_FRANZ_URL } from '../../../config';
+import {
+  isMac,
+  isWindows,
+  lockFerdiShortcutKey,
+} from '../../../environment';
+import { ferdiVersion, userDataPath, userDataRecipesPath } from '../../../environment-remote';
 import { openPath } from '../../../helpers/url-helpers';
 import globalMessages from '../../../i18n/globalMessages';
 
+const debug = require('debug')('Ferdi:EditSettingsForm');
+
 const messages = defineMessages({
   headlineGeneral: {
     id: 'settings.app.headlineGeneral',
-    defaultMessage: '!!!General',
+    defaultMessage: 'General',
   },
   sentryInfo: {
     id: 'settings.app.sentryInfo',
-    defaultMessage: '!!!Sending telemetry data allows us to find errors in Ferdi - we will not send any personal information like your message data!',
+    defaultMessage:
+      'Sending telemetry data allows us to find errors in Ferdi - we will not send any personal information like your message data!',
   },
   hibernateInfo: {
     id: 'settings.app.hibernateInfo',
-    defaultMessage: '!!!By default, Ferdi will keep all your services open and loaded in the background so they are ready when you want to use them. Service Hibernation will unload your services after a specified amount. This is useful to save RAM or keeping services from slowing down your computer.',
+    defaultMessage:
+      'By default, Ferdi will keep all your services open and loaded in the background so they are ready when you want to use them. Service Hibernation will unload your services after a specified amount. This is useful to save RAM or keeping services from slowing down your computer.',
   },
   inactivityLockInfo: {
     id: 'settings.app.inactivityLockInfo',
-    defaultMessage: '!!!Minutes of inactivity, after which Ferdi should automatically lock. Use 0 to disable',
+    defaultMessage:
+      'Minutes of inactivity, after which Ferdi should automatically lock. Use 0 to disable',
   },
   todoServerInfo: {
     id: 'settings.app.todoServerInfo',
-    defaultMessage: '!!!This server will be used for the "Franz Todo" feature. (default: https://app.franztodos.com)',
+    defaultMessage: 'This server will be used for the "Ferdi Todo" feature.',
   },
   lockedPassword: {
     id: 'settings.app.lockedPassword',
-    defaultMessage: '!!!Password',
+    defaultMessage: 'Password',
   },
   lockedPasswordInfo: {
     id: 'settings.app.lockedPasswordInfo',
-    defaultMessage: '!!!Please make sure to set a password you\'ll remember.\nIf you loose this password, you will have to reinstall Ferdi.',
+    defaultMessage:
+      "Please make sure to set a password you'll remember.\nIf you loose this password, you will have to reinstall Ferdi.",
   },
   lockInfo: {
     id: 'settings.app.lockInfo',
-    defaultMessage: '!!!Password Lock allows you to keep your messages protected.\nUsing Password Lock, you will be prompted to enter your password everytime you start Ferdi or lock Ferdi yourself using the lock symbol in the bottom left corner or the shortcut {lockShortcut}.',
+    defaultMessage:
+      'Password Lock allows you to keep your messages protected.\nUsing Password Lock, you will be prompted to enter your password everytime you start Ferdi or lock Ferdi yourself using the lock symbol in the bottom left corner or the shortcut {lockShortcut}.',
   },
   scheduledDNDTimeInfo: {
     id: 'settings.app.scheduledDNDTimeInfo',
-    defaultMessage: '!!!Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.',
+    defaultMessage:
+      'Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.',
   },
   scheduledDNDInfo: {
     id: 'settings.app.scheduledDNDInfo',
-    defaultMessage: '!!!Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdi.',
+    defaultMessage:
+      'Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdi.',
   },
   headlineLanguage: {
     id: 'settings.app.headlineLanguage',
-    defaultMessage: '!!!Language',
+    defaultMessage: 'Language',
   },
   headlineUpdates: {
     id: 'settings.app.headlineUpdates',
-    defaultMessage: '!!!Updates',
+    defaultMessage: 'Updates',
   },
   headlineAppearance: {
     id: 'settings.app.headlineAppearance',
-    defaultMessage: '!!!Appearance',
+    defaultMessage: 'Appearance',
   },
   universalDarkModeInfo: {
     id: 'settings.app.universalDarkModeInfo',
-    defaultMessage: '!!!Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.',
+    defaultMessage:
+      'Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.',
   },
   accentColorInfo: {
     id: 'settings.app.accentColorInfo',
-    defaultMessage: '!!!Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})',
+    defaultMessage:
+      'Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})',
   },
   headlinePrivacy: {
     id: 'settings.app.headlinePrivacy',
-    defaultMessage: '!!!Privacy',
+    defaultMessage: 'Privacy',
   },
   headlineAdvanced: {
     id: 'settings.app.headlineAdvanced',
-    defaultMessage: '!!!Advanced',
+    defaultMessage: 'Advanced',
   },
   translationHelp: {
     id: 'settings.app.translationHelp',
-    defaultMessage: '!!!Help us to translate Ferdi into your language.',
+    defaultMessage: 'Help us to translate Ferdi into your language.',
   },
   spellCheckerLanguageInfo: {
     id: 'settings.app.spellCheckerLanguageInfo',
-    defaultMessage: '!!!Ferdi uses your Mac\'s build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac\'s System Preferences.',
+    defaultMessage:
+      "Ferdi uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.",
   },
   subheadlineCache: {
     id: 'settings.app.subheadlineCache',
-    defaultMessage: '!!!Cache',
+    defaultMessage: 'Cache',
   },
   cacheInfo: {
     id: 'settings.app.cacheInfo',
-    defaultMessage: '!!!Ferdi cache is currently using {size} of disk space.',
+    defaultMessage: 'Ferdi cache is currently using {size} of disk space.',
   },
   cacheNotCleared: {
     id: 'settings.app.cacheNotCleared',
-    defaultMessage: '!!!Couldn\'t clear all cache',
+    defaultMessage: "Couldn't clear all cache",
   },
   buttonClearAllCache: {
     id: 'settings.app.buttonClearAllCache',
-    defaultMessage: '!!!Clear cache',
+    defaultMessage: 'Clear cache',
   },
   subheadlineFerdiProfile: {
     id: 'settings.app.subheadlineFerdiProfile',
-    defaultMessage: '!!!Ferdi Profile',
+    defaultMessage: 'Ferdi Profile',
   },
   buttonOpenFerdiProfileFolder: {
     id: 'settings.app.buttonOpenFerdiProfileFolder',
-    defaultMessage: '!!!Open Profile folder',
+    defaultMessage: 'Open Profile folder',
   },
   buttonOpenFerdiServiceRecipesFolder: {
     id: 'settings.app.buttonOpenFerdiServiceRecipesFolder',
-    defaultMessage: '!!!Open Service Recipes folder',
+    defaultMessage: 'Open Service Recipes folder',
   },
   buttonSearchForUpdate: {
     id: 'settings.app.buttonSearchForUpdate',
-    defaultMessage: '!!!Check for updates',
+    defaultMessage: 'Check for updates',
   },
   buttonInstallUpdate: {
     id: 'settings.app.buttonInstallUpdate',
-    defaultMessage: '!!!Restart & install update',
+    defaultMessage: 'Restart & install update',
   },
   updateStatusSearching: {
     id: 'settings.app.updateStatusSearching',
-    defaultMessage: '!!!Is searching for update',
+    defaultMessage: 'Is searching for update',
   },
   updateStatusAvailable: {
     id: 'settings.app.updateStatusAvailable',
-    defaultMessage: '!!!Update available, downloading...',
+    defaultMessage: 'Update available, downloading...',
   },
   updateStatusUpToDate: {
     id: 'settings.app.updateStatusUpToDate',
-    defaultMessage: '!!!You are using the latest version of Ferdi',
+    defaultMessage: 'You are using the latest version of Ferdi',
   },
   currentVersion: {
     id: 'settings.app.currentVersion',
-    defaultMessage: '!!!Current version:',
+    defaultMessage: 'Current version:',
   },
   appRestartRequired: {
     id: 'settings.app.restartRequired',
-    defaultMessage: '!!!Changes require restart',
+    defaultMessage: 'Changes require restart',
   },
   languageDisclaimer: {
     id: 'settings.app.languageDisclaimer',
-    defaultMessage: '!!!Official translations are English & German. All other languages are community based translations.',
+    defaultMessage:
+      'Official translations are English & German. All other languages are community based translations.',
   },
 });
 
-const Hr = () => (
-  <hr style={{ marginBottom: 20 }} />
-);
+const Hr = () => <hr style={{ marginBottom: 20 }} />;
 
-export default @observer class EditSettingsForm extends Component {
+@observer
+class EditSettingsForm extends Component {
   static propTypes = {
     checkForUpdates: PropTypes.func.isRequired,
     installUpdate: PropTypes.func.isRequired,
@@ -184,14 +201,10 @@ export default @observer class EditSettingsForm extends Component {
     isOnline: PropTypes.bool.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     activeSetttingsTab: 'general',
     clearCacheButtonClicked: false,
-  }
+  };
 
   setActiveSettingsTab(tab) {
     this.setState({
@@ -199,14 +212,14 @@ export default @observer class EditSettingsForm extends Component {
     });
   }
 
-  onClearCacheClicked=() => {
+  onClearCacheClicked = () => {
     this.setState({ clearCacheButtonClicked: true });
-  }
+  };
 
   submit(e) {
     e.preventDefault();
     this.props.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         const values = form.values();
         this.props.onSubmit(values);
       },
@@ -236,7 +249,7 @@ export default @observer class EditSettingsForm extends Component {
       hasAddedTodosAsService,
       isOnline,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     let updateButtonLabelMessage = messages.buttonSearchForUpdate;
     if (isCheckingForUpdates) {
@@ -247,18 +260,21 @@ export default @observer class EditSettingsForm extends Component {
       updateButtonLabelMessage = messages.buttonSearchForUpdate;
     }
 
-    const {
-      lockingFeatureEnabled,
-      scheduledDNDEnabled,
-    } = window.ferdi.stores.settings.all.app;
+    const { lockingFeatureEnabled, scheduledDNDEnabled } =
+      window.ferdi.stores.settings.all.app;
 
     let cacheSize;
     let notCleared;
     if (this.state.activeSetttingsTab === 'advanced') {
       const cacheSizeBytes = getCacheSize();
+      debug('cacheSizeBytes:', cacheSizeBytes);
       if (typeof cacheSizeBytes === 'number') {
         cacheSize = prettyBytes(cacheSizeBytes);
-        notCleared = this.state.clearCacheButtonClicked && isClearingAllCache === false && cacheSizeBytes !== 0;
+        debug('cacheSize:', cacheSize);
+        notCleared =
+          this.state.clearCacheButtonClicked &&
+          isClearingAllCache === false &&
+          cacheSizeBytes !== 0;
       } else {
         cacheSize = '…';
         notCleared = false;
@@ -275,58 +291,94 @@ 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 */}
             <div className="recipes__navigation">
               <h2
                 id="general"
-                className={this.state.activeSetttingsTab === 'general' ? 'badge badge--primary' : 'badge'}
-                onClick={() => { this.setActiveSettingsTab('general'); }}
+                className={
+                  this.state.activeSetttingsTab === 'general'
+                    ? 'badge badge--primary'
+                    : 'badge'
+                }
+                onClick={() => {
+                  this.setActiveSettingsTab('general');
+                }}
               >
                 {intl.formatMessage(messages.headlineGeneral)}
               </h2>
               <h2
                 id="appearance"
-                className={this.state.activeSetttingsTab === 'appearance' ? 'badge badge--primary' : 'badge'}
-                onClick={() => { this.setActiveSettingsTab('appearance'); }}
+                className={
+                  this.state.activeSetttingsTab === 'appearance'
+                    ? 'badge badge--primary'
+                    : 'badge'
+                }
+                onClick={() => {
+                  this.setActiveSettingsTab('appearance');
+                }}
               >
                 {intl.formatMessage(messages.headlineAppearance)}
               </h2>
               <h2
                 id="privacy"
-                className={this.state.activeSetttingsTab === 'privacy' ? 'badge badge--primary' : 'badge'}
-                onClick={() => { this.setActiveSettingsTab('privacy'); }}
+                className={
+                  this.state.activeSetttingsTab === 'privacy'
+                    ? 'badge badge--primary'
+                    : 'badge'
+                }
+                onClick={() => {
+                  this.setActiveSettingsTab('privacy');
+                }}
               >
                 {intl.formatMessage(messages.headlinePrivacy)}
               </h2>
               <h2
                 id="language"
-                className={this.state.activeSetttingsTab === 'language' ? 'badge badge--primary' : 'badge'}
-                onClick={() => { this.setActiveSettingsTab('language'); }}
+                className={
+                  this.state.activeSetttingsTab === 'language'
+                    ? 'badge badge--primary'
+                    : 'badge'
+                }
+                onClick={() => {
+                  this.setActiveSettingsTab('language');
+                }}
               >
                 {intl.formatMessage(messages.headlineLanguage)}
               </h2>
               <h2
                 id="advanced"
-                className={this.state.activeSetttingsTab === 'advanced' ? 'badge badge--primary' : 'badge'}
-                onClick={() => { this.setActiveSettingsTab('advanced'); }}
+                className={
+                  this.state.activeSetttingsTab === 'advanced'
+                    ? 'badge badge--primary'
+                    : 'badge'
+                }
+                onClick={() => {
+                  this.setActiveSettingsTab('advanced');
+                }}
               >
                 {intl.formatMessage(messages.headlineAdvanced)}
               </h2>
               <h2
                 id="updates"
-                className={this.state.activeSetttingsTab === 'updates' ? 'badge badge--primary' : 'badge'}
-                onClick={() => { this.setActiveSettingsTab('updates'); }}
+                className={
+                  this.state.activeSetttingsTab === 'updates'
+                    ? 'badge badge--primary'
+                    : 'badge'
+                }
+                onClick={() => {
+                  this.setActiveSettingsTab('updates');
+                }}
               >
                 {intl.formatMessage(messages.headlineUpdates)}
               </h2>
             </div>
 
             {/* General */}
-            { this.state.activeSetttingsTab === 'general' && (
+            {this.state.activeSetttingsTab === 'general' && (
               <div>
                 <Toggle field={form.$('autoLaunchOnStart')} />
                 <Toggle field={form.$('runInBackground')} />
@@ -334,12 +386,8 @@ export default @observer class EditSettingsForm extends Component {
                 <Toggle field={form.$('enableSystemTray')} />
                 <Toggle field={form.$('reloadAfterResume')} />
                 <Toggle field={form.$('startMinimized')} />
-                {isWindows && (
-                  <Toggle field={form.$('minimizeToSystemTray')} />
-                )}
-                {isWindows && (
-                  <Toggle field={form.$('closeToSystemTray')} />
-                )}
+                {isWindows && <Toggle field={form.$('minimizeToSystemTray')} />}
+                {isWindows && <Toggle field={form.$('closeToSystemTray')} />}
                 <Select field={form.$('navigationBarBehaviour')} />
 
                 <Hr />
@@ -349,12 +397,13 @@ export default @observer class EditSettingsForm extends Component {
                 <p
                   className="settings__message"
                   style={{
-                    borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                    borderTop: 0,
+                    marginTop: 0,
+                    paddingTop: 0,
+                    marginBottom: '2rem',
                   }}
                 >
-                  <span>
-                    { intl.formatMessage(messages.hibernateInfo) }
-                  </span>
+                  <span>{intl.formatMessage(messages.hibernateInfo)}</span>
                 </p>
 
                 <Select field={form.$('wakeUpStrategy')} />
@@ -374,20 +423,24 @@ export default @observer class EditSettingsForm extends Component {
                     {isTodosActivated && (
                       <div>
                         <Select field={form.$('predefinedTodoServer')} />
-                        {form.$('predefinedTodoServer').value === 'isUsingCustomTodoService' && (
+                        {form.$('predefinedTodoServer').value ===
+                          'isUsingCustomTodoService' && (
                           <div>
                             <Input
                               placeholder="Todo Server"
-                              onChange={(e) => this.submit(e)}
+                              onChange={e => this.submit(e)}
                               field={form.$('customTodoServer')}
                             />
                             <p
                               className="settings__message"
                               style={{
-                                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                                borderTop: 0,
+                                marginTop: 0,
+                                paddingTop: 0,
+                                marginBottom: '2rem',
                               }}
                             >
-                              { intl.formatMessage(messages.todoServerInfo) }
+                              {intl.formatMessage(messages.todoServerInfo)}
                             </p>
                           </div>
                         )}
@@ -400,56 +453,58 @@ export default @observer class EditSettingsForm extends Component {
                 <Toggle field={form.$('scheduledDNDEnabled')} />
                 {scheduledDNDEnabled && (
                   <>
-                    <div style={{
-                      display: 'flex',
-                      justifyContent: 'center',
-                    }}
-                    >
-                      <div style={{
-                        padding: '0 1rem',
-                        width: '100%',
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'center',
                       }}
+                    >
+                      <div
+                        style={{
+                          padding: '0 1rem',
+                          width: '100%',
+                        }}
                       >
                         <Input
                           placeholder="17:00"
-                          onChange={(e) => this.submit(e)}
+                          onChange={e => this.submit(e)}
                           field={form.$('scheduledDNDStart')}
                           type="time"
                         />
                       </div>
-                      <div style={{
-                        padding: '0 1rem',
-                        width: '100%',
-                      }}
+                      <div
+                        style={{
+                          padding: '0 1rem',
+                          width: '100%',
+                        }}
                       >
                         <Input
                           placeholder="09:00"
-                          onChange={(e) => this.submit(e)}
+                          onChange={e => this.submit(e)}
                           field={form.$('scheduledDNDEnd')}
                           type="time"
                         />
                       </div>
                     </div>
-                    <p>
-                      { intl.formatMessage(messages.scheduledDNDTimeInfo) }
-                    </p>
+                    <p>{intl.formatMessage(messages.scheduledDNDTimeInfo)}</p>
                   </>
                 )}
                 <p
                   className="settings__message"
                   style={{
-                    borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                    borderTop: 0,
+                    marginTop: 0,
+                    paddingTop: 0,
+                    marginBottom: '2rem',
                   }}
                 >
-                  <span>
-                    { intl.formatMessage(messages.scheduledDNDInfo) }
-                  </span>
+                  <span>{intl.formatMessage(messages.scheduledDNDInfo)}</span>
                 </p>
               </div>
             )}
 
             {/* Appearance */}
-            { this.state.activeSetttingsTab === 'appearance' && (
+            {this.state.activeSetttingsTab === 'appearance' && (
               <div>
                 <Toggle field={form.$('showDisabledServices')} />
                 <Toggle field={form.$('showMessageBadgeWhenMuted')} />
@@ -459,25 +514,34 @@ export default @observer class EditSettingsForm extends Component {
                 <Hr />
 
                 <Toggle field={form.$('adaptableDarkMode')} />
-                {!isAdaptableDarkModeEnabled && <Toggle field={form.$('darkMode')} />}
+                {!isAdaptableDarkModeEnabled && (
+                  <Toggle field={form.$('darkMode')} />
+                )}
                 {(isDarkmodeEnabled || isAdaptableDarkModeEnabled) && (
-                <>
-                  <Toggle field={form.$('universalDarkMode')} />
-                  <p
-                    className="settings__message"
-                    style={{
-                      borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
-                    }}
-                  >
-                    <span>
-                      { intl.formatMessage(messages.universalDarkModeInfo) }
-                    </span>
-                  </p>
-                </>
+                  <>
+                    <Toggle field={form.$('universalDarkMode')} />
+                    <p
+                      className="settings__message"
+                      style={{
+                        borderTop: 0,
+                        marginTop: 0,
+                        paddingTop: 0,
+                        marginBottom: '2rem',
+                      }}
+                    >
+                      <span>
+                        {intl.formatMessage(messages.universalDarkModeInfo)}
+                      </span>
+                    </p>
+                  </>
                 )}
 
                 <Hr />
 
+                <Toggle field={form.$('splitMode')} />
+
+                <Hr />
+
                 <Select field={form.$('serviceRibbonWidth')} />
 
                 <Toggle field={form.$('useVerticalStyle')} />
@@ -491,23 +555,25 @@ 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>
-                  {intl.formatMessage(messages.accentColorInfo,
-                    { defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor })}
+                  {intl.formatMessage(messages.accentColorInfo, {
+                    defaultAccentColor: DEFAULT_APP_SETTINGS.accentColor,
+                  })}
                 </p>
               </div>
             )}
 
             {/* Privacy */}
-            { this.state.activeSetttingsTab === 'privacy' && (
+            {this.state.activeSetttingsTab === 'privacy' && (
               <div>
                 <Toggle field={form.$('privateNotifications')} />
                 <Toggle field={form.$('clipboardNotifications')} />
                 {(isWindows || isMac) && (
-                  <Toggle field={form.$('notifyTaskBarOnMessage')} />)}
+                  <Toggle field={form.$('notifyTaskBarOnMessage')} />
+                )}
 
                 <Hr />
 
@@ -516,8 +582,12 @@ export default @observer class EditSettingsForm extends Component {
                 <Hr />
 
                 <Toggle field={form.$('sentry')} />
-                <p className="settings__help">{intl.formatMessage(messages.sentryInfo)}</p>
-                <p className="settings__help">{intl.formatMessage(messages.appRestartRequired)}</p>
+                <p className="settings__help">
+                  {intl.formatMessage(messages.sentryInfo)}
+                </p>
+                <p className="settings__help">
+                  {intl.formatMessage(messages.appRestartRequired)}
+                </p>
 
                 <Hr />
 
@@ -530,57 +600,60 @@ 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
                       showPasswordToggle
                     />
-                    <p>
-                      { intl.formatMessage(messages.lockedPasswordInfo) }
-                    </p>
+                    <p>{intl.formatMessage(messages.lockedPasswordInfo)}</p>
 
                     <Input
                       placeholder="Lock after inactivity"
-                      onChange={(e) => this.submit(e)}
+                      onChange={e => this.submit(e)}
                       field={form.$('inactivityLock')}
                       autoFocus
                     />
-                    <p>
-                      { intl.formatMessage(messages.inactivityLockInfo) }
-                    </p>
+                    <p>{intl.formatMessage(messages.inactivityLockInfo)}</p>
                   </>
                 )}
                 <p
                   className="settings__message"
                   style={{
-                    borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                    borderTop: 0,
+                    marginTop: 0,
+                    paddingTop: 0,
+                    marginBottom: '2rem',
                   }}
                 >
                   <span>
-                    { intl.formatMessage(messages.lockInfo, { lockShortcut: `${lockFerdiShortcutKey(false)}` }) }
+                    {intl.formatMessage(messages.lockInfo, {
+                      lockShortcut: `${lockFerdiShortcutKey(false)}`,
+                    })}
                   </span>
                 </p>
               </div>
             )}
 
             {/* Language */}
-            { this.state.activeSetttingsTab === 'language' && (
+            {this.state.activeSetttingsTab === 'language' && (
               <div>
                 <Select field={form.$('locale')} showLabel={false} />
 
                 <Hr />
 
-                <Toggle
-                  field={form.$('enableSpellchecking')}
-                />
+                <Toggle field={form.$('enableSpellchecking')} />
                 {!isMac && form.$('enableSpellchecking').value && (
                   <Select field={form.$('spellcheckerLanguage')} />
                 )}
                 {isMac && form.$('enableSpellchecking').value && (
-                  <p className="settings__help">{intl.formatMessage(messages.spellCheckerLanguageInfo)}</p>
+                  <p className="settings__help">
+                    {intl.formatMessage(messages.spellCheckerLanguageInfo)}
+                  </p>
                 )}
-                <p className="settings__help">{intl.formatMessage(messages.appRestartRequired)}</p>
+                <p className="settings__help">
+                  {intl.formatMessage(messages.appRestartRequired)}
+                </p>
 
                 <Hr />
 
@@ -590,52 +663,54 @@ export default @observer class EditSettingsForm extends Component {
                   className="link"
                   rel="noreferrer"
                 >
-                  {intl.formatMessage(messages.translationHelp)}
-                  {' '}
+                  {intl.formatMessage(messages.translationHelp)}{' '}
                   <i className="mdi mdi-open-in-new" />
                 </a>
               </div>
             )}
 
             {/* Advanced */}
-            { this.state.activeSetttingsTab === 'advanced' && (
+            {this.state.activeSetttingsTab === 'advanced' && (
               <div>
                 <Toggle field={form.$('enableGPUAcceleration')} />
-                <p className="settings__help indented__help">{intl.formatMessage(messages.appRestartRequired)}</p>
+                <p className="settings__help indented__help">
+                  {intl.formatMessage(messages.appRestartRequired)}
+                </p>
 
                 <Hr />
 
                 <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>
-                <p className="settings__help">{intl.formatMessage(messages.appRestartRequired)}</p>
+                <p className="settings__help">
+                  {intl.formatMessage(globalMessages.userAgentHelp)}
+                </p>
+                <p className="settings__help">
+                  {intl.formatMessage(messages.appRestartRequired)}
+                </p>
 
                 <Hr />
 
                 <div className="settings__settings-group">
-                  <h3>
-                    {intl.formatMessage(messages.subheadlineCache)}
-                  </h3>
+                  <h3>{intl.formatMessage(messages.subheadlineCache)}</h3>
                   <p>
                     {intl.formatMessage(messages.cacheInfo, {
                       size: cacheSize,
                     })}
                   </p>
-                  {
-                    notCleared && (
-                      <p>
-                        {intl.formatMessage(messages.cacheNotCleared)}
-                      </p>
-                    )
-                  }
+                  {notCleared && (
+                    <p>{intl.formatMessage(messages.cacheNotCleared)}</p>
+                  )}
                   <p>
                     <Button
                       buttonType="secondary"
                       label={intl.formatMessage(messages.buttonClearAllCache)}
-                      onClick={() => { onClearAllCache(); this.onClearCacheClicked(); }}
+                      onClick={() => {
+                        onClearAllCache();
+                        this.onClearCacheClicked();
+                      }}
                       disabled={isClearingAllCache}
                       loaded={!isClearingAllCache}
                     />
@@ -652,13 +727,17 @@ export default @observer class EditSettingsForm extends Component {
                     <div className="settings__open-settings-file-container">
                       <Button
                         buttonType="secondary"
-                        label={intl.formatMessage(messages.buttonOpenFerdiProfileFolder)}
+                        label={intl.formatMessage(
+                          messages.buttonOpenFerdiProfileFolder,
+                        )}
                         className="settings__open-settings-file-button"
                         onClick={() => openPath(profileFolder)}
                       />
                       <Button
                         buttonType="secondary"
-                        label={intl.formatMessage(messages.buttonOpenFerdiServiceRecipesFolder)}
+                        label={intl.formatMessage(
+                          messages.buttonOpenFerdiServiceRecipesFolder,
+                        )}
                         className="settings__open-settings-file-button"
                         onClick={() => openPath(recipeFolder)}
                       />
@@ -669,66 +748,78 @@ export default @observer class EditSettingsForm extends Component {
             )}
 
             {/* Updates */}
-            { this.state.activeSetttingsTab === 'updates' && (
-            <div>
-              <Toggle field={form.$('automaticUpdates')} />
-              {automaticUpdates && (
+            {this.state.activeSetttingsTab === 'updates' && (
               <div>
-                <Toggle field={form.$('beta')} />
-                <ToggleRaw
-                  field={{
-                    value: isNightlyEnabled,
-                    id: 'nightly',
-                    label: 'Include nightly versions',
-                    name: 'Nightly builds',
-                  }}
-                  onChange={window.ferdi.features.nightlyBuilds.toggleFeature}
-                />
-                {updateIsReadyToInstall ? (
-                  <Button
-                    label={intl.formatMessage(messages.buttonInstallUpdate)}
-                    onClick={installUpdate}
-                  />
-                ) : (
-                  <Button
-                    buttonType="secondary"
-                    label={intl.formatMessage(updateButtonLabelMessage)}
-                    onClick={checkForUpdates}
-                    disabled={!automaticUpdates || isCheckingForUpdates || isUpdateAvailable || !isOnline}
-                    loaded={!isCheckingForUpdates || !isUpdateAvailable}
-                  />
+                <Toggle field={form.$('automaticUpdates')} />
+                {automaticUpdates && (
+                  <div>
+                    <Toggle field={form.$('beta')} />
+                    <ToggleRaw
+                      field={{
+                        value: isNightlyEnabled,
+                        id: 'nightly',
+                        label: 'Include nightly versions',
+                        name: 'Nightly builds',
+                      }}
+                      onChange={
+                        window.ferdi.features.nightlyBuilds.toggleFeature
+                      }
+                    />
+                    {updateIsReadyToInstall ? (
+                      <Button
+                        label={intl.formatMessage(messages.buttonInstallUpdate)}
+                        onClick={installUpdate}
+                      />
+                    ) : (
+                      <Button
+                        buttonType="secondary"
+                        label={intl.formatMessage(updateButtonLabelMessage)}
+                        onClick={checkForUpdates}
+                        disabled={
+                          !automaticUpdates ||
+                          isCheckingForUpdates ||
+                          isUpdateAvailable ||
+                          !isOnline
+                        }
+                        loaded={!isCheckingForUpdates || !isUpdateAvailable}
+                      />
+                    )}
+                    <br />
+                  </div>
+                )}
+                {intl.formatMessage(messages.currentVersion)} {ferdiVersion}
+                {noUpdateAvailable && (
+                  <>
+                    <br />
+                    <br />
+                    {intl.formatMessage(messages.updateStatusUpToDate)}
+                  </>
                 )}
-                <br />
+                <p className="settings__message">
+                  <span className="mdi mdi-github-face" />
+                  <span>
+                    Ferdi is based on{' '}
+                    <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"
+                      rel="noreferrer"
+                    >
+                      Apache-2.0 License
+                    </a>
+                  </span>
+                  <br />
+                  <span className="mdi mdi-information" />
+                  {intl.formatMessage(messages.languageDisclaimer)}
+                </p>
               </div>
-              )}
-              {intl.formatMessage(messages.currentVersion)}
-              {' '}
-              {ferdiVersion}
-              {noUpdateAvailable && (
-              <>
-                <br />
-                <br />
-                {intl.formatMessage(messages.updateStatusUpToDate)}
-              </>
-              )}
-              <p className="settings__message">
-                <span className="mdi mdi-github-face" />
-                <span>
-
-                  Ferdi is based on
-                  {' '}
-                  <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" rel="noreferrer">Apache-2.0 License</a>
-                </span>
-                <br />
-                <span className="mdi mdi-information" />
-                {intl.formatMessage(messages.languageDisclaimer)}
-              </p>
-            </div>
             )}
           </form>
         </div>
@@ -736,3 +827,5 @@ export default @observer class EditSettingsForm extends Component {
     );
   }
 }
+
+export default injectIntl(EditSettingsForm);
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
index b84e06739..f24e4bd62 100644
--- a/src/components/settings/supportFerdi/SupportFerdiDashboard.js
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
@@ -1,76 +1,77 @@
 import React, { Component } from 'react';
-import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { BrowserWindow } from '@electron/remote';
 import InfoBar from '../../ui/InfoBar';
 
 const messages = defineMessages({
   headline: {
     id: 'settings.supportFerdi.headline',
-    defaultMessage: '!!!About Ferdi',
+    defaultMessage: 'About Ferdi',
   },
   title: {
     id: 'settings.supportFerdi.title',
-    defaultMessage: '!!!Do you like Ferdi?',
+    defaultMessage: 'Do you like Ferdi?',
   },
   aboutIntro: {
     id: 'settings.supportFerdi.aboutIntro',
-    defaultMessage: '!!!<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>',
+    defaultMessage:
+      '<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>',
   },
   textListContributors: {
     id: 'settings.supportFerdi.textListContributors',
-    defaultMessage: '!!!Full list of contributor',
+    defaultMessage: 'Full list of contributors',
   },
   textListContributorsHere: {
     id: 'settings.supportFerdi.textListContributorsHere',
-    defaultMessage: '!!!here',
+    defaultMessage: 'here',
   },
   textVolunteers: {
     id: 'settings.supportFerdi.textVolunteers',
-    defaultMessage: '!!!The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.',
+    defaultMessage:
+      'The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.',
   },
   textSupportWelcome: {
     id: 'settings.supportFerdi.textSupportWelcome',
-    defaultMessage: '!!!Support is always welcome. You can find a list of the help we need',
+    defaultMessage:
+      'Support is always welcome. You can find a list of the help we need',
   },
   textSupportWelcomeHere: {
     id: 'settings.supportFerdi.textSupportWelcomeHere',
-    defaultMessage: '!!!here',
+    defaultMessage: 'here',
   },
   textExpenses: {
     id: 'settings.supportFerdi.textExpenses',
-    defaultMessage: '!!!While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our',
+    defaultMessage:
+      'While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our',
   },
   textOpenCollective: {
     id: 'settings.supportFerdi.textOpenCollective',
-    defaultMessage: '!!!Open Collective',
+    defaultMessage: 'Open Collective',
   },
   textDonation: {
     id: 'settings.supportFerdi.textDonation',
-    defaultMessage: '!!!If you feel like supporting Ferdi development with a donation, you can do so on both,',
+    defaultMessage:
+      'If you feel like supporting Ferdi development with a donation, you can do so on both,',
   },
   textDonationAnd: {
     id: 'settings.supportFerdi.textDonationAnd',
-    defaultMessage: '!!!and',
+    defaultMessage: 'and',
   },
   textGitHubSponsors: {
     id: 'settings.supportFerdi.textGitHubSponsors',
-    defaultMessage: '!!!GitHub Sponsors',
+    defaultMessage: 'GitHub Sponsors',
   },
   openSurvey: {
     id: 'settings.supportFerdi.openSurvey',
-    defaultMessage: '!!!Open Survey',
+    defaultMessage: 'Open survey',
   },
   bannerText: {
     id: 'settings.supportFerdi.bannerText',
-    defaultMessage: '!!!Do you want to help us improve Ferdi?',
+    defaultMessage: 'Do you want to help us improve Ferdi?',
   },
 });
 
 class SupportFerdiDashboard extends Component {
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   openSurveyWindow() {
     let win = new BrowserWindow({ width: 670, height: 400 });
     win.on('closed', () => {
@@ -81,7 +82,9 @@ class SupportFerdiDashboard extends Component {
   }
 
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
+
+    const aboutIntro = intl.formatMessage(messages.aboutIntro);
 
     return (
       <div className="settings__main">
@@ -94,22 +97,67 @@ 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" 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>
+              <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} />
+            <span dangerouslySetInnerHTML={{ __html: aboutIntro }} />
             <br />
             <br />
             <p>
               <a href="#contributors-via-opencollective">
-                <img alt="GitHub contributors (non-exhaustive)" width="100%" src="https://opencollective.com/getferdi/contributors.svg?width=642&button=false" />
+                <img
+                  alt="GitHub contributors (non-exhaustive)"
+                  width="100%"
+                  src="https://opencollective.com/getferdi/contributors.svg?width=642&button=false"
+                />
               </a>
             </p>
             <p>
               {intl.formatMessage(messages.textListContributors)}
-              <a href="https://github.com/getferdi/ferdi#contributors-" target="_blank" className="link" rel="noreferrer">
+              <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" />
@@ -117,12 +165,15 @@ class SupportFerdiDashboard extends Component {
               <br />
               <br />
             </p>
-            <p>
-              {intl.formatMessage(messages.textVolunteers)}
-            </p>
+            <p>{intl.formatMessage(messages.textVolunteers)}</p>
             <p>
               {intl.formatMessage(messages.textSupportWelcome)}
-              <a href="https://help.getferdi.com/general/support" target="_blank" className="link" rel="noreferrer">
+              <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 +181,12 @@ class SupportFerdiDashboard extends Component {
             </p>
             <p>
               {intl.formatMessage(messages.textExpenses)}
-              <a href="https://opencollective.com/getferdi#section-budget" target="_blank" className="link" rel="noreferrer">
+              <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 +194,23 @@ class SupportFerdiDashboard extends Component {
             </p>
             <p>
               {intl.formatMessage(messages.textDonation)}
-              <a href="https://opencollective.com/getferdi#section-contribute" target="_blank" className="link" rel="noreferrer">
+              <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>
-              {' '}
+              </a>{' '}
               {intl.formatMessage(messages.textDonationAnd)}
-              <a href="https://github.com/sponsors/getferdi" target="_blank" className="link" rel="noreferrer">
+              <a
+                href="https://github.com/sponsors/getferdi"
+                target="_blank"
+                className="link"
+                rel="noreferrer"
+              >
                 {' '}
                 {intl.formatMessage(messages.textGitHubSponsors)}
                 <i className="mdi mdi-open-in-new" />
@@ -166,4 +231,4 @@ class SupportFerdiDashboard extends Component {
   }
 }
 
-export default SupportFerdiDashboard;
+export default injectIntl(SupportFerdiDashboard);
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 437225058..06f244997 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
@@ -14,31 +14,34 @@ import { LIVE_FRANZ_API } from '../../../config';
 const messages = defineMessages({
   headline: {
     id: 'settings.team.headline',
-    defaultMessage: '!!!Team',
+    defaultMessage: 'Team',
   },
   contentHeadline: {
     id: 'settings.team.contentHeadline',
-    defaultMessage: '!!!Franz Team Management',
+    defaultMessage: 'Franz Team Management',
   },
   intro: {
     id: 'settings.team.intro',
-    defaultMessage: '!!!Your are currently using Franz Servers, which is why you have access to Team Management.',
+    defaultMessage:
+      'You are currently using Franz Servers, which is why you have access to Team Management.',
   },
   copy: {
     id: 'settings.team.copy',
-    defaultMessage: '!!!Franz\'s Team Management allows you to manage Franz Subscriptions for multiple users. Please keep in mind that having a Franz Premium subscription will give you no advantages in using Ferdi: The only reason you still have access to Team Management is so you can manage your legacy Franz Teams and so that you don\'t loose any functionality in managing your account.',
+    defaultMessage:
+      "Franz's Team Management allows you to manage Franz Subscriptions for multiple users. Please keep in mind that having a Franz Premium subscription will give you no advantages in using Ferdi: The only reason you still have access to Team Management is so you can manage your legacy Franz Teams and so that you don't loose any functionality in managing your account.",
   },
   manageButton: {
     id: 'settings.team.manageAction',
-    defaultMessage: '!!!Manage your Team on meetfranz.com',
+    defaultMessage: 'Manage your Team on meetfranz.com',
   },
   teamsUnavailable: {
     id: 'settings.team.teamsUnavailable',
-    defaultMessage: '!!!Teams are unavailable',
+    defaultMessage: 'Teams are unavailable',
   },
   teamsUnavailableInfo: {
     id: 'settings.team.teamsUnavailableInfo',
-    defaultMessage: '!!!Teams are currently only available when using the Franz Server and after paying for Franz Professional. Please change your server to https://api.franzinfra.com to use teams.',
+    defaultMessage:
+      'Teams are currently only available when using the Franz Server and after paying for Franz Professional. Please change your server to https://api.franzinfra.com to use teams.',
   },
 });
 
@@ -87,7 +90,9 @@ const styles = {
   },
 };
 
-export default @injectSheet(styles) @observer class TeamDashboard extends Component {
+@injectSheet(styles)
+@observer
+class TeamDashboard extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
@@ -97,10 +102,6 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
     server: PropTypes.string.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       isLoading,
@@ -110,7 +111,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
       classes,
       server,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     if (server === LIVE_FRANZ_API) {
       return (
@@ -121,9 +122,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
             </span>
           </div>
           <div className="settings__body">
-            {isLoading && (
-              <Loader />
-            )}
+            {isLoading && <Loader />}
 
             {!isLoading && userInfoRequestFailed && (
               <Infobox
@@ -142,20 +141,24 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
                 {!isLoading && (
                   <>
                     <>
-                      <h1 className={classnames({
-                        [classes.headline]: true,
-                        [classes.headlineWithSpacing]: true,
-                      })}
+                      <h1
+                        className={classnames({
+                          [classes.headline]: true,
+                          [classes.headlineWithSpacing]: true,
+                        })}
                       >
                         {intl.formatMessage(messages.contentHeadline)}
-
                       </h1>
                       <div className={classes.container}>
                         <div className={classes.content}>
                           <p>{intl.formatMessage(messages.intro)}</p>
                           <p>{intl.formatMessage(messages.copy)}</p>
                         </div>
-                        <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Ferdi for Teams" />
+                        <img
+                          className={classes.image}
+                          src="https://cdn.franzinfra.com/announcements/assets/teams.png"
+                          alt="Ferdi for Teams"
+                        />
                       </div>
                       <div className={classes.buttonContainer}>
                         <Button
@@ -188,7 +191,8 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
           <p
             className="settings__message"
             style={{
-              borderTop: 0, marginTop: 0,
+              borderTop: 0,
+              marginTop: 0,
             }}
           >
             {intl.formatMessage(messages.teamsUnavailableInfo)}
@@ -198,3 +202,5 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
     );
   }
 }
+
+export default injectIntl(TeamDashboard);
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index db78acb69..adc107ccc 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router';
 import { Input } from '@meetfranz/forms';
 
@@ -14,31 +14,32 @@ import Infobox from '../../ui/Infobox';
 const messages = defineMessages({
   headline: {
     id: 'settings.account.headline',
-    defaultMessage: '!!!Account',
+    defaultMessage: 'Account',
   },
   headlineProfile: {
     id: 'settings.account.headlineProfile',
-    defaultMessage: '!!!Update Profile',
+    defaultMessage: 'Update profile',
   },
   headlineAccount: {
     id: 'settings.account.headlineAccount',
-    defaultMessage: '!!!Account Information',
+    defaultMessage: 'Account information',
   },
   headlinePassword: {
     id: 'settings.account.headlinePassword',
-    defaultMessage: '!!!Change Password',
+    defaultMessage: 'Change password',
   },
   successInfo: {
     id: 'settings.account.successInfo',
-    defaultMessage: '!!!Your changes have been saved',
+    defaultMessage: 'Your changes have been saved',
   },
   buttonSave: {
     id: 'settings.account.buttonSave',
-    defaultMessage: '!!!Update profile',
+    defaultMessage: 'Update profile',
   },
 });
 
-export default @observer class EditUserForm extends Component {
+@observer
+class EditUserForm extends Component {
   static propTypes = {
     status: MobxPropTypes.observableArray.isRequired,
     form: PropTypes.instanceOf(Form).isRequired,
@@ -46,14 +47,10 @@ export default @observer class EditUserForm extends Component {
     isSaving: PropTypes.bool.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   submit(e) {
     e.preventDefault();
     this.props.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         const values = form.values();
         this.props.onSubmit(values);
       },
@@ -68,7 +65,7 @@ export default @observer class EditUserForm extends Component {
       form,
       isSaving,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="settings__main">
@@ -84,12 +81,9 @@ 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"
-                icon="checkbox-marked-circle-outline"
-              >
+              <Infobox type="success" icon="checkbox-marked-circle-outline">
                 {intl.formatMessage(messages.successInfo)}
               </Infobox>
             )}
@@ -104,10 +98,7 @@ export default @observer class EditUserForm extends Component {
               <Input field={form.$('organization')} />
             )}
             <h2>{intl.formatMessage(messages.headlinePassword)}</h2>
-            <Input
-              {...form.$('oldPassword').bind()}
-              showPasswordToggle
-            />
+            <Input {...form.$('oldPassword').bind()} showPasswordToggle />
             <Input
               {...form.$('newPassword').bind()}
               showPasswordToggle
@@ -137,3 +128,5 @@ export default @observer class EditUserForm extends Component {
     );
   }
 }
+
+export default injectIntl(EditUserForm);
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index bbfd5de28..fa4a719ab 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -19,7 +19,9 @@ const textList = shuffleArray([
   'Fixing bugs',
 ]);
 
-export default @injectSheet(styles) @withTheme class AppLoader extends Component {
+@injectSheet(styles)
+@withTheme
+class AppLoader extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     theme: PropTypes.object.isRequired,
@@ -28,7 +30,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
 
   static defaultProps = {
     texts: textList,
-  }
+  };
 
   state = {
     step: 0,
@@ -38,7 +40,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);
@@ -73,3 +75,5 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
     );
   }
 }
+
+export default AppLoader;
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index 5066b9c06..f6c9fd3d3 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -4,7 +4,9 @@ import { observer, inject } from 'mobx-react';
 import Loader from 'react-loader';
 import classnames from 'classnames';
 
-export default @inject('stores') @observer class Button extends Component {
+@inject('stores')
+@observer
+class Button extends Component {
   static propTypes = {
     className: PropTypes.string,
     label: PropTypes.string.isRequired,
@@ -26,7 +28,7 @@ export default @inject('stores') @observer class Button extends Component {
   static defaultProps = {
     className: null,
     disabled: false,
-    onClick: () => { },
+    onClick: () => {},
     type: 'button',
     buttonType: '',
     loaded: true,
@@ -76,7 +78,11 @@ export default @inject('stores') @observer class Button extends Component {
           loaded={loaded}
           lines={10}
           scale={0.4}
-          color={buttonType !== 'secondary' ? '#FFF' : this.props.stores.settings.app.accentColor}
+          color={
+            buttonType !== 'secondary'
+              ? '#FFF'
+              : this.props.stores.settings.app.accentColor
+          }
           component="span"
         />
         {label}
@@ -85,3 +91,5 @@ export default @inject('stores') @observer class Button extends Component {
     );
   }
 }
+
+export default Button;
diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js
index 633edbe2c..a3aa06bc9 100644
--- a/src/components/ui/FAB.js
+++ b/src/components/ui/FAB.js
@@ -8,7 +8,8 @@ import classnames from 'classnames';
 
 import { oneOrManyChildElements } from '../../prop-types';
 
-export default @observer class Button extends Component {
+@observer
+class Button extends Component {
   static propTypes = {
     className: PropTypes.string,
     disabled: PropTypes.bool,
@@ -21,7 +22,7 @@ export default @observer class Button extends Component {
   static defaultProps = {
     className: null,
     disabled: false,
-    onClick: () => { },
+    onClick: () => {},
     type: 'button',
     htmlForm: '',
   };
@@ -29,14 +30,8 @@ export default @observer class Button extends Component {
   element = null;
 
   render() {
-    const {
-      className,
-      disabled,
-      onClick,
-      type,
-      children,
-      htmlForm,
-    } = this.props;
+    const { className, disabled, onClick, type, children, htmlForm } =
+      this.props;
 
     const buttonProps = {
       className: classnames({
@@ -66,3 +61,5 @@ export default @observer class Button extends Component {
     );
   }
 }
+
+export default Button;
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
deleted file mode 100644
index 646cf56ca..000000000
--- a/src/components/ui/FeatureItem.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import injectSheet from 'react-jss';
-import { Icon } from '@meetfranz/ui';
-import classnames from 'classnames';
-import { mdiCheckCircle } from '@mdi/js';
-
-const styles = (theme) => ({
-  featureItem: {
-    borderBottom: [1, 'solid', theme.defaultContentBorder],
-    padding: [8, 0],
-    display: 'flex',
-    alignItems: 'center',
-    textAlign: 'left',
-  },
-  featureIcon: {
-    fill: theme.brandSuccess,
-    marginRight: 10,
-  },
-});
-
-export const FeatureItem = injectSheet(styles)(({
-  classes, className, name, icon,
-}) => (
-  <li className={classnames({
-    [classes.featureItem]: true,
-    [className]: className,
-  })}
-  >
-    {icon ? (
-      <span className={classes.featureIcon}>{icon}</span>
-    ) : (
-      <Icon icon={mdiCheckCircle} className={classes.featureIcon} size={1.5} />
-    )}
-    {name}
-  </li>
-));
-
-export default FeatureItem;
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
deleted file mode 100644
index cf2664830..000000000
--- a/src/components/ui/FeatureList.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { defineMessages, intlShape } from 'react-intl';
-
-import { FeatureItem } from './FeatureItem';
-
-const messages = defineMessages({
-  availableRecipes: {
-    id: 'pricing.features.recipes',
-    defaultMessage: '!!!Choose from more than 70 Services', // TODO: Make this dynamic
-  },
-  accountSync: {
-    id: 'pricing.features.accountSync',
-    defaultMessage: '!!!Account Synchronisation',
-  },
-  desktopNotifications: {
-    id: 'pricing.features.desktopNotifications',
-    defaultMessage: '!!!Desktop Notifications',
-  },
-  unlimitedServices: {
-    id: 'pricing.features.unlimitedServices',
-    defaultMessage: '!!!Add unlimited services',
-  },
-  spellchecker: {
-    id: 'pricing.features.spellchecker',
-    defaultMessage: '!!!Spellchecker support',
-  },
-  workspaces: {
-    id: 'pricing.features.workspaces',
-    defaultMessage: '!!!Workspaces',
-  },
-  customWebsites: {
-    id: 'pricing.features.customWebsites',
-    defaultMessage: '!!!Add Custom Websites',
-  },
-  onPremise: {
-    id: 'pricing.features.onPremise',
-    defaultMessage: '!!!On-premise & other Hosted Services',
-  },
-  thirdPartyServices: {
-    id: 'pricing.features.thirdPartyServices',
-    defaultMessage: '!!!Install 3rd party services',
-  },
-  serviceProxies: {
-    id: 'pricing.features.serviceProxies',
-    defaultMessage: '!!!Service Proxies',
-  },
-  teamManagement: {
-    id: 'pricing.features.teamManagement',
-    defaultMessage: '!!!Team Management',
-  },
-});
-
-export class FeatureList extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    featureClassName: PropTypes.string,
-  };
-
-  static defaultProps = {
-    className: '',
-    featureClassName: '',
-  }
-
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  render() {
-    const {
-      className,
-      featureClassName,
-    } = this.props;
-    const { intl } = this.context;
-
-    const features = [
-      messages.availableRecipes,
-      messages.accountSync,
-      messages.desktopNotifications,
-
-      messages.spellchecker,
-
-      messages.workspaces,
-      messages.customWebsites,
-      messages.thirdPartyServices,
-
-      messages.unlimitedServices,
-      messages.onPremise,
-      messages.serviceProxies,
-      messages.teamManagement,
-    ];
-
-    return (
-      <ul className={className}>
-        {features.map((feature) => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)}
-      </ul>
-    );
-  }
-}
-
-export default FeatureList;
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index 2952cd96b..ab5e2f365 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -8,7 +8,10 @@ import Loader from '../Loader';
 
 import styles from './styles';
 
-export default @withTheme @injectSheet(styles) @observer class FullscreenLoader extends Component {
+@withTheme
+@injectSheet(styles)
+@observer
+class FullscreenLoader extends Component {
   static propTypes = {
     className: PropTypes.string,
     title: PropTypes.string.isRequired,
@@ -25,14 +28,8 @@ export default @withTheme @injectSheet(styles) @observer class FullscreenLoader
   };
 
   render() {
-    const {
-      classes,
-      title,
-      children,
-      spinnerColor,
-      className,
-      theme,
-    } = this.props;
+    const { classes, title, children, spinnerColor, className, theme } =
+      this.props;
 
     return (
       <div className={classes.wrapper}>
@@ -44,13 +41,11 @@ export default @withTheme @injectSheet(styles) @observer class FullscreenLoader
         >
           <h1 className={classes.title}>{title}</h1>
           <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} />
-          {children && (
-            <div className={classes.content}>
-              {children}
-            </div>
-          )}
+          {children && <div className={classes.content}>{children}</div>}
         </div>
       </div>
     );
   }
 }
+
+export default FullscreenLoader;
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
index bb4ea0565..49aff389b 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.js
@@ -6,7 +6,8 @@ import classnames from 'classnames';
 import Dropzone from 'react-dropzone';
 import { isWindows } from '../../environment';
 
-export default @observer class ImageUpload extends Component {
+@observer
+class ImageUpload extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
@@ -29,22 +30,20 @@ export default @observer class ImageUpload extends Component {
   onDrop(acceptedFiles) {
     const { field } = this.props;
 
-    acceptedFiles.forEach((file) => {
+    for (const file of acceptedFiles) {
       const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path;
       this.setState({
         path: imgPath,
       });
 
       this.props.field.onDrop(file);
-    });
+    }
 
     field.set('');
   }
 
   render() {
-    const {
-      field, className, multiple, textDelete, textUpload,
-    } = this.props;
+    const { field, className, multiple, textDelete, textUpload } = this.props;
 
     const cssClasses = classnames({
       'image-upload__dropzone': true,
@@ -86,7 +85,7 @@ export default @observer class ImageUpload extends Component {
             </>
           ) : (
             <Dropzone
-              ref={(node) => {
+              ref={node => {
                 this.dropzoneRef = node;
               }}
               onDrop={this.onDrop.bind(this)}
@@ -107,3 +106,5 @@ export default @observer class ImageUpload extends Component {
     );
   }
 }
+
+export default ImageUpload;
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index bd2af2296..dc6be10da 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -3,23 +3,21 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import Loader from 'react-loader';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
-// import { oneOrManyChildElements } from '../../prop-types';
 import Appear from './effects/Appear';
 
 const messages = defineMessages({
   hide: {
     id: 'infobar.hide',
-    defaultMessage: '!!!Hide',
+    defaultMessage: 'Hide',
   },
 });
 
-export default
 @observer
 class InfoBar extends Component {
   static propTypes = {
-    // eslint-disable-next-line
+    // eslint-disable-next-line react/forbid-prop-types
     children: PropTypes.any.isRequired,
     onClick: PropTypes.func,
     type: PropTypes.string,
@@ -42,10 +40,6 @@ class InfoBar extends Component {
     onHide: () => null,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       children,
@@ -59,7 +53,7 @@ class InfoBar extends Component {
       onHide,
     } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     let transitionName = 'slideUp';
     if (position === 'top') {
@@ -103,3 +97,5 @@ class InfoBar extends Component {
     );
   }
 }
+
+export default injectIntl(InfoBar);
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index 73b48b957..9e34bf110 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -3,20 +3,20 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import Loader from 'react-loader';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
   dismiss: {
     id: 'infobox.dismiss',
-    defaultMessage: '!!!Dismiss',
+    defaultMessage: 'Dismiss',
   },
 });
 
-export default
 @observer
 class Infobox extends Component {
   static propTypes = {
-    children: PropTypes.any.isRequired, // eslint-disable-line
+    // eslint-disable-next-line react/forbid-prop-types
+    children: PropTypes.any.isRequired,
     icon: PropTypes.string,
     type: PropTypes.string,
     ctaOnClick: PropTypes.func,
@@ -38,10 +38,6 @@ class Infobox extends Component {
     onSeen: () => null,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     dismissed: false,
   };
@@ -63,7 +59,7 @@ class Infobox extends Component {
       onDismiss,
     } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     if (this.state.dismissed) {
       return null;
@@ -106,3 +102,5 @@ class Infobox extends Component {
     );
   }
 }
+
+export default injectIntl(Infobox);
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 7417fef1c..43fab10ee 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -3,18 +3,17 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
 
 const messages = defineMessages({
   passwordToggle: {
     id: 'settings.app.form.passwordToggle',
-    defaultMessage: '!!!Password toggle',
+    defaultMessage: 'Password toggle',
   },
 });
 
-export default
 @observer
 class Input extends Component {
   static propTypes = {
@@ -38,16 +37,12 @@ class Input extends Component {
     suffix: '',
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     showPassword: false,
     passwordScore: 0,
   };
 
-  inputElement = null;
+  inputElement;
 
   componentDidMount() {
     if (this.props.focus) {
@@ -82,7 +77,7 @@ class Input extends Component {
 
     const { passwordScore } = this.state;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     let { type } = field;
     if (type === 'password' && this.state.showPassword) {
@@ -106,10 +101,10 @@ class Input extends Component {
             name={field.name}
             value={field.value}
             placeholder={field.placeholder}
-            onChange={(e) => this.onChange(e)}
+            onChange={e => this.onChange(e)}
             onBlur={field.onBlur}
             onFocus={field.onFocus}
-            ref={(element) => {
+            ref={element => {
               this.inputElement = element;
             }}
             disabled={field.disabled}
@@ -124,9 +119,11 @@ class Input extends Component {
                 'mdi-eye': !this.state.showPassword,
                 'mdi-eye-off': this.state.showPassword,
               })}
-              onClick={() => this.setState((prevState) => ({
-                showPassword: !prevState.showPassword,
-              }))}
+              onClick={() =>
+                this.setState(prevState => ({
+                  showPassword: !prevState.showPassword,
+                }))
+              }
               tabIndex={-1}
               aria-label={intl.formatMessage(messages.passwordToggle)}
             />
@@ -136,10 +133,10 @@ class Input extends Component {
               {/* <progress value={this.state.passwordScore} max="100" /> */}
               <meter
                 value={passwordScore < 5 ? 5 : passwordScore}
-                low="30"
-                high="75"
-                optimum="100"
-                max="100"
+                low={30}
+                high={75}
+                optimum={100}
+                max={100}
               />
             </div>
           )}
@@ -154,3 +151,5 @@ class Input extends Component {
     );
   }
 }
+
+export default injectIntl(Input);
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 003211e5c..94db3f842 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -9,7 +9,9 @@ import { matchRoute } from '../../helpers/routing-helpers';
 import { openExternalUrl } from '../../helpers/url-helpers';
 
 // TODO: create container component for this component
-export default @inject('stores') @observer class Link extends Component {
+@inject('stores')
+@observer
+class Link extends Component {
   onClick(e) {
     if (this.props.disabled) {
       e.preventDefault();
@@ -50,7 +52,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>
@@ -62,10 +64,8 @@ Link.wrappedComponent.propTypes = {
   stores: PropTypes.shape({
     router: PropTypes.instanceOf(RouterStore).isRequired,
   }).isRequired,
-  children: PropTypes.oneOfType([
-    oneOrManyChildElements,
-    PropTypes.string,
-  ]).isRequired,
+  children: PropTypes.oneOfType([oneOrManyChildElements, PropTypes.string])
+    .isRequired,
   to: PropTypes.string.isRequired,
   className: PropTypes.string,
   activeClassName: PropTypes.string,
@@ -83,3 +83,5 @@ Link.wrappedComponent.defaultProps = {
   target: '',
   style: {},
 };
+
+export default Link;
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
index 4d7113aa1..46c1390bf 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.js
@@ -5,7 +5,9 @@ import Loader from 'react-loader';
 
 import { oneOrManyChildElements } from '../../prop-types';
 
-export default @inject('stores') @observer class LoaderComponent extends Component {
+@inject('stores')
+@observer
+class LoaderComponent extends Component {
   static propTypes = {
     children: oneOrManyChildElements,
     loaded: PropTypes.bool,
@@ -28,13 +30,12 @@ export default @inject('stores') @observer class LoaderComponent extends Compone
   };
 
   render() {
-    const {
-      children,
-      loaded,
-      className,
-    } = this.props;
+    const { children, loaded, className } = this.props;
 
-    const color = this.props.color !== 'ACCENT' ? this.props.color : this.props.stores.settings.app.accentColor;
+    const color =
+      this.props.color !== 'ACCENT'
+        ? this.props.color
+        : this.props.stores.settings.app.accentColor;
 
     return (
       <Loader
@@ -51,3 +52,5 @@ export default @inject('stores') @observer class LoaderComponent extends Compone
     );
   }
 }
+
+export default LoaderComponent;
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
index a9fa0cd1b..3c7c66c59 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.js
@@ -10,7 +10,8 @@ import styles from './styles';
 
 // ReactModal.setAppElement('#root');
 
-export default @injectCSS(styles) class Modal extends Component {
+@injectCSS(styles)
+class Modal extends Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
@@ -20,14 +21,14 @@ export default @injectCSS(styles) class Modal extends Component {
     close: PropTypes.func.isRequired,
     shouldCloseOnOverlayClick: PropTypes.bool,
     showClose: PropTypes.bool,
-  }
+  };
 
   static defaultProps = {
     className: null,
     portal: 'modal-portal',
     shouldCloseOnOverlayClick: false,
     showClose: true,
-  }
+  };
 
   render() {
     const {
@@ -53,21 +54,17 @@ export default @injectCSS(styles) class Modal extends Component {
         portal={portal}
         onRequestClose={close}
         shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
-        appElement={document.getElementById('root')}
+        appElement={document.querySelector('#root')}
       >
         {showClose && close && (
-          <button
-            type="button"
-            className={classes.close}
-            onClick={close}
-          >
+          <button type="button" className={classes.close} onClick={close}>
             <Icon icon={mdiClose} size={1.5} />
           </button>
         )}
-        <div className={classes.content}>
-          {children}
-        </div>
+        <div className={classes.content}>{children}</div>
       </ReactModal>
     );
   }
 }
+
+export default Modal;
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js
index e77714eb7..65a777ff1 100644
--- a/src/components/ui/Radio.js
+++ b/src/components/ui/Radio.js
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 
-export default @observer class Radio extends Component {
+@observer
+class Radio extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
@@ -31,11 +32,7 @@ export default @observer class Radio extends Component {
   }
 
   render() {
-    const {
-      field,
-      className,
-      showLabel,
-    } = this.props;
+    const { field, className, showLabel } = this.props;
 
     return (
       <div
@@ -46,15 +43,12 @@ export default @observer class Radio extends Component {
         })}
       >
         {field.label && showLabel && (
-          <label
-            className="franz-form__label"
-            htmlFor={field.name}
-          >
+          <label className="franz-form__label" htmlFor={field.name}>
             {field.label}
           </label>
         )}
         <div className="franz-form__radio-wrapper">
-          {field.options.map((type) => (
+          {field.options.map(type => (
             <label
               key={type.value}
               htmlFor={`${field.id}-${type.value}`}
@@ -75,14 +69,10 @@ export default @observer class Radio extends Component {
             </label>
           ))}
         </div>
-        {field.error && (
-          <div
-            className="franz-form__error"
-          >
-            {field.error}
-          </div>
-        )}
+        {field.error && <div className="franz-form__error">{field.error}</div>}
       </div>
     );
   }
 }
+
+export default Radio;
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index 0b25734dd..2d760beab 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { debounce } from 'lodash';
 
-export default @observer class SearchInput extends Component {
+@observer
+class SearchInput extends Component {
   static propTypes = {
     value: PropTypes.string,
     placeholder: PropTypes.string,
@@ -27,7 +28,7 @@ export default @observer class SearchInput extends Component {
     onChange: () => null,
     onReset: () => null,
     autoFocus: false,
-  }
+  };
 
   input = null;
 
@@ -38,7 +39,10 @@ export default @observer class SearchInput extends Component {
       value: props.value,
     };
 
-    this.throttledOnChange = debounce(this.throttledOnChange, this.props.throttleDelay);
+    this.throttledOnChange = debounce(
+      this.throttledOnChange,
+      this.props.throttleDelay,
+    );
   }
 
   componentDidMount() {
@@ -80,24 +84,18 @@ export default @observer class SearchInput extends Component {
     const { value } = this.state;
 
     return (
-      <div
-        className={classnames([
-          className,
-          'search-input',
-        ])}
-      >
-        <label
-          htmlFor={name}
-          className="mdi mdi-magnify"
-        >
+      <div className={classnames([className, 'search-input'])}>
+        <label htmlFor={name} className="mdi mdi-magnify">
           <input
             name={name}
             id={name}
             type="text"
             placeholder={placeholder}
             value={value}
-            onChange={(e) => this.onChange(e)}
-            ref={(ref) => { this.input = ref; }}
+            onChange={e => this.onChange(e)}
+            ref={ref => {
+              this.input = ref;
+            }}
           />
         </label>
         {value.length > 0 && (
@@ -110,3 +108,5 @@ export default @observer class SearchInput extends Component {
     );
   }
 }
+
+export default SearchInput;
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index e7a5eafa8..5ac7ddd6d 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 
-export default @observer class Select extends Component {
+@observer
+class Select extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
@@ -43,18 +44,12 @@ export default @observer class Select extends Component {
   }
 
   render() {
-    const {
-      field,
-      className,
-      showLabel,
-      disabled,
-      multiple,
-    } = this.props;
+    const { field, className, showLabel, disabled, multiple } = this.props;
 
     let selected = field.value;
 
     if (multiple) {
-      if (typeof field.value === 'string' && field.value.substr(0, 1) === '[') {
+      if (typeof field.value === 'string' && field.value.slice(0, 1) === '[') {
         // Value is JSON encoded
         selected = JSON.parse(field.value);
       } else if (typeof field.value === 'object') {
@@ -74,15 +69,12 @@ export default @observer class Select extends Component {
         })}
       >
         {field.label && showLabel && (
-          <label
-            className="franz-form__label"
-            htmlFor={field.name}
-          >
+          <label className="franz-form__label" htmlFor={field.name}>
             {field.label}
           </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 +82,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}
@@ -100,14 +92,10 @@ export default @observer class Select extends Component {
             </option>
           ))}
         </select>
-        {field.error && (
-          <div
-            className="franz-form__error"
-          >
-            {field.error}
-          </div>
-        )}
+        {field.error && <div className="franz-form__error">{field.error}</div>}
       </div>
     );
   }
 }
+
+export default Select;
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js
index f344449a0..6f17eae00 100644
--- a/src/components/ui/Slider.js
+++ b/src/components/ui/Slider.js
@@ -4,62 +4,64 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { Field } from 'mobx-react-form';
 
-export default @observer class Slider extends Component {
-    static propTypes = {
-      field: PropTypes.instanceOf(Field).isRequired,
-      className: PropTypes.string,
-      showLabel: PropTypes.bool,
-      disabled: PropTypes.bool,
-    };
+@observer
+class Slider extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    showLabel: PropTypes.bool,
+    disabled: PropTypes.bool,
+  };
 
-    static defaultProps = {
-      className: '',
-      showLabel: true,
-      disabled: false,
-    };
+  static defaultProps = {
+    className: '',
+    showLabel: true,
+    disabled: false,
+  };
 
-    onChange(e) {
-      const { field } = this.props;
+  onChange(e) {
+    const { field } = this.props;
 
-      field.onChange(e);
-    }
-
-    render() {
-      const {
-        field,
-        className,
-        showLabel,
-        disabled,
-      } = this.props;
+    field.onChange(e);
+  }
 
-      if (field.value === '' && field.default !== '') {
-        field.value = field.default;
-      }
+  render() {
+    const { field, className, showLabel, disabled } = this.props;
 
-      return (
-        <div
-          className={classnames([
-            'franz-form__field',
-            'franz-form__slider-wrapper',
-            className,
-          ])}
-        >
-          <div className="slider-container">
-            <input
-              className="slider"
-              type="range"
-              id={field.id}
-              name={field.name}
-              value={field.value}
-              min="1"
-              max="100"
-              onChange={(e) => (!disabled ? this.onChange(e) : null)}
-            />
-          </div>
+    if (field.value === '' && field.default !== '') {
+      field.value = field.default;
+    }
 
-          {field.error && <div className={field.error}>{field.error}</div>}
-          {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>}
+    return (
+      <div
+        className={classnames([
+          'franz-form__field',
+          'franz-form__slider-wrapper',
+          className,
+        ])}
+      >
+        <div className="slider-container">
+          <input
+            className="slider"
+            type="range"
+            id={field.id}
+            name={field.name}
+            value={field.value}
+            min="1"
+            max="100"
+            onChange={e => (!disabled ? this.onChange(e) : null)}
+          />
         </div>
-      );
-    }
+
+        {field.error && <div className={field.error}>{field.error}</div>}
+        {field.label && showLabel && (
+          <label className="franz-form__label" htmlFor={field.id}>
+            {field.label}
+          </label>
+        )}
+      </div>
+    );
+  }
 }
+
+export default Slider;
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js
index 6fc50fe5c..ff4e8c795 100644
--- a/src/components/ui/StatusBarTargetUrl.js
+++ b/src/components/ui/StatusBarTargetUrl.js
@@ -5,7 +5,8 @@ import classnames from 'classnames';
 
 import Appear from './effects/Appear';
 
-export default @observer class StatusBarTargetUrl extends Component {
+@observer
+class StatusBarTargetUrl extends Component {
   static propTypes = {
     className: PropTypes.string,
     text: PropTypes.string,
@@ -17,10 +18,7 @@ export default @observer class StatusBarTargetUrl extends Component {
   };
 
   render() {
-    const {
-      className,
-      text,
-    } = this.props;
+    const { className, text } = this.props;
 
     return (
       <Appear
@@ -29,10 +27,10 @@ export default @observer class StatusBarTargetUrl extends Component {
           [`${className}`]: true,
         })}
       >
-        <div className="status-bar-target-url__content">
-          {text}
-        </div>
+        <div className="status-bar-target-url__content">{text}</div>
       </Appear>
     );
   }
 }
+
+export default StatusBarTargetUrl;
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
deleted file mode 100644
index d0ef4e798..000000000
--- a/src/components/ui/Tabs/TabItem.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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}</>;
-  }
-}
diff --git a/src/components/ui/Tabs/TabItem.tsx b/src/components/ui/Tabs/TabItem.tsx
new file mode 100644
index 000000000..bd613ddc7
--- /dev/null
+++ b/src/components/ui/Tabs/TabItem.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const TabItem = ({ children }) => <>{children}</>;
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index 56c76f215..195398708 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -5,7 +5,6 @@ import classnames from 'classnames';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
-export default
 @observer
 class Tab extends Component {
   constructor(props) {
@@ -28,7 +27,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>;
@@ -69,3 +68,5 @@ class Tab extends Component {
     );
   }
 }
+
+export default Tab;
diff --git a/src/components/ui/Tabs/index.js b/src/components/ui/Tabs/index.js
deleted file mode 100644
index e4adb62c7..000000000
--- a/src/components/ui/Tabs/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Tabs from './Tabs';
-import TabItem from './TabItem';
-
-export default Tabs;
-
-export { TabItem };
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
index 14330e5c7..bd7bc242d 100644
--- a/src/components/ui/Toggle.js
+++ b/src/components/ui/Toggle.js
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { Field } from 'mobx-react-form';
 
-export default @observer class Toggle extends Component {
+@observer
+class Toggle extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
@@ -25,12 +26,7 @@ export default @observer class Toggle extends Component {
   }
 
   render() {
-    const {
-      field,
-      className,
-      showLabel,
-      disabled,
-    } = this.props;
+    const { field, className, showLabel, disabled } = this.props;
 
     if (field.value === '' && field.default !== '') {
       field.value = field.default;
@@ -59,12 +55,18 @@ 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>}
-        {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>}
+        {field.label && showLabel && (
+          <label className="franz-form__label" htmlFor={field.id}>
+            {field.label}
+          </label>
+        )}
       </div>
     );
   }
 }
+
+export default Toggle;
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js
index 4700127d4..1fde879ac 100644
--- a/src/components/ui/ToggleRaw.js
+++ b/src/components/ui/ToggleRaw.js
@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
-export default @observer class ToggleRaw extends Component {
+@observer
+class ToggleRaw extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
     field: PropTypes.shape({
@@ -34,12 +35,7 @@ export default @observer class ToggleRaw extends Component {
   }
 
   render() {
-    const {
-      field,
-      className,
-      showLabel,
-      disabled,
-    } = this.props;
+    const { field, className, showLabel, disabled } = this.props;
 
     return (
       <div
@@ -64,12 +60,18 @@ 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>}
-        {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>}
+        {field.label && showLabel && (
+          <label className="franz-form__label" htmlFor={field.id}>
+            {field.label}
+          </label>
+        )}
       </div>
     );
   }
 }
+
+export default ToggleRaw;
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index c58d69374..8f4499e7b 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import FullscreenLoader from '../FullscreenLoader';
 import styles from './styles';
@@ -10,23 +10,21 @@ import styles from './styles';
 const messages = defineMessages({
   loading: {
     id: 'service.webviewLoader.loading',
-    defaultMessage: '!!!Loading {service}',
+    defaultMessage: 'Loading {service}',
   },
 });
 
-export default @injectSheet(styles) @observer class WebviewLoader extends Component {
+@injectSheet(styles)
+@observer
+class WebviewLoader extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     classes: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const { classes, name } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
     return (
       <FullscreenLoader
         className={classes.component}
@@ -35,3 +33,5 @@ export default @injectSheet(styles) @observer class WebviewLoader extends Compon
     );
   }
 }
+
+export default injectIntl(WebviewLoader);
diff --git a/src/components/ui/effects/Appear.js b/src/components/ui/effects/Appear.js
index 1255fce2e..183181f8f 100644
--- a/src/components/ui/effects/Appear.js
+++ b/src/components/ui/effects/Appear.js
@@ -1,11 +1,11 @@
-/* eslint-disable react/no-did-mount-set-state */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 export default class Appear extends Component {
   static propTypes = {
-    children: PropTypes.any.isRequired, // eslint-disable-line
+    // eslint-disable-next-line react/forbid-prop-types
+    children: PropTypes.any.isRequired,
     transitionName: PropTypes.string,
     className: PropTypes.string,
   };
@@ -24,11 +24,7 @@ export default class Appear extends Component {
   }
 
   render() {
-    const {
-      children,
-      transitionName,
-      className,
-    } = this.props;
+    const { children, transitionName, className } = this.props;
 
     if (!this.state.mounted) {
       return null;
diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js
index 5db0db226..9c789e981 100644
--- a/src/components/util/ErrorBoundary/index.js
+++ b/src/components/util/ErrorBoundary/index.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Button from '../../ui/Button';
 
@@ -10,26 +10,23 @@ import styles from './styles';
 const messages = defineMessages({
   headline: {
     id: 'app.errorHandler.headline',
-    defaultMessage: '!!!Something went wrong.',
+    defaultMessage: 'Something went wrong.',
   },
   action: {
     id: 'app.errorHandler.action',
-    defaultMessage: '!!!Reload',
+    defaultMessage: 'Reload',
   },
 });
 
-export default @injectSheet(styles) class ErrorBoundary extends Component {
+@injectSheet(styles)
+class ErrorBoundary extends Component {
   state = {
     hasError: false,
-  }
+  };
 
   static propTypes = {
     classes: PropTypes.object.isRequired,
     children: PropTypes.node.isRequired,
-  }
-
-  static contextTypes = {
-    intl: intlShape,
   };
 
   componentDidCatch() {
@@ -38,7 +35,7 @@ export default @injectSheet(styles) class ErrorBoundary extends Component {
 
   render() {
     const { classes } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     if (this.state.hasError) {
       return (
@@ -58,3 +55,5 @@ export default @injectSheet(styles) class ErrorBoundary extends Component {
     return this.props.children;
   }
 }
+
+export default injectIntl(ErrorBoundary);