Upgrade various dependencies to latest part 2 (#1557)

* Upgrade various dependencies to latest, remove unnecessary electron-hunspell
  - upgrade eslint and friends to latest
  - remove deprecated 'node-sass' in favor of 'sass'
  - disable new rules from 'eslint-config-airbnb' that are conflicting with current code style
  - add workspace config for 'vscode' that silences 'experimentalDecorator' warning and forces 'prettier' to single quote
* Run yarn lint to autofix with new ruleset and worked down lint issues to zero

54 files changed, 575 insertions, 372 deletions

diff --git a/src/actions/index.js b/src/actions/index.js
index 9d3684edc..6f32732b9 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -17,7 +17,7 @@ import todos from '../features/todos/actions';
 import planSelection from '../features/planSelection/actions';
 import trialStatusBar from '../features/trialStatusBar/actions';
 
-const actions = Object.assign({}, {
+const actions = {
   service,
   recipe,
   recipePreview,
@@ -28,7 +28,7 @@ const actions = Object.assign({}, {
   news,
   settings,
   requests,
-});
+};
 
 export default Object.assign(
   defineActions(actions, PropTypes.checkPropTypes),
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index 75d18f234..8fdaed363 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -183,9 +183,7 @@ export default class ServerApi {
   async createService(recipeId, data) {
     const request = await sendAuthRequest(`${apiBase()}/service`, {
       method: 'POST',
-      body: JSON.stringify(Object.assign({
-        recipeId,
-      }, data)),
+      body: JSON.stringify({ recipeId, ...data }),
     });
     if (!request.ok) {
       throw request;
diff --git a/src/api/utils/auth.js b/src/api/utils/auth.js
index 5952cfe11..9f718f171 100644
--- a/src/api/utils/auth.js
+++ b/src/api/utils/auth.js
@@ -4,14 +4,15 @@ import localStorage from 'mobx-localstorage';
 export const prepareAuthRequest = (options = { method: 'GET' }, auth = true) => {
   const request = Object.assign(options, {
     mode: 'cors',
-    headers: Object.assign({
+    headers: {
       'Content-Type': 'application/json',
       'X-Franz-Source': 'desktop',
       'X-Franz-Version': app.getVersion(),
       'X-Franz-platform': process.platform,
       'X-Franz-Timezone-Offset': new Date().getTimezoneOffset(),
       'X-Franz-System-Locale': app.getLocale(),
-    }, options.headers),
+      ...options.headers,
+    },
   });
 
   if (auth) {
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 3e34c3162..3073cad73 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -28,7 +28,9 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Import extends Component {
+export default
+@observer
+class Import extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
     onSubmit: PropTypes.func.isRequired,
@@ -40,17 +42,21 @@ export default @observer class Import extends Component {
     intl: intlShape,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     const config = {
       fields: {
-        import: [...this.props.services.filter(s => s.recipe).map(s => ({
-          fields: {
-            add: {
-              default: true,
-              options: s,
-            },
-          },
-        }))],
+        import: [
+          ...this.props.services
+            .filter((s) => s.recipe)
+            .map((s) => ({
+              fields: {
+                add: {
+                  default: true,
+                  options: s,
+                },
+              },
+            })),
+        ],
       },
     };
 
@@ -62,9 +68,12 @@ export default @observer class Import extends Component {
     e.preventDefault();
     this.form.submit({
       onSuccess: (form) => {
-        const servicesImport = form.values().import
-          .map((value, i) => !value.add || services.filter(s => s.recipe)[i])
-          .filter(s => typeof s !== 'boolean');
+        const servicesImport = form
+          .values()
+          .import.map(
+            (value, i) => !value.add || services.filter((s) => s.recipe)[i],
+          )
+          .filter((s) => typeof s !== 'boolean');
 
         this.props.onSubmit({ services: servicesImport });
       },
@@ -76,37 +85,31 @@ export default @observer class Import extends Component {
     const { intl } = this.context;
     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)}>
-            <img
-              src="./assets/images/logo.svg"
-              className="auth__logo"
-              alt=""
-            />
-            <h1>
-              {intl.formatMessage(messages.headline)}
-            </h1>
+          <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>
             <table className="service-table available-services">
               <tbody>
                 {this.form.$('import').map((service, i) => (
-                  <tr
-                    key={service.id}
-                    className="service-table__row"
-                  >
+                  <tr key={service.id} className="service-table__row">
                     <td className="service-table__toggle">
-                      <Toggle
-                        field={service.$('add')}
-                        showLabel={false}
-                      />
+                      <Toggle field={service.$('add')} showLabel={false} />
                     </td>
                     <td className="service-table__column-icon">
                       <img
-                        src={availableServices[i].custom_icon || availableServices[i].recipe.icons.svg}
+                        src={
+                          availableServices[i].custom_icon
+                          || availableServices[i].recipe.icons.svg
+                        }
                         className={classnames({
                           'service-table__icon': true,
                           'has-custom-icon': availableServices[i].custom_icon,
@@ -125,14 +128,18 @@ export default @observer class Import extends Component {
             </table>
             {unavailableServices.length > 0 && (
               <div className="unavailable-services">
-                <strong>{intl.formatMessage(messages.notSupportedHeadline)}</strong>
+                <strong>
+                  {intl.formatMessage(messages.notSupportedHeadline)}
+                </strong>
                 <p>
-                  {services.filter(s => !s.recipe).map((service, i) => (
-                    <span key={service.id}>
-                      {service.name !== '' ? service.name : service.service}
-                      {unavailableServices.length > i + 1 ? ', ' : ''}
-                    </span>
-                  ))}
+                  {services
+                    .filter((s) => !s.recipe)
+                    .map((service, i) => (
+                      <span key={service.id}>
+                        {service.name !== '' ? service.name : service.service}
+                        {unavailableServices.length > i + 1 ? ', ' : ''}
+                      </span>
+                    ))}
                 </p>
               </div>
             )}
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index fd957ee73..4b4d63a6b 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -43,7 +43,9 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Invite extends Component {
+export default
+@observer
+class Invite extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     embed: PropTypes.bool,
@@ -63,36 +65,41 @@ export default @observer class Invite extends Component {
 
   state = { showSuccessInfo: false };
 
-  componentWillMount() {
-    const handlers = {
-      onChange: () => {
-        this.setState({ showSuccessInfo: false });
-      },
-    };
-
-    this.form = new Form({
-      fields: {
-        invite: [...Array(3).fill({
-          fields: {
-            name: {
-              label: this.context.intl.formatMessage(messages.nameLabel),
-              placeholder: this.context.intl.formatMessage(messages.nameLabel),
-              handlers,
-              // related: ['invite.0.email'], // path accepted but does not work
-            },
-            email: {
-              label: this.context.intl.formatMessage(messages.emailLabel),
-              placeholder: this.context.intl.formatMessage(messages.emailLabel),
-              handlers,
-              validators: [email],
-            },
-          },
-        })],
+  componentDidMount() {
+    this.form = new Form(
+      {
+        fields: {
+          invite: [
+            ...Array(3).fill({
+              fields: {
+                name: {
+                  label: this.context.intl.formatMessage(messages.nameLabel),
+                  placeholder: this.context.intl.formatMessage(
+                    messages.nameLabel,
+                  ),
+                  onChange: () => {
+                    this.setState({ showSuccessInfo: false });
+                  },
+                  // related: ['invite.0.email'], // path accepted but does not work
+                },
+                email: {
+                  label: this.context.intl.formatMessage(messages.emailLabel),
+                  placeholder: this.context.intl.formatMessage(
+                    messages.emailLabel,
+                  ),
+                  onChange: () => {
+                    this.setState({ showSuccessInfo: false });
+                  },
+                  validators: [email],
+                },
+              },
+            }),
+          ],
+        },
       },
-    }, this.context.intl);
-  }
+      this.context.intl,
+    );
 
-  componentDidMount() {
     document.querySelector('input:first-child').focus();
   }
 
@@ -117,9 +124,10 @@ export default @observer class Invite extends Component {
     const { intl } = this.context;
     const { embed, isInviteSuccessful, isLoadingInvite } = this.props;
 
-    const atLeastOneEmailAddress = form.$('invite')
-      .map(invite => invite.$('email').value)
-      .some(emailValue => emailValue.trim() !== '');
+    const atLeastOneEmailAddress = form
+      .$('invite')
+      .map((invite) => invite.$('email').value)
+      .some((emailValue) => emailValue.trim() !== '');
 
     const sendButtonClassName = classnames({
       auth__button: true,
@@ -127,7 +135,7 @@ export default @observer class Invite extends Component {
     });
 
     const renderForm = (
-      <Fragment>
+      <>
         {this.state.showSuccessInfo && isInviteSuccessful && (
           <Appear>
             <Infobox
@@ -140,18 +148,17 @@ export default @observer 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=""
-            />
+            <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} />
@@ -175,17 +182,27 @@ export default @observer class Invite extends Component {
             </Link>
           )}
         </form>
-      </Fragment>
+      </>
     );
 
     return (
-      <div className={!embed ? 'auth__container auth__container--signup' : 'settings__main'}>
+      <div
+        className={
+          !embed ? 'auth__container auth__container--signup' : 'settings__main'
+        }
+      >
         {embed && (
           <div className="settings__header">
-            <h1>{this.context.intl.formatMessage(messages.settingsHeadline)}</h1>
+            <h1>
+              {this.context.intl.formatMessage(messages.settingsHeadline)}
+            </h1>
           </div>
         )}
-        {!embed ? <div>{renderForm}</div> : <div className="settings__body invite__form">{renderForm}</div>}
+        {!embed ? (
+          <div>{renderForm}</div>
+        ) : (
+          <div className="settings__body invite__form">{renderForm}</div>
+        )}
       </div>
     );
   }
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index fecc6ba56..2fcabe54d 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -10,7 +10,6 @@ import { Button } from '@meetfranz/forms';
 import { FeatureItem } from '../ui/FeatureItem';
 import { FeatureList } from '../ui/FeatureList';
 
-
 const messages = defineMessages({
   headline: {
     id: 'pricing.trial.headline.pro',
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 6e742e0c1..5f2fac64b 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -72,7 +72,6 @@ export default @inject('actions') @observer class Login extends Component {
           <br />
           <br />
 
-
           <Link to={changeServerRoute}>
             <span style={{
               textAlign: 'center',
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 444d5fea4..3c0fed32b 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -109,7 +109,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     return (
       <div className={webviewClasses}>
         {service.isActive && service.isEnabled && (
-          <Fragment>
+          <>
             {service.hasCrashed && (
               <WebviewCrashHandler
                 name={service.recipe.name}
@@ -131,10 +131,10 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
                 edit={edit}
               />
             )}
-          </Fragment>
+          </>
         )}
         {!service.isEnabled ? (
-          <Fragment>
+          <>
             {service.isActive && (
               <ServiceDisabled
                 name={service.recipe.name}
@@ -142,7 +142,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
                 enable={enable}
               />
             )}
-          </Fragment>
+          </>
         ) : (
           <>
             {(!service.isHibernating || service.isHibernationEnabled) ? (
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 7cf02c237..caa3cf9aa 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -34,7 +34,6 @@ const messages = defineMessages({
   },
 });
 
-
 const styles = {
   confettiContainer: {
     position: 'absolute',
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 7a69dba87..b62940c06 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -43,7 +43,6 @@ export default @observer class WebviewCrashHandler extends Component {
 
   countdownIntervalTimeout = ms('1s');
 
-
   componentDidMount() {
     const { reload } = this.props;
 
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index 72ba7b2e3..5b3b754fa 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -1,38 +1,55 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
 
 import ErrorBoundary from '../util/ErrorBoundary';
 import { oneOrManyChildElements } from '../../prop-types';
 import Appear from '../ui/effects/Appear';
 
-export default @observer class SettingsLayout extends Component {
+const messages = defineMessages({
+  closeSettings: {
+    id: 'settings.app.closeSettings',
+    defaultMessage: '!!!Close settings',
+  },
+});
+
+export default
+@observer
+class SettingsLayout extends Component {
   static propTypes = {
     navigation: PropTypes.element.isRequired,
     children: oneOrManyChildElements.isRequired,
     closeSettings: PropTypes.func.isRequired,
   };
 
-  componentWillMount() {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
   }
 
   componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown.bind(this), false);
+    document.removeEventListener(
+      'keydown',
+      this.handleKeyDown.bind(this),
+      false,
+    );
   }
 
   handleKeyDown(e) {
-    if (e.keyCode === 27) { // escape key
+    if (e.keyCode === 27) {
+      // escape key
       this.props.closeSettings();
     }
   }
 
   render() {
-    const {
-      navigation,
-      children,
-      closeSettings,
-    } = this.props;
+    const { navigation, children, closeSettings } = this.props;
+
+    const { intl } = this.context;
 
     return (
       <Appear transitionName="fadeIn-fast">
@@ -42,6 +59,7 @@ export default @observer class SettingsLayout extends Component {
               type="button"
               className="settings-wrapper__action"
               onClick={closeSettings}
+              aria-label={intl.formatMessage(messages.closeSettings)}
             />
             <div className="settings franz-form">
               {navigation}
@@ -50,6 +68,7 @@ export default @observer class SettingsLayout extends Component {
                 type="button"
                 className="settings__close mdi mdi-close"
                 onClick={closeSettings}
+                aria-label={intl.formatMessage(messages.closeSettings)}
               />
             </div>
           </ErrorBoundary>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 1bbc1f1d4..a8501670b 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -311,14 +311,14 @@ export default @observer class EditServiceForm extends Component {
                 {recipe.hasCustomUrl && (
                   <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
                     {user.isPremium || recipe.author.find(a => a.email === user.email) ? (
-                      <Fragment>
+                      <>
                         <Input field={form.$('customUrl')} />
                         {form.error === 'url-validation-error' && (
                           <p className="franz-form__error">
                             {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })}
                           </p>
                         )}
-                      </Fragment>
+                      </>
                     ) : (
                       <div className="center premium-info">
                         <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p>
@@ -360,12 +360,12 @@ export default @observer class EditServiceForm extends Component {
                   <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
                   <Toggle field={form.$('isBadgeEnabled')} />
                   {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
-                    <Fragment>
+                    <>
                       <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
                       <p className="settings__help">
                         {intl.formatMessage(messages.indirectMessageInfo)}
                       </p>
-                    </Fragment>
+                    </>
                   )}
                 </div>
 
@@ -389,8 +389,7 @@ export default @observer class EditServiceForm extends Component {
                         <Slider field={form.$('darkReaderContrast')} />
                         <Slider field={form.$('darkReaderSepia')} />
                       </>
-                    )
-                  }
+                    )}
                 </div>
               </div>
               <div className="service-icon">
@@ -425,7 +424,7 @@ export default @observer class EditServiceForm extends Component {
                   </h3>
                   <Toggle field={form.$('proxy.isEnabled')} />
                   {form.$('proxy.isEnabled').value && (
-                    <Fragment>
+                    <>
                       <div className="grid">
                         <div className="grid__row">
                           <Input field={form.$('proxy.host')} className="proxyHost" />
@@ -449,7 +448,7 @@ export default @observer class EditServiceForm extends Component {
                         <span className="mdi mdi-information" />
                         {intl.formatMessage(messages.proxyInfo)}
                       </p>
-                    </Fragment>
+                    </>
                   )}
                 </div>
               </PremiumFeatureContainer>
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 4ba7dc720..98a119bfa 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -567,7 +567,7 @@ export default @observer class EditSettingsForm extends Component {
                   condition={!isSpellcheckerIncludedInCurrentPlan}
                   gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
                 >
-                  <Fragment>
+                  <>
                     <Toggle
                       field={form.$('enableSpellchecking')}
                     />
@@ -577,7 +577,7 @@ export default @observer class EditSettingsForm extends Component {
                     {isMac && form.$('enableSpellchecking').value && (
                       <p>{intl.formatMessage(messages.spellCheckerLanguageInfo)}</p>
                     )}
-                  </Fragment>
+                  </>
                 </PremiumFeatureContainer>
                 <a
                   href={FRANZ_TRANSLATION}
@@ -679,18 +679,15 @@ export default @observer class EditSettingsForm extends Component {
                 <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">Franz</a>
 
-
                   , a project published
                   under the
                   {' '}
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index f26f4cc0c..602d6e490 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -98,7 +98,6 @@ const styles = {
   },
 };
 
-
 export default @injectSheet(styles) @observer class TeamDashboard extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
index e831eb47b..6a8c7645f 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.js
@@ -55,7 +55,7 @@ export default @observer class ImageUpload extends Component {
         </label>
         <div className="image-upload">
           {(field.value && field.value !== 'delete') || this.state.path ? (
-            <Fragment>
+            <>
               <div
                 className="image-upload__preview"
                 style={{
@@ -80,7 +80,7 @@ export default @observer class ImageUpload extends Component {
                 </button>
                 <div className="image-upload__action-background" />
               </div>
-            </Fragment>
+            </>
           ) : (
             <Dropzone
               ref={(node) => {
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index 612399e9f..bd2af2296 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -3,11 +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 { oneOrManyChildElements } from '../../prop-types';
 import Appear from './effects/Appear';
 
-export default @observer class InfoBar extends Component {
+const messages = defineMessages({
+  hide: {
+    id: 'infobar.hide',
+    defaultMessage: '!!!Hide',
+  },
+});
+
+export default
+@observer
+class InfoBar extends Component {
   static propTypes = {
     // eslint-disable-next-line
     children: PropTypes.any.isRequired,
@@ -32,6 +42,10 @@ export default @observer class InfoBar extends Component {
     onHide: () => null,
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   render() {
     const {
       children,
@@ -45,6 +59,8 @@ export default @observer class InfoBar extends Component {
       onHide,
     } = this.props;
 
+    const { intl } = this.context;
+
     let transitionName = 'slideUp';
     if (position === 'top') {
       transitionName = 'slideDown';
@@ -63,11 +79,7 @@ export default @observer class InfoBar extends Component {
         <div className="info-bar__content">
           {children}
           {ctaLabel && (
-            <button
-              type="button"
-              className="info-bar__cta"
-              onClick={onClick}
-            >
+            <button type="button" className="info-bar__cta" onClick={onClick}>
               <Loader
                 loaded={!ctaLoading}
                 lines={10}
@@ -84,6 +96,7 @@ export default @observer class InfoBar extends Component {
             type="button"
             className="info-bar__close mdi mdi-close"
             onClick={onHide}
+            aria-label={intl.formatMessage(messages.hide)}
           />
         )}
       </Appear>
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index 0917ee9f0..73b48b957 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -3,8 +3,18 @@ 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';
 
-export default @observer class Infobox extends Component {
+const messages = defineMessages({
+  dismiss: {
+    id: 'infobox.dismiss',
+    defaultMessage: '!!!Dismiss',
+  },
+});
+
+export default
+@observer
+class Infobox extends Component {
   static propTypes = {
     children: PropTypes.any.isRequired, // eslint-disable-line
     icon: PropTypes.string,
@@ -28,6 +38,10 @@ export default @observer class Infobox extends Component {
     onSeen: () => null,
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   state = {
     dismissed: false,
   };
@@ -49,6 +63,8 @@ export default @observer class Infobox extends Component {
       onDismiss,
     } = this.props;
 
+    const { intl } = this.context;
+
     if (this.state.dismissed) {
       return null;
     }
@@ -61,18 +77,10 @@ export default @observer class Infobox extends Component {
           'infobox--default': !type,
         })}
       >
-        {icon && (
-          <i className={`mdi mdi-${icon}`} />
-        )}
-        <div className="infobox__content">
-          {children}
-        </div>
+        {icon && <i className={`mdi mdi-${icon}`} />}
+        <div className="infobox__content">{children}</div>
         {ctaLabel && (
-          <button
-            className="infobox__cta"
-            onClick={ctaOnClick}
-            type="button"
-          >
+          <button className="infobox__cta" onClick={ctaOnClick} type="button">
             <Loader
               loaded={!ctaLoading}
               lines={10}
@@ -91,6 +99,7 @@ export default @observer class Infobox extends Component {
               if (onDismiss) onDismiss();
             }}
             className="infobox__delete mdi mdi-close"
+            aria-label={intl.formatMessage(messages.dismiss)}
           />
         )}
       </div>
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 4e3eb4ab8..7417fef1c 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -3,10 +3,20 @@ 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 { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
 
-export default @observer class Input extends Component {
+const messages = defineMessages({
+  passwordToggle: {
+    id: 'settings.app.form.passwordToggle',
+    defaultMessage: '!!!Password toggle',
+  },
+});
+
+export default
+@observer
+class Input extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
@@ -28,10 +38,14 @@ export default @observer class Input extends Component {
     suffix: '',
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   state = {
     showPassword: false,
     passwordScore: 0,
-  }
+  };
 
   inputElement = null;
 
@@ -68,6 +82,8 @@ export default @observer class Input extends Component {
 
     const { passwordScore } = this.state;
 
+    const { intl } = this.context;
+
     let { type } = field;
     if (type === 'password' && this.state.showPassword) {
       type = 'text';
@@ -82,9 +98,7 @@ export default @observer class Input extends Component {
         })}
       >
         <div className="franz-form__input-wrapper">
-          {prefix && (
-            <span className="franz-form__input-prefix">{prefix}</span>
-          )}
+          {prefix && <span className="franz-form__input-prefix">{prefix}</span>}
           <input
             id={field.id}
             type={type}
@@ -92,15 +106,15 @@ export default @observer 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) => { this.inputElement = element; }}
+            ref={(element) => {
+              this.inputElement = element;
+            }}
             disabled={field.disabled}
           />
-          {suffix && (
-            <span className="franz-form__input-suffix">{suffix}</span>
-          )}
+          {suffix && <span className="franz-form__input-suffix">{suffix}</span>}
           {showPasswordToggle && (
             <button
               type="button"
@@ -110,8 +124,11 @@ export default @observer class Input extends Component {
                 'mdi-eye': !this.state.showPassword,
                 'mdi-eye-off': this.state.showPassword,
               })}
-              onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))}
-              tabIndex="-1"
+              onClick={() => this.setState((prevState) => ({
+                showPassword: !prevState.showPassword,
+              }))}
+              tabIndex={-1}
+              aria-label={intl.formatMessage(messages.passwordToggle)}
             />
           )}
           {scorePassword && (
@@ -128,20 +145,11 @@ export default @observer class Input extends Component {
           )}
         </div>
         {field.label && showLabel && (
-          <label
-            className="franz-form__label"
-            htmlFor={field.name}
-          >
+          <label className="franz-form__label" htmlFor={field.name}>
             {field.label}
           </label>
         )}
-        {field.error && (
-          <div
-            className="franz-form__error"
-          >
-            {field.error}
-          </div>
-        )}
+        {field.error && <div className="franz-form__error">{field.error}</div>}
       </div>
     );
   }
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
index 16881a7f7..546b05a4e 100644
--- a/src/components/ui/Tabs/TabItem.js
+++ b/src/components/ui/Tabs/TabItem.js
@@ -11,7 +11,7 @@ export default class TabItem extends Component {
     const { children } = this.props;
 
     return (
-      <Fragment>{children}</Fragment>
+      <>{children}</>
     );
   }
 }
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index 196cddc66..7ece29fbe 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -5,7 +5,9 @@ import classnames from 'classnames';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
-export default @observer class Tab extends Component {
+export default
+@observer
+class Tab extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
     active: PropTypes.number,
@@ -15,7 +17,7 @@ export default @observer class Tab extends Component {
     active: 0,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     this.setState({ active: this.props.active });
   }
 
@@ -25,7 +27,7 @@ export default @observer class Tab extends Component {
 
   render() {
     const { children: childElements } = this.props;
-    const children = childElements.filter(c => !!c);
+    const children = childElements.filter((c) => !!c);
 
     if (children.length === 1) {
       return <div>{children}</div>;
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 2c9cac084..db3b2a4a7 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -85,8 +85,7 @@ class AccountScreen extends Component {
           openEditAccount={() => this.handleWebsiteLink('/user/profile')}
           upgradeToPro={() => upgradeAccount({
             planId: features.features.pricingConfig.plans.pro.yearly.id,
-          })
-          }
+          })}
           openBilling={() => this.handleWebsiteLink('/user/billing')}
           openInvoices={() => this.handleWebsiteLink('/user/invoices')}
         />
diff --git a/src/containers/settings/SettingsWindow.js b/src/containers/settings/SettingsWindow.js
index 89c2aaa27..9bb64b6fe 100644
--- a/src/containers/settings/SettingsWindow.js
+++ b/src/containers/settings/SettingsWindow.js
@@ -28,7 +28,6 @@ export default @inject('stores', 'actions') @observer class SettingsContainer ex
     const { children, stores } = this.props;
     const { closeSettings } = this.props.actions.ui;
 
-
     const navigation = (
       <Navigation
         serviceCount={stores.services.all.length}
diff --git a/src/containers/subscription/SubscriptionPopupScreen.js b/src/containers/subscription/SubscriptionPopupScreen.js
index 0de5a87c4..43966b6a4 100644
--- a/src/containers/subscription/SubscriptionPopupScreen.js
+++ b/src/containers/subscription/SubscriptionPopupScreen.js
@@ -5,7 +5,6 @@ import { inject, observer } from 'mobx-react';
 import SubscriptionPopup from '../../components/subscription/SubscriptionPopup';
 import { isDevMode } from '../../environment';
 
-
 export default @inject('stores', 'actions') @observer class SubscriptionPopupScreen extends Component {
   state = {
     complete: false,
@@ -33,7 +32,6 @@ export default @inject('stores', 'actions') @observer class SubscriptionPopupScr
   }
 }
 
-
 SubscriptionPopupScreen.wrappedComponent.propTypes = {
   router: PropTypes.shape({
     params: PropTypes.shape({
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
index 659cb4961..21964b108 100644
--- a/src/features/announcements/components/AnnouncementScreen.js
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -185,7 +185,6 @@ const styles = theme => ({
   },
 });
 
-
 @inject('stores', 'actions') @injectSheet(styles) @observer
 class AnnouncementScreen extends Component {
   static propTypes = {
diff --git a/src/features/announcements/index.js b/src/features/announcements/index.js
index 369ded1b2..28f0b10ed 100644
--- a/src/features/announcements/index.js
+++ b/src/features/announcements/index.js
@@ -7,7 +7,6 @@ export const GA_CATEGORY_ANNOUNCEMENTS = 'Announcements';
 
 export const announcementsStore = new AnnouncementsStore();
 
-
 export default function initAnnouncements(stores, actions) {
   const { features } = stores;
 
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index 5ef01a47e..f0c2bdc82 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -59,7 +59,6 @@ export default function init(stores) {
 
             setVisibility(true);
 
-
             setTimeout(() => {
               debug('Resetting app delay');
 
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js
index 3855fedf1..e90532dec 100644
--- a/src/features/planSelection/components/PlanItem.js
+++ b/src/features/planSelection/components/PlanItem.js
@@ -111,7 +111,6 @@ const styles = theme => ({
   },
 });
 
-
 export default @observer @injectSheet(styles) class PlanItem extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
index 4308b8f09..e7949a0be 100644
--- a/src/features/publishDebugInfo/Component.js
+++ b/src/features/publishDebugInfo/Component.js
@@ -13,7 +13,6 @@ import { DEBUG_API } from '../../config';
 import AppStore from '../../stores/AppStore';
 import ServicesStore from '../../stores/ServicesStore';
 
-
 const messages = defineMessages({
   title: {
     id: 'feature.publishDebugInfo.title',
diff --git a/src/features/serviceLimit/components/LimitReachedInfobox.js b/src/features/serviceLimit/components/LimitReachedInfobox.js
index 83aec4c40..424c92990 100644
--- a/src/features/serviceLimit/components/LimitReachedInfobox.js
+++ b/src/features/serviceLimit/components/LimitReachedInfobox.js
@@ -34,7 +34,6 @@ const styles = theme => ({
   },
 });
 
-
 @inject('stores', 'actions') @injectSheet(styles) @observer
 class LimitReachedInfobox extends Component {
   static propTypes = {
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index dccb818a6..ca8460f94 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 
 import { TODOS_PARTITION_ID } from '../../../config';
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     background: theme.colorBackground,
     position: 'relative',
@@ -34,7 +34,6 @@ const styles = theme => ({
     width: 5,
     zIndex: 400,
     background: theme.todos.dragIndicator.background,
-
   },
   premiumContainer: {
     display: 'flex',
@@ -68,7 +67,8 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class TodosWebview extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -89,15 +89,11 @@ class TodosWebview extends Component {
     width: 300,
   };
 
-  componentWillMount() {
-    const { width } = this.props;
-
+  componentDidMount() {
     this.setState({
-      width,
+      width: this.props.width,
     });
-  }
 
-  componentDidMount() {
     this.node.addEventListener('mousemove', this.resizePanel.bind(this));
     this.node.addEventListener('mouseup', this.stopResize.bind(this));
     this.node.addEventListener('mouseleave', this.stopResize.bind(this));
@@ -114,10 +110,7 @@ class TodosWebview extends Component {
   resizePanel(e) {
     const { minWidth } = this.props;
 
-    const {
-      isDragging,
-      initialPos,
-    } = this.state;
+    const { isDragging, initialPos } = this.state;
 
     if (isDragging && Math.abs(e.clientX - window.innerWidth) > minWidth) {
       const delta = e.clientX - initialPos;
@@ -129,16 +122,9 @@ class TodosWebview extends Component {
   }
 
   stopResize() {
-    const {
-      resize,
-      minWidth,
-    } = this.props;
+    const { resize, minWidth } = this.props;
 
-    const {
-      isDragging,
-      delta,
-      width,
-    } = this.state;
+    const { isDragging, delta, width } = this.state;
 
     if (isDragging) {
       let newWidth = width + (delta < 0 ? Math.abs(delta) : -Math.abs(delta));
@@ -176,11 +162,7 @@ class TodosWebview extends Component {
       isTodoUrlValid,
     } = this.props;
 
-    const {
-      width,
-      delta,
-      isDragging,
-    } = this.state;
+    const { width, delta, isDragging } = this.state;
 
     let displayedWidth = isVisible ? width : 0;
     if (isTodosServiceActive) {
@@ -197,13 +179,18 @@ class TodosWebview extends Component {
         })}
         style={{ width: displayedWidth }}
         onMouseUp={() => this.stopResize()}
-        ref={(node) => { this.node = node; }}
+        ref={(node) => {
+          this.node = node;
+        }}
         id="todos-panel"
       >
         <div
           className={classes.resizeHandler}
-          style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
-          onMouseDown={e => this.startResize(e)}
+          style={{
+            left: delta,
+            ...(isDragging ? { width: 600, marginLeft: -200 } : {}),
+          }} // This hack is required as resizing with webviews beneath behaves quite bad
+          onMouseDown={(e) => this.startResize(e)}
         />
         {isDragging && (
           <div
@@ -221,7 +208,9 @@ class TodosWebview extends Component {
             }}
             partition={TODOS_PARTITION_ID}
             preload="./features/todos/preload.js"
-            ref={(webview) => { this.webview = webview ? webview.view : null; }}
+            ref={(webview) => {
+              this.webview = webview ? webview.view : null;
+            }}
             useragent={userAgent}
             src={todoUrl}
           />
diff --git a/src/features/trialStatusBar/containers/TrialStatusBarScreen.js b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
index 715251854..e0f5ab5f2 100644
--- a/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
+++ b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
@@ -12,7 +12,8 @@ import { trialStatusBarStore } from '..';
 import { i18nPlanName } from '../../../helpers/plan-helpers';
 import PaymentStore from '../../../stores/PaymentStore';
 
-@inject('stores', 'actions') @observer
+@inject('stores', 'actions')
+@observer
 class TrialStatusBarScreen extends Component {
   static contextTypes = {
     intl: intlShape,
@@ -41,7 +42,9 @@ class TrialStatusBarScreen extends Component {
 
   calculateRestTime() {
     const { trialEndTime } = trialStatusBarStore;
-    const percent = Math.abs(100 - Math.abs(trialEndTime.asMilliseconds()) * 100 / ms('14d')).toFixed(2);
+    const percent = (
+      Math.abs(100 - Math.abs(trialEndTime.asMilliseconds()) * 100) / ms('14d')
+    ).toFixed(2);
     const restTime = trialEndTime.humanize();
     const hasEnded = trialEndTime.asMilliseconds() > 0;
 
@@ -58,18 +61,19 @@ class TrialStatusBarScreen extends Component {
     });
   }
 
-
   render() {
     const { intl } = this.context;
 
     const {
-      showOverlay,
-      percent,
-      restTime,
-      hasEnded,
+      showOverlay, percent, restTime, hasEnded,
     } = this.state;
 
-    if (!trialStatusBarStore || !trialStatusBarStore.isFeatureActive || !showOverlay || !trialStatusBarStore.showTrialStatusBarOverlay) {
+    if (
+      !trialStatusBarStore
+      || !trialStatusBarStore.isFeatureActive
+      || !showOverlay
+      || !trialStatusBarStore.showTrialStatusBarOverlay
+    ) {
       return null;
     }
 
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index f23bc6cbf..0ff836cba 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -40,7 +40,8 @@ const messages = defineMessages({
   },
   keepLoadedInfo: {
     id: 'settings.workspace.form.keepLoadedInfo',
-    defaultMessage: '!!!*This option will be overwritten by the global "Keep all workspaces loaded" option.',
+    defaultMessage:
+      '!!!*This option will be overwritten by the global "Keep all workspaces loaded" option.',
   },
   servicesInWorkspaceHeadline: {
     id: 'settings.workspace.form.servicesInWorkspaceHeadline',
@@ -68,7 +69,8 @@ const styles = () => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class EditWorkspaceForm extends Component {
   static contextTypes = {
     intl: intlShape,
@@ -86,6 +88,7 @@ class EditWorkspaceForm extends Component {
 
   form = this.prepareWorkspaceForm(this.props.workspace);
 
+  // eslint-disable-next-line react/no-deprecated
   componentWillReceiveProps(nextProps) {
     const { workspace } = this.props;
     if (workspace.id !== nextProps.workspace.id) {
@@ -164,16 +167,14 @@ class EditWorkspaceForm extends Component {
             </Link>
           </span>
           <span className="separator" />
-          <span className="settings__header-item">
-            {workspace.name}
-          </span>
+          <span className="settings__header-item">{workspace.name}</span>
         </div>
         <div className="settings__body">
           <div className={classes.nameInput}>
             <Input {...form.$('name').bind()} />
             <Toggle field={form.$('keepLoaded')} />
             <p className={`${classes.keepLoadedInfo} franz-form__label`}>
-              { intl.formatMessage(messages.keepLoadedInfo) }
+              {intl.formatMessage(messages.keepLoadedInfo)}
             </p>
           </div>
           <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2>
@@ -187,11 +188,13 @@ class EditWorkspaceForm 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>
             ) : (
-              <Fragment>
-                {services.map(s => (
+              <>
+                {services.map((s) => (
                   <WorkspaceServiceListItem
                     key={s.id}
                     service={s}
@@ -199,7 +202,7 @@ class EditWorkspaceForm extends Component {
                     onToggle={() => this.toggleService(s)}
                   />
                 ))}
-              </Fragment>
+              </>
             )}
           </div>
         </div>
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index a90bb37e9..cfaacd56e 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -184,7 +184,7 @@ class WorkspacesDashboard extends Component {
               {getUserWorkspacesRequest.isExecuting ? (
                 <Loader />
               ) : (
-                <Fragment>
+                <>
                   {/* ===== Workspace could not be loaded error ===== */}
                   {getUserWorkspacesRequest.error ? (
                     <Infobox
@@ -197,7 +197,7 @@ class WorkspacesDashboard extends Component {
                       {intl.formatMessage(messages.workspacesRequestFailed)}
                     </Infobox>
                   ) : (
-                    <Fragment>
+                    <>
                       {workspaces.length === 0 ? (
                         <div className="align-middle settings__empty-state">
                           {/* ===== Workspaces empty state ===== */}
@@ -222,9 +222,9 @@ class WorkspacesDashboard extends Component {
                           </tbody>
                         </table>
                       )}
-                    </Fragment>
+                    </>
                   )}
-                </Fragment>
+                </>
               )}
             </>
           )}
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js
index 5eca71259..ba7606031 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.js
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.js
@@ -32,9 +32,7 @@ class EditWorkspaceScreen extends Component {
     const { workspaceBeingEdited } = workspaceStore;
     const { actions } = this.props;
     const workspace = new Workspace(
-      Object.assign({
-        saving: true,
-      }, workspaceBeingEdited, values),
+      ({ saving: true, ...workspaceBeingEdited, ...values }),
     );
     actions.workspaces.update({ workspace });
   };
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index bddcb6eb4..632f3c299 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -1,8 +1,4 @@
-import {
-  computed,
-  observable,
-  action,
-} from 'mobx';
+import { computed, observable, action } from 'mobx';
 import localStorage from 'mobx-localstorage';
 import { matchRoute } from '../../helpers/routing-helpers';
 import { workspaceActions } from './actions';
@@ -105,7 +101,10 @@ export default class WorkspacesStore extends FeatureStore {
       [workspaceActions.update, this._update],
       [workspaceActions.activate, this._setActiveWorkspace],
       [workspaceActions.deactivate, this._deactivateActiveWorkspace],
-      [workspaceActions.toggleKeepAllWorkspacesLoadedSetting, this._toggleKeepAllWorkspacesLoadedSetting],
+      [
+        workspaceActions.toggleKeepAllWorkspacesLoadedSetting,
+        this._toggleKeepAllWorkspacesLoadedSetting,
+      ],
     ]);
     this._allActions = this._freeUserActions.concat(this._premiumUserActions);
     this._registerActions(this._allActions);
@@ -124,7 +123,9 @@ export default class WorkspacesStore extends FeatureStore {
       this._activateLastUsedWorkspaceReaction,
       this._setWorkspaceBeingEditedReaction,
     ]);
-    this._allReactions = this._freeUserReactions.concat(this._premiumUserReactions);
+    this._allReactions = this._freeUserReactions.concat(
+      this._premiumUserReactions,
+    );
 
     this._registerReactions(this._allReactions);
 
@@ -157,12 +158,12 @@ export default class WorkspacesStore extends FeatureStore {
 
   getWorkspaceServices(workspace) {
     const { services } = this.stores;
-    return workspace.services.map(id => services.one(id)).filter(s => !!s);
+    return workspace.services.map((id) => services.one(id)).filter((s) => !!s);
   }
 
   // ========== PRIVATE METHODS ========= //
 
-  _getWorkspaceById = id => this.workspaces.find(w => w.id === id);
+  _getWorkspaceById = (id) => this.workspaces.find((w) => w.id === id);
 
   _updateSettings = (changes) => {
     localStorage.setItem('workspaces', {
@@ -178,6 +179,7 @@ export default class WorkspacesStore extends FeatureStore {
   };
 
   @action _create = async ({ name }) => {
+    // eslint-disable-next-line no-useless-catch
     try {
       const workspace = await createWorkspaceRequest.execute(name);
       await getUserWorkspacesRequest.result.push(workspace);
@@ -188,6 +190,7 @@ export default class WorkspacesStore extends FeatureStore {
   };
 
   @action _delete = async ({ workspace }) => {
+    // eslint-disable-next-line no-useless-catch
     try {
       await deleteWorkspaceRequest.execute(workspace);
       await getUserWorkspacesRequest.result.remove(workspace);
@@ -198,6 +201,7 @@ export default class WorkspacesStore extends FeatureStore {
   };
 
   @action _update = async ({ workspace }) => {
+    // eslint-disable-next-line no-useless-catch
     try {
       await updateWorkspaceRequest.execute(workspace);
       // Path local result optimistically
@@ -235,7 +239,9 @@ export default class WorkspacesStore extends FeatureStore {
       this.activeWorkspace = null;
     }, 100);
     // Indicate that we are done switching to the default workspace
-    setTimeout(() => { this.isSwitchingWorkspace = false; }, 1000);
+    setTimeout(() => {
+      this.isSwitchingWorkspace = false;
+    }, 1000);
   };
 
   @action _toggleWorkspaceDrawer = () => {
@@ -255,7 +261,9 @@ export default class WorkspacesStore extends FeatureStore {
   };
 
   _toggleKeepAllWorkspacesLoadedSetting = async () => {
-    this._updateSettings({ keepAllWorkspacesLoaded: !this.settings.keepAllWorkspacesLoaded });
+    this._updateSettings({
+      keepAllWorkspacesLoaded: !this.settings.keepAllWorkspacesLoaded,
+    });
   };
 
   // Reactions
@@ -309,7 +317,9 @@ export default class WorkspacesStore extends FeatureStore {
 
   _openDrawerWithSettingsReaction = () => {
     const { router } = this.stores;
-    const isWorkspaceSettingsRoute = router.location.pathname.includes(WORKSPACES_ROUTES.ROOT);
+    const isWorkspaceSettingsRoute = router.location.pathname.includes(
+      WORKSPACES_ROUTES.ROOT,
+    );
     const isSwitchingToSettingsRoute = !this.isSettingsRouteActive && isWorkspaceSettingsRoute;
     const isLeavingSettingsRoute = !isWorkspaceSettingsRoute && this.isSettingsRouteActive;
 
@@ -321,7 +331,10 @@ export default class WorkspacesStore extends FeatureStore {
       }
     } else if (isLeavingSettingsRoute) {
       this.isSettingsRouteActive = false;
-      if (!this._wasDrawerOpenBeforeSettingsRoute && this.isWorkspaceDrawerOpen) {
+      if (
+        !this._wasDrawerOpenBeforeSettingsRoute
+        && this.isWorkspaceDrawerOpen
+      ) {
         workspaceActions.toggleWorkspaceDrawer();
       }
     }
@@ -334,7 +347,11 @@ export default class WorkspacesStore extends FeatureStore {
     // Loop through all workspaces and remove invalid service ids (locally)
     this.workspaces.forEach((workspace) => {
       workspace.services.forEach((serviceId) => {
-        if (servicesHaveBeenLoaded && !services.one(serviceId) && serviceId !== KEEP_WS_LOADED_USID) {
+        if (
+          servicesHaveBeenLoaded
+          && !services.one(serviceId)
+          && serviceId !== KEEP_WS_LOADED_USID
+        ) {
           workspace.services.remove(serviceId);
         }
       });
@@ -351,5 +368,5 @@ export default class WorkspacesStore extends FeatureStore {
       this._startActions(this._premiumUserActions);
       this._startReactions(this._premiumUserReactions);
     }
-  }
+  };
 }
diff --git a/src/i18n/apply-branding.js b/src/i18n/apply-branding.js
index 68ffb822a..40a07ded0 100644
--- a/src/i18n/apply-branding.js
+++ b/src/i18n/apply-branding.js
@@ -36,7 +36,6 @@ const replace = {
   '!!!': '',
 };
 
-
 const locales = path.join(__dirname, 'locales');
 const files = fs.readdirSync(locales);
 
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 8401184de..4ee96822e 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -664,169 +664,169 @@
         "defaultMessage": "!!!Hi {name}, welcome to Franz",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 17
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.headline.pro",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 14
         }
       },
       {
         "defaultMessage": "!!!We have a special treat for you.",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 21
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.intro.specialTreat",
         "start": {
           "column": 16,
-          "line": 19
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Enjoy the full Franz Professional experience completely free for 14 days.",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 25
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.intro.tryPro",
         "start": {
           "column": 10,
-          "line": 23
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!!Happy messaging,",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 29
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.intro.happyMessaging",
         "start": {
           "column": 18,
-          "line": 27
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!No strings attached",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 33
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.terms.headline",
         "start": {
           "column": 29,
-          "line": 31
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!No credit card required",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 37
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.terms.noCreditCard",
         "start": {
           "column": 16,
-          "line": 35
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!!Your free trial ends automatically after 14 days",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 41
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.terms.automaticTrialEnd",
         "start": {
           "column": 21,
-          "line": 39
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!Free trial (normally {currency}{price} per month)",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 45
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.terms.trialWorth",
         "start": {
           "column": 14,
-          "line": 43
+          "line": 42
         }
       },
       {
         "defaultMessage": "!!!Sorry, we could not activate your trial!",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 49
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.error",
         "start": {
           "column": 19,
-          "line": 47
+          "line": 46
         }
       },
       {
         "defaultMessage": "!!!Start my 14-day Franz Professional Trial",
         "end": {
           "column": 3,
-          "line": 54
+          "line": 53
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.cta.accept",
         "start": {
           "column": 13,
-          "line": 51
+          "line": 50
         }
       },
       {
         "defaultMessage": "!!!Start using Franz",
         "end": {
           "column": 3,
-          "line": 58
+          "line": 57
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.cta.start",
         "start": {
           "column": 12,
-          "line": 55
+          "line": 54
         }
       },
       {
         "defaultMessage": "!!!Continue to Ferdi",
         "end": {
           "column": 3,
-          "line": 62
+          "line": 61
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.cta.skip",
         "start": {
           "column": 11,
-          "line": 59
+          "line": 58
         }
       },
       {
         "defaultMessage": "!!!Franz Professional includes:",
         "end": {
           "column": 3,
-          "line": 66
+          "line": 65
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.features.headline",
         "start": {
           "column": 20,
-          "line": 63
+          "line": 62
         }
       }
     ],
@@ -3659,6 +3659,24 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Close settings",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/components/settings/SettingsLayout.js",
+        "id": "settings.app.closeSettings",
+        "start": {
+          "column": 17,
+          "line": 11
+        }
+      }
+    ],
+    "path": "src/components/settings/SettingsLayout.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!About Ferdi",
         "end": {
           "column": 3,
@@ -4562,6 +4580,60 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Hide",
+        "end": {
+          "column": 3,
+          "line": 15
+        },
+        "file": "src/components/ui/InfoBar.js",
+        "id": "infobar.hide",
+        "start": {
+          "column": 8,
+          "line": 12
+        }
+      }
+    ],
+    "path": "src/components/ui/InfoBar.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Dismiss",
+        "end": {
+          "column": 3,
+          "line": 12
+        },
+        "file": "src/components/ui/Infobox.js",
+        "id": "infobox.dismiss",
+        "start": {
+          "column": 11,
+          "line": 9
+        }
+      }
+    ],
+    "path": "src/components/ui/Infobox.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Password toggle",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/components/ui/Input.js",
+        "id": "settings.app.form.passwordToggle",
+        "start": {
+          "column": 18,
+          "line": 11
+        }
+      }
+    ],
+    "path": "src/components/ui/Input.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Upgrade account",
         "end": {
           "column": 3,
@@ -6070,91 +6142,91 @@
         "defaultMessage": "!!!Publish debug information",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 20
         },
         "file": "src/features/publishDebugInfo/Component.js",
         "id": "feature.publishDebugInfo.title",
         "start": {
           "column": 9,
-          "line": 18
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!Publishing your debug information helps us find issues and errors in Ferdi. By publishing your debug information you accept Ferdi Debugger's privacy policy and terms of service",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 24
         },
         "file": "src/features/publishDebugInfo/Component.js",
         "id": "feature.publishDebugInfo.info",
         "start": {
           "column": 8,
-          "line": 22
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!There was an error while trying to publish the debug information. Please try again later or view the console for more information.",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 28
         },
         "file": "src/features/publishDebugInfo/Component.js",
         "id": "feature.publishDebugInfo.error",
         "start": {
           "column": 9,
-          "line": 26
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!Privacy policy",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 32
         },
         "file": "src/features/publishDebugInfo/Component.js",
         "id": "feature.publishDebugInfo.privacy",
         "start": {
           "column": 11,
-          "line": 30
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Terms of service",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 36
         },
         "file": "src/features/publishDebugInfo/Component.js",
         "id": "feature.publishDebugInfo.terms",
         "start": {
           "column": 9,
-          "line": 34
+          "line": 33
         }
       },
       {
         "defaultMessage": "!!!Accept and publish",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 40
         },
         "file": "src/features/publishDebugInfo/Component.js",
         "id": "feature.publishDebugInfo.publish",
         "start": {
           "column": 11,
-          "line": 38
+          "line": 37
         }
       },
       {
         "defaultMessage": "!!!Your debug log was published and is now availible at",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 44
         },
         "file": "src/features/publishDebugInfo/Component.js",
         "id": "feature.publishDebugInfo.published",
         "start": {
           "column": 13,
-          "line": 42
+          "line": 41
         }
       }
     ],
@@ -6736,7 +6808,7 @@
         "defaultMessage": "!!!*This option will be overwritten by the global \"Keep all workspaces loaded\" option.",
         "end": {
           "column": 3,
-          "line": 44
+          "line": 45
         },
         "file": "src/features/workspaces/components/EditWorkspaceForm.js",
         "id": "settings.workspace.form.keepLoadedInfo",
@@ -6749,39 +6821,39 @@
         "defaultMessage": "!!!Services in this Workspace",
         "end": {
           "column": 3,
-          "line": 48
+          "line": 49
         },
         "file": "src/features/workspaces/components/EditWorkspaceForm.js",
         "id": "settings.workspace.form.servicesInWorkspaceHeadline",
         "start": {
           "column": 31,
-          "line": 45
+          "line": 46
         }
       },
       {
         "defaultMessage": "!!!Start by adding a service.",
         "end": {
           "column": 3,
-          "line": 52
+          "line": 53
         },
         "file": "src/features/workspaces/components/EditWorkspaceForm.js",
         "id": "settings.services.noServicesAdded",
         "start": {
           "column": 19,
-          "line": 49
+          "line": 50
         }
       },
       {
         "defaultMessage": "!!!Discover services",
         "end": {
           "column": 3,
-          "line": 56
+          "line": 57
         },
         "file": "src/features/workspaces/components/EditWorkspaceForm.js",
         "id": "settings.services.discoverServices",
         "start": {
           "column": 20,
-          "line": 53
+          "line": 54
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index fc25795a4..05a8e7486 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -84,10 +84,12 @@
   "infobar.buttonChangelog": "What is new?",
   "infobar.buttonInstallUpdate": "Restart & install update",
   "infobar.buttonReloadServices": "Reload services",
+  "infobar.hide": "Hide",
   "infobar.requiredRequestsFailed": "Could not load services and user information",
   "infobar.servicesUpdated": "Your services have been updated.",
   "infobar.trialActivated": "Your trial was successfully activated. Happy messaging!",
   "infobar.updateAvailable": "A new update for Ferdi is available.",
+  "infobox.dismiss": "Dismiss",
   "invite.email.label": "Email address",
   "invite.headline.friends": "Invite 3 of your friends or colleagues",
   "invite.name.label": "Name",
@@ -286,6 +288,7 @@
   "settings.app.buttonSearchForUpdate": "Check for updates",
   "settings.app.cacheInfo": "Ferdi cache is currently using {size} of disk space.",
   "settings.app.cacheNotCleared": "Couldn't clear all cache",
+  "settings.app.closeSettings": "Close settings",
   "settings.app.currentVersion": "Current version:",
   "settings.app.form.accentColor": "Accent color",
   "settings.app.form.adaptableDarkMode": "Synchronize dark mode with my OS's dark mode setting",
@@ -315,6 +318,7 @@
   "settings.app.form.minimizeToSystemTray": "Minimize Ferdi to system tray",
   "settings.app.form.navigationBarBehaviour": "Navigation bar behaviour",
   "settings.app.form.notifyTaskBarOnMessage": "Notify TaskBar/Dock on new message",
+  "settings.app.form.passwordToggle": "Password toggle",
   "settings.app.form.predefinedTodoServer": "Todo Server",
   "settings.app.form.privateNotifications": "Don't show message content in notifications",
   "settings.app.form.reloadAfterResume": "Reload Ferdi after system resume",
diff --git a/src/i18n/messages/src/components/auth/Pricing.json b/src/i18n/messages/src/components/auth/Pricing.json
index c4c94bb32..b5b7d72a8 100644
--- a/src/i18n/messages/src/components/auth/Pricing.json
+++ b/src/i18n/messages/src/components/auth/Pricing.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Hi {name}, welcome to Franz",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 15,
+      "line": 14,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 17,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!We have a special treat for you.",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 19,
+      "line": 18,
       "column": 16
     },
     "end": {
-      "line": 22,
+      "line": 21,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Enjoy the full Franz Professional experience completely free for 14 days.",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 23,
+      "line": 22,
       "column": 10
     },
     "end": {
-      "line": 26,
+      "line": 25,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Happy messaging,",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 27,
+      "line": 26,
       "column": 18
     },
     "end": {
-      "line": 30,
+      "line": 29,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!No strings attached",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 31,
+      "line": 30,
       "column": 29
     },
     "end": {
-      "line": 34,
+      "line": 33,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!No credit card required",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 35,
+      "line": 34,
       "column": 16
     },
     "end": {
-      "line": 38,
+      "line": 37,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Your free trial ends automatically after 14 days",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 39,
+      "line": 38,
       "column": 21
     },
     "end": {
-      "line": 42,
+      "line": 41,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Free trial (normally {currency}{price} per month)",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 43,
+      "line": 42,
       "column": 14
     },
     "end": {
-      "line": 46,
+      "line": 45,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Sorry, we could not activate your trial!",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 47,
+      "line": 46,
       "column": 19
     },
     "end": {
-      "line": 50,
+      "line": 49,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Start my 14-day Franz Professional Trial",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 51,
+      "line": 50,
       "column": 13
     },
     "end": {
-      "line": 54,
+      "line": 53,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!Start using Franz",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 55,
+      "line": 54,
       "column": 12
     },
     "end": {
-      "line": 58,
+      "line": 57,
       "column": 3
     }
   },
@@ -147,11 +147,11 @@
     "defaultMessage": "!!!Continue to Ferdi",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 59,
+      "line": 58,
       "column": 11
     },
     "end": {
-      "line": 62,
+      "line": 61,
       "column": 3
     }
   },
@@ -160,11 +160,11 @@
     "defaultMessage": "!!!Franz Professional includes:",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 63,
+      "line": 62,
       "column": 20
     },
     "end": {
-      "line": 66,
+      "line": 65,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/SettingsLayout.json b/src/i18n/messages/src/components/settings/SettingsLayout.json
new file mode 100644
index 000000000..99337a315
--- /dev/null
+++ b/src/i18n/messages/src/components/settings/SettingsLayout.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "settings.app.closeSettings",
+    "defaultMessage": "!!!Close settings",
+    "file": "src/components/settings/SettingsLayout.js",
+    "start": {
+      "line": 11,
+      "column": 17
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/ui/InfoBar.json b/src/i18n/messages/src/components/ui/InfoBar.json
new file mode 100644
index 000000000..a6a629c71
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/InfoBar.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "infobar.hide",
+    "defaultMessage": "!!!Hide",
+    "file": "src/components/ui/InfoBar.js",
+    "start": {
+      "line": 12,
+      "column": 8
+    },
+    "end": {
+      "line": 15,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/ui/Infobox.json b/src/i18n/messages/src/components/ui/Infobox.json
new file mode 100644
index 000000000..296c2ad3e
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/Infobox.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "infobox.dismiss",
+    "defaultMessage": "!!!Dismiss",
+    "file": "src/components/ui/Infobox.js",
+    "start": {
+      "line": 9,
+      "column": 11
+    },
+    "end": {
+      "line": 12,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/ui/Input.json b/src/i18n/messages/src/components/ui/Input.json
new file mode 100644
index 000000000..6240badfb
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/Input.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "settings.app.form.passwordToggle",
+    "defaultMessage": "!!!Password toggle",
+    "file": "src/components/ui/Input.js",
+    "start": {
+      "line": 11,
+      "column": 18
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/publishDebugInfo/Component.json b/src/i18n/messages/src/features/publishDebugInfo/Component.json
index 85fbe7ca6..25048ace6 100644
--- a/src/i18n/messages/src/features/publishDebugInfo/Component.json
+++ b/src/i18n/messages/src/features/publishDebugInfo/Component.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Publish debug information",
     "file": "src/features/publishDebugInfo/Component.js",
     "start": {
-      "line": 18,
+      "line": 17,
       "column": 9
     },
     "end": {
-      "line": 21,
+      "line": 20,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Publishing your debug information helps us find issues and errors in Ferdi. By publishing your debug information you accept Ferdi Debugger's privacy policy and terms of service",
     "file": "src/features/publishDebugInfo/Component.js",
     "start": {
-      "line": 22,
+      "line": 21,
       "column": 8
     },
     "end": {
-      "line": 25,
+      "line": 24,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!There was an error while trying to publish the debug information. Please try again later or view the console for more information.",
     "file": "src/features/publishDebugInfo/Component.js",
     "start": {
-      "line": 26,
+      "line": 25,
       "column": 9
     },
     "end": {
-      "line": 29,
+      "line": 28,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Privacy policy",
     "file": "src/features/publishDebugInfo/Component.js",
     "start": {
-      "line": 30,
+      "line": 29,
       "column": 11
     },
     "end": {
-      "line": 33,
+      "line": 32,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Terms of service",
     "file": "src/features/publishDebugInfo/Component.js",
     "start": {
-      "line": 34,
+      "line": 33,
       "column": 9
     },
     "end": {
-      "line": 37,
+      "line": 36,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Accept and publish",
     "file": "src/features/publishDebugInfo/Component.js",
     "start": {
-      "line": 38,
+      "line": 37,
       "column": 11
     },
     "end": {
-      "line": 41,
+      "line": 40,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Your debug log was published and is now availible at",
     "file": "src/features/publishDebugInfo/Component.js",
     "start": {
-      "line": 42,
+      "line": 41,
       "column": 13
     },
     "end": {
-      "line": 45,
+      "line": 44,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/workspaces/components/EditWorkspaceForm.json b/src/i18n/messages/src/features/workspaces/components/EditWorkspaceForm.json
index 053751c84..804e30070 100644
--- a/src/i18n/messages/src/features/workspaces/components/EditWorkspaceForm.json
+++ b/src/i18n/messages/src/features/workspaces/components/EditWorkspaceForm.json
@@ -73,7 +73,7 @@
       "column": 18
     },
     "end": {
-      "line": 44,
+      "line": 45,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Services in this Workspace",
     "file": "src/features/workspaces/components/EditWorkspaceForm.js",
     "start": {
-      "line": 45,
+      "line": 46,
       "column": 31
     },
     "end": {
-      "line": 48,
+      "line": 49,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Start by adding a service.",
     "file": "src/features/workspaces/components/EditWorkspaceForm.js",
     "start": {
-      "line": 49,
+      "line": 50,
       "column": 19
     },
     "end": {
-      "line": 52,
+      "line": 53,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Discover services",
     "file": "src/features/workspaces/components/EditWorkspaceForm.js",
     "start": {
-      "line": 53,
+      "line": 54,
       "column": 20
     },
     "end": {
-      "line": 56,
+      "line": 57,
       "column": 3
     }
   }
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 6e3f120ba..8118b4e26 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -1269,7 +1269,6 @@ export default class FranzMenu {
     return menu;
   }
 
-
   debugMenu() {
     const { intl } = window.ferdi;
 
diff --git a/src/models/User.js b/src/models/User.js
index 5a614efbe..74a39926b 100644
--- a/src/models/User.js
+++ b/src/models/User.js
@@ -38,7 +38,6 @@ export default class User {
 
   @observable team = {};
 
-
   constructor(data) {
     if (!data.id) {
       throw Error('User requires Id');
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index dd4ab3629..3116677c2 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -127,7 +127,6 @@ export default class AppStore extends Store {
       this.isFullScreen = false;
     });
 
-
     this.isOnline = navigator.onLine;
 
     // Check if Ferdi should launch on start
@@ -474,7 +473,6 @@ export default class AppStore extends Store {
       locale = this.stores.user.data.locale;
     }
 
-
     if (locale && Object.prototype.hasOwnProperty.call(locales, locale) && locale !== this.locale) {
       this.locale = locale;
     } else if (!locale) {
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index 631d0318e..2fee9bdda 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -33,7 +33,7 @@ export default class FeaturesStore extends Store {
 
   @observable featuresRequest = new CachedRequest(this.api.features, 'features');
 
-  @observable features = Object.assign({}, DEFAULT_FEATURES_CONFIG);
+  @observable features = ({ ...DEFAULT_FEATURES_CONFIG });
 
   async setup() {
     this.registerReactions([
@@ -57,7 +57,7 @@ export default class FeaturesStore extends Store {
   }
 
   _updateFeatures = () => {
-    const features = Object.assign({}, DEFAULT_FEATURES_CONFIG);
+    const features = { ...DEFAULT_FEATURES_CONFIG };
     if (this.stores.user.isLoggedIn) {
       let requestResult = {};
       try {
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 3dba217b2..9b69cb7c6 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -306,6 +306,7 @@ export default class ServicesStore extends Store {
     }
 
     // set default values for serviceData
+    // eslint-disable-next-line prefer-object-spread
     Object.assign({
       isEnabled: true,
       isHibernationEnabled: false,
diff --git a/src/theme/default/legacy.js b/src/theme/default/legacy.js
index e894a06ed..3f4bec5d5 100644
--- a/src/theme/default/legacy.js
+++ b/src/theme/default/legacy.js
@@ -22,7 +22,6 @@ export const themeTransitionTime = '.5s';
 
 export const themeInsetShadow = 'inset 0 2px 5px rgba(0, 0, 0, .03)';
 
-
 export const darkThemeBlack = '#1A1A1A';
 
 export const darkThemeGrayDarkest = '#1E1E1E';
diff --git a/src/webview/contextMenuBuilder.js b/src/webview/contextMenuBuilder.js
index c26f192fe..500a1a653 100644
--- a/src/webview/contextMenuBuilder.js
+++ b/src/webview/contextMenuBuilder.js
@@ -64,7 +64,7 @@ module.exports = class ContextMenuBuilder {
     this.debugMode = debugMode;
     this.processMenu = processMenu;
     this.menu = null;
-    this.stringTable = Object.assign({}, contextMenuStringTable);
+    this.stringTable = { ...contextMenuStringTable };
     this.getWebContents = () => webContents;
   }
 
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index 84ac45ecc..b5793a5f1 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -59,7 +59,6 @@ class RecipeWebview {
       indirect: Math.max(indirectInt, 0),
     };
 
-
     ipcRenderer.sendToHost('message-counts', count);
     Object.assign(this.countCache, count);
 
diff --git a/src/webview/screenshare.js b/src/webview/screenshare.js
index 2715f2e3e..84d2e1e95 100644
--- a/src/webview/screenshare.js
+++ b/src/webview/screenshare.js
@@ -73,25 +73,29 @@ export const screenShareCss = `
 `;
 
 // Patch getDisplayMedia for screen sharing
-window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve, reject) => {
+window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) => {
   try {
-    const sources = await desktopCapturer.getSources({ types: ['screen', 'window'] });
+    const sources = await desktopCapturer.getSources({
+      types: ['screen', 'window'],
+    });
 
     const selectionElem = document.createElement('div');
     selectionElem.classList = 'desktop-capturer-selection';
     selectionElem.innerHTML = `
         <div class="desktop-capturer-selection__scroller">
           <ul class="desktop-capturer-selection__list">
-            ${sources.map(({
-    id, name, thumbnail,
-  }) => `
+            ${sources
+    .map(
+      ({ id, name, thumbnail }) => `
               <li class="desktop-capturer-selection__item">
                 <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
                   <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
                   <span class="desktop-capturer-selection__name">${name}</span>
                 </button>
               </li>
-            `).join('')}
+            `,
+    )
+    .join('')}
             <li class="desktop-capturer-selection__item">
               <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
                 <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
@@ -102,7 +106,8 @@ window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve
       `;
     document.body.appendChild(selectionElem);
 
-    document.querySelectorAll('.desktop-capturer-selection__btn')
+    document
+      .querySelectorAll('.desktop-capturer-selection__btn')
       .forEach((button) => {
         button.addEventListener('click', async () => {
           try {
@@ -110,20 +115,22 @@ window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve
             if (id === CANCEL_ID) {
               reject(new Error('Cancelled by user'));
             } else {
-              const mediaSource = sources.find(source => source.id === id);
+              const mediaSource = sources.find((source) => source.id === id);
               if (!mediaSource) {
                 throw new Error(`Source with id ${id} does not exist`);
               }
 
-              const stream = await window.navigator.mediaDevices.getUserMedia({
-                audio: false,
-                video: {
-                  mandatory: {
-                    chromeMediaSource: 'desktop',
-                    chromeMediaSourceId: mediaSource.id,
+              const stream = await window.navigator.mediaDevices.getUserMedia(
+                {
+                  audio: false,
+                  video: {
+                    mandatory: {
+                      chromeMediaSource: 'desktop',
+                      chromeMediaSourceId: mediaSource.id,
+                    },
                   },
                 },
-              });
+              );
               resolve(stream);
             }
           } catch (err) {
@@ -136,4 +143,4 @@ window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve
   } catch (err) {
     reject(err);
   }
-});
+};