Merge branch 'nightly' into release

4 files changed, 157 insertions, 146 deletions

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index c41cdd56a..22089ec45 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -2,13 +2,14 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import normalizeUrl from 'normalize-url';
 
 import Form from '../../../lib/Form';
 import Recipe from '../../../models/Recipe';
 import Service from '../../../models/Service';
-import Tabs, { TabItem } from '../../ui/Tabs';
+import Tabs from '../../ui/Tabs/Tabs';
+import { TabItem } from '../../ui/Tabs/TabItem';
 import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
 import Slider from '../../ui/Slider';
@@ -22,111 +23,117 @@ import globalMessages from '../../../i18n/globalMessages';
 const messages = defineMessages({
   saveService: {
     id: 'settings.service.form.saveButton',
-    defaultMessage: '!!!Save service',
+    defaultMessage: 'Save service',
   },
   deleteService: {
     id: 'settings.service.form.deleteButton',
-    defaultMessage: '!!!Delete Service',
+    defaultMessage: 'Delete service',
   },
   openDarkmodeCss: {
     id: 'settings.service.form.openDarkmodeCss',
-    defaultMessage: '!!!Open darkmode.css',
+    defaultMessage: 'Open darkmode.css',
   },
   openUserCss: {
     id: 'settings.service.form.openUserCss',
-    defaultMessage: '!!!Open user.css',
+    defaultMessage: 'Open user.css',
   },
   openUserJs: {
     id: 'settings.service.form.openUserJs',
-    defaultMessage: '!!!Open user.js',
+    defaultMessage: 'Open user.js',
   },
   recipeFileInfo: {
     id: 'settings.service.form.recipeFileInfo',
-    defaultMessage: '!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.',
+    defaultMessage:
+      'Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.',
   },
   availableServices: {
     id: 'settings.service.form.availableServices',
-    defaultMessage: '!!!Available services',
+    defaultMessage: 'Available services',
   },
   yourServices: {
     id: 'settings.service.form.yourServices',
-    defaultMessage: '!!!Your services',
+    defaultMessage: 'Your services',
   },
   addServiceHeadline: {
     id: 'settings.service.form.addServiceHeadline',
-    defaultMessage: '!!!Add {name}',
+    defaultMessage: 'Add {name}',
   },
   editServiceHeadline: {
     id: 'settings.service.form.editServiceHeadline',
-    defaultMessage: '!!!Edit {name}',
+    defaultMessage: 'Edit {name}',
   },
   tabHosted: {
     id: 'settings.service.form.tabHosted',
-    defaultMessage: '!!!Hosted',
+    defaultMessage: 'Hosted',
   },
   tabOnPremise: {
     id: 'settings.service.form.tabOnPremise',
-    defaultMessage: '!!!Self hosted ⭐️',
+    defaultMessage: 'Self hosted ⭐️',
   },
   useHostedService: {
     id: 'settings.service.form.useHostedService',
-    defaultMessage: '!!!Use the hosted {name} service.',
+    defaultMessage: 'Use the hosted {name} service.',
   },
   customUrlValidationError: {
     id: 'settings.service.form.customUrlValidationError',
-    defaultMessage: '!!!Could not validate custom {name} server.',
+    defaultMessage: 'Could not validate custom {name} server.',
   },
   indirectMessageInfo: {
     id: 'settings.service.form.indirectMessageInfo',
-    defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...',
+    defaultMessage:
+      'You will be notified about all new messages in a channel, not just @username, @channel, @here, ...',
   },
   isMutedInfo: {
     id: 'settings.service.form.isMutedInfo',
-    defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
+    defaultMessage:
+      'When disabled, all notification sounds and audio playback are muted',
   },
   isHibernationEnabledInfo: {
     id: 'settings.service.form.isHibernatedEnabledInfo',
-    defaultMessage: '!!!When enabled, a service will be shut down after a period of time to save system resources.',
+    defaultMessage:
+      'When enabled, a service will be shut down after a period of time to save system resources.',
   },
   headlineNotifications: {
     id: 'settings.service.form.headlineNotifications',
-    defaultMessage: '!!!Notifications',
+    defaultMessage: 'Notifications',
   },
   headlineBadges: {
     id: 'settings.service.form.headlineBadges',
-    defaultMessage: '!!!Unread message badges',
+    defaultMessage: 'Unread message badges',
   },
   headlineGeneral: {
     id: 'settings.service.form.headlineGeneral',
-    defaultMessage: '!!!General',
+    defaultMessage: 'General',
   },
   headlineDarkReaderSettings: {
     id: 'settings.service.form.headlineDarkReaderSettings',
-    defaultMessage: '!!!Dark Reader Settings',
+    defaultMessage: 'Dark Reader Settings',
   },
   iconDelete: {
     id: 'settings.service.form.iconDelete',
-    defaultMessage: '!!!Delete',
+    defaultMessage: 'Delete',
   },
   iconUpload: {
     id: 'settings.service.form.iconUpload',
-    defaultMessage: '!!!Drop your image, or click here',
+    defaultMessage: 'Drop your image, or click here',
   },
   headlineProxy: {
     id: 'settings.service.form.proxy.headline',
-    defaultMessage: '!!!HTTP/HTTPS Proxy Settings',
+    defaultMessage: 'HTTP/HTTPS Proxy Settings',
   },
   proxyRestartInfo: {
     id: 'settings.service.form.proxy.restartInfo',
-    defaultMessage: '!!!Please restart Ferdi after changing proxy Settings.',
+    defaultMessage: 'Please restart Ferdi after changing proxy Settings.',
   },
   proxyInfo: {
     id: 'settings.service.form.proxy.info',
-    defaultMessage: '!!!Proxy settings will not be synchronized with the Ferdi servers.',
+    defaultMessage:
+      'Proxy settings will not be synchronized with the Ferdi servers.',
   },
 });
 
