Upgrade various dependencies to latest part 2 (#1557)

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

4 files changed, 38 insertions, 24 deletions

diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index 72ba7b2e3..5b3b754fa 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -1,38 +1,55 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
 
 import ErrorBoundary from '../util/ErrorBoundary';
 import { oneOrManyChildElements } from '../../prop-types';
 import Appear from '../ui/effects/Appear';
 
-export default @observer class SettingsLayout extends Component {
+const messages = defineMessages({
+  closeSettings: {
+    id: 'settings.app.closeSettings',
+    defaultMessage: '!!!Close settings',
+  },
+});
+
+export default
+@observer
+class SettingsLayout extends Component {
   static propTypes = {
     navigation: PropTypes.element.isRequired,
     children: oneOrManyChildElements.isRequired,
     closeSettings: PropTypes.func.isRequired,
   };
 
-  componentWillMount() {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
   }
 
   componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown.bind(this), false);
+    document.removeEventListener(
+      'keydown',
+      this.handleKeyDown.bind(this),
+      false,
+    );
   }
 
   handleKeyDown(e) {
-    if (e.keyCode === 27) { // escape key
+    if (e.keyCode === 27) {
+      // escape key
       this.props.closeSettings();
     }
   }
 
   render() {
-    const {
-      navigation,
-      children,
-      closeSettings,
-    } = this.props;
+    const { navigation, children, closeSettings } = this.props;
+
+    const { intl } = this.context;
 
     return (
       <Appear transitionName="fadeIn-fast">
@@ -42,6 +59,7 @@ export default @observer class SettingsLayout extends Component {
               type="button"
               className="settings-wrapper__action"
               onClick={closeSettings}
+              aria-label={intl.formatMessage(messages.closeSettings)}
             />
             <div className="settings franz-form">
               {navigation}
@@ -50,6 +68,7 @@ export default @observer class SettingsLayout extends Component {
                 type="button"
                 className="settings__close mdi mdi-close"
                 onClick={closeSettings}
+                aria-label={intl.formatMessage(messages.closeSettings)}
               />
             </div>
           </ErrorBoundary>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 1bbc1f1d4..a8501670b 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -311,14 +311,14 @@ export default @observer class EditServiceForm extends Component {
                 {recipe.hasCustomUrl && (
                   <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
                     {user.isPremium || recipe.author.find(a => a.email === user.email) ? (
-                      <Fragment>
+                      <>
                         <Input field={form.$('customUrl')} />
                         {form.error === 'url-validation-error' && (
                           <p className="franz-form__error">
                             {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })}
                           </p>
                         )}
-                      </Fragment>
+                      </>
                     ) : (
                       <div className="center premium-info">
                         <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p>
@@ -360,12 +360,12 @@ export default @observer class EditServiceForm extends Component {
                   <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
                   <Toggle field={form.$('isBadgeEnabled')} />
                   {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
-                    <Fragment>
+                    <>
                       <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
                       <p className="settings__help">
                         {intl.formatMessage(messages.indirectMessageInfo)}
                       </p>
-                    </Fragment>
+                    </>
                   )}
                 </div>
 
@@ -389,8 +389,7 @@ export default @observer class EditServiceForm extends Component {
                         <Slider field={form.$('darkReaderContrast')} />
                         <Slider field={form.$('darkReaderSepia')} />
                       </>
-                    )
-                  }
+                    )}
                 </div>
               </div>
               <div className="service-icon">
@@ -425,7 +424,7 @@ export default @observer class EditServiceForm extends Component {
                   </h3>
                   <Toggle field={form.$('proxy.isEnabled')} />
                   {form.$('proxy.isEnabled').value && (
-                    <Fragment>
+                    <>
                       <div className="grid">
                         <div className="grid__row">
                           <Input field={form.$('proxy.host')} className="proxyHost" />
@@ -449,7 +448,7 @@ export default @observer class EditServiceForm extends Component {
                         <span className="mdi mdi-information" />
                         {intl.formatMessage(messages.proxyInfo)}
                       </p>
-                    </Fragment>
+                    </>
                   )}
                 </div>
               </PremiumFeatureContainer>
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 4ba7dc720..98a119bfa 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -567,7 +567,7 @@ export default @observer class EditSettingsForm extends Component {
                   condition={!isSpellcheckerIncludedInCurrentPlan}
                   gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
                 >
-                  <Fragment>
+                  <>
                     <Toggle
                       field={form.$('enableSpellchecking')}
                     />
@@ -577,7 +577,7 @@ export default @observer class EditSettingsForm extends Component {
                     {isMac && form.$('enableSpellchecking').value && (
                       <p>{intl.formatMessage(messages.spellCheckerLanguageInfo)}</p>
                     )}
-                  </Fragment>
+                  </>
                 </PremiumFeatureContainer>
                 <a
                   href={FRANZ_TRANSLATION}
@@ -679,18 +679,15 @@ export default @observer class EditSettingsForm extends Component {
                 <br />
                 {intl.formatMessage(messages.updateStatusUpToDate)}
               </>
-              )
-              }
+              )}
               <p className="settings__message">
                 <span className="mdi mdi-github-face" />
                 <span>
 
-
                   Ferdi is based on
                   {' '}
                   <a href={`${GITHUB_FRANZ_URL}/franz`} target="_blank">Franz</a>
 
-
                   , a project published
                   under the
                   {' '}
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index f26f4cc0c..602d6e490 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -98,7 +98,6 @@ const styles = {
   },
 };
 
-
 export default @injectSheet(styles) @observer class TeamDashboard extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,