chore: upgrade intl dependencies (#1920)

21 files changed, 234 insertions, 253 deletions

diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index bbfd5de28..fa4a719ab 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -19,7 +19,9 @@ const textList = shuffleArray([
   'Fixing bugs',
 ]);
 
-export default @injectSheet(styles) @withTheme class AppLoader extends Component {
+@injectSheet(styles)
+@withTheme
+class AppLoader extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     theme: PropTypes.object.isRequired,
@@ -28,7 +30,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
 
   static defaultProps = {
     texts: textList,
-  }
+  };
 
   state = {
     step: 0,
@@ -38,7 +40,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
 
   componentDidMount() {
     this.interval = setInterval(() => {
-      this.setState((prevState) => ({
+      this.setState(prevState => ({
         step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1,
       }));
     }, 2500);
@@ -73,3 +75,5 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
     );
   }
 }
+
+export default AppLoader;
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index 5066b9c06..f6c9fd3d3 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -4,7 +4,9 @@ import { observer, inject } from 'mobx-react';
 import Loader from 'react-loader';
 import classnames from 'classnames';
 
-export default @inject('stores') @observer class Button extends Component {
+@inject('stores')
+@observer
+class Button extends Component {
   static propTypes = {
     className: PropTypes.string,
     label: PropTypes.string.isRequired,
@@ -26,7 +28,7 @@ export default @inject('stores') @observer class Button extends Component {
   static defaultProps = {
     className: null,
     disabled: false,
-    onClick: () => { },
+    onClick: () => {},
     type: 'button',
     buttonType: '',
     loaded: true,
@@ -76,7 +78,11 @@ export default @inject('stores') @observer class Button extends Component {
           loaded={loaded}
           lines={10}
           scale={0.4}
-          color={buttonType !== 'secondary' ? '#FFF' : this.props.stores.settings.app.accentColor}
+          color={
+            buttonType !== 'secondary'
+              ? '#FFF'
+              : this.props.stores.settings.app.accentColor
+          }
           component="span"
         />
         {label}
@@ -85,3 +91,5 @@ export default @inject('stores') @observer class Button extends Component {
     );
   }
 }
+
+export default Button;
diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js
index 633edbe2c..a3aa06bc9 100644
--- a/src/components/ui/FAB.js
+++ b/src/components/ui/FAB.js
@@ -8,7 +8,8 @@ import classnames from 'classnames';
 
 import { oneOrManyChildElements } from '../../prop-types';
 
-export default @observer class Button extends Component {
+@observer
+class Button extends Component {
   static propTypes = {
     className: PropTypes.string,
     disabled: PropTypes.bool,
@@ -21,7 +22,7 @@ export default @observer class Button extends Component {
   static defaultProps = {
     className: null,
     disabled: false,
-    onClick: () => { },
+    onClick: () => {},
     type: 'button',
     htmlForm: '',
   };
@@ -29,14 +30,8 @@ export default @observer class Button extends Component {
   element = null;
 
   render() {
-    const {
-      className,
-      disabled,
-      onClick,
-      type,
-      children,
-      htmlForm,
-    } = this.props;
+    const { className, disabled, onClick, type, children, htmlForm } =
+      this.props;
 
     const buttonProps = {
       className: classnames({
@@ -66,3 +61,5 @@ export default @observer class Button extends Component {
     );
   }
 }
+
+export default Button;
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
index cf2664830..14e7ec3c4 100644
--- a/src/components/ui/FeatureList.js
+++ b/src/components/ui/FeatureList.js
@@ -1,53 +1,53 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { FeatureItem } from './FeatureItem';
 
 const messages = defineMessages({
   availableRecipes: {
     id: 'pricing.features.recipes',
-    defaultMessage: '!!!Choose from more than 70 Services', // TODO: Make this dynamic
+    defaultMessage: 'Choose from more than 70 Services', // TODO: Make this dynamic
   },
   accountSync: {
     id: 'pricing.features.accountSync',
-    defaultMessage: '!!!Account Synchronisation',
+    defaultMessage: 'Account Synchronisation',
   },
   desktopNotifications: {
     id: 'pricing.features.desktopNotifications',
-    defaultMessage: '!!!Desktop Notifications',
+    defaultMessage: 'Desktop Notifications',
   },
   unlimitedServices: {
     id: 'pricing.features.unlimitedServices',
-    defaultMessage: '!!!Add unlimited services',
+    defaultMessage: 'Add unlimited services',
   },
   spellchecker: {
     id: 'pricing.features.spellchecker',
-    defaultMessage: '!!!Spellchecker support',
+    defaultMessage: 'Spellchecker support',
   },
   workspaces: {
     id: 'pricing.features.workspaces',
-    defaultMessage: '!!!Workspaces',
+    defaultMessage: 'Workspaces',
   },
   customWebsites: {
     id: 'pricing.features.customWebsites',
-    defaultMessage: '!!!Add Custom Websites',
+    defaultMessage: 'Add Custom Websites',
   },
   onPremise: {
     id: 'pricing.features.onPremise',
-    defaultMessage: '!!!On-premise & other Hosted Services',
+    defaultMessage: 'On-premise & other Hosted Services',
   },
   thirdPartyServices: {
     id: 'pricing.features.thirdPartyServices',
-    defaultMessage: '!!!Install 3rd party services',
+    defaultMessage: 'Install 3rd party services',
   },
   serviceProxies: {
     id: 'pricing.features.serviceProxies',
-    defaultMessage: '!!!Service Proxies',
+    defaultMessage: 'Service Proxies',
   },
   teamManagement: {
     id: 'pricing.features.teamManagement',
-    defaultMessage: '!!!Team Management',
+    defaultMessage: 'Team Management',
   },
 });
 
@@ -60,18 +60,11 @@ export class FeatureList extends Component {
   static defaultProps = {
     className: '',
     featureClassName: '',
-  }
-
-  static contextTypes = {
-    intl: intlShape,
   };
 
   render() {
-    const {
-      className,
-      featureClassName,
-    } = this.props;
-    const { intl } = this.context;
+    const { className, featureClassName } = this.props;
+    const { intl } = this.props;
 
     const features = [
       messages.availableRecipes,
@@ -92,10 +85,15 @@ export class FeatureList extends Component {
 
     return (
       <ul className={className}>
-        {features.map((feature) => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)}
+        {features.map(feature => (
+          <FeatureItem
+            name={intl.formatMessage(feature)}
+            className={featureClassName}
+          />
+        ))}
       </ul>
     );
   }
 }
 
-export default FeatureList;
+export default injectIntl(FeatureList);
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index 2952cd96b..ab5e2f365 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -8,7 +8,10 @@ import Loader from '../Loader';
 
 import styles from './styles';
 
-export default @withTheme @injectSheet(styles) @observer class FullscreenLoader extends Component {
+@withTheme
+@injectSheet(styles)
+@observer
+class FullscreenLoader extends Component {
   static propTypes = {
     className: PropTypes.string,
     title: PropTypes.string.isRequired,
@@ -25,14 +28,8 @@ export default @withTheme @injectSheet(styles) @observer class FullscreenLoader
   };
 
   render() {
-    const {
-      classes,
-      title,
-      children,
-      spinnerColor,
-      className,
-      theme,
-    } = this.props;
+    const { classes, title, children, spinnerColor, className, theme } =
+      this.props;
 
     return (
       <div className={classes.wrapper}>
@@ -44,13 +41,11 @@ export default @withTheme @injectSheet(styles) @observer class FullscreenLoader
         >
           <h1 className={classes.title}>{title}</h1>
           <Loader color={spinnerColor || theme.colorFullscreenLoaderSpinner} />
-          {children && (
-            <div className={classes.content}>
-              {children}
-            </div>
-          )}
+          {children && <div className={classes.content}>{children}</div>}
         </div>
       </div>
     );
   }
 }
+
+export default FullscreenLoader;
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
index bb4ea0565..8ea31ca40 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.js
@@ -6,7 +6,8 @@ import classnames from 'classnames';
 import Dropzone from 'react-dropzone';
 import { isWindows } from '../../environment';
 
-export default @observer class ImageUpload extends Component {
+@observer
+class ImageUpload extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
@@ -29,7 +30,7 @@ export default @observer class ImageUpload extends Component {
   onDrop(acceptedFiles) {
     const { field } = this.props;
 
-    acceptedFiles.forEach((file) => {
+    acceptedFiles.forEach(file => {
       const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path;
       this.setState({
         path: imgPath,
@@ -42,9 +43,7 @@ export default @observer class ImageUpload extends Component {
   }
 
   render() {
-    const {
-      field, className, multiple, textDelete, textUpload,
-    } = this.props;
+    const { field, className, multiple, textDelete, textUpload } = this.props;
 
     const cssClasses = classnames({
       'image-upload__dropzone': true,
@@ -86,7 +85,7 @@ export default @observer class ImageUpload extends Component {
             </>
           ) : (
             <Dropzone
-              ref={(node) => {
+              ref={node => {
                 this.dropzoneRef = node;
               }}
               onDrop={this.onDrop.bind(this)}
@@ -107,3 +106,5 @@ export default @observer class ImageUpload extends Component {
     );
   }
 }
+
+export default ImageUpload;
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index bd2af2296..f5cbad48b 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import Loader from 'react-loader';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 // import { oneOrManyChildElements } from '../../prop-types';
 import Appear from './effects/Appear';
@@ -11,11 +11,10 @@ import Appear from './effects/Appear';
 const messages = defineMessages({
   hide: {
     id: 'infobar.hide',
-    defaultMessage: '!!!Hide',
+    defaultMessage: 'Hide',
   },
 });
 
-export default
 @observer
 class InfoBar extends Component {
   static propTypes = {
@@ -42,10 +41,6 @@ class InfoBar extends Component {
     onHide: () => null,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       children,
@@ -59,7 +54,7 @@ class InfoBar extends Component {
       onHide,
     } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     let transitionName = 'slideUp';
     if (position === 'top') {
@@ -103,3 +98,5 @@ class InfoBar extends Component {
     );
   }
 }
+
+export default injectIntl(InfoBar);
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index 73b48b957..13ae2303b 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -3,16 +3,15 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import Loader from 'react-loader';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
   dismiss: {
     id: 'infobox.dismiss',
-    defaultMessage: '!!!Dismiss',
+    defaultMessage: 'Dismiss',
   },
 });
 
-export default
 @observer
 class Infobox extends Component {
   static propTypes = {
@@ -38,10 +37,6 @@ class Infobox extends Component {
     onSeen: () => null,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     dismissed: false,
   };
@@ -63,7 +58,7 @@ class Infobox extends Component {
       onDismiss,
     } = this.props;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     if (this.state.dismissed) {
       return null;
@@ -106,3 +101,5 @@ class Infobox extends Component {
     );
   }
 }
+
+export default injectIntl(Infobox);
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 7417fef1c..335367f03 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -3,18 +3,17 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
 
 const messages = defineMessages({
   passwordToggle: {
     id: 'settings.app.form.passwordToggle',
-    defaultMessage: '!!!Password toggle',
+    defaultMessage: 'Password toggle',
   },
 });
 
-export default
 @observer
 class Input extends Component {
   static propTypes = {
@@ -38,10 +37,6 @@ class Input extends Component {
     suffix: '',
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     showPassword: false,
     passwordScore: 0,
@@ -82,7 +77,7 @@ class Input extends Component {
 
     const { passwordScore } = this.state;
 
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     let { type } = field;
     if (type === 'password' && this.state.showPassword) {
@@ -106,10 +101,10 @@ class Input extends Component {
             name={field.name}
             value={field.value}
             placeholder={field.placeholder}
-            onChange={(e) => this.onChange(e)}
+            onChange={e => this.onChange(e)}
             onBlur={field.onBlur}
             onFocus={field.onFocus}
-            ref={(element) => {
+            ref={element => {
               this.inputElement = element;
             }}
             disabled={field.disabled}
@@ -124,9 +119,11 @@ class Input extends Component {
                 'mdi-eye': !this.state.showPassword,
                 'mdi-eye-off': this.state.showPassword,
               })}
-              onClick={() => this.setState((prevState) => ({
-                showPassword: !prevState.showPassword,
-              }))}
+              onClick={() =>
+                this.setState(prevState => ({
+                  showPassword: !prevState.showPassword,
+                }))
+              }
               tabIndex={-1}
               aria-label={intl.formatMessage(messages.passwordToggle)}
             />
@@ -154,3 +151,5 @@ class Input extends Component {
     );
   }
 }
+
+export default injectIntl(Input);
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 003211e5c..94db3f842 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -9,7 +9,9 @@ import { matchRoute } from '../../helpers/routing-helpers';
 import { openExternalUrl } from '../../helpers/url-helpers';
 
 // TODO: create container component for this component
-export default @inject('stores') @observer class Link extends Component {
+@inject('stores')
+@observer
+class Link extends Component {
   onClick(e) {
     if (this.props.disabled) {
       e.preventDefault();
@@ -50,7 +52,7 @@ export default @inject('stores') @observer class Link extends Component {
         href={router.history.createHref(to)}
         className={linkClasses}
         style={style}
-        onClick={(e) => this.onClick(e)}
+        onClick={e => this.onClick(e)}
       >
         {children}
       </a>
@@ -62,10 +64,8 @@ Link.wrappedComponent.propTypes = {
   stores: PropTypes.shape({
     router: PropTypes.instanceOf(RouterStore).isRequired,
   }).isRequired,
-  children: PropTypes.oneOfType([
-    oneOrManyChildElements,
-    PropTypes.string,
-  ]).isRequired,
+  children: PropTypes.oneOfType([oneOrManyChildElements, PropTypes.string])
+    .isRequired,
   to: PropTypes.string.isRequired,
   className: PropTypes.string,
   activeClassName: PropTypes.string,
@@ -83,3 +83,5 @@ Link.wrappedComponent.defaultProps = {
   target: '',
   style: {},
 };
+
+export default Link;
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
index 4d7113aa1..46c1390bf 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.js
@@ -5,7 +5,9 @@ import Loader from 'react-loader';
 
 import { oneOrManyChildElements } from '../../prop-types';
 
-export default @inject('stores') @observer class LoaderComponent extends Component {
+@inject('stores')
+@observer
+class LoaderComponent extends Component {
   static propTypes = {
     children: oneOrManyChildElements,
     loaded: PropTypes.bool,
@@ -28,13 +30,12 @@ export default @inject('stores') @observer class LoaderComponent extends Compone
   };
 
   render() {
-    const {
-      children,
-      loaded,
-      className,
-    } = this.props;
+    const { children, loaded, className } = this.props;
 
-    const color = this.props.color !== 'ACCENT' ? this.props.color : this.props.stores.settings.app.accentColor;
+    const color =
+      this.props.color !== 'ACCENT'
+        ? this.props.color
+        : this.props.stores.settings.app.accentColor;
 
     return (
       <Loader
@@ -51,3 +52,5 @@ export default @inject('stores') @observer class LoaderComponent extends Compone
     );
   }
 }
+
+export default LoaderComponent;
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
index a9fa0cd1b..9e6830b0c 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.js
@@ -10,7 +10,8 @@ import styles from './styles';
 
 // ReactModal.setAppElement('#root');
 
-export default @injectCSS(styles) class Modal extends Component {
+@injectCSS(styles)
+class Modal extends Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
@@ -20,14 +21,14 @@ export default @injectCSS(styles) class Modal extends Component {
     close: PropTypes.func.isRequired,
     shouldCloseOnOverlayClick: PropTypes.bool,
     showClose: PropTypes.bool,
-  }
+  };
 
   static defaultProps = {
     className: null,
     portal: 'modal-portal',
     shouldCloseOnOverlayClick: false,
     showClose: true,
-  }
+  };
 
   render() {
     const {
@@ -56,18 +57,14 @@ export default @injectCSS(styles) class Modal extends Component {
         appElement={document.getElementById('root')}
       >
         {showClose && close && (
-          <button
-            type="button"
-            className={classes.close}
-            onClick={close}
-          >
+          <button type="button" className={classes.close} onClick={close}>
             <Icon icon={mdiClose} size={1.5} />
           </button>
         )}
-        <div className={classes.content}>
-          {children}
-        </div>
+        <div className={classes.content}>{children}</div>
       </ReactModal>
     );
   }
 }
+
+export default Modal;
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js
index e77714eb7..65a777ff1 100644
--- a/src/components/ui/Radio.js
+++ b/src/components/ui/Radio.js
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 
-export default @observer class Radio extends Component {
+@observer
+class Radio extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
@@ -31,11 +32,7 @@ export default @observer class Radio extends Component {
   }
 
   render() {
-    const {
-      field,
-      className,
-      showLabel,
-    } = this.props;
+    const { field, className, showLabel } = this.props;
 
     return (
       <div
@@ -46,15 +43,12 @@ export default @observer class Radio extends Component {
         })}
       >
         {field.label && showLabel && (
-          <label
-            className="franz-form__label"
-            htmlFor={field.name}
-          >
+          <label className="franz-form__label" htmlFor={field.name}>
             {field.label}
           </label>
         )}
         <div className="franz-form__radio-wrapper">
-          {field.options.map((type) => (
+          {field.options.map(type => (
             <label
               key={type.value}
               htmlFor={`${field.id}-${type.value}`}
@@ -75,14 +69,10 @@ export default @observer class Radio extends Component {
             </label>
           ))}
         </div>
-        {field.error && (
-          <div
-            className="franz-form__error"
-          >
-            {field.error}
-          </div>
-        )}
+        {field.error && <div className="franz-form__error">{field.error}</div>}
       </div>
     );
   }
 }
+
+export default Radio;
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index 0b25734dd..2d760beab 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { debounce } from 'lodash';
 
-export default @observer class SearchInput extends Component {
+@observer
+class SearchInput extends Component {
   static propTypes = {
     value: PropTypes.string,
     placeholder: PropTypes.string,
@@ -27,7 +28,7 @@ export default @observer class SearchInput extends Component {
     onChange: () => null,
     onReset: () => null,
     autoFocus: false,
-  }
+  };
 
   input = null;
 
@@ -38,7 +39,10 @@ export default @observer class SearchInput extends Component {
       value: props.value,
     };
 
-    this.throttledOnChange = debounce(this.throttledOnChange, this.props.throttleDelay);
+    this.throttledOnChange = debounce(
+      this.throttledOnChange,
+      this.props.throttleDelay,
+    );
   }
 
   componentDidMount() {
@@ -80,24 +84,18 @@ export default @observer class SearchInput extends Component {
     const { value } = this.state;
 
     return (
-      <div
-        className={classnames([
-          className,
-          'search-input',
-        ])}
-      >
-        <label
-          htmlFor={name}
-          className="mdi mdi-magnify"
-        >
+      <div className={classnames([className, 'search-input'])}>
+        <label htmlFor={name} className="mdi mdi-magnify">
           <input
             name={name}
             id={name}
             type="text"
             placeholder={placeholder}
             value={value}
-            onChange={(e) => this.onChange(e)}
-            ref={(ref) => { this.input = ref; }}
+            onChange={e => this.onChange(e)}
+            ref={ref => {
+              this.input = ref;
+            }}
           />
         </label>
         {value.length > 0 && (
@@ -110,3 +108,5 @@ export default @observer class SearchInput extends Component {
     );
   }
 }
+
+export default SearchInput;
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index e7a5eafa8..15b4c28e7 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 
-export default @observer class Select extends Component {
+@observer
+class Select extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
@@ -43,13 +44,7 @@ export default @observer class Select extends Component {
   }
 
   render() {
-    const {
-      field,
-      className,
-      showLabel,
-      disabled,
-      multiple,
-    } = this.props;
+    const { field, className, showLabel, disabled, multiple } = this.props;
 
     let selected = field.value;
 
@@ -74,15 +69,12 @@ export default @observer class Select extends Component {
         })}
       >
         {field.label && showLabel && (
-          <label
-            className="franz-form__label"
-            htmlFor={field.name}
-          >
+          <label className="franz-form__label" htmlFor={field.name}>
             {field.label}
           </label>
         )}
         <select
-          onChange={multiple ? (e) => this.multipleChange(e) : field.onChange}
+          onChange={multiple ? e => this.multipleChange(e) : field.onChange}
           id={field.id}
           defaultValue={selected}
           className="franz-form__select"
@@ -90,7 +82,7 @@ export default @observer class Select extends Component {
           multiple={multiple}
           ref={this.element}
         >
-          {field.options.map((type) => (
+          {field.options.map(type => (
             <option
               key={type.value}
               value={type.value}
@@ -100,14 +92,10 @@ export default @observer class Select extends Component {
             </option>
           ))}
         </select>
-        {field.error && (
-          <div
-            className="franz-form__error"
-          >
-            {field.error}
-          </div>
-        )}
+        {field.error && <div className="franz-form__error">{field.error}</div>}
       </div>
     );
   }
 }
+
+export default Select;
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js
index f344449a0..6f17eae00 100644
--- a/src/components/ui/Slider.js
+++ b/src/components/ui/Slider.js
@@ -4,62 +4,64 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { Field } from 'mobx-react-form';
 
-export default @observer class Slider extends Component {
-    static propTypes = {
-      field: PropTypes.instanceOf(Field).isRequired,
-      className: PropTypes.string,
-      showLabel: PropTypes.bool,
-      disabled: PropTypes.bool,
-    };
+@observer
+class Slider extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    showLabel: PropTypes.bool,
+    disabled: PropTypes.bool,
+  };
 
-    static defaultProps = {
-      className: '',
-      showLabel: true,
-      disabled: false,
-    };
+  static defaultProps = {
+    className: '',
+    showLabel: true,
+    disabled: false,
+  };
 
-    onChange(e) {
-      const { field } = this.props;
+  onChange(e) {
+    const { field } = this.props;
 
-      field.onChange(e);
-    }
-
-    render() {
-      const {
-        field,
-        className,
-        showLabel,
-        disabled,
-      } = this.props;
+    field.onChange(e);
+  }
 
-      if (field.value === '' && field.default !== '') {
-        field.value = field.default;
-      }
+  render() {
+    const { field, className, showLabel, disabled } = this.props;
 
-      return (
-        <div
-          className={classnames([
-            'franz-form__field',
-            'franz-form__slider-wrapper',
-            className,
-          ])}
-        >
-          <div className="slider-container">
-            <input
-              className="slider"
-              type="range"
-              id={field.id}
-              name={field.name}
-              value={field.value}
-              min="1"
-              max="100"
-              onChange={(e) => (!disabled ? this.onChange(e) : null)}
-            />
-          </div>
+    if (field.value === '' && field.default !== '') {
+      field.value = field.default;
+    }
 
-          {field.error && <div className={field.error}>{field.error}</div>}
-          {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>}
+    return (
+      <div
+        className={classnames([
+          'franz-form__field',
+          'franz-form__slider-wrapper',
+          className,
+        ])}
+      >
+        <div className="slider-container">
+          <input
+            className="slider"
+            type="range"
+            id={field.id}
+            name={field.name}
+            value={field.value}
+            min="1"
+            max="100"
+            onChange={e => (!disabled ? this.onChange(e) : null)}
+          />
         </div>
-      );
-    }
+
+        {field.error && <div className={field.error}>{field.error}</div>}
+        {field.label && showLabel && (
+          <label className="franz-form__label" htmlFor={field.id}>
+            {field.label}
+          </label>
+        )}
+      </div>
+    );
+  }
 }
+
+export default Slider;
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js
index 6fc50fe5c..ff4e8c795 100644
--- a/src/components/ui/StatusBarTargetUrl.js
+++ b/src/components/ui/StatusBarTargetUrl.js
@@ -5,7 +5,8 @@ import classnames from 'classnames';
 
 import Appear from './effects/Appear';
 
-export default @observer class StatusBarTargetUrl extends Component {
+@observer
+class StatusBarTargetUrl extends Component {
   static propTypes = {
     className: PropTypes.string,
     text: PropTypes.string,
@@ -17,10 +18,7 @@ export default @observer class StatusBarTargetUrl extends Component {
   };
 
   render() {
-    const {
-      className,
-      text,
-    } = this.props;
+    const { className, text } = this.props;
 
     return (
       <Appear
@@ -29,10 +27,10 @@ export default @observer class StatusBarTargetUrl extends Component {
           [`${className}`]: true,
         })}
       >
-        <div className="status-bar-target-url__content">
-          {text}
-        </div>
+        <div className="status-bar-target-url__content">{text}</div>
       </Appear>
     );
   }
 }
+
+export default StatusBarTargetUrl;
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index 56c76f215..195398708 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -5,7 +5,6 @@ import classnames from 'classnames';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
-export default
 @observer
 class Tab extends Component {
   constructor(props) {
@@ -28,7 +27,7 @@ class Tab extends Component {
 
   render() {
     const { children: childElements } = this.props;
-    const children = childElements.filter((c) => !!c);
+    const children = childElements.filter(c => !!c);
 
     if (children.length === 1) {
       return <div>{children}</div>;
@@ -69,3 +68,5 @@ class Tab extends Component {
     );
   }
 }
+
+export default Tab;
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
index 14330e5c7..bd7bc242d 100644
--- a/src/components/ui/Toggle.js
+++ b/src/components/ui/Toggle.js
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { Field } from 'mobx-react-form';
 
-export default @observer class Toggle extends Component {
+@observer
+class Toggle extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
@@ -25,12 +26,7 @@ export default @observer class Toggle extends Component {
   }
 
   render() {
-    const {
-      field,
-      className,
-      showLabel,
-      disabled,
-    } = this.props;
+    const { field, className, showLabel, disabled } = this.props;
 
     if (field.value === '' && field.default !== '') {
       field.value = field.default;
@@ -59,12 +55,18 @@ export default @observer class Toggle extends Component {
             name={field.name}
             value={field.name}
             checked={field.value}
-            onChange={(e) => (!disabled ? this.onChange(e) : null)}
+            onChange={e => (!disabled ? this.onChange(e) : null)}
           />
         </label>
         {field.error && <div className={field.error}>{field.error}</div>}
-        {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>}
+        {field.label && showLabel && (
+          <label className="franz-form__label" htmlFor={field.id}>
+            {field.label}
+          </label>
+        )}
       </div>
     );
   }
 }
+
+export default Toggle;
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js
index 4700127d4..1fde879ac 100644
--- a/src/components/ui/ToggleRaw.js
+++ b/src/components/ui/ToggleRaw.js
@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
-export default @observer class ToggleRaw extends Component {
+@observer
+class ToggleRaw extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
     field: PropTypes.shape({
@@ -34,12 +35,7 @@ export default @observer class ToggleRaw extends Component {
   }
 
   render() {
-    const {
-      field,
-      className,
-      showLabel,
-      disabled,
-    } = this.props;
+    const { field, className, showLabel, disabled } = this.props;
 
     return (
       <div
@@ -64,12 +60,18 @@ export default @observer class ToggleRaw extends Component {
             name={field.name}
             value={field.name}
             checked={field.value}
-            onChange={(e) => (!disabled ? this.onChange(e) : null)}
+            onChange={e => (!disabled ? this.onChange(e) : null)}
           />
         </label>
         {field.error && <div className={field.error}>{field.error}</div>}
-        {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>}
+        {field.label && showLabel && (
+          <label className="franz-form__label" htmlFor={field.id}>
+            {field.label}
+          </label>
+        )}
       </div>
     );
   }
 }
+
+export default ToggleRaw;
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index c58d69374..8f4499e7b 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import FullscreenLoader from '../FullscreenLoader';
 import styles from './styles';
@@ -10,23 +10,21 @@ import styles from './styles';
 const messages = defineMessages({
   loading: {
     id: 'service.webviewLoader.loading',
-    defaultMessage: '!!!Loading {service}',
+    defaultMessage: 'Loading {service}',
   },
 });
 
-export default @injectSheet(styles) @observer class WebviewLoader extends Component {
+@injectSheet(styles)
+@observer
+class WebviewLoader extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     classes: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const { classes, name } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
     return (
       <FullscreenLoader
         className={classes.component}
@@ -35,3 +33,5 @@ export default @injectSheet(styles) @observer class WebviewLoader extends Compon
     );
   }
 }
+
+export default injectIntl(WebviewLoader);