5 files changed, 142 insertions, 12 deletions

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 3dba793b2..f1e70ce59 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -21,6 +21,8 @@ import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
 import { serviceLimitStore } from '../../../features/serviceLimit';
 
+import { isMac } from '../../../environment';
+
 const messages = defineMessages({
   saveService: {
     id: 'settings.service.form.saveButton',
@@ -401,14 +403,16 @@ export default @observer class EditServiceForm extends Component {
               </div>
             </div>
 
-            <PremiumFeatureContainer
-              condition={!isSpellcheckerIncludedInCurrentPlan}
-              gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
-            >
-              <div className="settings__settings-group">
-                <Select field={form.$('spellcheckerLanguage')} />
-              </div>
-            </PremiumFeatureContainer>
+            {!isMac && (
+              <PremiumFeatureContainer
+                condition={!isSpellcheckerIncludedInCurrentPlan}
+                gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
+              >
+                <div className="settings__settings-group">
+                  <Select field={form.$('spellcheckerLanguage')} multiple />
+                </div>
+              </PremiumFeatureContainer>
+            )}
 
             {isProxyFeatureEnabled && (
               <PremiumFeatureContainer
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index 78038e86a..826dbb176 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -7,6 +7,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
 import Loader from '../../ui/Loader';
+import FAB from '../../ui/FAB';
 import ServiceItem from './ServiceItem';
 import Appear from '../../ui/effects/Appear';
 import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
@@ -175,6 +176,12 @@ export default @observer class ServicesDashboard extends Component {
               </tbody>
             </table>
           )}
+
+          <FAB>
+            <Link to="/settings/recipes">
+              +
+            </Link>
+          </FAB>
         </div>
       </div>
     );
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 50358c36f..ba7cb7317 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -91,6 +91,10 @@ const messages = defineMessages({
     id: 'settings.app.translationHelp',
     defaultMessage: '!!!Help us to translate Ferdi into your language.',
   },
+  spellCheckerLanguageInfo: {
+    id: 'settings.app.spellCheckerLanguageInfo',
+    defaultMessage: '!!!Ferdi uses your Mac\'s build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac\'s System Preferences.',
+  },
   subheadlineCache: {
     id: 'settings.app.subheadlineCache',
     defaultMessage: '!!!Cache',
@@ -518,8 +522,11 @@ export default @observer class EditSettingsForm extends Component {
                     <Toggle
                       field={form.$('enableSpellchecking')}
                     />
-                    {form.$('enableSpellchecking').value && (
-                    <Select field={form.$('spellcheckerLanguage')} />
+                    {form.$('enableSpellchecking').value && !isMac && (
+                      <Select field={form.$('spellcheckerLanguage')} multiple />
+                    )}
+                    {form.$('enableSpellchecking').value && isMac && (
+                      <p>{intl.formatMessage(messages.spellCheckerLanguageInfo)}</p>
                     )}
                   </Fragment>
                 </PremiumFeatureContainer>
diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js
new file mode 100644
index 000000000..9359a3c6c
--- /dev/null
+++ b/src/components/ui/FAB.js
@@ -0,0 +1,72 @@
+/**
+ * Floating Action Button (FAB)
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, inject } from 'mobx-react';
+import classnames from 'classnames';
+
+export default @inject('stores') @observer class Button extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    type: PropTypes.string,
+    htmlForm: PropTypes.string,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
+  };
+
+  static defaultProps = {
+    className: null,
+    disabled: false,
+    onClick: () => { },
+    type: 'button',
+    htmlForm: '',
+  };
+
+  element = null;
+
+  render() {
+    const {
+      className,
+      disabled,
+      onClick,
+      type,
+      children,
+      htmlForm,
+    } = this.props;
+
+    const buttonProps = {
+      className: classnames({
+        ferdi__fab: true,
+        [`${className}`]: className,
+      }),
+      type,
+    };
+
+    if (disabled) {
+      buttonProps.disabled = true;
+    }
+
+    if (onClick) {
+      buttonProps.onClick = onClick;
+    }
+
+    if (htmlForm) {
+      buttonProps.form = htmlForm;
+    }
+
+    return (
+      // disabling rule as button has type defined in `buttonProps`
+      <button {...buttonProps} type="button">
+        {children}
+      </button>
+    );
+  }
+}
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index da52243ca..b4511433c 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -10,22 +10,60 @@ export default @observer class Select extends Component {
     className: PropTypes.string,
     showLabel: PropTypes.bool,
     disabled: PropTypes.bool,
+    multiple: PropTypes.bool,
   };
 
   static defaultProps = {
     className: null,
     showLabel: true,
     disabled: false,
+    multiple: false,
   };
 
+  constructor(props) {
+    super(props);
+
+    this.element = React.createRef();
+  }
+
+  multipleChange() {
+    const element = this.element.current;
+
+    const result = [];
+    const options = element && element.options;
+
+    for (const option of options) {
+      if (option.selected) {
+        result.push(option.value || option.text);
+      }
+    }
+
+    const { field } = this.props;
+    field.value = result;
+  }
+
   render() {
     const {
       field,
       className,
       showLabel,
       disabled,
+      multiple,
     } = this.props;
 
+    let selected = field.value;
+
+    if (multiple) {
+      if (typeof field.value === 'string' && field.value.substr(0, 1) === '[') {
+        // Value is JSON encoded
+        selected = JSON.parse(field.value);
+      } else if (typeof field.value === 'object') {
+        selected = field.value;
+      } else {
+        selected = [field.value];
+      }
+    }
+
     return (
       <div
         className={classnames({
@@ -44,11 +82,13 @@ export default @observer class Select extends Component {
           </label>
         )}
         <select
-          onChange={field.onChange}
+          onChange={multiple ? e => this.multipleChange(e) : field.onChange}
           id={field.id}
-          defaultValue={field.value}
+          defaultValue={selected}
           className="franz-form__select"
           disabled={field.disabled || disabled}
+          multiple={multiple}
+          ref={this.element}
         >
           {field.options.map(type => (
             <option