21 files changed, 284 insertions, 99 deletions

diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 06493a0fd..078244434 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -24,7 +24,7 @@ const messages = defineMessages({
   },
   skipButtonLabel: {
     id: 'import.skip.label',
-    defaultMessage: '!!!I want add services manually',
+    defaultMessage: '!!!I want to add services manually',
   },
 });
 
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 06b10ecfe..eb9fbb847 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -55,12 +55,16 @@ export default class Login extends Component {
         </div>
         <div className="welcome__featured-services">
           {recipes.map(recipe => (
-            <img
+            <div
               key={recipe.id}
-              src={recipe.icons.svg}
               className="welcome__featured-service"
-              alt=""
-            />
+            >
+              <img
+                key={recipe.id}
+                src={recipe.icons.svg}
+                alt=""
+              />
+            </div>
           ))}
         </div>
       </div>
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 ea34e8702..915ebeace 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';
@@ -16,15 +17,16 @@ const messages = defineMessages({
     defaultMessage: '!!!Add new service',
   },
   mute: {
-    id: 'sidebar.mute',
-    defaultMessage: '!!!Disable audio',
+    id: 'sidebar.muteApp',
+    defaultMessage: '!!!Disable notifications & audio',
   },
   unmute: {
-    id: 'sidebar.unmute',
-    defaultMessage: '!!!Enable audio',
+    id: 'sidebar.unmuteApp',
+    defaultMessage: '!!!Enable notifications & audio',
   },
 });
 