-export default @observer class EditServiceForm extends Component {
+@observer
+class EditServiceForm extends Component {
   static propTypes = {
     recipe: PropTypes.instanceOf(Recipe).isRequired,
     service(props, propName) {
@@ -151,20 +158,16 @@ export default @observer class EditServiceForm extends Component {
     service: {},
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     isValidatingCustomUrl: false,
-  }
+  };
 
   submit(e) {
     const { recipe } = this.props;
 
     e.preventDefault();
     this.props.form.submit({
-      onSuccess: async (form) => {
+      onSuccess: async form => {
         const values = form.values();
         let isValid = true;
 
@@ -176,10 +179,13 @@ export default @observer class EditServiceForm extends Component {
         if (recipe.validateUrl && values.customUrl) {
           this.setState({ isValidatingCustomUrl: true });
           try {
-            values.customUrl = normalizeUrl(values.customUrl, { stripWWW: false, removeTrailingSlash: false });
+            values.customUrl = normalizeUrl(values.customUrl, {
+              stripWWW: false,
+              removeTrailingSlash: false,
+            });
             isValid = await recipe.validateUrl(values.customUrl);
-          } catch (err) {
-            console.warn('ValidateURL', err);
+          } catch (error) {
+            console.warn('ValidateURL', error);
             isValid = false;
           }
         }
@@ -208,7 +214,7 @@ export default @observer class EditServiceForm extends Component {
       openRecipeFile,
       isProxyFeatureEnabled,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     const { isValidatingCustomUrl } = this.state;
 
@@ -236,7 +242,8 @@ export default @observer class EditServiceForm extends Component {
       activeTabIndex = 2;
     }
 
-    const requiresUserInput = !recipe.hasHostedOption && (recipe.hasTeamId || recipe.hasCustomUrl);
+    const requiresUserInput =
+      !recipe.hasHostedOption && (recipe.hasTeamId || recipe.hasCustomUrl);
 
     return (
       <div className="settings__main">
@@ -254,29 +261,27 @@ export default @observer class EditServiceForm extends Component {
           </span>
           <span className="separator" />
           <span className="settings__header-item">
-            {action === 'add' ? (
-              intl.formatMessage(messages.addServiceHeadline, {
-                name: recipe.name,
-              })
-            ) : (
-              intl.formatMessage(messages.editServiceHeadline, {
-                name: service.name !== '' ? service.name : recipe.name,
-              })
-            )}
+            {action === 'add'
+              ? intl.formatMessage(messages.addServiceHeadline, {
+                  name: recipe.name,
+                })
+              : intl.formatMessage(messages.editServiceHeadline, {
+                  name: service.name !== '' ? service.name : recipe.name,
+                })}
           </span>
         </div>
         <div className="settings__body">
-          <form onSubmit={(e) => this.submit(e)} id="form">
+          <form onSubmit={e => this.submit(e)} id="form">
             <div className="service-name">
               <Input field={form.$('name')} focus />
             </div>
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
-              <Tabs
-                active={activeTabIndex}
-              >
+              <Tabs active={activeTabIndex}>
                 {recipe.hasHostedOption && (
                   <TabItem title={recipe.name}>
-                    {intl.formatMessage(messages.useHostedService, { name: recipe.name })}
+                    {intl.formatMessage(messages.useHostedService, {
+                      name: recipe.name,
+                    })}
                   </TabItem>
                 )}
                 {recipe.hasTeamId && (
@@ -293,7 +298,9 @@ export default @observer class EditServiceForm extends Component {
                     <Input field={form.$('customUrl')} />
                     {form.error === 'url-validation-error' && (
                       <p className="franz-form__error">
-                        {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })}
+                        {intl.formatMessage(messages.customUrlValidationError, {
+                          name: recipe.name,
+                        })}
                       </p>
                     )}
                   </TabItem>
@@ -326,13 +333,19 @@ export default @observer class EditServiceForm extends Component {
                 <div className="settings__settings-group">
                   <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
                   <Toggle field={form.$('isBadgeEnabled')} />
-                  {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
-                    <>
-                      <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
-                      <p className="settings__help indented__help">
-                        {intl.formatMessage(messages.indirectMessageInfo)}
-                      </p>
-                    </>
+                  {recipe.hasIndirectMessages &&
+                    form.$('isBadgeEnabled').value && (
+                      <>
+                        <Toggle
+                          field={form.$('isIndirectMessageBadgeEnabled')}
+                        />
+                        <p className="settings__help indented__help">
+                          {intl.formatMessage(messages.indirectMessageInfo)}
+                        </p>
+                      </>
+                    )}
+                  {recipe.allowFavoritesDelineationInUnreadCount && (
+                    <Toggle field={form.$('onlyShowFavoritesInUnreadCount')} />
                   )}
                 </div>
 
@@ -344,15 +357,18 @@ export default @observer class EditServiceForm extends Component {
                     {intl.formatMessage(messages.isHibernationEnabledInfo)}
                   </p>
                   <Toggle field={form.$('isDarkModeEnabled')} />
-                  {form.$('isDarkModeEnabled').value
-                    && (
-                      <>
-                        <h3>{intl.formatMessage(messages.headlineDarkReaderSettings)}</h3>
-                        <Slider field={form.$('darkReaderBrightness')} />
-                        <Slider field={form.$('darkReaderContrast')} />
-                        <Slider field={form.$('darkReaderSepia')} />
-                      </>
-                    )}
+                  {form.$('isDarkModeEnabled').value && (
+                    <>
+                      <h3>
+                        {intl.formatMessage(
+                          messages.headlineDarkReaderSettings,
+                        )}
+                      </h3>
+                      <Slider field={form.$('darkReaderBrightness')} />
+                      <Slider field={form.$('darkReaderContrast')} />
+                      <Slider field={form.$('darkReaderSepia')} />
+                    </>
+                  )}
                 </div>
               </div>
               <div className="service-icon">
@@ -381,7 +397,10 @@ export default @observer class EditServiceForm extends Component {
                   <>
                     <div className="grid">
                       <div className="grid__row">
-                        <Input field={form.$('proxy.host')} className="proxyHost" />
+                        <Input
+                          field={form.$('proxy.host')}
+                          className="proxyHost"
+                        />
                         <Input field={form.$('proxy.port')} />
                       </div>
                     </div>
@@ -409,7 +428,9 @@ export default @observer class EditServiceForm extends Component {
 
             <div className="user-agent">
               <Input field={form.$('userAgentPref')} />
-              <p className="settings__help">{intl.formatMessage(globalMessages.userAgentHelp)}</p>
+              <p className="settings__help">
+                {intl.formatMessage(globalMessages.userAgentHelp)}
+              </p>
             </div>
           </form>
 
@@ -464,7 +485,9 @@ export default @observer class EditServiceForm extends Component {
               type="submit"
               label={intl.formatMessage(messages.saveService)}
               htmlForm="form"
-              disabled={action !== 'edit' && (form.isPristine && requiresUserInput)}
+              disabled={
+                action !== 'edit' && form.isPristine && requiresUserInput
+              }
             />
           )}
         </div>
@@ -472,3 +495,5 @@ export default @observer class EditServiceForm extends Component {
     );
   }
 }
+
+export default injectIntl(EditServiceForm);
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index 3cfc080d6..d16d76db2 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Infobox from '../../ui/Infobox';
 import Button from '../../ui/Button';
@@ -9,29 +9,26 @@ import Button from '../../ui/Button';
 const messages = defineMessages({
   headline: {
     id: 'settings.service.error.headline',
-    defaultMessage: '!!!Error',
+    defaultMessage: 'Error',
   },
   goBack: {
     id: 'settings.service.error.goBack',
-    defaultMessage: '!!!Back to services',
+    defaultMessage: 'Back to services',
   },
   availableServices: {
     id: 'settings.service.form.availableServices',
-    defaultMessage: '!!!Available services',
+    defaultMessage: 'Available services',
   },
   errorMessage: {
     id: 'settings.service.error.message',
-    defaultMessage: '!!!Could not load service recipe.',
+    defaultMessage: 'Could not load service recipe.',
   },
 });
 
-export default @observer class ServiceError extends Component {
-  static contextTypes = {
-    intl: intlShape,
-  };
-
+@observer
+class ServiceError extends Component {
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="settings__main">
@@ -47,10 +44,7 @@ export default @observer class ServiceError extends Component {
           </span>
         </div>
         <div className="settings__body">
-          <Infobox
-            type="danger"
-            icon="alert"
-          >
+          <Infobox type="danger" icon="alert">
             {intl.formatMessage(messages.errorMessage)}
           </Infobox>
         </div>
@@ -65,3 +59,5 @@ export default @observer class ServiceError extends Component {
     );
   }
 }
+
+export default injectIntl(ServiceError);
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index ebc618a00..4916e4ecc 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
@@ -10,35 +10,32 @@ import ServiceModel from '../../../models/Service';
 const messages = defineMessages({
   tooltipIsDisabled: {
     id: 'settings.services.tooltip.isDisabled',
-    defaultMessage: '!!!Service is disabled',
+    defaultMessage: 'Service is disabled',
   },
   tooltipNotificationsDisabled: {
     id: 'settings.services.tooltip.notificationsDisabled',
-    defaultMessage: '!!!Notifications are disabled',
+    defaultMessage: 'Notifications are disabled',
   },
   tooltipIsMuted: {
     id: 'settings.services.tooltip.isMuted',
-    defaultMessage: '!!!All sounds are muted',
+    defaultMessage: 'All sounds are muted',
   },
 });
 
-export default @observer class ServiceItem extends Component {
+@observer
+class ServiceItem extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     goToServiceForm: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       service,
       // toggleAction,
       goToServiceForm,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <tr
@@ -47,10 +44,7 @@ export default @observer class ServiceItem extends Component {
           'service-table__row--disabled': !service.isEnabled,
         })}
       >
-        <td
-          className="service-table__column-icon"
-          onClick={goToServiceForm}
-        >
+        <td className="service-table__column-icon" onClick={goToServiceForm}>
           <img
             src={service.icon}
             className={classnames({
@@ -60,16 +54,10 @@ export default @observer class ServiceItem extends Component {
             alt=""
           />
         </td>
-        <td
-          className="service-table__column-name"
-          onClick={goToServiceForm}
-        >
+        <td className="service-table__column-name" onClick={goToServiceForm}>
           {service.name !== '' ? service.name : service.recipe.name}
         </td>
-        <td
-          className="service-table__column-info"
-          onClick={goToServiceForm}
-        >
+        <td className="service-table__column-info" onClick={goToServiceForm}>
           {service.isMuted && (
             <span
               className="mdi mdi-bell-off"
@@ -77,10 +65,7 @@ export default @observer class ServiceItem extends Component {
             />
           )}
         </td>
-        <td
-          className="service-table__column-info"
-          onClick={goToServiceForm}
-        >
+        <td className="service-table__column-info" onClick={goToServiceForm}>
           {!service.isEnabled && (
             <span
               className="mdi mdi-power"
@@ -88,14 +73,13 @@ export default @observer class ServiceItem extends Component {
             />
           )}
         </td>
-        <td
-          className="service-table__column-info"
-          onClick={goToServiceForm}
-        >
+        <td className="service-table__column-info" onClick={goToServiceForm}>
           {!service.isNotificationEnabled && (
             <span
               className="mdi mdi-message-bulleted-off"
-              data-tip={intl.formatMessage(messages.tooltipNotificationsDisabled)}
+              data-tip={intl.formatMessage(
+                messages.tooltipNotificationsDisabled,
+              )}
             />
           )}
           <ReactTooltip place="top" type="dark" effect="solid" />
@@ -104,3 +88,5 @@ export default @observer class ServiceItem extends Component {
     );
   }
 }
+
+export default injectIntl(ServiceItem);
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index 11d3eaa79..bb52db97f 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
@@ -14,43 +14,45 @@ import Appear from '../../ui/effects/Appear';
 const messages = defineMessages({
   headline: {
     id: 'settings.services.headline',
-    defaultMessage: '!!!Your services',
+    defaultMessage: 'Your services',
   },
   searchService: {
     id: 'settings.searchService',
-    defaultMessage: '!!!Search service',
+    defaultMessage: 'Search service',
   },
   noServicesAdded: {
     id: 'settings.services.noServicesAdded',
-    defaultMessage: '!!!Start by adding a service.',
+    defaultMessage: 'Start by adding a service.',
   },
   noServiceFound: {
-    id: 'settings.recipes.nothingFound',
-    defaultMessage: '!!!Sorry, but no service matched your search term. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.',
+    id: 'settings.services.nothingFound',
+    defaultMessage:
+      'Sorry, but no service matched your search term - but you can still probably add it using the "Custom Website" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.',
   },
   discoverServices: {
     id: 'settings.services.discoverServices',
-    defaultMessage: '!!!Discover services',
+    defaultMessage: 'Discover services',
   },
   servicesRequestFailed: {
     id: 'settings.services.servicesRequestFailed',
-    defaultMessage: '!!!Could not load your services',
+    defaultMessage: 'Could not load your services',
   },
   tryReloadServices: {
     id: 'settings.account.tryReloadServices',
-    defaultMessage: '!!!Try again',
+    defaultMessage: 'Try again',
   },
   updatedInfo: {
     id: 'settings.services.updatedInfo',
-    defaultMessage: '!!!Your changes have been saved',
+    defaultMessage: 'Your changes have been saved',
   },
   deletedInfo: {
     id: 'settings.services.deletedInfo',
-    defaultMessage: '!!!Service has been deleted',
+    defaultMessage: 'Service has been deleted',
   },
 });
 
-export default @observer class ServicesDashboard extends Component {
+@observer
+class ServicesDashboard extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
     isLoading: PropTypes.bool.isRequired,
@@ -68,10 +70,6 @@ export default @observer class ServicesDashboard extends Component {
     searchNeedle: '',
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       services,
@@ -85,7 +83,7 @@ export default @observer class ServicesDashboard extends Component {
       status,
       searchNeedle,
     } = this.props;
-    const { intl } = this.context;
+    const { intl } = this.props;
 
     return (
       <div className="settings__main">
@@ -93,10 +91,10 @@ export default @observer class ServicesDashboard extends Component {
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body">
-          {(services.length !== 0 || searchNeedle) && !isLoading && (
+          {(services.length > 0 || searchNeedle) && !isLoading && (
             <SearchInput
               placeholder={intl.formatMessage(messages.searchService)}
-              onChange={(needle) => filterServices({ needle })}
+              onChange={needle => filterServices({ needle })}
               onReset={() => resetFilter()}
               autoFocus
             />
@@ -145,7 +143,9 @@ export default @observer class ServicesDashboard extends Component {
                 </span>
                 {intl.formatMessage(messages.noServicesAdded)}
               </p>
-              <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link>
+              <Link to="/settings/recipes" className="button">
+                {intl.formatMessage(messages.discoverServices)}
+              </Link>
             </div>
           )}
           {!isLoading && services.length === 0 && searchNeedle && (
@@ -163,12 +163,16 @@ export default @observer class ServicesDashboard extends Component {
           ) : (
             <table className="service-table">
               <tbody>
-                {services.map((service) => (
+                {services.map(service => (
                   <ServiceItem
                     key={service.id}
                     service={service}
-                    toggleAction={() => toggleService({ serviceId: service.id })}
-                    goToServiceForm={() => goTo(`/settings/services/edit/${service.id}`)}
+                    toggleAction={() =>
+                      toggleService({ serviceId: service.id })
+                    }
+                    goToServiceForm={() =>
+                      goTo(`/settings/services/edit/${service.id}`)
+                    }
                   />
                 ))}
               </tbody>
@@ -176,12 +180,12 @@ export default @observer class ServicesDashboard extends Component {
           )}
 
           <FAB>
-            <Link to="/settings/recipes">
-              +
-            </Link>
+            <Link to="/settings/recipes">+</Link>
           </FAB>
         </div>
       </div>
     );
   }
 }
+
+export default injectIntl(ServicesDashboard);