9 files changed, 98 insertions, 25 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/Sidebar.js b/src/components/layout/Sidebar.js
index cb2ecc8ce..915ebeace 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -17,12 +17,12 @@ 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',
   },
 });
 
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..8403d9462 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) {
+      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 9da1090b7..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 }) => {
@@ -64,6 +66,8 @@ export default class TabBar extends Component {
       toggleNotifications,
       toggleAudio,
       deleteService,
+      showMessageBadgeWhenMutedSetting,
+      showMessageBadgesEvenWhenMuted,
     } = this.props;
 
     return (
@@ -85,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/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 4ce9b7ab2..878e46d6d 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -142,6 +142,7 @@ export default class EditSettingsForm extends Component {
             {/* Appearance */}
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
             <Toggle field={form.$('showDisabledServices')} />
+            <Toggle field={form.$('showMessageBadgeWhenMuted')} />
 
             {/* Language */}
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
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}