43 files changed, 540 insertions, 441 deletions

diff --git a/src/features/appearance/index.js b/src/features/appearance/index.ts
index 3aab2fcad..bb93507dc 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.ts
@@ -1,8 +1,6 @@
 import color from 'color';
 import { reaction } from 'mobx';
-import themeInfo from '../../assets/themeInfo.json';
-import { iconSizeBias } from '../../config';
-import { DEFAULT_APP_SETTINGS } from '../../environment';
+import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config';
 
 const STYLE_ELEMENT_ID = 'custom-appearance-style';
 
@@ -10,13 +8,15 @@ function createStyleElement() {
   const styles = document.createElement('style');
   styles.id = STYLE_ELEMENT_ID;
 
-  document.querySelector('head').appendChild(styles);
+  document.querySelector('head')?.appendChild(styles);
 }
 
 function setAppearance(style) {
-  const styleElement = document.getElementById(STYLE_ELEMENT_ID);
+  const styleElement = document.querySelector(`#${STYLE_ELEMENT_ID}`);
 
-  styleElement.innerHTML = style;
+  if (styleElement) {
+    styleElement.innerHTML = style;
+  }
 }
 
 // See https://github.com/Qix-/color/issues/53#issuecomment-656590710
@@ -26,24 +26,64 @@ function darkenAbsolute(originalColor, absoluteChange) {
 }
 
 function generateAccentStyle(accentColorStr) {
-  let style = '';
-
-  Object.keys(themeInfo).forEach((property) => {
-    style += `
-      ${themeInfo[property]} {
-        ${property}: ${accentColorStr};
-      }
-    `;
-  });
-
   let accentColor = color(DEFAULT_APP_SETTINGS.accentColor);
   try {
     accentColor = color(accentColorStr);
-  } catch (e) {
+  } catch {
     // Ignore invalid accent color.
   }
   const darkerColorStr = darkenAbsolute(accentColor, 5).hex();
-  style += `
+  return `
+    .theme__dark .app .sidebar .sidebar__button.is-muted,
+    .theme__dark .app .sidebar .sidebar__button.is-active,
+    .sidebar .sidebar__button.is-muted,
+    .sidebar .sidebar__button.is-active,
+    .tab-item.is-active,
+    .settings .account .invoices .invoices__action button,
+    .settings-navigation .settings-navigation__link.is-active .badge,
+    a.link,
+    button.link,
+    .auth .welcome .button:hover,
+    .auth .welcome .button__inverted,
+    .franz-form .franz-form__radio.is-selected,
+    .theme__dark .franz-form__button.franz-form__button--inverted,
+    .franz-form__button.franz-form__button--inverted {
+      color: ${accentColorStr};
+    }
+
+    .settings .settings__header,
+    .settings .settings__close,
+    .settings-navigation .settings-navigation__link.is-active,
+    a.button,
+    button.button,
+    .auth,
+    .info-bar,
+    .info-bar.info-bar--primary,
+    .infobox.infobox--primary,
+    .theme__dark .badge.badge--primary,
+    .theme__dark,
+    .badge.badge--primary,
+    .content-tabs .content-tabs__tabs .content-tabs__item.is-active,
+    #electron-app-title-bar .toolbar-dropdown:not(.open) > .toolbar-button > button:hover,
+    #electron-app-title-bar .list-item.selected .menu-item,
+    #electron-app-title-bar .list-item.selected:focus .menu-item,
+    .theme__dark .quick-switch .active,
+    .franz-form .franz-form__toggle-wrapper .franz-form__toggle.is-active .franz-form__toggle-button,
+    .theme__dark .franz-form__button,
+    .franz-form__button,
+    .ferdi__fab,
+    .franz-form .franz-form__slider-wrapper .slider::-webkit-slider-thumb {
+      background: ${accentColorStr};
+    }
+
+    .settings .settings__header .separator {
+      border-right-color: ${accentColorStr};
+    }
+
+    .franz-form .franz-form__radio.is-selected {
+      border-color: ${accentColorStr};
+    }
+
     a.button:hover, button.button:hover {
       background: ${darkenAbsolute(accentColor, 10).hex()};
     }
@@ -72,27 +112,27 @@ function generateAccentStyle(accentColorStr) {
       background: ${accentColor.lighten(0.35).hex()};
     }
   `;
-
-  return style;
 }
 
 function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
   const width = Number(widthStr);
   const iconSize = Number(iconSizeStr) - iconSizeBias;
 
-  return vertical ? `
+  return vertical
+    ? `
     .tab-item {
       width: ${width - 2}px !important;
       height: ${width - 5 + iconSize}px !important;
       min-height: unset;
     }
     .tab-item .tab-item__icon {
-      width: ${(width / 2) + iconSize}px !important;
+      width: ${width / 2 + iconSize}px !important;
     }
     .sidebar__button {
       font-size: ${width / 3}px !important;
     }
-  ` : `
+  `
+    : `
     .sidebar {
       width: ${width}px !important;
     }
@@ -101,7 +141,7 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
       height: ${width - 5 + iconSize}px !important;
     }
     .tab-item .tab-item__icon {
-      width: ${(width / 2) + iconSize}px !important;
+      width: ${width / 2 + iconSize}px !important;
     }
     .sidebar__button {
       font-size: ${width / 3}px !important;
@@ -129,14 +169,14 @@ function generateShowDragAreaStyle(accentColor) {
 }
 
 function generateVerticalStyle(widthStr, alwaysShowWorkspaces) {
-  if (!document.getElementById('vertical-style')) {
+  if (!document.querySelector('#vertical-style')) {
     const link = document.createElement('link');
     link.id = 'vertical-style';
     link.rel = 'stylesheet';
     link.type = 'text/css';
     link.href = './styles/vertical.css';
 
-    document.head.appendChild(link);
+    document.head.append(link);
   }
   const width = Number(widthStr);
   const sidebarWidth = width - 4;
@@ -144,20 +184,19 @@ function generateVerticalStyle(widthStr, alwaysShowWorkspaces) {
 
   return `
   .sidebar {
-    height: ${sidebarWidth + verticalStyleOffset + 1}px !important;
-  ${alwaysShowWorkspaces ? `
+  ${
+    alwaysShowWorkspaces
+      ? `
     width: calc(100% - 300px) !important;
-  ` : ''}
+  `
+      : ''
+  }
   }
 
   .sidebar .sidebar__button {
     width: ${width}px;
   }
 
-  .app .app__content {
-    padding-top: ${sidebarWidth + verticalStyleOffset + 1}px !important;
-  }
-
   .workspaces-drawer {
     margin-top: -${sidebarWidth - verticalStyleOffset - 1}px !important;
   }
@@ -192,21 +231,31 @@ function generateStyle(settings) {
     alwaysShowWorkspaces,
   } = settings;
 
-  if (accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase()) {
+  if (
+    accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase()
+  ) {
     style += generateAccentStyle(accentColor);
   }
-  if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth
-      || iconSize !== DEFAULT_APP_SETTINGS.iconSize) {
-    style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize, useVerticalStyle);
+  if (
+    serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth ||
+    iconSize !== DEFAULT_APP_SETTINGS.iconSize
+  ) {
+    style += generateServiceRibbonWidthStyle(
+      serviceRibbonWidth,
+      iconSize,
+      useVerticalStyle,
+    );
   }
   if (showDragArea) {
     style += generateShowDragAreaStyle(accentColor);
   }
   if (useVerticalStyle) {
     style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces);
-  } else if (document.getElementById('vertical-style')) {
-    const link = document.getElementById('vertical-style');
-    document.head.removeChild(link);
+  } else if (document.querySelector('#vertical-style')) {
+    const link = document.querySelector('#vertical-style');
+    if (link) {
+      link.remove();
+    }
   }
   if (alwaysShowWorkspaces) {
     style += generateOpenWorkspaceStyle();
@@ -225,14 +274,14 @@ export default function initAppearance(stores) {
 
   // Update style when settings change
   reaction(
-    () => ([
+    () => [
       settings.all.app.accentColor,
       settings.all.app.serviceRibbonWidth,
       settings.all.app.iconSize,
       settings.all.app.showDragArea,
       settings.all.app.useVerticalStyle,
       settings.all.app.alwaysShowWorkspaces,
-    ]),
+    ],
     () => {
       updateStyle(settings.all.app);
     },
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index a9601836b..3cf937f98 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -2,19 +2,14 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import classnames from 'classnames';
 
 import Modal from '../../components/ui/Modal';
 import Input from '../../components/ui/Input';
 import Button from '../../components/ui/Button';
 
-import {
-  state,
-  resetState,
-  sendCredentials,
-  cancelLogin,
-} from './store';
+import { state, resetState, sendCredentials, cancelLogin } from './store';
 import Form from './Form';
 
 import styles from './styles';
@@ -23,17 +18,15 @@ import globalMessages from '../../i18n/globalMessages';
 const messages = defineMessages({
   signIn: {
     id: 'feature.basicAuth.signIn',
-    defaultMessage: '!!!Sign In',
+    defaultMessage: 'Sign In',
   },
 });
 
-export default @injectSheet(styles) @observer class BasicAuthModal extends Component {
+@injectSheet(styles)
+@observer
+class BasicAuthModal extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
-  }
-
-  static contextTypes = {
-    intl: intlShape,
   };
 
   submit(e) {
@@ -56,20 +49,15 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo
   }
 
   render() {
-    const {
-      classes,
-    } = this.props;
+    const { classes } = this.props;
 
-    const {
-      isModalVisible,
-      authInfo,
-    } = state;
+    const { isModalVisible, authInfo } = state;
 
     if (!authInfo) {
       return null;
     }
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <Modal
@@ -89,10 +77,7 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo
           onSubmit={this.submit.bind(this)}
           className={classnames('franz-form', classes.form)}
         >
-          <Input
-            field={Form.$('user')}
-            showLabel={false}
-          />
+          <Input field={Form.$('user')} showLabel={false} />
           <Input
             field={Form.$('password')}
             showLabel={false}
@@ -105,13 +90,11 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo
               buttonType="secondary"
               onClick={this.cancel.bind(this)}
             />
-            <Button
-              type="submit"
-              label={intl.formatMessage(messages.signIn)}
-            />
+            <Button type="submit" label={intl.formatMessage(messages.signIn)} />
           </div>
         </form>
       </Modal>
     );
   }
 }
+export default injectIntl(BasicAuthModal);
diff --git a/src/features/basicAuth/Form.js b/src/features/basicAuth/Form.ts
index 95721d0e9..e84156d96 100644
--- a/src/features/basicAuth/Form.js
+++ b/src/features/basicAuth/Form.ts
@@ -1,5 +1,6 @@
 import Form from '../../lib/Form';
 
+// @ts-expect-error Expected 0 arguments, but got 1
 export default new Form({
   fields: {
     user: {
diff --git a/src/features/basicAuth/mainIpcHandler.js b/src/features/basicAuth/mainIpcHandler.ts
index ae4e7cf93..4ec3848e8 100644
--- a/src/features/basicAuth/mainIpcHandler.js
+++ b/src/features/basicAuth/mainIpcHandler.ts
@@ -1,6 +1,8 @@
+import { BrowserWindow } from 'electron';
+
 const debug = require('debug')('Ferdi:feature:basicAuth:main');
 
-export default function mainIpcHandler(mainWindow, authInfo) {
+export default function mainIpcHandler(mainWindow: BrowserWindow, authInfo) {
   debug('Sending basic auth call', authInfo);
 
   mainWindow.webContents.send('feature:basic-auth', {
diff --git a/src/features/basicAuth/store.js b/src/features/basicAuth/store.ts
index 0713ff572..0713ff572 100644
--- a/src/features/basicAuth/store.js
+++ b/src/features/basicAuth/store.ts
diff --git a/src/features/basicAuth/styles.js b/src/features/basicAuth/styles.ts
index 6bdaf9a6e..6bdaf9a6e 100644
--- a/src/features/basicAuth/styles.js
+++ b/src/features/basicAuth/styles.ts
diff --git a/src/features/communityRecipes/index.js b/src/features/communityRecipes/index.ts
index 828c6d867..828c6d867 100644
--- a/src/features/communityRecipes/index.js
+++ b/src/features/communityRecipes/index.ts
diff --git a/src/features/communityRecipes/store.js b/src/features/communityRecipes/store.ts
index a3614dd11..a8d358ba0 100644
--- a/src/features/communityRecipes/store.js
+++ b/src/features/communityRecipes/store.ts
@@ -4,7 +4,11 @@ import { FeatureStore } from '../utils/FeatureStore';
 const debug = require('debug')('Ferdi:feature:communityRecipes:store');
 
 export class CommunityRecipesStore extends FeatureStore {
-  start(stores, actions) {
+  stores: any;
+
+  actions: any;
+
+  start(stores: any, actions: any) {
     debug('start');
     this.stores = stores;
     this.actions = actions;
@@ -18,12 +22,17 @@ export class CommunityRecipesStore extends FeatureStore {
   @computed get communityRecipes() {
     if (!this.stores) return [];
 
-    return this.stores.recipePreviews.dev.map((r) => {
-      // TODO: Need to figure out if this is even necessary/used
-      r.isDevRecipe = !!r.author.find((a) => a.email === this.stores.user.data.email);
+    return this.stores.recipePreviews.dev.map(
+      (recipePreview: { isDevRecipe: boolean; author: any[] }) => {
+        // TODO: Need to figure out if this is even necessary/used
+        recipePreview.isDevRecipe = !!recipePreview.author.some(
+          (author: { email: any }) =>
+            author.email === this.stores.user.data.email,
+        );
 
-      return r;
-    });
+        return recipePreview;
+      },
+    );
   }
 }
 
diff --git a/src/features/nightlyBuilds/Component.js b/src/features/nightlyBuilds/Component.js
index e43287db5..814d529d9 100644
--- a/src/features/nightlyBuilds/Component.js
+++ b/src/features/nightlyBuilds/Component.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import injectSheet from 'react-jss';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { H1 } from '@meetfranz/ui';
 
 import Modal from '../../components/ui/Modal';
@@ -16,15 +16,16 @@ import globalMessages from '../../i18n/globalMessages';
 const messages = defineMessages({
   title: {
     id: 'feature.nightlyBuilds.title',
-    defaultMessage: '!!!Nightly Builds',
+    defaultMessage: 'Nightly Builds',
   },
   info: {
     id: 'feature.nightlyBuilds.info',
-    defaultMessage: '!!!Nightly builds are highly experimental versions of Ferdi that may contain unpolished or uncompleted features. These nightly builds are mainly used by developers to test their newly developed features and how they will perform in the final build. If you don\'t know what you are doing, we suggest not activating nightly builds.',
+    defaultMessage:
+      "Nightly builds are highly experimental versions of Ferdi that may contain unpolished or uncompleted features. These nightly builds are mainly used by developers to test their newly developed features and how they will perform in the final build. If you don't know what you are doing, we suggest not activating nightly builds.",
   },
   activate: {
     id: 'feature.nightlyBuilds.activate',
-    defaultMessage: '!!!Activate',
+    defaultMessage: 'Activate',
   },
 });
 
@@ -52,11 +53,10 @@ const styles = () => ({
   },
 });
 
-export default @injectSheet(styles) @inject('stores', 'actions') @observer class NightlyBuildsModal extends Component {
-  static contextTypes = {
-    intl: intlShape,
-  };
-
+@injectSheet(styles)
+@inject('stores', 'actions')
+@observer
+class NightlyBuildsModal extends Component {
   close() {
     ModalState.isModalVisible = false;
 
@@ -84,11 +84,9 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
   render() {
     const { isModalVisible } = ModalState;
 
-    const {
-      classes,
-    } = this.props;
+    const { classes } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <Modal
@@ -132,3 +130,5 @@ NightlyBuildsModal.wrappedComponent.propTypes = {
   }).isRequired,
   classes: PropTypes.object.isRequired,
 };
+
+export default injectIntl(NightlyBuildsModal);
diff --git a/src/features/nightlyBuilds/store.js b/src/features/nightlyBuilds/store.ts
index ed06e5a7d..ed06e5a7d 100644
--- a/src/features/nightlyBuilds/store.js
+++ b/src/features/nightlyBuilds/store.ts
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
index 5387bd358..5b5036752 100644
--- a/src/features/publishDebugInfo/Component.js
+++ b/src/features/publishDebugInfo/Component.js
@@ -2,7 +2,7 @@ import { H1 } from '@meetfranz/ui';
 import { inject, observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 import { state as ModalState } from './store';
 import { sendAuthRequest } from '../../api/utils/auth';
@@ -18,35 +18,37 @@ const debug = require('debug')('Ferdi:feature:publishDebugInfo');
 const messages = defineMessages({
   title: {
     id: 'feature.publishDebugInfo.title',
-    defaultMessage: '!!!Publish debug information',
+    defaultMessage: 'Publish debug information',
   },
   info: {
     id: 'feature.publishDebugInfo.info',
-    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',
+    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",
   },
   error: {
     id: 'feature.publishDebugInfo.error',
-    defaultMessage: '!!!There was an error while trying to publish the debug information. Please try again later or view the console for more information.',
+    defaultMessage:
+      'There was an error while trying to publish the debug information. Please try again later or view the console for more information.',
   },
   privacy: {
     id: 'feature.publishDebugInfo.privacy',
-    defaultMessage: '!!!Privacy policy',
+    defaultMessage: 'Privacy policy',
   },
   terms: {
     id: 'feature.publishDebugInfo.terms',
-    defaultMessage: '!!!Terms of service',
+    defaultMessage: 'Terms of service',
   },
   publish: {
     id: 'feature.publishDebugInfo.publish',
-    defaultMessage: '!!!Accept and publish',
+    defaultMessage: 'Accept and publish',
   },
   published: {
     id: 'feature.publishDebugInfo.published',
-    defaultMessage: '!!!Your debug log was published and is now availible at',
+    defaultMessage: 'Your debug log was published and is now availible at',
   },
 });
 
-const styles = (theme) => ({
+const styles = theme => ({
   container: {
     minWidth: '70vw',
   },
@@ -69,7 +71,8 @@ const styles = (theme) => ({
     width: '100%',
 
     '& div': {
-      fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
+      fontFamily:
+        'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
     },
 
     '& input': {
@@ -81,20 +84,19 @@ const styles = (theme) => ({
   },
 });
 
-export default @injectSheet(styles) @inject('stores', 'actions') @observer class PublishDebugLogModal extends Component {
+@injectSheet(styles)
+@inject('stores', 'actions')
+@observer
+class PublishDebugLogModal extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     log: null,
     error: false,
     isSendingLog: false,
-  }
+  };
 
   // Close this modal
   close() {
@@ -109,12 +111,16 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
 
     const debugInfo = JSON.stringify(this.props.stores.app.debugInfo);
 
-    const request = await sendAuthRequest(`${DEBUG_API}/create`, {
-      method: 'POST',
-      body: JSON.stringify({
-        log: debugInfo,
-      }),
-    }, false);
+    const request = await sendAuthRequest(
+      `${DEBUG_API}/create`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          log: debugInfo,
+        }),
+      },
+      false,
+    );
 
     debug(`debugInfo: publishing status: ${request.status}`);
     if (request.status === 200) {
@@ -140,17 +146,11 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
   render() {
     const { isModalVisible } = ModalState;
 
-    const {
-      classes,
-    } = this.props;
+    const { classes } = this.props;
 
-    const {
-      log,
-      error,
-      isSendingLog,
-    } = this.state;
+    const { log, error, isSendingLog } = this.state;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <Modal
@@ -159,12 +159,12 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
         close={() => this.close()}
       >
         <div className={classes.container}>
-          <H1>
-            {intl.formatMessage(messages.title)}
-          </H1>
-          { log && (
+          <H1>{intl.formatMessage(messages.title)}</H1>
+          {log && (
             <>
-              <p className={classes.info}>{intl.formatMessage(messages.published)}</p>
+              <p className={classes.info}>
+                {intl.formatMessage(messages.published)}
+              </p>
               <Input
                 className={classes.url}
                 showLabel={false}
@@ -184,12 +184,24 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
 
           {!log && !error && (
             <>
-              <p className={classes.info}>{intl.formatMessage(messages.info)}</p>
-
-              <a href={`${DEBUG_API}/privacy.html`} target="_blank" className={classes.link} rel="noreferrer">
+              <p className={classes.info}>
+                {intl.formatMessage(messages.info)}
+              </p>
+
+              <a
+                href={`${DEBUG_API}/privacy.html`}
+                target="_blank"
+                className={classes.link}
+                rel="noreferrer"
+              >
                 {intl.formatMessage(messages.privacy)}
               </a>
-              <a href={`${DEBUG_API}/terms.html`} target="_blank" className={classes.link} rel="noreferrer">
+              <a
+                href={`${DEBUG_API}/terms.html`}
+                target="_blank"
+                className={classes.link}
+                rel="noreferrer"
+              >
                 {intl.formatMessage(messages.terms)}
               </a>
 
@@ -216,3 +228,5 @@ PublishDebugLogModal.wrappedComponent.propTypes = {
     service: PropTypes.instanceOf(ServicesStore).isRequired,
   }).isRequired,
 };
+
+export default injectIntl(PublishDebugLogModal);
diff --git a/src/features/publishDebugInfo/store.js b/src/features/publishDebugInfo/store.ts
index ed06e5a7d..ed06e5a7d 100644
--- a/src/features/publishDebugInfo/store.js
+++ b/src/features/publishDebugInfo/store.ts
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index 78d5d94a0..f21db0ebd 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { reaction } from 'mobx';
 import injectSheet from 'react-jss';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { Input } from '@meetfranz/forms';
 import { H1 } from '@meetfranz/ui';
 
@@ -16,19 +16,20 @@ import ServicesStore from '../../stores/ServicesStore';
 const messages = defineMessages({
   title: {
     id: 'feature.quickSwitch.title',
-    defaultMessage: '!!!QuickSwitch',
+    defaultMessage: 'QuickSwitch',
   },
   search: {
     id: 'feature.quickSwitch.search',
-    defaultMessage: '!!!Search...',
+    defaultMessage: 'Search...',
   },
   info: {
     id: 'feature.quickSwitch.info',
-    defaultMessage: '!!!Select a service with TAB, ↑ and ↓. Open a service with ENTER.',
+    defaultMessage:
+      'Select a service with TAB, ↑ and ↓. Open a service with ENTER.',
   },
 });
 
-const styles = (theme) => ({
+const styles = theme => ({
   modal: {
     width: '80%',
     maxWidth: 600,
@@ -80,20 +81,19 @@ const styles = (theme) => ({
   },
 });
 
-export default @injectSheet(styles) @inject('stores', 'actions') @observer class QuickSwitchModal extends Component {
+@injectSheet(styles)
+@inject('stores', 'actions')
+@observer
+class QuickSwitchModal extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     selected: 0,
     search: '',
     wasPrevVisible: false,
-  }
+  };
 
   ARROW_DOWN = 40;
 
@@ -118,9 +118,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
     this.openService = this.openService.bind(this);
 
     reaction(
-      () => (
-        ModalState.isModalVisible
-      ),
+      () => ModalState.isModalVisible,
       () => {
         this._handleVisibilityChange();
       },
@@ -140,10 +138,17 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
   // Get currently shown services
   services() {
     let services = [];
-    if (this.state.search && compact(invoke(this.state.search, 'match', /^[a-z0-9]/i)).length > 0) {
+    if (
+      this.state.search &&
+      compact(invoke(this.state.search, 'match', /^[\da-z]/i)).length > 0
+    ) {
       // Apply simple search algorythm to list of all services
       services = this.props.stores.services.allDisplayed;
-      services = services.filter((service) => service.name.toLowerCase().search(this.state.search.toLowerCase()) !== -1);
+      services = services.filter(
+        service =>
+          service.name.toLowerCase().search(this.state.search.toLowerCase()) !==
+          -1,
+      );
     } else {
       // Add the currently active service first
       const currentService = this.props.stores.services.active;
@@ -186,14 +191,14 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
   // Change the selected service
   // factor should be -1 or 1
   changeSelected(factor) {
-    this.setState((state) => {
+    this.setState(state => {
       let newSelected = state.selected + factor;
       const services = this.services().length;
 
       // Roll around when on edge of list
       if (state.selected < 1 && factor === -1) {
         newSelected = services - 1;
-      } else if ((state.selected >= (services - 1)) && factor === 1) {
+      } else if (state.selected >= services - 1 && factor === 1) {
         newSelected = 0;
       }
 
@@ -256,7 +261,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
       // Wrapped inside timeout to let the modal render first
       setTimeout(() => {
         if (this.inputRef.current) {
-          this.inputRef.current.getElementsByTagName('input')[0].focus();
+          this.inputRef.current.querySelectorAll('input')[0].focus();
         }
       }, 10);
 
@@ -268,7 +273,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
       // search query change when modal not visible
       setTimeout(() => {
         if (this.inputRef.current) {
-          this.inputRef.current.getElementsByTagName('input')[0].blur();
+          this.inputRef.current.querySelectorAll('input')[0].blur();
         }
       }, 100);
 
@@ -286,17 +291,13 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
   render() {
     const { isModalVisible } = ModalState;
 
-    const {
-      openService,
-    } = this;
+    const { openService } = this;
 
-    const {
-      classes,
-    } = this.props;
+    const { classes } = this.props;
 
     const services = this.services();
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <Modal
@@ -318,12 +319,16 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
         </div>
 
         <div className={classes.services}>
-          { services.map((service, index) => (
+          {services.map((service, index) => (
             <div
-              className={`${classes.service} ${this.state.selected === index ? `${classes.activeService} active` : ''} service`}
+              className={`${classes.service} ${
+                this.state.selected === index
+                  ? `${classes.activeService} active`
+                  : ''
+              } service`}
               onClick={() => openService(index)}
               key={service.id}
-              ref={(el) => {
+              ref={el => {
                 this.serviceElements[index] = el;
               }}
             >
@@ -332,9 +337,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
                 className={classes.serviceIcon}
                 alt={service.recipe.name}
               />
-              <div>
-                { service.name }
-              </div>
+              <div>{service.name}</div>
             </div>
           ))}
         </div>
@@ -356,3 +359,5 @@ QuickSwitchModal.wrappedComponent.propTypes = {
     service: PropTypes.instanceOf(ServicesStore).isRequired,
   }).isRequired,
 };
+
+export default injectIntl(QuickSwitchModal);
diff --git a/src/features/quickSwitch/store.js b/src/features/quickSwitch/store.ts
index ed06e5a7d..ed06e5a7d 100644
--- a/src/features/quickSwitch/store.js
+++ b/src/features/quickSwitch/store.ts
diff --git a/src/features/serviceProxy/index.js b/src/features/serviceProxy/index.js
deleted file mode 100644
index eb7116651..000000000
--- a/src/features/serviceProxy/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { autorun, observable } from 'mobx';
-import { session } from '@electron/remote';
-
-const debug = require('debug')('Ferdi:feature:serviceProxy');
-
-export const config = observable({
-  isEnabled: true,
-});
-
-export default function init(stores) {
-  debug('Initializing `serviceProxy` feature');
-
-  autorun(() => {
-    config.isEnabled = true;
-
-    const services = stores.services.enabled;
-    const proxySettings = stores.settings.proxy;
-
-    debug('Service Proxy autorun');
-
-    services.forEach((service) => {
-      const s = session.fromPartition(`persist:service-${service.id}`);
-
-      if (config.isEnabled) {
-        const serviceProxyConfig = proxySettings[service.id];
-
-        if (serviceProxyConfig && serviceProxyConfig.isEnabled && serviceProxyConfig.host) {
-          const proxyHost = `${serviceProxyConfig.host}${serviceProxyConfig.port ? `:${serviceProxyConfig.port}` : ''}`;
-          debug(`Setting proxy config from service settings for "${service.name}" (${service.id}) to`, proxyHost);
-
-          s.setProxy({ proxyRules: proxyHost }, () => {
-            debug(`Using proxy "${proxyHost}" for "${service.name}" (${service.id})`);
-          });
-        }
-      }
-    });
-  });
-}
diff --git a/src/features/serviceProxy/index.ts b/src/features/serviceProxy/index.ts
new file mode 100644
index 000000000..f095b286a
--- /dev/null
+++ b/src/features/serviceProxy/index.ts
@@ -0,0 +1,54 @@
+import { autorun, observable } from 'mobx';
+import { session } from '@electron/remote';
+
+const debug = require('debug')('Ferdi:feature:serviceProxy');
+
+export const config = observable({
+  isEnabled: true,
+});
+
+export default function init(stores: {
+  services: { enabled: any };
+  settings: { proxy: any };
+}) {
+  debug('Initializing `serviceProxy` feature');
+
+  autorun(() => {
+    config.isEnabled = true;
+
+    const services = stores.services.enabled;
+    const proxySettings = stores.settings.proxy;
+
+    debug('Service Proxy autorun');
+
+    for (const service of services) {
+      const s = session.fromPartition(`persist:service-${service.id}`);
+
+      if (config.isEnabled) {
+        const serviceProxyConfig = proxySettings[service.id];
+
+        if (
+          serviceProxyConfig &&
+          serviceProxyConfig.isEnabled &&
+          serviceProxyConfig.host
+        ) {
+          const proxyHost = `${serviceProxyConfig.host}${
+            serviceProxyConfig.port ? `:${serviceProxyConfig.port}` : ''
+          }`;
+          debug(
+            `Setting proxy config from service settings for "${service.name}" (${service.id}) to`,
+            proxyHost,
+          );
+
+          s.setProxy({ proxyRules: proxyHost })
+            .then(() => {
+              debug(
+                `Using proxy "${proxyHost}" for "${service.name}" (${service.id})`,
+              );
+            })
+            .catch(error => console.error(error));
+        }
+      }
+    }
+  });
+}
diff --git a/src/features/settingsWS/actions.js b/src/features/settingsWS/actions.ts
index 631670c8a..631670c8a 100755
--- a/src/features/settingsWS/actions.js
+++ b/src/features/settingsWS/actions.ts
diff --git a/src/features/settingsWS/index.js b/src/features/settingsWS/index.ts
index 7771421d6..9bb206d82 100755
--- a/src/features/settingsWS/index.js
+++ b/src/features/settingsWS/index.ts
@@ -5,15 +5,16 @@ const debug = require('debug')('Ferdi:feature:settingsWS');
 
 export const settingsStore = new SettingsWSStore();
 
-export default function initSettingsWebSocket(stores, actions) {
+export default function initSettingsWebSocket(
+  stores: { features: any },
+  actions: any,
+) {
   const { features } = stores;
 
   // Toggle SettingsWebSocket feature
   reaction(
-    () => (
-      features.features.isSettingsWSEnabled
-    ),
-    (isEnabled) => {
+    () => features.features.isSettingsWSEnabled,
+    isEnabled => {
       if (isEnabled) {
         debug('Initializing `settingsWS` feature');
         settingsStore.start(stores, actions);
diff --git a/src/features/settingsWS/state.js b/src/features/settingsWS/state.ts
index 7b16b2b6e..7b16b2b6e 100755
--- a/src/features/settingsWS/state.js
+++ b/src/features/settingsWS/state.ts
diff --git a/src/features/settingsWS/store.js b/src/features/settingsWS/store.js
index 9100f33d1..3b9e10825 100755
--- a/src/features/settingsWS/store.js
+++ b/src/features/settingsWS/store.js
@@ -4,7 +4,7 @@ import ms from 'ms';
 
 import { FeatureStore } from '../utils/FeatureStore';
 import { createReactions } from '../../stores/lib/Reaction';
-import { WS_API } from '../../environment';
+import { WS_API } from '../../environment-remote';
 
 const debug = require('debug')('Ferdi:feature:settingsWS:store');
 
@@ -25,11 +25,13 @@ export class SettingsWSStore extends FeatureStore {
     this.stores = stores;
     this.actions = actions;
 
-    this._registerReactions(createReactions([
-      this._initialize.bind(this),
-      this._reconnect.bind(this),
-      this._close.bind(this),
-    ]));
+    this._registerReactions(
+      createReactions([
+        this._initialize.bind(this),
+        this._reconnect.bind(this),
+        this._close.bind(this),
+      ]),
+    );
   }
 
   connect() {
@@ -51,12 +53,12 @@ export class SettingsWSStore extends FeatureStore {
         this.heartbeat();
       });
 
-      this.ws.on('message', (data) => {
+      this.ws.on('message', data => {
         const resp = JSON.parse(data);
         debug('Received message', resp);
 
         if (resp.id) {
-          this.stores.user.getUserInfoRequest.patch((result) => {
+          this.stores.user.getUserInfoRequest.patch(result => {
             if (!result) return;
 
             debug('Patching user object with new values');
@@ -66,8 +68,8 @@ export class SettingsWSStore extends FeatureStore {
       });
 
       this.ws.on('ping', this.heartbeat.bind(this));
-    } catch (err) {
-      console.err(err);
+    } catch (error) {
+      console.error(error);
     }
   }
 
diff --git a/src/features/todos/actions.js b/src/features/todos/actions.js
deleted file mode 100644
index cc17e919b..000000000
--- a/src/features/todos/actions.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-import { createActionsFromDefinitions } from '../../actions/lib/actions';
-
-export const todoActions = createActionsFromDefinitions({
-  resize: {
-    width: PropTypes.number.isRequired,
-  },
-  toggleTodosPanel: {},
-  toggleTodosFeatureVisibility: {},
-  setTodosWebview: {
-    webview: PropTypes.instanceOf(Element).isRequired,
-  },
-  handleHostMessage: {
-    action: PropTypes.string.isRequired,
-    data: PropTypes.object,
-  },
-  handleClientMessage: {
-    channel: PropTypes.string.isRequired,
-    message: PropTypes.shape({
-      action: PropTypes.string.isRequired,
-      data: PropTypes.object,
-    }),
-  },
-  openDevTools: {},
-  reload: {},
-}, PropTypes.checkPropTypes);
-
-export default todoActions;
diff --git a/src/features/todos/actions.ts b/src/features/todos/actions.ts
new file mode 100644
index 000000000..04e299e71
--- /dev/null
+++ b/src/features/todos/actions.ts
@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const todoActions = createActionsFromDefinitions(
+  {
+    resize: {
+      width: PropTypes.number.isRequired,
+    },
+    toggleTodosPanel: {},
+    toggleTodosFeatureVisibility: {},
+    setTodosWebview: {
+      webview: PropTypes.instanceOf(Element).isRequired,
+    },
+    handleHostMessage: {
+      action: PropTypes.string.isRequired,
+      data: PropTypes.object,
+    },
+    handleClientMessage: {
+      channel: PropTypes.string.isRequired,
+      message: PropTypes.shape({
+        action: PropTypes.string.isRequired,
+        data: PropTypes.object,
+      }),
+    },
+    openDevTools: {},
+    reload: {},
+  },
+  PropTypes.checkPropTypes,
+);
+
+export default todoActions;
diff --git a/src/features/todos/constants.js b/src/features/todos/constants.ts
index 303a7a16e..303a7a16e 100644
--- a/src/features/todos/constants.js
+++ b/src/features/todos/constants.ts
diff --git a/src/features/todos/index.js b/src/features/todos/index.ts
index 573190881..3665812e6 100644
--- a/src/features/todos/index.js
+++ b/src/features/todos/index.ts
@@ -5,16 +5,17 @@ const debug = require('debug')('Ferdi:feature:todos');
 
 export const todosStore = new TodoStore();
 
-export default function initTodos(stores, actions) {
+export default function initTodos(
+  stores: { todos?: any; features?: any },
+  actions: any,
+) {
   stores.todos = todosStore;
   const { features } = stores;
 
   // Toggle todos feature
   reaction(
-    () => (
-      features.features.isTodosEnabled
-    ),
-    (isEnabled) => {
+    () => features.features.isTodosEnabled,
+    isEnabled => {
       if (isEnabled) {
         debug('Initializing `todos` feature');
         todosStore.start(stores, actions);
diff --git a/src/features/todos/preload.js b/src/features/todos/preload.js
index 9bd76a704..3b86ddbc5 100644
--- a/src/features/todos/preload.js
+++ b/src/features/todos/preload.js
@@ -7,7 +7,9 @@ debug('Preloading Todos Webview');
 
 let hostMessageListener = ({ action }) => {
   switch (action) {
-    case 'todos:initialize-as-service': ipcRenderer.sendToHost('hello'); break;
+    case 'todos:initialize-as-service':
+      ipcRenderer.sendToHost('hello');
+      break;
     default:
   }
 };
@@ -15,7 +17,9 @@ let hostMessageListener = ({ action }) => {
 window.ferdi = {
   onInitialize(ipcHostMessageListener) {
     hostMessageListener = ipcHostMessageListener;
-    ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, { action: 'todos:initialized' });
+    ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, {
+      action: 'todos:initialized',
+    });
   },
   sendToHost(message) {
     ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, message);
@@ -30,7 +34,7 @@ ipcRenderer.on(IPC.TODOS_HOST_CHANNEL, (event, message) => {
 if (window.location.href === 'https://app.franztodos.com/login/') {
   // Insert info element informing about Franz accounts
   const infoElement = document.createElement('p');
-  infoElement.innerText = `You are using Franz's official Todo Service.
+  infoElement.textContent = `You are using Franz's official Todo Service.
 This service will only work with accounts registered with Franz - no Ferdi accounts will work here!
 If you do not have a Franz account you can change the Todo service by going into Ferdi's settings and changing the "Todo server".
 You can choose any service as this Todo server, e.g. Todoist or Apple Notes.`;
@@ -42,7 +46,7 @@ You can choose any service as this Todo server, e.g. Todoist or Apple Notes.`;
     const textElement = document.querySelector('p');
     if (textElement) {
       clearInterval(waitForReact);
-      textElement.parentElement.insertBefore(infoElement, textElement);
+      textElement.parentElement?.insertBefore(infoElement, textElement);
     } else {
       numChecks += 1;
 
diff --git a/src/features/utils/ActionBinding.js b/src/features/utils/ActionBinding.ts
index 787166d44..787166d44 100644
--- a/src/features/utils/ActionBinding.js
+++ b/src/features/utils/ActionBinding.ts
diff --git a/src/features/utils/FeatureStore.js b/src/features/utils/FeatureStore.js
index 4d4e217a9..afe726294 100644
--- a/src/features/utils/FeatureStore.js
+++ b/src/features/utils/FeatureStore.js
@@ -16,11 +16,11 @@ export class FeatureStore {
   }
 
   _startActions(actions = this._actions) {
-    actions.forEach((a) => a.start());
+    for (const a of actions) a.start();
   }
 
   _stopActions(actions = this._actions) {
-    actions.forEach((a) => a.stop());
+    for (const a of actions) a.stop();
   }
 
   // REACTIONS
@@ -31,10 +31,10 @@ export class FeatureStore {
   }
 
   _startReactions(reactions = this._reactions) {
-    reactions.forEach((r) => r.start());
+    for (const r of reactions) r.start();
   }
 
   _stopReactions(reactions = this._reactions) {
-    reactions.forEach((r) => r.stop());
+    for (const r of reactions) r.stop();
   }
 }
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
index bebf52c08..97fa20dcc 100644
--- a/src/features/webControls/components/WebControls.js
+++ b/src/features/webControls/components/WebControls.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 { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import {
   mdiReload,
@@ -16,23 +16,23 @@ import {
 const messages = defineMessages({
   goHome: {
     id: 'webControls.goHome',
-    defaultMessage: '!!!Home',
+    defaultMessage: 'Home',
   },
   openInBrowser: {
     id: 'webControls.openInBrowser',
-    defaultMessage: '!!!Open in Browser',
+    defaultMessage: 'Open in Browser',
   },
   back: {
     id: 'webControls.back',
-    defaultMessage: '!!!Back',
+    defaultMessage: 'Back',
   },
   forward: {
     id: 'webControls.forward',
-    defaultMessage: '!!!Forward',
+    defaultMessage: 'Forward',
   },
   reload: {
     id: 'webControls.reload',
-    defaultMessage: '!!!Reload',
+    defaultMessage: 'Reload',
   },
 });
 
@@ -109,10 +109,6 @@ class WebControls extends Component {
     navigate: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   static getDerivedStateFromProps(props, state) {
     const { url } = props;
     const { editUrl } = state;
@@ -148,7 +144,7 @@ class WebControls extends Component {
 
     const { inputUrl, editUrl } = this.state;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className={classes.root}>
@@ -241,4 +237,4 @@ class WebControls extends Component {
   }
 }
 
-export default WebControls;
+export default injectIntl(WebControls);
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
index e1e1b9991..0273bb13e 100644
--- a/src/features/webControls/containers/WebControlsScreen.js
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -16,7 +16,8 @@ const URL_EVENTS = [
   'did-navigate-in-page',
 ];
 
-@inject('stores', 'actions') @observer
+@inject('stores', 'actions')
+@observer
 class WebControlsScreen extends Component {
   @observable url = '';
 
@@ -36,15 +37,15 @@ class WebControlsScreen extends Component {
         this.webview = service.webview;
         this.url = this.webview.getURL();
 
-        URL_EVENTS.forEach((event) => {
-          this.webview.addEventListener(event, (e) => {
+        for (const event of URL_EVENTS) {
+          this.webview.addEventListener(event, e => {
             if (!e.isMainFrame) return;
 
             this.url = e.url;
             this.canGoBack = this.webview.canGoBack();
             this.canGoForward = this.webview.canGoForward();
           });
-        });
+        }
       }
     });
   }
@@ -83,13 +84,16 @@ class WebControlsScreen extends Component {
 
     try {
       url = new URL(url).toString();
-    } catch (err) {
-      // eslint-disable-next-line no-useless-escape
-      if (url.match(/^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,1}\.(xn--)?([a-z0-9\-]{1,61}|[a-z0-9-]{1,30}\.[a-z]{2,})$/)) {
-        url = `http://${url}`;
-      } else {
-        url = SEARCH_ENGINE_URLS[this.settings.app.searchEngine]({ searchTerm: url });
-      }
+    } catch {
+      url =
+        // eslint-disable-next-line no-useless-escape
+        /^((?!-))(xn--)?[\da-z][\d_a-z-]{0,61}[\da-z]{0,1}\.(xn--)?([\da-z\-]{1,61}|[\da-z-]{1,30}\.[a-z]{2,})$/.test(
+          url,
+        )
+          ? `http://${url}`
+          : SEARCH_ENGINE_URLS[this.settings.app.searchEngine]({
+              searchTerm: url,
+            });
     }
 
     this.webview.loadURL(url);
@@ -114,7 +118,7 @@ class WebControlsScreen extends Component {
         goBack={() => this.goBack()}
         canGoForward={this.canGoForward}
         goForward={() => this.goForward()}
-        navigate={(url) => this.navigate(url)}
+        navigate={url => this.navigate(url)}
         url={this.url}
       />
     );
diff --git a/src/features/workspaces/actions.js b/src/features/workspaces/actions.js
deleted file mode 100644
index 5b5db422e..000000000
--- a/src/features/workspaces/actions.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import Workspace from './models/Workspace';
-import { createActionsFromDefinitions } from '../../actions/lib/actions';
-
-export const workspaceActions = createActionsFromDefinitions({
-  edit: {
-    workspace: PropTypes.instanceOf(Workspace).isRequired,
-  },
-  create: {
-    name: PropTypes.string.isRequired,
-  },
-  delete: {
-    workspace: PropTypes.instanceOf(Workspace).isRequired,
-  },
-  update: {
-    workspace: PropTypes.instanceOf(Workspace).isRequired,
-  },
-  activate: {
-    workspace: PropTypes.instanceOf(Workspace).isRequired,
-  },
-  deactivate: {},
-  toggleWorkspaceDrawer: {},
-  openWorkspaceSettings: {},
-  toggleKeepAllWorkspacesLoadedSetting: {},
-}, PropTypes.checkPropTypes);
-
-export default workspaceActions;
diff --git a/src/features/workspaces/actions.ts b/src/features/workspaces/actions.ts
new file mode 100644
index 000000000..5e7e6e721
--- /dev/null
+++ b/src/features/workspaces/actions.ts
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import Workspace from './models/Workspace';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const workspaceActions = createActionsFromDefinitions(
+  {
+    edit: {
+      workspace: PropTypes.instanceOf(Workspace).isRequired,
+    },
+    create: {
+      name: PropTypes.string.isRequired,
+    },
+    delete: {
+      workspace: PropTypes.instanceOf(Workspace).isRequired,
+    },
+    update: {
+      workspace: PropTypes.instanceOf(Workspace).isRequired,
+    },
+    activate: {
+      workspace: PropTypes.instanceOf(Workspace).isRequired,
+    },
+    deactivate: {},
+    toggleWorkspaceDrawer: {},
+    openWorkspaceSettings: {},
+    toggleKeepAllWorkspacesLoadedSetting: {},
+  },
+  PropTypes.checkPropTypes,
+);
+
+export default workspaceActions;
diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.ts
index 322695ed2..8447fc247 100644
--- a/src/features/workspaces/api.js
+++ b/src/features/workspaces/api.ts
@@ -12,12 +12,14 @@ export const workspaceApi = {
     debug('getUserWorkspaces GET', url);
     const result = await sendAuthRequest(url, { method: 'GET' });
     debug('getUserWorkspaces RESULT', result);
-    if (!result.ok) throw result;
+    if (!result.ok) {
+      throw new Error("Couldn't getUserWorkspaces");
+    }
     const workspaces = await result.json();
-    return workspaces.map((data) => new Workspace(data));
+    return workspaces.map(data => new Workspace(data));
   },
 
-  createWorkspace: async (name) => {
+  createWorkspace: async name => {
     const url = `${apiBase()}/workspace`;
     const options = {
       method: 'POST',
@@ -26,20 +28,24 @@ export const workspaceApi = {
     debug('createWorkspace POST', url, options);
     const result = await sendAuthRequest(url, options);
     debug('createWorkspace RESULT', result);
-    if (!result.ok) throw result;
+    if (!result.ok) {
+      throw new Error("Couldn't createWorkspace");
+    }
     return new Workspace(await result.json());
   },
 
-  deleteWorkspace: async (workspace) => {
+  deleteWorkspace: async workspace => {
     const url = `${apiBase()}/workspace/${workspace.id}`;
     debug('deleteWorkspace DELETE', url);
     const result = await sendAuthRequest(url, { method: 'DELETE' });
     debug('deleteWorkspace RESULT', result);
-    if (!result.ok) throw result;
+    if (!result.ok) {
+      throw new Error("Couldn't deleteWorkspace");
+    }
     return true;
   },
 
-  updateWorkspace: async (workspace) => {
+  updateWorkspace: async workspace => {
     const url = `${apiBase()}/workspace/${workspace.id}`;
     const options = {
       method: 'PUT',
@@ -48,15 +54,29 @@ export const workspaceApi = {
     debug('updateWorkspace UPDATE', url, options);
     const result = await sendAuthRequest(url, options);
     debug('updateWorkspace RESULT', result);
-    if (!result.ok) throw result;
+    if (!result.ok) {
+      throw new Error("Couldn't updateWorkspace");
+    }
     return new Workspace(await result.json());
   },
 };
 
-export const getUserWorkspacesRequest = new Request(workspaceApi, 'getUserWorkspaces');
-export const createWorkspaceRequest = new Request(workspaceApi, 'createWorkspace');
-export const deleteWorkspaceRequest = new Request(workspaceApi, 'deleteWorkspace');
-export const updateWorkspaceRequest = new Request(workspaceApi, 'updateWorkspace');
+export const getUserWorkspacesRequest = new Request(
+  workspaceApi,
+  'getUserWorkspaces',
+);
+export const createWorkspaceRequest = new Request(
+  workspaceApi,
+  'createWorkspace',
+);
+export const deleteWorkspaceRequest = new Request(
+  workspaceApi,
+  'deleteWorkspace',
+);
+export const updateWorkspaceRequest = new Request(
+  workspaceApi,
+  'updateWorkspace',
+);
 
 export const resetApiRequests = () => {
   getUserWorkspacesRequest.reset();
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
index 15b97121d..c9b05b87f 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.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 { Input, Button } from '@meetfranz/forms';
 import injectSheet from 'react-jss';
 import Form from '../../../lib/Form';
@@ -11,11 +11,11 @@ import { workspaceStore } from '../index';
 const messages = defineMessages({
   submitButton: {
     id: 'settings.workspace.add.form.submitButton',
-    defaultMessage: '!!!Create workspace',
+    defaultMessage: 'Create workspace',
   },
   name: {
     id: 'settings.workspace.add.form.name',
-    defaultMessage: '!!!Name',
+    defaultMessage: 'Name',
   },
 });
 
@@ -32,12 +32,9 @@ const styles = () => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class CreateWorkspaceForm extends Component {
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   static propTypes = {
     classes: PropTypes.object.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
@@ -45,7 +42,7 @@ class CreateWorkspaceForm extends Component {
   };
 
   form = (() => {
-    const { intl } = this.context;
+    const { intl } = this.props;
     return new Form({
       fields: {
         name: {
@@ -61,7 +58,7 @@ class CreateWorkspaceForm extends Component {
   submitForm() {
     const { form } = this;
     form.submit({
-      onSuccess: async (f) => {
+      onSuccess: async f => {
         const { onSubmit } = this.props;
         const values = f.values();
         onSubmit(values);
@@ -70,7 +67,7 @@ class CreateWorkspaceForm extends Component {
   }
 
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
     const { classes, isSubmitting } = this.props;
     const { form } = this;
     return (
@@ -95,4 +92,4 @@ class CreateWorkspaceForm extends Component {
   }
 }
 
-export default CreateWorkspaceForm;
+export default injectIntl(CreateWorkspaceForm);
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index c97d4bd9c..f562733dd 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.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 { Input, Button } from '@meetfranz/forms';
 import injectSheet from 'react-jss';
@@ -20,40 +20,40 @@ import Toggle from '../../../components/ui/Toggle';
 const messages = defineMessages({
   buttonDelete: {
     id: 'settings.workspace.form.buttonDelete',
-    defaultMessage: '!!!Delete workspace',
+    defaultMessage: 'Delete workspace',
   },
   buttonSave: {
     id: 'settings.workspace.form.buttonSave',
-    defaultMessage: '!!!Save workspace',
+    defaultMessage: 'Save workspace',
   },
   name: {
     id: 'settings.workspace.form.name',
-    defaultMessage: '!!!Name',
+    defaultMessage: 'Name',
   },
   yourWorkspaces: {
     id: 'settings.workspace.form.yourWorkspaces',
-    defaultMessage: '!!!Your workspaces',
+    defaultMessage: 'Your workspaces',
   },
   keepLoaded: {
     id: 'settings.workspace.form.keepLoaded',
-    defaultMessage: '!!!Keep this workspace loaded*',
+    defaultMessage: 'Keep this workspace loaded*',
   },
   keepLoadedInfo: {
     id: 'settings.workspace.form.keepLoadedInfo',
     defaultMessage:
-      '!!!*This option will be overwritten by the global "Keep all workspaces loaded" option.',
+      '*This option will be overwritten by the global "Keep all workspaces loaded" option.',
   },
   servicesInWorkspaceHeadline: {
     id: 'settings.workspace.form.servicesInWorkspaceHeadline',
-    defaultMessage: '!!!Services in this Workspace',
+    defaultMessage: 'Services in this Workspace',
   },
   noServicesAdded: {
     id: 'settings.services.noServicesAdded',
-    defaultMessage: '!!!Start by adding a service.',
+    defaultMessage: 'Start by adding a service.',
   },
   discoverServices: {
     id: 'settings.services.discoverServices',
-    defaultMessage: '!!!Discover services',
+    defaultMessage: 'Discover services',
   },
 });
 
@@ -72,10 +72,6 @@ const styles = () => ({
 @injectSheet(styles)
 @observer
 class EditWorkspaceForm extends Component {
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   static propTypes = {
     classes: PropTypes.object.isRequired,
     onDelete: PropTypes.func.isRequired,
@@ -97,7 +93,7 @@ class EditWorkspaceForm extends Component {
   }
 
   prepareWorkspaceForm(workspace) {
-    const { intl } = this.context;
+    const { intl } = this.props;
     return new Form({
       fields: {
         name: {
@@ -112,7 +108,7 @@ class EditWorkspaceForm extends Component {
           default: false,
         },
         services: {
-          value: workspace.services.slice(),
+          value: [...workspace.services],
         },
       },
     });
@@ -120,7 +116,7 @@ class EditWorkspaceForm extends Component {
 
   save(form) {
     form.submit({
-      onSuccess: async (f) => {
+      onSuccess: async f => {
         const { onSave } = this.props;
         const values = f.values();
         onSave(values);
@@ -146,7 +142,7 @@ class EditWorkspaceForm extends Component {
   }
 
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
     const {
       classes,
       workspace,
@@ -194,7 +190,7 @@ class EditWorkspaceForm extends Component {
               </div>
             ) : (
               <>
-                {services.map((s) => (
+                {services.map(s => (
                   <WorkspaceServiceListItem
                     key={s.id}
                     service={s}
@@ -233,4 +229,4 @@ class EditWorkspaceForm extends Component {
   }
 }
 
-export default EditWorkspaceForm;
+export default injectIntl(EditWorkspaceForm);
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 1138f23d7..3dac77bc2 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -2,11 +2,11 @@ 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 { H1, Icon } from '@meetfranz/ui';
 import ReactTooltip from 'react-tooltip';
 
-import { mdiPlusBox, mdiSettings } from '@mdi/js';
+import { mdiPlusBox, mdiCog } from '@mdi/js';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
 import { workspaceStore } from '../index';
@@ -14,27 +14,28 @@ import { workspaceStore } from '../index';
 const messages = defineMessages({
   headline: {
     id: 'workspaceDrawer.headline',
-    defaultMessage: '!!!Workspaces',
+    defaultMessage: 'Workspaces',
   },
   allServices: {
     id: 'workspaceDrawer.allServices',
-    defaultMessage: '!!!All services',
+    defaultMessage: 'All services',
   },
   workspacesSettingsTooltip: {
     id: 'workspaceDrawer.workspacesSettingsTooltip',
-    defaultMessage: '!!!Workspaces settings',
+    defaultMessage: 'Edit workspaces settings',
   },
   workspaceFeatureInfo: {
     id: 'workspaceDrawer.workspaceFeatureInfo',
-    defaultMessage: '!!!Info about workspace feature',
+    defaultMessage:
+      '<p>Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>',
   },
   addNewWorkspaceLabel: {
     id: 'workspaceDrawer.addNewWorkspaceLabel',
-    defaultMessage: '!!!add new workspace',
+    defaultMessage: 'Add new workspace',
   },
 });
 
-const styles = (theme) => ({
+const styles = theme => ({
   drawer: {
     background: theme.workspaces.drawer.background,
     width: `${theme.workspaces.drawer.width}px`,
@@ -85,34 +86,26 @@ const styles = (theme) => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class WorkspaceDrawer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     getServicesForWorkspace: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   componentDidMount() {
     ReactTooltip.rebuild();
   }
 
   render() {
-    const {
-      classes,
-      getServicesForWorkspace,
-    } = this.props;
-    const { intl } = this.context;
-    const {
-      activeWorkspace,
-      isSwitchingWorkspace,
-      nextWorkspace,
-      workspaces,
-    } = workspaceStore;
-    const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace;
+    const { classes, getServicesForWorkspace } = this.props;
+    const { intl } = this.props;
+    const { activeWorkspace, isSwitchingWorkspace, nextWorkspace, workspaces } =
+      workspaceStore;
+    const actualWorkspace = isSwitchingWorkspace
+      ? nextWorkspace
+      : activeWorkspace;
     return (
       <div className={`${classes.drawer} workspaces-drawer`}>
         <H1 className={classes.headline}>
@@ -122,10 +115,12 @@ class WorkspaceDrawer extends Component {
             onClick={() => {
               workspaceActions.openWorkspaceSettings();
             }}
-            data-tip={`${intl.formatMessage(messages.workspacesSettingsTooltip)}`}
+            data-tip={`${intl.formatMessage(
+              messages.workspacesSettingsTooltip,
+            )}`}
           >
             <Icon
-              icon={mdiSettings}
+              icon={mdiCog}
               size={1.5}
               className={classes.workspacesSettingsButtonIcon}
             />
@@ -152,7 +147,9 @@ class WorkspaceDrawer extends Component {
                 workspaceActions.activate({ workspace });
                 workspaceActions.toggleWorkspaceDrawer();
               }}
-              onContextMenuEditClick={() => workspaceActions.edit({ workspace })}
+              onContextMenuEditClick={() =>
+                workspaceActions.edit({ workspace })
+              }
               services={getServicesForWorkspace(workspace)}
               shortcutIndex={index + 1}
             />
@@ -168,9 +165,7 @@ class WorkspaceDrawer extends Component {
               size={1}
               className={classes.workspacesSettingsButtonIcon}
             />
-            <span>
-              {intl.formatMessage(messages.addNewWorkspaceLabel)}
-            </span>
+            <span>{intl.formatMessage(messages.addNewWorkspaceLabel)}</span>
           </div>
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
@@ -179,4 +174,4 @@ class WorkspaceDrawer extends Component {
   }
 }
 
-export default WorkspaceDrawer;
+export default injectIntl(WorkspaceDrawer);
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 252158364..4afb9c108 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -1,20 +1,20 @@
-import { Menu, getCurrentWindow } from '@electron/remote';
+import { Menu } from '@electron/remote';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { altKey, cmdOrCtrlShortcutKey } from '../../../environment';
 
 const messages = defineMessages({
   noServicesAddedYet: {
     id: 'workspaceDrawer.item.noServicesAddedYet',
-    defaultMessage: '!!!No services added yet',
+    defaultMessage: 'No services added yet',
   },
   contextMenuEdit: {
     id: 'workspaceDrawer.item.contextMenuEdit',
-    defaultMessage: '!!!edit',
+    defaultMessage: 'edit',
   },
 });
 
@@ -82,10 +82,6 @@ class WorkspaceDrawerItem extends Component {
     onContextMenuEditClick: null,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       classes,
@@ -96,7 +92,8 @@ class WorkspaceDrawerItem extends Component {
       services,
       shortcutIndex,
     } = this.props;
-    const { intl } = this.context;
+
+    const { intl } = this.props;
 
     const contextMenuTemplate = [
       {
@@ -122,10 +119,14 @@ class WorkspaceDrawerItem extends Component {
         ])}
         onClick={onClick}
         onContextMenu={() =>
-          onContextMenuEditClick && contextMenu.popup(getCurrentWindow())
+          onContextMenuEditClick && contextMenu.popup()
         }
         data-tip={`${
-          shortcutIndex <= 9 ? `(${cmdOrCtrlShortcutKey(false)}+${altKey(false)}+${shortcutIndex})` : ''
+          shortcutIndex <= 9
+            ? `(${cmdOrCtrlShortcutKey(false)}+${altKey(
+              false,
+            )}+${shortcutIndex})`
+            : ''
         }`}
       >
         <span
@@ -142,7 +143,7 @@ class WorkspaceDrawerItem extends Component {
             isActive ? classes.activeServices : null,
           ])}
         >
-          {services.length
+          {services.length > 0
             ? services.join(', ')
             : intl.formatMessage(messages.noServicesAddedYet)}
         </span>
@@ -151,4 +152,4 @@ class WorkspaceDrawerItem extends Component {
   }
 }
 
-export default WorkspaceDrawerItem;
+export default injectIntl(WorkspaceDrawerItem);
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
index 85fc02d51..ec7b19add 100644
--- a/src/features/workspaces/components/WorkspaceItem.js
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { intlShape } from 'react-intl';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 
 import Workspace from '../models/Workspace';
 
-const styles = (theme) => ({
+const styles = theme => ({
   row: {
     height: theme.workspaces.settings.listItems.height,
     borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
@@ -17,7 +16,8 @@ const styles = (theme) => ({
   columnName: {},
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class WorkspaceItem extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -25,18 +25,12 @@ class WorkspaceItem extends Component {
     onItemClick: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const { classes, workspace, onItemClick } = this.props;
 
     return (
       <tr className={classes.row}>
-        <td onClick={() => onItemClick(workspace)}>
-          {workspace.name}
-        </td>
+        <td onClick={() => onItemClick(workspace)}>{workspace.name}</td>
       </tr>
     );
   }
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index c8ec0bc4c..33a82cf4b 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -4,14 +4,14 @@ import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
 import { Loader } from '@meetfranz/ui';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { workspaceStore } from '../index';
 
 const messages = defineMessages({
   switchingTo: {
     id: 'workspaces.switchingIndicator.switchingTo',
-    defaultMessage: '!!!Switching to',
+    defaultMessage: 'Switching to',
   },
 });
 
@@ -61,13 +61,9 @@ class WorkspaceSwitchingIndicator extends Component {
     theme: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const { classes, theme } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
     const { isSwitchingWorkspace, nextWorkspace } = workspaceStore;
     if (!isSwitchingWorkspace) return null;
     const nextWorkspaceName = nextWorkspace
@@ -89,4 +85,4 @@ class WorkspaceSwitchingIndicator extends Component {
   }
 }
 
-export default WorkspaceSwitchingIndicator;
+export default injectIntl(WorkspaceSwitchingIndicator);
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 5f34204f1..49552df6b 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -1,7 +1,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 injectSheet from 'react-jss';
 import { Infobox } from '@meetfranz/ui';
 
@@ -16,35 +16,35 @@ import UIStore from '../../../stores/UIStore';
 const messages = defineMessages({
   headline: {
     id: 'settings.workspaces.headline',
-    defaultMessage: '!!!Your workspaces',
+    defaultMessage: 'Your workspaces',
   },
   noServicesAdded: {
     id: 'settings.workspaces.noWorkspacesAdded',
-    defaultMessage: "!!!You haven't created any workspaces yet.",
+    defaultMessage: "You haven't created any workspaces yet.",
   },
   workspacesRequestFailed: {
     id: 'settings.workspaces.workspacesRequestFailed',
-    defaultMessage: '!!!Could not load your workspaces',
+    defaultMessage: 'Could not load your workspaces',
   },
   tryReloadWorkspaces: {
     id: 'settings.workspaces.tryReloadWorkspaces',
-    defaultMessage: '!!!Try again',
+    defaultMessage: 'Try again',
   },
   updatedInfo: {
     id: 'settings.workspaces.updatedInfo',
-    defaultMessage: '!!!Your changes have been saved',
+    defaultMessage: 'Your changes have been saved',
   },
   deletedInfo: {
     id: 'settings.workspaces.deletedInfo',
-    defaultMessage: '!!!Workspace has been deleted',
+    defaultMessage: 'Workspace has been deleted',
   },
   workspaceFeatureInfo: {
     id: 'settings.workspaces.workspaceFeatureInfo',
-    defaultMessage: '!!!Info about workspace feature',
+    defaultMessage: 'Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.',
   },
   workspaceFeatureHeadline: {
     id: 'settings.workspaces.workspaceFeatureHeadline',
-    defaultMessage: '!!!Less is More: Introducing Ferdi Workspaces',
+    defaultMessage: 'Less is More: Introducing Ferdi Workspaces',
   },
 });
 
@@ -83,10 +83,6 @@ class WorkspacesDashboard extends Component {
     workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       classes,
@@ -99,7 +95,7 @@ class WorkspacesDashboard extends Component {
       workspaces,
     } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="settings__main">
@@ -193,7 +189,7 @@ class WorkspacesDashboard extends Component {
   }
 }
 
-export default WorkspacesDashboard;
+export default injectIntl(WorkspacesDashboard);
 
 WorkspacesDashboard.wrappedComponent.propTypes = {
   stores: PropTypes.shape({
diff --git a/src/features/workspaces/constants.js b/src/features/workspaces/constants.ts
index 2d1416ee0..2d1416ee0 100644
--- a/src/features/workspaces/constants.js
+++ b/src/features/workspaces/constants.ts
diff --git a/src/features/workspaces/index.js b/src/features/workspaces/index.ts
index 83e4d9049..ecca64b41 100644
--- a/src/features/workspaces/index.js
+++ b/src/features/workspaces/index.ts
@@ -12,10 +12,8 @@ export default function initWorkspaces(stores, actions) {
 
   // Toggle workspace feature
   reaction(
-    () => (
-      features.features.isWorkspaceEnabled
-    ),
-    (isEnabled) => {
+    () => features.features.isWorkspaceEnabled,
+    isEnabled => {
       if (isEnabled && !workspaceStore.isFeatureActive) {
         debug('Initializing `workspaces` feature');
         workspaceStore.start(stores, actions);
diff --git a/src/features/workspaces/models/Workspace.js b/src/features/workspaces/models/Workspace.ts
index d9488e991..cd3918fba 100644
--- a/src/features/workspaces/models/Workspace.js
+++ b/src/features/workspaces/models/Workspace.ts
@@ -15,7 +15,7 @@ export default class Workspace {
 
   constructor(data) {
     if (!data.id) {
-      throw Error('Workspace requires Id');
+      throw new Error('Workspace requires Id');
     }
 
     this.id = data.id;
@@ -28,8 +28,10 @@ export default class Workspace {
       services.push(KEEP_WS_LOADED_USID);
     } else if (data.saving && data.services.includes(KEEP_WS_LOADED_USID)) {
       // Don't keep loaded
-      services = services.filter((e) => e !== KEEP_WS_LOADED_USID);
+      services = services.filter(e => e !== KEEP_WS_LOADED_USID);
     }
+
+    // @ts-expect-error Property 'replace' does not exist on type 'never[]'.
     this.services.replace(services);
 
     this.userId = data.userId;
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index ec9d7ee7f..db2b69f99 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -190,6 +190,12 @@ export default class WorkspacesStore extends FeatureStore {
     setTimeout(() => {
       this.isSwitchingWorkspace = false;
       this.nextWorkspace = null;
+      if (this.stores.settings.app.splitMode) {
+        const serviceNames = new Set(this.getWorkspaceServices(workspace).map(service => service.name));
+        for (const wrapper of document.querySelectorAll('.services__webview-wrapper')) {
+          wrapper.style.display = serviceNames.has(wrapper.dataset.name) ? '' : 'none';
+        }
+      }
     }, 1000);
   };
 
@@ -205,6 +211,11 @@ export default class WorkspacesStore extends FeatureStore {
     // Indicate that we are done switching to the default workspace
     setTimeout(() => {
       this.isSwitchingWorkspace = false;
+      if (this.stores.settings.app.splitMode) {
+        for (const wrapper of document.querySelectorAll('.services__webview-wrapper')) {
+          wrapper.style.display = '';
+        }
+      }
     }, 1000);
   };
 
@@ -302,8 +313,8 @@ export default class WorkspacesStore extends FeatureStore {
     const { allServicesRequest } = services;
     const servicesHaveBeenLoaded = allServicesRequest.wasExecuted && !allServicesRequest.isError;
     // Loop through all workspaces and remove invalid service ids (locally)
-    this.workspaces.forEach((workspace) => {
-      workspace.services.forEach((serviceId) => {
+    for (const workspace of this.workspaces) {
+      for (const serviceId of workspace.services) {
         if (
           servicesHaveBeenLoaded
           && !services.one(serviceId)
@@ -311,7 +322,7 @@ export default class WorkspacesStore extends FeatureStore {
         ) {
           workspace.services.remove(serviceId);
         }
-      });
-    });
+      }
+    }
   };
 }