+@observer
 export default class Sidebar extends Component {
   static propTypes = {
     openSettings: PropTypes.func.isRequired,
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index 732b6c003..b5af3743d 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -35,7 +35,7 @@ export default class ServiceDisabled extends Component {
     const { intl } = this.context;
 
     return (
-      <div className="services__crash-handler">
+      <div className="services__info-layer">
         <h1>{intl.formatMessage(messages.headline, { name })}</h1>
         <Button
           label={intl.formatMessage(messages.action, { name })}
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index abbf21dee..c146abf4e 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -65,6 +65,7 @@ export default class ServiceWebview extends Component {
 
     const webviewClasses = classnames({
       services__webview: true,
+      'services__webview-wrapper': true,
       'is-active': service.isActive,
       'services__webview--force-repaint': this.state.forceRepaint,
     });
@@ -85,29 +86,29 @@ export default class ServiceWebview extends Component {
             reload={reload}
           />
         )}
-        {!service.isEnabled && (
+        {!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}
+            allowpopups
+          />
         )}
-        <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/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index d48152c18..d3e6951f3 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -62,7 +62,7 @@ export default class WebviewCrashHandler extends Component {
     const { intl } = this.context;
 
     return (
-      <div className="services__crash-handler">
+      <div className="services__info-layer">
         <h1>{intl.formatMessage(messages.headline)}</h1>
         <p>{intl.formatMessage(messages.text, { name })}</p>
         <Button
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 2daf55676..489027d57 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -17,6 +17,8 @@ class TabBarSortableList extends Component {
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
+    showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   }
 
   render() {
@@ -30,6 +32,8 @@ class TabBarSortableList extends Component {
       disableService,
       enableService,
       openSettings,
+      showMessageBadgeWhenMutedSetting,
+      showMessageBadgesEvenWhenMuted,
     } = this.props;
 
     return (
@@ -50,6 +54,8 @@ class TabBarSortableList extends Component {
             disableService={() => disableService({ serviceId: service.id })}
             enableService={() => enableService({ serviceId: service.id })}
             openSettings={openSettings}
+            showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
+            showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
           />
         ))}
         {/* <li>
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index a7136c43f..7aed8fda7 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -63,6 +63,8 @@ class TabItem extends Component {
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
+    showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -81,6 +83,8 @@ class TabItem extends Component {
       disableService,
       enableService,
       openSettings,
+      showMessageBadgeWhenMutedSetting,
+      showMessageBadgesEvenWhenMuted,
     } = this.props;
     const { intl } = this.context;
 
@@ -121,6 +125,26 @@ class TabItem extends Component {
     }];
     const menu = Menu.buildFromTemplate(menuTemplate);
 
+    let notificationBadge = null;
+    if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && service.isBadgeEnabled) {
+      notificationBadge = (
+        <span>
+          {service.unreadDirectMessageCount > 0 && (
+            <span className="tab-item__message-count">
+              {service.unreadDirectMessageCount}
+            </span>
+          )}
+          {service.unreadIndirectMessageCount > 0
+            && service.unreadDirectMessageCount === 0
+            && service.isIndirectMessageBadgeEnabled && (
+              <span className="tab-item__message-count is-indirect">
+                •
+              </span>
+            )}
+        </span>
+      );
+    }
+
     return (
       <li
         className={classnames({
@@ -138,18 +162,7 @@ class TabItem extends Component {
           className="tab-item__icon"
           alt=""
         />
-        {service.unreadDirectMessageCount > 0 && (
-          <span className="tab-item__message-count">
-            {service.unreadDirectMessageCount}
-          </span>
-        )}
-        {service.unreadIndirectMessageCount > 0
-          && service.unreadDirectMessageCount === 0
-          && service.isIndirectMessageBadgeEnabled && (
-            <span className="tab-item__message-count is-indirect">
-            •
-            </span>
-          )}
+        {notificationBadge}
       </li>
     );
   }
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index fd4325107..ceb88c51c 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -18,6 +18,8 @@ export default class TabBar extends Component {
     toggleAudio: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     updateService: PropTypes.func.isRequired,
+    showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   }
 
   onSortEnd = ({ oldIndex, newIndex }) => {
@@ -30,6 +32,8 @@ export default class TabBar extends Component {
     reorder({ oldIndex, newIndex });
   };
 
+  shouldPreventSorting = event => event.target.tagName !== 'LI';
+
   toggleService = ({ serviceId, isEnabled }) => {
     const { updateService } = this.props;
 
@@ -62,6 +66,8 @@ export default class TabBar extends Component {
       toggleNotifications,
       toggleAudio,
       deleteService,
+      showMessageBadgeWhenMutedSetting,
+      showMessageBadgesEvenWhenMuted,
     } = this.props;
 
     return (
@@ -71,6 +77,7 @@ export default class TabBar extends Component {
           setActive={setActive}
           onSortEnd={this.onSortEnd}
           onSortStart={disableToolTip}
+          shouldCancelStart={this.shouldPreventSorting}
           reload={reload}
           toggleNotifications={toggleNotifications}
           toggleAudio={toggleAudio}
@@ -82,6 +89,8 @@ export default class TabBar extends Component {
           axis="y"
           lockAxis="y"
           helperClass="is-reordering"
+          showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
+          showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
         />
       </div>
     );
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 75dbdef49..89fa07800 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -28,6 +28,10 @@ const messages = defineMessages({
     id: 'settings.account.headlineInvoices',
     defaultMessage: '!!Invoices',
   },
+  headlineDangerZone: {
+    id: 'settings.account.headlineDangerZone',
+    defaultMessage: '!!Danger Zone',
+  },
   manageSubscriptionButtonLabel: {
     id: 'settings.account.manageSubscription.label',
     defaultMessage: '!!!Manage your subscription',
@@ -72,6 +76,18 @@ const messages = defineMessages({
     id: 'settings.account.mining.cancel',
     defaultMessage: '!!!Cancel mining',
   },
+  deleteAccount: {
+    id: 'settings.account.deleteAccount',
+    defaultMessage: '!!!Delete account',
+  },
+  deleteInfo: {
+    id: 'settings.account.deleteInfo',
+    defaultMessage: '!!!If you don\'t need your Franz account any longer, you can delete your account and all related data here.',
+  },
+  deleteEmailSent: {
+    id: 'settings.account.deleteEmailSent',
+    defaultMessage: '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
+  },
 });
 
 @observer
@@ -90,6 +106,9 @@ export default class AccountDashboard extends Component {
     openExternalUrl: PropTypes.func.isRequired,
     onCloseSubscriptionWindow: PropTypes.func.isRequired,
     stopMiner: PropTypes.func.isRequired,
+    deleteAccount: PropTypes.func.isRequired,
+    isLoadingDeleteAccount: PropTypes.bool.isRequired,
+    isDeleteAccountSuccessful: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -111,6 +130,9 @@ export default class AccountDashboard extends Component {
       retryUserInfoRequest,
       onCloseSubscriptionWindow,
       stopMiner,
+      deleteAccount,
+      isLoadingDeleteAccount,
+      isDeleteAccountSuccessful,
     } = this.props;
     const { intl } = this.context;
 
@@ -201,7 +223,7 @@ export default class AccountDashboard extends Component {
                             />
                           </div>
                         </div>
-                        <div className="account__box account__box--last">
+                        <div className="account__box">
                           <h2>{intl.formatMessage(messages.headlineInvoices)}</h2>
                           <table className="invoices">
                             <tbody>
@@ -230,7 +252,7 @@ export default class AccountDashboard extends Component {
 
               {user.isMiner && (
                 <div className="account franz-form">
-                  <div className="account__box">
+                  <div className="account__box account__box--last">
                     <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
                     <div className="account__subscription">
                       <div>
@@ -267,7 +289,7 @@ export default class AccountDashboard extends Component {
                   <Loader />
                 ) : (
                   <div className="account franz-form">
-                    <div className="account__box account__box--last">
+                    <div className="account__box">
                       <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2>
                       <SubscriptionForm
                         onCloseWindow={onCloseSubscriptionWindow}
@@ -276,8 +298,29 @@ export default class AccountDashboard extends Component {
                   </div>
                 )
               )}
+
+              <div className="account franz-form">
+                <div className="account__box">
+                  <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2>
+                  {!isDeleteAccountSuccessful && (
+                    <div className="account__subscription">
+                      <p>{intl.formatMessage(messages.deleteInfo)}</p>
+                      <Button
+                        label={intl.formatMessage(messages.deleteAccount)}
+                        buttonType="danger"
+                        onClick={() => deleteAccount()}
+                        loaded={!isLoadingDeleteAccount}
+                      />
+                    </div>
+                  )}
+                  {isDeleteAccountSuccessful && (
+                    <p>{intl.formatMessage(messages.deleteEmailSent)}</p>
+                  )}
+                </div>
+              </div>
             </div>
           )}
+
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
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 bcbda7773..ee69d53aa 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -48,6 +48,10 @@ const messages = defineMessages({
     id: 'settings.service.form.tabOnPremise',
     defaultMessage: '!!!Self hosted ⭐️',
   },
+  useHostedService: {
+    id: 'settings.service.form.useHostedService',
+    defaultMessage: '!!!Use the hosted {name} service.',
+  },
   customUrlValidationError: {
     id: 'settings.service.form.customUrlValidationError',
     defaultMessage: '!!!Could not validate custom {name} server.',
@@ -68,6 +72,18 @@ const messages = defineMessages({
     id: 'settings.service.form.isMutedInfo',
     defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
   },
+  headlineNotifications: {
+    id: 'settings.service.form.headlineNotifications',
+    defaultMessage: '!!!Notifications',
+  },
+  headlineBadges: {
+    id: 'settings.service.form.headlineBadges',
+    defaultMessage: '!!!Unread message dadges',
+  },
+  headlineGeneral: {
+    id: 'settings.service.form.headlineGeneral',
+    defaultMessage: '!!!General',
+  },
 });
 
 @observer
@@ -109,13 +125,12 @@ export default class EditServiceForm extends Component {
     this.props.form.submit({
       onSuccess: async (form) => {
         const values = form.values();
-
         let isValid = true;
 
         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);
@@ -167,6 +182,13 @@ export default class EditServiceForm extends Component {
       />
     );
 
+    let activeTabIndex = 0;
+    if (recipe.hasHostedOption && service.team) {
+      activeTabIndex = 1;
+    } else if (recipe.hasHostedOption && service.customUrl) {
+      activeTabIndex = 2;
+    }
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -207,11 +229,20 @@ export default class EditServiceForm extends Component {
             </div>
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
               <Tabs
-                active={service.customUrl ? 1 : 0}
+                active={activeTabIndex}
               >
+                {recipe.hasHostedOption && (
+                  <TabItem title={recipe.name}>
+                    {intl.formatMessage(messages.useHostedService, { name: recipe.name })}
+                  </TabItem>
+                )}
                 {recipe.hasTeamId && (
                   <TabItem title={intl.formatMessage(messages.tabHosted)}>
-                    <Input field={form.$('team')} suffix={recipe.urlInputSuffix} />
+                    <Input
+                      field={form.$('team')}
+                      prefix={recipe.urlInputPrefix}
+                      suffix={recipe.urlInputSuffix}
+                    />
                   </TabItem>
                 )}
                 {recipe.hasCustomUrl && (
@@ -240,20 +271,32 @@ export default class EditServiceForm extends Component {
               </Tabs>
             )}
             <div className="settings__options">
-              <Toggle field={form.$('isNotificationEnabled')} />
-              {recipe.hasIndirectMessages && (
-                <div>
-                  <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
-                  <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 className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineNotifications)}</h3>
+                <Toggle field={form.$('isNotificationEnabled')} />
+                <Toggle field={form.$('isMuted')} />
+                <p className="settings__help">
+                  {intl.formatMessage(messages.isMutedInfo)}
+                </p>
+              </div>
+
+              <div className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
+                <Toggle field={form.$('isBadgeEnabled')} />
+                {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
+                  <div>
+                    <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
+                    <p className="settings__help">
+                      {intl.formatMessage(messages.indirectMessageInfo)}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              <div className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
+                <Toggle field={form.$('isEnabled')} />
+              </div>
             </div>
             {recipe.message && (
               <p className="settings__message">
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index ba07b1a5b..ff398aa33 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',
@@ -30,6 +32,14 @@ const messages = defineMessages({
     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',
@@ -116,18 +126,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.headlineAppearance)}</h2>
+
+            {/* Appearance */}
+            <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
             <Toggle field={form.$('showDisabledServices')} />
-            <h2>{intl.formatMessage(messages.headlineLanguage)}</h2>
+            <Toggle field={form.$('showMessageBadgeWhenMuted')} />
+
+            {/* 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')} />
+            {/* <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/Button.js b/src/components/ui/Button.js
index 07e94192f..554206cb7 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -68,7 +68,7 @@ export default class Button extends Component {
           loaded={loaded}
           lines={10}
           scale={0.4}
-          color={buttonType === '' ? '#FFF' : '#373a3c'}
+          color={buttonType !== 'secondary' ? '#FFF' : '#373a3c'}
           component="span"
         />
         {label}
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>
     );
   }
diff --git a/src/components/ui/SubscriptionPopup.js b/src/components/ui/SubscriptionPopup.js
index 5aae2c47a..528d02907 100644
--- a/src/components/ui/SubscriptionPopup.js
+++ b/src/components/ui/SubscriptionPopup.js
@@ -58,7 +58,6 @@ export default class SubscriptionPopup extends Component {
 
             autosize
             src={encodeURI(url)}
-            disablewebsecurity
             onDidNavigate={completeCheck}
             // onNewWindow={(event, url, frameName, options) =>
             //   openWindow({ event, url, frameName, options })}