18 files changed, 404 insertions, 106 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index f60c170a8..20dc2f764 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -23,6 +23,10 @@ const messages = defineMessages({
     id: 'infobar.buttonReloadServices',
     defaultMessage: '!!!Reload services',
   },
+  changelog: {
+    id: 'infobar.buttonChangelog',
+    defaultMessage: '!!!Changelog',
+  },
   buttonInstallUpdate: {
     id: 'infobar.buttonInstallUpdate',
     defaultMessage: '!!!Restart & install update',
@@ -135,7 +139,9 @@ export default class AppLayout extends Component {
                 sticky
               >
                 <span className="mdi mdi-information" />
-                {intl.formatMessage(messages.updateAvailable)}
+                {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">
+                  <u>{intl.formatMessage(messages.changelog)}</u>
+                </a>
               </InfoBar>
             )}
             {services}
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 6a5c0f365..cb2ecc8ce 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import { defineMessages, intlShape } from 'react-intl';
+import { observer } from 'mobx-react';
 
 import Tabbar from '../services/tabs/Tabbar';
 import { ctrlKey } from '../../environment';
@@ -11,16 +12,26 @@ const messages = defineMessages({
     id: 'sidebar.settings',
     defaultMessage: '!!!Settings',
   },
+  addNewService: {
+    id: 'sidebar.addNewService',
+    defaultMessage: '!!!Add new service',
+  },
+  mute: {
+    id: 'sidebar.mute',
+    defaultMessage: '!!!Disable audio',
+  },
+  unmute: {
+    id: 'sidebar.unmute',
+    defaultMessage: '!!!Enable audio',
+  },
 });
 
+@observer
 export default class Sidebar extends Component {
   static propTypes = {
     openSettings: PropTypes.func.isRequired,
-    isPremiumUser: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    isPremiumUser: false,
+    toggleMuteApp: PropTypes.func.isRequired,
+    isAppMuted: PropTypes.bool.isRequired,
   }
 
   static contextTypes = {
@@ -40,8 +51,9 @@ export default class Sidebar extends Component {
   }
 
   render() {
-    const { openSettings, isPremiumUser } = this.props;
+    const { openSettings, toggleMuteApp, isAppMuted } = this.props;
     const { intl } = this.context;
+
     return (
       <div className="sidebar">
         <Tabbar
@@ -50,21 +62,25 @@ export default class Sidebar extends Component {
           disableToolTip={() => this.disableToolTip()}
         />
         <button
-          onClick={openSettings}
-          className="sidebar__settings-button"
+          onClick={toggleMuteApp}
+          className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
+          data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
+        >
+          <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
+        </button>
+        <button
+          onClick={() => openSettings({ path: 'recipes' })}
+          className="sidebar__button sidebar__button--new-service"
+          data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
+        >
+          <i className="mdi mdi-plus-box" />
+        </button>
+        <button
+          onClick={() => openSettings({ path: 'app' })}
+          className="sidebar__button sidebar__button--settings"
           data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`}
         >
-          {isPremiumUser && (
-            <span className="emoji">
-              <img src="./assets/images/emoji/star.png" alt="" />
-            </span>
-          )}
-          <img
-            src="./assets/images/logo.svg"
-            className="sidebar__logo"
-            alt=""
-          />
-          {intl.formatMessage(messages.settings)}
+          <i className="mdi mdi-settings" />
         </button>
         {this.state.tooltipEnabled && (
           <ReactTooltip place="right" type="dark" effect="solid" />
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
new file mode 100644
index 000000000..b5af3743d
--- /dev/null
+++ b/src/components/services/content/ServiceDisabled.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'service.disabledHandler.headline',
+    defaultMessage: '!!!{name} is disabled',
+  },
+  action: {
+    id: 'service.disabledHandler.action',
+    defaultMessage: '!!!Enable {name}',
+  },
+});
+
+@observer
+export default class ServiceDisabled extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    enable: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  countdownInterval = null;
+  countdownIntervalTimeout = 1000;
+
+  render() {
+    const { name, enable } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="services__info-layer">
+        <h1>{intl.formatMessage(messages.headline, { name })}</h1>
+        <Button
+          label={intl.formatMessage(messages.action, { name })}
+          buttonType="inverted"
+          onClick={() => enable()}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 3ee3155be..faa356d3d 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -7,12 +7,17 @@ import classnames from 'classnames';
 
 import ServiceModel from '../../../models/Service';
 import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
+import WebviewCrashHandler from './WebviewCrashHandler';
+import ServiceDisabled from './ServiceDisabled';
 
 @observer
 export default class ServiceWebview extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
+    reload: PropTypes.func.isRequired,
+    isAppMuted: PropTypes.bool.isRequired,
+    enable: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -53,6 +58,9 @@ export default class ServiceWebview extends Component {
     const {
       service,
       setWebviewReference,
+      reload,
+      isAppMuted,
+      enable,
     } = this.props;
 
     const webviewClasses = classnames({
@@ -70,26 +78,37 @@ export default class ServiceWebview extends Component {
 
     return (
       <div className={webviewClasses}>
-        <Webview
-          ref={(element) => { this.webview = element; }}
-
-          autosize
-          src={service.url}
-          preload="./webview/plugin.js"
-          partition={`persist:service-${service.id}`}
-
-          onDidAttach={() => setWebviewReference({
-            serviceId: service.id,
-            webview: this.webview.view,
-          })}
-
-          onUpdateTargetUrl={this.updateTargetUrl}
-
-          useragent={service.userAgent}
-
-          disablewebsecurity
-          allowpopups
-        />
+        {service.hasCrashed && (
+          <WebviewCrashHandler
+            name={service.recipe.name}
+            webview={service.webview}
+            reload={reload}
+          />
+        )}
+        {!service.isEnabled ? (
+          <ServiceDisabled
+            name={service.recipe.name}
+            webview={service.webview}
+            enable={enable}
+          />
+        ) : (
+          <Webview
+            ref={(element) => { this.webview = element; }}
+            autosize
+            src={service.url}
+            preload="./webview/plugin.js"
+            partition={`persist:service-${service.id}`}
+            onDidAttach={() => setWebviewReference({
+              serviceId: service.id,
+              webview: this.webview.view,
+            })}
+            onUpdateTargetUrl={this.updateTargetUrl}
+            useragent={service.userAgent}
+            muted={isAppMuted || service.isMuted}
+            disablewebsecurity
+            allowpopups
+          />
+        )}
         {statusBar}
       </div>
     );
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 03c68b06f..b1322afc2 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -25,6 +25,9 @@ export default class Services extends Component {
     setWebviewReference: PropTypes.func.isRequired,
     handleIPCMessage: PropTypes.func.isRequired,
     openWindow: PropTypes.func.isRequired,
+    reload: PropTypes.func.isRequired,
+    isAppMuted: PropTypes.bool.isRequired,
+    update: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -42,6 +45,9 @@ export default class Services extends Component {
       handleIPCMessage,
       setWebviewReference,
       openWindow,
+      reload,
+      isAppMuted,
+      update,
     } = this.props;
     const { intl } = this.context;
 
@@ -73,6 +79,15 @@ export default class Services extends Component {
             handleIPCMessage={handleIPCMessage}
             setWebviewReference={setWebviewReference}
             openWindow={openWindow}
+            reload={() => reload({ serviceId: service.id })}
+            isAppMuted={isAppMuted}
+            enable={() => update({
+              serviceId: service.id,
+              serviceData: {
+                isEnabled: true,
+              },
+              redirect: false,
+            })}
           />
         ))}
       </div>
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
new file mode 100644
index 000000000..d3e6951f3
--- /dev/null
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'service.crashHandler.headline',
+    defaultMessage: '!!!Oh no!',
+  },
+  text: {
+    id: 'service.crashHandler.text',
+    defaultMessage: '!!!{name} has caused an error.',
+  },
+  action: {
+    id: 'service.crashHandler.action',
+    defaultMessage: '!!!Reload {name}',
+  },
+  autoReload: {
+    id: 'service.crashHandler.autoReload',
+    defaultMessage: '!!!Trying to automatically restore {name} in {seconds} seconds',
+  },
+});
+
+@observer
+export default class WebviewCrashHandler extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    reload: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    countdown: 10000,
+  }
+
+  componentDidMount() {
+    const { reload } = this.props;
+
+    this.countdownInterval = setInterval(() => {
+      this.setState({
+        countdown: this.state.countdown - this.countdownIntervalTimeout,
+      });
+
+      if (this.state.countdown <= 0) {
+        reload();
+        clearInterval(this.countdownInterval);
+      }
+    }, this.countdownIntervalTimeout);
+  }
+
+  countdownInterval = null;
+  countdownIntervalTimeout = 1000;
+
+  render() {
+    const { name, reload } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="services__info-layer">
+        <h1>{intl.formatMessage(messages.headline)}</h1>
+        <p>{intl.formatMessage(messages.text, { name })}</p>
+        <Button
+          // label={`Reload ${name}`}
+          label={intl.formatMessage(messages.action, { name })}
+          buttonType="inverted"
+          onClick={() => reload()}
+        />
+        <p className="footnote">{intl.formatMessage(messages.autoReload, {
+          name,
+          seconds: this.state.countdown / 1000,
+        })}</p>
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index e5ae36419..2daf55676 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -2,17 +2,8 @@ import React, { Component } from 'react';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import { SortableContainer } from 'react-sortable-hoc';
-import { defineMessages, intlShape } from 'react-intl';
 
 import TabItem from './TabItem';
-import { ctrlKey } from '../../../environment';
-
-const messages = defineMessages({
-  addNewService: {
-    id: 'sidebar.addNewService',
-    defaultMessage: '!!!Add new service',
-  },
-});
 
 @observer
 class TabBarSortableList extends Component {
@@ -22,27 +13,25 @@ class TabBarSortableList extends Component {
     openSettings: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
+    toggleAudio: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
+    enableService: PropTypes.func.isRequired,
   }
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       services,
       setActive,
       reload,
       toggleNotifications,
+      toggleAudio,
       deleteService,
       disableService,
+      enableService,
       openSettings,
     } = this.props;
 
-    const { intl } = this.context;
-
     return (
       <ul
         className="tabs"
@@ -56,12 +45,14 @@ class TabBarSortableList extends Component {
             shortcutIndex={index + 1}
             reload={() => reload({ serviceId: service.id })}
             toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
+            toggleAudio={() => toggleAudio({ serviceId: service.id })}
             deleteService={() => deleteService({ serviceId: service.id })}
             disableService={() => disableService({ serviceId: service.id })}
+            enableService={() => enableService({ serviceId: service.id })}
             openSettings={openSettings}
           />
         ))}
-        <li>
+        {/* <li>
           <button
             className="sidebar__add-service"
             onClick={() => openSettings({ path: 'recipes' })}
@@ -69,7 +60,7 @@ class TabBarSortableList extends Component {
           >
             <span className="mdi mdi-plus" />
           </button>
-        </li>
+        </li> */}
       </ul>
     );
   }
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 9e03d2e21..a7136c43f 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -28,10 +28,22 @@ const messages = defineMessages({
     id: 'tabs.item.enableNotification',
     defaultMessage: '!!!Enable notifications',
   },
+  disableAudio: {
+    id: 'tabs.item.disableAudio',
+    defaultMessage: '!!!Disable audio',
+  },
+  enableAudio: {
+    id: 'tabs.item.enableAudio',
+    defaultMessage: '!!!Enable audio',
+  },
   disableService: {
     id: 'tabs.item.disableService',
     defaultMessage: '!!!Disable Service',
   },
+  enableService: {
+    id: 'tabs.item.enableService',
+    defaultMessage: '!!!Enable Service',
+  },
   deleteService: {
     id: 'tabs.item.deleteService',
     defaultMessage: '!!!Delete Service',
@@ -46,9 +58,11 @@ class TabItem extends Component {
     shortcutIndex: PropTypes.number.isRequired,
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
+    toggleAudio: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
+    enableService: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -62,8 +76,10 @@ class TabItem extends Component {
       shortcutIndex,
       reload,
       toggleNotifications,
+      toggleAudio,
       deleteService,
       disableService,
+      enableService,
       openSettings,
     } = this.props;
     const { intl } = this.context;
@@ -90,8 +106,13 @@ class TabItem extends Component {
         : intl.formatMessage(messages.enableNotifications),
       click: () => toggleNotifications(),
     }, {
-      label: intl.formatMessage(messages.disableService),
-      click: () => disableService(),
+      label: service.isMuted
+        ? intl.formatMessage(messages.enableAudio)
+        : intl.formatMessage(messages.disableAudio),
+      click: () => toggleAudio(),
+    }, {
+      label: intl.formatMessage(service.isEnabled ? messages.disableService : messages.enableService),
+      click: () => (service.isEnabled ? disableService() : enableService()),
     }, {
       type: 'separator',
     }, {
@@ -106,6 +127,7 @@ class TabItem extends Component {
           'tab-item': true,
           'is-active': service.isActive,
           'has-custom-icon': service.hasCustomIcon,
+          'is-disabled': !service.isEnabled,
         })}
         onClick={clickHandler}
         onContextMenu={() => menu.popup(remote.getCurrentWindow())}
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index fdb2c0a59..9da1090b7 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -15,6 +15,7 @@ export default class TabBar extends Component {
     reorder: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
+    toggleAudio: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     updateService: PropTypes.func.isRequired,
   }
@@ -29,20 +30,30 @@ export default class TabBar extends Component {
     reorder({ oldIndex, newIndex });
   };
 
-  disableService = ({ serviceId }) => {
+  shouldPreventSorting = event => event.target.tagName !== 'LI';
+
+  toggleService = ({ serviceId, isEnabled }) => {
     const { updateService } = this.props;
 
     if (serviceId) {
       updateService({
         serviceId,
         serviceData: {
-          isEnabled: false,
+          isEnabled,
         },
         redirect: false,
       });
     }
   }
 
+  disableService({ serviceId }) {
+    this.toggleService({ serviceId, isEnabled: false });
+  }
+
+  enableService({ serviceId }) {
+    this.toggleService({ serviceId, isEnabled: true });
+  }
+
   render() {
     const {
       services,
@@ -51,6 +62,7 @@ export default class TabBar extends Component {
       disableToolTip,
       reload,
       toggleNotifications,
+      toggleAudio,
       deleteService,
     } = this.props;
 
@@ -61,10 +73,13 @@ export default class TabBar extends Component {
           setActive={setActive}
           onSortEnd={this.onSortEnd}
           onSortStart={disableToolTip}
+          shouldCancelStart={this.shouldPreventSorting}
           reload={reload}
           toggleNotifications={toggleNotifications}
+          toggleAudio={toggleAudio}
           deleteService={deleteService}
-          disableService={this.disableService}
+          disableService={args => this.disableService(args)}
+          enableService={args => this.enableService(args)}
           openSettings={openSettings}
           distance={20}
           axis="y"
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 3b21a7765..fea8d682d 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -74,7 +74,6 @@ export default class SettingsNavigation extends Component {
         <Link
           to="/auth/logout"
           className="settings-navigation__link"
-          activeClassName="is-active"
         >
           {intl.formatMessage(messages.logout)}
         </Link>
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 02ea04e35..b6ade5da4 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -9,6 +9,7 @@ import Infobox from '../../ui/Infobox';
 import RecipeItem from './RecipeItem';
 import Loader from '../../ui/Loader';
 import Appear from '../../ui/effects/Appear';
+import { FRANZ_SERVICE_REQUEST } from '../../../config';
 
 const messages = defineMessages({
   headline: {
@@ -35,6 +36,10 @@ const messages = defineMessages({
     id: 'settings.recipes.servicesSuccessfulAddedInfo',
     defaultMessage: '!!!Service successfully added',
   },
+  missingService: {
+    id: 'settings.recipes.missingService',
+    defaultMessage: '!!!Missing a service?',
+  },
 });
 
 @observer
@@ -96,33 +101,39 @@ export default class RecipesDashboard extends Component {
               </Infobox>
             </Appear>
           )}
-          {!searchNeedle && (
-            <div className="recipes__navigation">
-              <Link
-                to="/settings/recipes"
-                className="badge"
-                activeClassName="badge--primary"
-              >
-                {intl.formatMessage(messages.mostPopularRecipes)}
-              </Link>
+          {/* {!searchNeedle && ( */}
+          <div className="recipes__navigation">
+            <Link
+              to="/settings/recipes"
+              className="badge"
+              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              onClick={() => resetSearch()}
+            >
+              {intl.formatMessage(messages.mostPopularRecipes)}
+            </Link>
+            <Link
+              to="/settings/recipes/all"
+              className="badge"
+              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              onClick={() => resetSearch()}
+            >
+              {intl.formatMessage(messages.allRecipes)}
+            </Link>
+            {devRecipesCount > 0 && (
               <Link
-                to="/settings/recipes/all"
+                to="/settings/recipes/dev"
                 className="badge"
-                activeClassName="badge--primary"
+                activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+                onClick={() => resetSearch()}
               >
-                {intl.formatMessage(messages.allRecipes)}
+                {intl.formatMessage(messages.devRecipes)} ({devRecipesCount})
               </Link>
-              {devRecipesCount > 0 && (
-                <Link
-                  to="/settings/recipes/dev"
-                  className="badge"
-                  activeClassName="badge--primary"
-                >
-                  {intl.formatMessage(messages.devRecipes)} ({devRecipesCount})
-                </Link>
-              )}
-            </div>
-          )}
+            )}
+            <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request">
+              {intl.formatMessage(messages.missingService)} <i className="mdi mdi-open-in-new" />
+            </a>
+          </div>
+          {/* )} */}
           {isLoading ? (
             <Loader />
           ) : (
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 9b359a78e..36cefe87c 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -61,7 +61,11 @@ const messages = defineMessages({
   },
   indirectMessageInfo: {
     id: 'settings.service.form.indirectMessageInfo',
-    defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...', // eslint-disable-line
+    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',
   },
 });
 
@@ -110,7 +114,7 @@ export default class EditServiceForm extends Component {
         if (recipe.validateUrl && values.customUrl) {
           this.setState({ isValidatingCustomUrl: true });
           try {
-            values.customUrl = normalizeUrl(values.customUrl);
+            values.customUrl = normalizeUrl(values.customUrl, { stripWWW: false });
             isValid = await recipe.validateUrl(values.customUrl);
           } catch (err) {
             console.warn('ValidateURL', err);
@@ -231,11 +235,15 @@ export default class EditServiceForm extends Component {
               {recipe.hasIndirectMessages && (
                 <div>
                   <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
-                  <p className="settings__indirect-message-help">
+                  <p className="settings__help">
                     {intl.formatMessage(messages.indirectMessageInfo)}
                   </p>
                 </div>
               )}
+              <Toggle field={form.$('isMuted')} />
+              <p className="settings__help">
+                {intl.formatMessage(messages.isMutedInfo)}
+              </p>
               <Toggle field={form.$('isEnabled')} />
             </div>
             {recipe.message && (
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index 20d8581d0..9743315b0 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -16,6 +16,10 @@ const messages = defineMessages({
     id: 'settings.services.tooltip.notificationsDisabled',
     defaultMessage: '!!!Notifications are disabled',
   },
+  tooltipIsMuted: {
+    id: 'settings.services.tooltip.isMuted',
+    defaultMessage: '!!!All sounds are muted',
+  },
 });
 
 @observer
@@ -66,6 +70,17 @@ export default class ServiceItem extends Component {
           className="service-table__column-info"
           onClick={goToServiceForm}
         >
+          {service.isMuted && (
+            <span
+              className="mdi mdi-bell-off"
+              data-tip={intl.formatMessage(messages.tooltipIsMuted)}
+            />
+          )}
+        </td>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+        >
           {!service.isEnabled && (
             <span
               className="mdi mdi-power"
@@ -85,13 +100,6 @@ export default class ServiceItem extends Component {
           )}
           <ReactTooltip place="top" type="dark" effect="solid" />
         </td>
-        {/* <td className="service-table__column-action">
-          <input
-            type="checkbox"
-            onChange={toggleAction}
-            checked={service.isEnabled}
-          />
-        </td> */}
       </tr>
     );
   }
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 5675fecf4..4ce9b7ab2 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -9,6 +9,8 @@ import Button from '../../ui/Button';
 import Toggle from '../../ui/Toggle';
 import Select from '../../ui/Select';
 
+import { FRANZ_TRANSLATION } from '../../../config';
+
 const messages = defineMessages({
   headline: {
     id: 'settings.app.headline',
@@ -26,6 +28,18 @@ const messages = defineMessages({
     id: 'settings.app.headlineUpdates',
     defaultMessage: '!!!Updates',
   },
+  headlineAppearance: {
+    id: 'settings.app.headlineAppearance',
+    defaultMessage: '!!!Appearance',
+  },
+  headlineAdvanced: {
+    id: 'settings.app.headlineAdvanced',
+    defaultMessage: '!!!Advanced',
+  },
+  translationHelp: {
+    id: 'settings.app.translationHelp',
+    defaultMessage: '!!!Help us to translate Franz into your language.',
+  },
   buttonSearchForUpdate: {
     id: 'settings.app.buttonSearchForUpdate',
     defaultMessage: '!!!Check for updates',
@@ -50,6 +64,10 @@ const messages = defineMessages({
     id: 'settings.app.currentVersion',
     defaultMessage: '!!!Current version:',
   },
+  restartRequired: {
+    id: 'settings.app.restartRequired',
+    defaultMessage: '!!!Changes require restart',
+  },
 });
 
 @observer
@@ -112,16 +130,38 @@ export default class EditSettingsForm extends Component {
             onChange={e => this.submit(e)}
             id="form"
           >
-            <h2>{intl.formatMessage(messages.headlineGeneral)}</h2>
+            {/* General */}
+            <h2 id="general">{intl.formatMessage(messages.headlineGeneral)}</h2>
             <Toggle field={form.$('autoLaunchOnStart')} />
             <Toggle field={form.$('runInBackground')} />
             <Toggle field={form.$('enableSystemTray')} />
             {process.platform === 'win32' && (
               <Toggle field={form.$('minimizeToSystemTray')} />
             )}
-            <h2>{intl.formatMessage(messages.headlineLanguage)}</h2>
+
+            {/* Appearance */}
+            <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
+            <Toggle field={form.$('showDisabledServices')} />
+
+            {/* Language */}
+            <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
             <Select field={form.$('locale')} showLabel={false} />
-            <h2>{intl.formatMessage(messages.headlineUpdates)}</h2>
+            <a
+              href={FRANZ_TRANSLATION}
+              target="_blank"
+              className="link"
+            >
+              {intl.formatMessage(messages.translationHelp)} <i className="mdi mdi-open-in-new" />
+            </a>
+
+            {/* Advanced */}
+            <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
+            <Toggle field={form.$('enableSpellchecking')} />
+            <p className="settings__help">{intl.formatMessage(messages.restartRequired)}</p>
+            {/* <Select field={form.$('spellcheckingLanguage')} /> */}
+
+            {/* Updates */}
+            <h2 id="updates">{intl.formatMessage(messages.headlineUpdates)}</h2>
             {updateIsReadyToInstall ? (
               <Button
                 label={intl.formatMessage(messages.buttonInstallUpdate)}
diff --git a/src/components/ui/AppLoader.js b/src/components/ui/AppLoader.js
index 64a212969..ac3cdcb05 100644
--- a/src/components/ui/AppLoader.js
+++ b/src/components/ui/AppLoader.js
@@ -8,7 +8,7 @@ export default function () {
     <div className="app-loader">
       <Appear>
         <h1 className="app-loader__title">Franz</h1>
-        <Loader />
+        <Loader color="#FFF" />
       </Appear>
     </div>
   );
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index aea2bd888..84a5f1446 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -61,10 +61,13 @@ export default class InfoBar extends Component {
           [`${className}`]: true,
         })}
       >
-        <div onClick={onClick} className="info-bar__content">
+        <div className="info-bar__content">
           {children}
           {ctaLabel && (
-            <button className="info-bar__cta">
+            <button
+              className="info-bar__cta"
+              onClick={onClick}
+            >
               <Loader
                 loaded={!ctaLoading}
                 lines={10}
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
index e4fbd96a2..f73296bb6 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.js
@@ -9,12 +9,14 @@ export default class LoaderComponent extends Component {
     children: oneOrManyChildElements,
     loaded: PropTypes.bool,
     className: PropTypes.string,
+    color: PropTypes.string,
   };
 
   static defaultProps = {
     children: null,
     loaded: false,
     className: '',
+    color: '#373a3c',
   };
 
   render() {
@@ -22,6 +24,7 @@ export default class LoaderComponent extends Component {
       children,
       loaded,
       className,
+      color,
     } = this.props;
 
     return (
@@ -30,7 +33,7 @@ export default class LoaderComponent extends Component {
         // lines={10}
         width={4}
         scale={0.6}
-        color="#373a3c"
+        color={color}
         component="span"
         className={className}
       >
diff --git a/src/components/ui/Subscription.js b/src/components/ui/Subscription.js
index fe0925a26..8bff72095 100644
--- a/src/components/ui/Subscription.js
+++ b/src/components/ui/Subscription.js
@@ -93,6 +93,10 @@ const messages = defineMessages({
     id: 'subscription.mining.moreInformation',
     defaultMessage: '!!!Get more information about this plan',
   },
+  euTaxInfo: {
+    id: 'subscription.euTaxInfo',
+    defaultMessage: '!!!EU residents: local sales tax may apply',
+  },
 });
 
 @observer
@@ -144,14 +148,18 @@ export default class SubscriptionForm extends Component {
             label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'year')
               ? `${this.props.plan.year.price} / ${intl.formatMessage(messages.typeYearly)}`
               : 'yearly'}`,
-          }, {
-            value: 'mining',
-            label: intl.formatMessage(messages.typeMining),
           }],
         },
       },
     };
 
+    if (this.props.plan.miner) {
+      form.fields.paymentTier.options.push({
+        value: 'mining',
+        label: intl.formatMessage(messages.typeMining),
+      });
+    }
+
     if (this.props.showSkipOption) {
       form.fields.paymentTier.options.unshift({
         value: 'skip',
@@ -259,6 +267,11 @@ export default class SubscriptionForm extends Component {
             onClick={() => handlePayment(this.form.$('paymentTier').value)}
           />
         )}
+        {this.form.$('paymentTier').value !== 'skip' && this.form.$('paymentTier').value !== 'mining' && (
+          <p className="legal">
+            {intl.formatMessage(messages.euTaxInfo)}
+          </p>
+        )}
       </Loader>
     );
   }